61 lines
2.0 KiB
TypeScript
61 lines
2.0 KiB
TypeScript
import { Container } from "@/components/container";
|
|
import { Heading } from "@/components/heading";
|
|
import { Subheading } from "@/components/subheading";
|
|
import Image from "next/image";
|
|
|
|
const images = [
|
|
{
|
|
url: "https://images.unsplash.com/photo-1607860108855-64acf2078ed9?q=80&w=800&auto=format&fit=crop",
|
|
alt: "Car interior detailing"
|
|
},
|
|
{
|
|
url: "https://images.unsplash.com/photo-1552930294-6b595f4c2974?q=80&w=800&auto=format&fit=crop",
|
|
alt: "Shiny car exterior"
|
|
},
|
|
{
|
|
url: "https://images.unsplash.com/photo-1601362840469-51e4d8d59085?q=80&w=800&auto=format&fit=crop",
|
|
alt: "Wheel cleaning"
|
|
},
|
|
{
|
|
url: "https://images.unsplash.com/photo-1599256621730-535171e28e50?q=80&w=800&auto=format&fit=crop",
|
|
alt: "Foam wash"
|
|
},
|
|
{
|
|
url: "https://images.unsplash.com/photo-1520340356584-f9917d1eea6f?q=80&w=800&auto=format&fit=crop",
|
|
alt: "Ceramic coating application"
|
|
},
|
|
{
|
|
url: "https://images.unsplash.com/photo-1580273916550-e323be2ae537?q=80&w=800&auto=format&fit=crop",
|
|
alt: "Polished luxury car"
|
|
}
|
|
];
|
|
|
|
export function Gallery() {
|
|
return (
|
|
<section id="gallery" className="py-24">
|
|
<Container>
|
|
<div className="text-center max-w-3xl mx-auto mb-16">
|
|
<Heading>Our Work</Heading>
|
|
<Subheading className="mt-4">
|
|
Take a look at some of the vehicles we've transformed. Quality and attention to detail in every job.
|
|
</Subheading>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
{images.map((image, index) => (
|
|
<div key={index} className="relative aspect-square overflow-hidden rounded-xl group">
|
|
<Image
|
|
src={image.url}
|
|
alt={image.alt}
|
|
fill
|
|
className="object-cover transition-transform duration-500 group-hover:scale-110"
|
|
/>
|
|
<div className="absolute inset-0 bg-black/20 group-hover:bg-black/40 transition-colors" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</Container>
|
|
</section>
|
|
);
|
|
}
|