54 lines
2.0 KiB
TypeScript
54 lines
2.0 KiB
TypeScript
'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>
|
|
)
|
|
}
|