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.

2025-06-27 22:49:11 +02:00
parent 81f637b317
commit 9f6fa46227
23 changed files with 2721 additions and 3058 deletions
--- a/src/components/ImageGallery.jsx
+++ b/src/components/ImageGallery.jsx
@@ -0,0 +1,58 @@
+import React, { useState } from 'react';
+import Lightbox from './Lightbox.jsx'; // Assuming Lightbox component will be created
+
+export default function ImageGallery({ images }) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [currentImageIndex, setCurrentImageIndex] = useState(0);
+
+  const openLightbox = (index) => {
+    setCurrentImageIndex(index);
+    setIsOpen(true);
+  };
+
+  const closeLightbox = () => {
+    setIsOpen(false);
+  };
+
+  const goToNext = () => {
+    setCurrentImageIndex((prevIndex) => (prevIndex + 1) % images.length);
+  };
+
+  const goToPrev = () => {
+    setCurrentImageIndex((prevIndex) => (prevIndex - 1 + images.length) % images.length);
+  };
+
+  return (
+    <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+      {images.map((image, index) => (
+        <div
+          key={index}
+          className="relative overflow-hidden rounded-lg shadow-md cursor-pointer group"
+          onClick={() => openLightbox(index)}
+        >
+          <img
+            src={image}
+            alt={`Gallery image ${index + 1}`}
+            className="w-full h-48 object-cover transform transition-transform duration-300 group-hover:scale-110"
+          />
+          <div className="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+            <svg className="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
+            </svg>
+          </div>
+        </div>
+      ))}
+
+      {isOpen && (
+        <Lightbox
+          images={images}
+          currentIndex={currentImageIndex}
+          onClose={closeLightbox}
+          onNext={goToNext}
+          onPrev={goToPrev}
+        />
+      )}
+    </div>
+  );
+}