first commit

2026-08-05 19:40:55 +03:00
commit 3952b61edf
55 changed files with 10964 additions and 0 deletions
@@ -0,0 +1,53 @@
+'use client'
+
+import { useRef } from 'react'
+import { useTranslations } from 'next-intl'
+import { motion, useInView } from 'framer-motion'
+import Image from 'next/image'
+import { MOCK_GALLERY } from '@/lib/mock'
+
+export default function GallerySection() {
+  const ref = useRef<HTMLDivElement>(null)
+  const isInView = useInView(ref, { once: true, margin: '-80px' })
+
+  return (
+    <section id="galeri" className="bg-vesta-dark py-24 md:py-32">
+      <div ref={ref} className="container mx-auto px-6">
+        <motion.p
+          initial={{ opacity: 0, y: 15 }}
+          animate={isInView ? { opacity: 1, y: 0 } : {}}
+          transition={{ duration: 0.5 }}
+          className="text-vesta-earth text-xs tracking-[0.3em] uppercase mb-12 text-center"
+        >
+          Galeri
+        </motion.p>
+
+        {/* Masonry-like grid */}
+        <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
+          {MOCK_GALLERY.map((item, i) => (
+            <motion.div
+              key={item.id}
+              initial={{ opacity: 0, scale: 0.97 }}
+              animate={isInView ? { opacity: 1, scale: 1 } : {}}
+              transition={{ duration: 0.5, delay: 0.07 * i }}
+              className={`relative overflow-hidden rounded-xl group ${
+                i === 0 ? 'col-span-2 md:col-span-2 row-span-2 aspect-[4/3]' : 'aspect-square'
+              }`}
+            >
+              <Image
+                src={item.imageUrl}
+                alt={item.titleTr}
+                fill
+                className="object-cover transition-transform duration-700 group-hover:scale-108"
+              />
+              <div className="absolute inset-0 bg-black/0 group-hover:bg-black/30 transition-colors duration-300" />
+              <div className="absolute bottom-3 left-3 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+                <p className="text-white text-sm font-medium">{item.titleTr}</p>
+              </div>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}