39 lines
2.0 KiB
TypeScript
39 lines
2.0 KiB
TypeScript
"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>
|
|
);
|
|
}
|