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/components/HomeGallery.astro

@@ -2,13 +2,24 @@
 const gallery = await Astro.glob('../../content/gallery/gallery-sample.md');
 const images = gallery[0]?.frontmatter.images || [];
 ---
-<section class="max-w-6xl mx-auto my-20">
-  <h2 class="text-2xl font-headline font-bold mb-6 text-primary text-center">Gallery</h2>
+<section class="max-w-6xl mx-auto my-20 px-4">
+  <h2 class="text-3xl font-headline font-bold mb-6 text-primary text-center">Our Photo Gallery</h2>
+  <p class="text-center text-lg text-gray-600 mb-10">
+    A glimpse into our vibrant community and cultural celebrations.
+  </p>
   <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
-    {images.map((img, idx) => (
+    {images.slice(0, 4).map((img, idx) => (
       <div class="rounded-lg overflow-hidden shadow-md bg-base-100" key={idx}>
         <img src={img} alt={`Gallery photo ${idx + 1}`} class="w-full h-40 object-cover hover:scale-105 transition-transform duration-200 cursor-pointer" />
       </div>
     ))}
   </div>
-</section> 
+  <div class="text-center mt-10">
+    <a href="/gallery" class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-nigerian-green-500 to-kente-gold-500 text-white rounded-lg shadow-lg hover:shadow-xl hover:from-nigerian-green-600 hover:to-kente-gold-600 transition-all duration-200 font-medium">
+      View Full Gallery
+      <svg class="w-5 h-5 ml-2" fill="currentColor" viewBox="0 0 20 20">
+        <path fill-rule="evenodd" d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z" clip-rule="evenodd"></path>
+      </svg>
+    </a>
+  </div>
+</section>