60 lines
2.4 KiB
TypeScript
60 lines
2.4 KiB
TypeScript
'use client'
|
|
|
|
import { useTranslations } from 'next-intl'
|
|
import { motion } from 'framer-motion'
|
|
import Image from 'next/image'
|
|
|
|
const galleryImages = [
|
|
"https://images.unsplash.com/photo-1544025162-d76694265947?q=80&w=800&auto=format&fit=crop",
|
|
"https://images.unsplash.com/photo-1555939594-58d7cb561ad1?q=80&w=800&auto=format&fit=crop",
|
|
"https://images.unsplash.com/photo-1600891964092-4316c288032e?q=80&w=800&auto=format&fit=crop",
|
|
"https://images.unsplash.com/photo-1594041680534-e8c8cdebd659?q=80&w=800&auto=format&fit=crop",
|
|
"https://images.unsplash.com/photo-1603048297172-c92544798d5e?q=80&w=800&auto=format&fit=crop",
|
|
"https://images.unsplash.com/photo-1514933651103-005eec06c04b?q=80&w=800&auto=format&fit=crop"
|
|
]
|
|
|
|
export default function GalleryPage() {
|
|
const nav = useTranslations('nav')
|
|
|
|
return (
|
|
<div className="container mx-auto px-4 py-24 min-h-screen flex flex-col items-center">
|
|
<motion.div
|
|
className="text-center mb-16"
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5 }}
|
|
>
|
|
<h1 className="text-4xl md:text-5xl font-bold text-primary mb-4 uppercase tracking-wider">
|
|
{nav('gallery')}
|
|
</h1>
|
|
<p className="text-lg text-muted-foreground">
|
|
Ateşin ve lezzetin sanata dönüştüğü anlar.
|
|
</p>
|
|
</motion.div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-7xl mx-auto">
|
|
{galleryImages.map((src, idx) => (
|
|
<motion.div
|
|
key={idx}
|
|
initial={{ opacity: 0, scale: 0.9 }}
|
|
whileInView={{ opacity: 1, scale: 1 }}
|
|
viewport={{ once: true, margin: "-50px" }}
|
|
transition={{ duration: 0.5, delay: idx * 0.1 }}
|
|
className="aspect-square relative overflow-hidden rounded-lg group"
|
|
>
|
|
<Image
|
|
src={src}
|
|
alt={`Gallery Image ${idx + 1}`}
|
|
fill
|
|
className="object-cover transition-transform duration-700 group-hover:scale-110"
|
|
/>
|
|
<div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-500 flex items-center justify-center">
|
|
<span className="text-white font-bold tracking-wider uppercase">Teras Steakhouse</span>
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|