48 lines
1.9 KiB
TypeScript
48 lines
1.9 KiB
TypeScript
import { Container } from "@/components/container";
|
|
import { Heading } from "@/components/heading";
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
import Image from "next/image";
|
|
|
|
const collections = [
|
|
{
|
|
title: "Women Collection",
|
|
description: "Everyday Soft Luxury. Clean, relaxed silhouettes with gentle structure and breathable fabrics.",
|
|
image: "https://images.unsplash.com/photo-1490481651871-ab68de25d43d?q=80&w=800&auto=format&fit=crop",
|
|
link: "#women"
|
|
},
|
|
{
|
|
title: "Kids Collection",
|
|
description: "Gentle by Nature. Ultra-soft, skin-friendly fabrics designed for movement and comfort.",
|
|
image: "https://images.unsplash.com/photo-1519704943920-18447022ad7d?q=80&w=800&auto=format&fit=crop",
|
|
link: "#kids"
|
|
}
|
|
];
|
|
|
|
export function Collections() {
|
|
return (
|
|
<section className="py-24 bg-[#F9F7F2]">
|
|
<Container>
|
|
<Heading className="text-center mb-16">The Collections</Heading>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
|
{collections.map((item) => (
|
|
<Card key={item.title} className="border-none bg-transparent overflow-hidden group cursor-pointer">
|
|
<div className="relative aspect-[4/5] overflow-hidden">
|
|
<img
|
|
src={item.image}
|
|
alt={item.title}
|
|
className="object-cover w-full h-full transition-transform duration-700 group-hover:scale-105"
|
|
/>
|
|
</div>
|
|
<CardContent className="pt-8 px-0">
|
|
<Heading className="text-2xl mb-3">{item.title}</Heading>
|
|
<p className="text-neutral-600 mb-4">{item.description}</p>
|
|
<span className="text-sm font-medium tracking-widest uppercase border-b border-neutral-900 pb-1">Explore</span>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</Container>
|
|
</section>
|
|
);
|
|
}
|