first commit

2026-06-03 04:27:40 +03:00
parent dcfaf2723c
commit 48277fe8d2
22 changed files with 1610 additions and 117 deletions
@@ -0,0 +1,38 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+const photos = [
+  { id: 1, src: "https://images.unsplash.com/photo-1566417713940-fe7c737a9ef2?q=80&w=2029&auto=format&fit=crop", style: "md:col-span-2 md:row-span-2" },
+  { id: 2, src: "https://images.unsplash.com/photo-1542556398-4432b571ebf1?q=80&w=2070&auto=format&fit=crop", style: "md:col-span-1 md:row-span-1" },
+  { id: 3, src: "https://images.unsplash.com/photo-1470229722913-7c092bb21443?q=80&w=1968&auto=format&fit=crop", style: "md:col-span-1 md:row-span-1" },
+  { id: 4, src: "https://images.unsplash.com/photo-1525268771113-32d9e9021a97?q=80&w=2080&auto=format&fit=crop", style: "md:col-span-1 md:row-span-2" },
+  { id: 5, src: "https://images.unsplash.com/photo-1514361892635-6b07e31e75f9?q=80&w=2070&auto=format&fit=crop", style: "md:col-span-1 md:row-span-1" },
+  { id: 6, src: "https://images.unsplash.com/photo-1485872299829-c673f5194813?q=80&w=2054&auto=format&fit=crop", style: "md:col-span-1 md:row-span-1" }
+];
+
+export default function Gallery() {
+  return (
+    <section id="gallery" className="py-2 bg-primary">
+      <div className="grid grid-cols-1 md:grid-cols-4 gap-2 md:auto-rows-[300px]">
+        {photos.map((photo, index) => (
+          <motion.div 
+            key={photo.id}
+            initial={{ opacity: 0, scale: 0.95 }}
+            whileInView={{ opacity: 1, scale: 1 }}
+            viewport={{ once: true, margin: "-50px" }}
+            transition={{ duration: 0.6, delay: index * 0.1 }}
+            className={`relative overflow-hidden group ${photo.style}`}
+          >
+            <div className="absolute inset-0 bg-primary/20 group-hover:bg-transparent transition-colors duration-500 z-10" />
+            <img 
+              src={photo.src} 
+              alt={`Gallery Image ${photo.id}`} 
+              className="w-full h-full object-cover grayscale-[40%] group-hover:grayscale-0 group-hover:scale-105 transition-all duration-700"
+            />
+          </motion.div>
+        ))}
+      </div>
+    </section>
+  );
+}