Refactor project structure: update Astro configuration, integrate Tailwind CSS, enhance ContactForm with validation, and improve layout for various pages. Add new Donate and Orphanage pages, and implement responsive design adjustments across components.

src/pages/members.astro

@@ -4,19 +4,38 @@ const membersData = await Astro.glob('../../content/members/members-sample.md');
 const intro = membersData[0]?.frontmatter.intro || '';
 const members = membersData[0]?.frontmatter.members || [];
 ---
+
 <BaseLayout>
-  <h1 class="text-3xl font-headline font-bold text-primary mt-12 text-center">Meet Our Members</h1>
-  <section class="max-w-3xl mx-auto mt-8 mb-12 bg-base-100 rounded-xl shadow p-6">
+  <!-- Page Header -->
+  <section class="relative py-16 px-4 text-center text-white overflow-hidden bg-gradient-to-br from-nigerian-green-500 via-kente-gold-500 to-ankara-red-500" data-animate-on-scroll="fade-in">
+    <div class="absolute inset-0 opacity-10" style="background-image: url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%23ffffff" fill-opacity="0.1"%3E%3Cpath d="M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');"></div>
+    <div class="relative z-10 max-w-4xl mx-auto">
+      <div class="flex items-center justify-center gap-2 mb-4 text-sm">
+        <a href="/" class="text-white/80 hover:text-white transition-colors">🏠 Home</a>
+        <span class="text-white/60">•</span>
+        <span>Members</span>
+      </div>
+      <h1 class="font-headline text-5xl md:text-6xl font-extrabold mb-4 leading-tight bg-clip-text text-transparent bg-gradient-to-r from-white to-gray-200 animate-text-shine">
+        Meet Our Members
+      </h1>
+      <p class="text-lg md:text-xl opacity-90 max-w-2xl mx-auto">
+        Discover the dedicated individuals who form the heart of the Omoluabi Association.
+      </p>
+    </div>
+  </section>
+
+  <section class="max-w-3xl mx-auto mt-8 mb-12 bg-base-100 rounded-xl shadow p-6" data-animate-on-scroll="fade-in">
     <h2 class="text-xl font-bold mb-4 text-accent">Membership Benefits/Welfare Packages</h2>
     <div class="text-gray-700 whitespace-pre-line">{intro}</div>
   </section>
-  <section class="max-w-6xl mx-auto grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8 px-4 mb-20">
+
+  <section class="max-w-6xl mx-auto grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8 px-4 mb-20" data-animate-on-scroll="fade-in">
     {members.map(member => (
-      <div class="card bg-base-100 shadow-lg rounded-xl flex flex-col items-center p-4">
+      <div class="card bg-base-100 shadow-lg rounded-xl flex flex-col items-center p-4 transform transition-transform duration-300 hover:scale-105 hover:shadow-xl">
         <img src={member.image} alt={member.name} class="w-40 h-40 object-cover rounded-lg mb-4" />
         <h3 class="font-bold text-lg text-primary mb-1">{member.name}</h3>
         <p class="text-sm text-gray-600">{member.role}</p>
       </div>
     ))}
   </section>
-</BaseLayout> 
+</BaseLayout>