91 lines
3.3 KiB
TypeScript
91 lines
3.3 KiB
TypeScript
"use client";
|
|
import { Container } from "@/components/container";
|
|
import { Heading } from "@/components/heading";
|
|
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Badge } from "@/components/badge";
|
|
import { Button } from "@/components/ui/button";
|
|
import Image from "next/image";
|
|
|
|
const products = [
|
|
{
|
|
id: 1,
|
|
name: "Gourmet Whole Bean",
|
|
category: "Coffee",
|
|
price: "$18.99",
|
|
image: "https://images.unsplash.com/photo-1559056199-641a0ac8b55e?q=80&w=2070&auto=format&fit=crop",
|
|
tag: "Best Seller"
|
|
},
|
|
{
|
|
id: 2,
|
|
name: "Biodegradable Pods",
|
|
category: "Eco-Friendly",
|
|
price: "$14.50",
|
|
image: "https://images.unsplash.com/photo-1514432324607-a09d9b4aefdd?q=80&w=1974&auto=format&fit=crop",
|
|
tag: "Sustainable"
|
|
},
|
|
{
|
|
id: 3,
|
|
name: "Coffee Cookies",
|
|
category: "Snacks",
|
|
price: "$8.99",
|
|
image: "https://images.unsplash.com/photo-1499636136210-6f4ee915583e?q=80&w=1964&auto=format&fit=crop",
|
|
tag: "Artisan"
|
|
},
|
|
{
|
|
id: 4,
|
|
name: "Quindío Gift Set",
|
|
category: "Bundles",
|
|
price: "$45.00",
|
|
image: "https://images.unsplash.com/photo-1544787210-2827443cb69b?q=80&w=2022&auto=format&fit=crop",
|
|
tag: "Gift Idea"
|
|
}
|
|
];
|
|
|
|
export function ProductGrid() {
|
|
return (
|
|
<section id="products" className="py-24 bg-white">
|
|
<Container>
|
|
<div className="flex flex-col md:flex-row justify-between items-end mb-12 gap-4">
|
|
<div>
|
|
<Badge className="bg-amber-100 text-amber-800 border-none mb-4">Our Collection</Badge>
|
|
<Heading>Premium Colombian Selection</Heading>
|
|
</div>
|
|
<Button variant="link" className="text-amber-800 font-semibold">View All Products →</Button>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
|
|
{products.map((product) => (
|
|
<Card key={product.id} className="group border-none shadow-sm hover:shadow-md transition-all">
|
|
<CardHeader className="p-0 overflow-hidden rounded-t-xl">
|
|
<div className="relative h-64 w-full">
|
|
<Image
|
|
src={product.image}
|
|
alt={product.name}
|
|
fill
|
|
className="object-cover group-hover:scale-105 transition-transform duration-500"
|
|
/>
|
|
<div className="absolute top-3 left-3">
|
|
<Badge className="bg-white/90 text-stone-900 backdrop-blur-sm border-none">
|
|
{product.tag}
|
|
</Badge>
|
|
</div>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="pt-6">
|
|
<p className="text-xs text-stone-500 uppercase tracking-widest mb-1">{product.category}</p>
|
|
<CardTitle className="text-xl text-stone-900">{product.name}</CardTitle>
|
|
<p className="text-lg font-bold text-amber-800 mt-2">{product.price}</p>
|
|
</CardContent>
|
|
<CardFooter className="pb-6">
|
|
<Button className="w-full bg-stone-900 hover:bg-stone-800 text-white">
|
|
Add to Cart
|
|
</Button>
|
|
</CardFooter>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</Container>
|
|
</section>
|
|
);
|
|
}
|