85 lines
3.1 KiB
TypeScript
85 lines
3.1 KiB
TypeScript
import { Container } from "@/components/container";
|
|
import { Heading } from "@/components/heading";
|
|
import { Subheading } from "@/components/subheading";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Badge } from "@/components/badge";
|
|
import Image from "next/image";
|
|
|
|
const products = [
|
|
{
|
|
name: "Hand-Woven Silk Scarf",
|
|
seller: "Amina K.",
|
|
price: "$45",
|
|
category: "Fashion",
|
|
image: "https://images.unsplash.com/photo-1584030373081-f37b7bb4cb8e?q=80&w=800&auto=format&fit=crop",
|
|
},
|
|
{
|
|
name: "Organic Lavender Soap",
|
|
seller: "Sarah J.",
|
|
price: "$12",
|
|
category: "Wellness",
|
|
image: "https://images.unsplash.com/photo-1600857062241-98e5dba7f214?q=80&w=800&auto=format&fit=crop",
|
|
},
|
|
{
|
|
name: "Ceramic Coffee Mug",
|
|
seller: "Elena R.",
|
|
price: "$28",
|
|
category: "Home Decor",
|
|
image: "https://images.unsplash.com/photo-1514228742587-6b1558fcca3d?q=80&w=800&auto=format&fit=crop",
|
|
},
|
|
{
|
|
name: "Embroidered Wall Art",
|
|
seller: "Priya M.",
|
|
price: "$65",
|
|
category: "Art",
|
|
image: "https://images.unsplash.com/photo-1611486212335-132bb537d4e6?q=80&w=800&auto=format&fit=crop",
|
|
},
|
|
];
|
|
|
|
export function ProductGrid() {
|
|
return (
|
|
<section id="explore" className="py-20">
|
|
<Container>
|
|
<div className="flex flex-col md:flex-row justify-between items-end mb-12 gap-4">
|
|
<div className="max-w-2xl">
|
|
<Heading>Featured Creations</Heading>
|
|
<Subheading className="mt-2">
|
|
Handpicked treasures from our verified women artists and housewives.
|
|
</Subheading>
|
|
</div>
|
|
<Button variant="link" className="text-pink-600 font-semibold p-0 h-auto">
|
|
View all products →
|
|
</Button>
|
|
</div>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
|
|
{products.map((product, index) => (
|
|
<div key={index} className="group cursor-pointer">
|
|
<div className="relative aspect-square overflow-hidden rounded-2xl bg-neutral-100 mb-4">
|
|
<Image
|
|
src={product.image}
|
|
alt={product.name}
|
|
fill
|
|
className="object-cover transition-transform duration-500 group-hover:scale-110"
|
|
/>
|
|
<div className="absolute top-3 left-3">
|
|
<Badge className="bg-white/90 text-black backdrop-blur-sm border-none">
|
|
{product.category}
|
|
</Badge>
|
|
</div>
|
|
</div>
|
|
<h3 className="font-bold text-lg text-neutral-900">{product.name}</h3>
|
|
<p className="text-neutral-500 text-sm mb-2">by {product.seller}</p>
|
|
<div className="flex justify-between items-center">
|
|
<span className="font-bold text-pink-600">{product.price}</span>
|
|
<Button size="sm" variant="outline" className="rounded-full h-8 px-4 text-xs">
|
|
Add to Cart
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</Container>
|
|
</section>
|
|
);
|
|
}
|