Changes

src/components/GallerySection.tsx

@@ -0,0 +1,49 @@
+import { motion } from "framer-motion";
+import { GALLERY_IMAGES } from "@/data/event-data";
+import { ImageIcon } from "lucide-react";
+
+const GallerySection = () => (
+  <section id="gallery" className="section-padding bg-card">
+    <div className="container mx-auto">
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        viewport={{ once: true }}
+        className="text-center mb-12"
+      >
+        <h2 className="font-display text-4xl md:text-5xl font-bold text-gradient mb-4">
+          Galería
+        </h2>
+      </motion.div>
+
+      <div className="grid grid-cols-2 md:grid-cols-3 gap-4 max-w-5xl mx-auto">
+        {GALLERY_IMAGES.map((img, i) => (
+          <motion.div
+            key={i}
+            initial={{ opacity: 0, scale: 0.9 }}
+            whileInView={{ opacity: 1, scale: 1 }}
+            viewport={{ once: true }}
+            transition={{ delay: i * 0.08 }}
+            className="aspect-square rounded-xl overflow-hidden bg-muted flex items-center justify-center"
+          >
+            {img.src ? (
+              <img
+                src={img.src}
+                alt={img.alt}
+                className="w-full h-full object-cover hover:scale-105 transition-transform duration-500"
+                loading="lazy"
+              />
+            ) : (
+              <div className="text-center text-muted-foreground/40">
+                <ImageIcon className="w-10 h-10 mx-auto mb-2" />
+                <p className="text-xs">{img.alt}</p>
+              </div>
+            )}
+          </motion.div>
+        ))}
+      </div>
+    </div>
+  </section>
+);
+
+export default GallerySection;