55 lines
2.9 KiB
TypeScript
55 lines
2.9 KiB
TypeScript
"use client";
|
|
import { Container } from "@/components/container";
|
|
import { Heading } from "@/components/heading";
|
|
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@/components/ui/card";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Badge } from "@/components/badge";
|
|
import Link from "next/link";
|
|
|
|
const products = [
|
|
{ id: "ultra", name: "👑 ULTRA", price: 16000, desc: "1,000 pares de tenis + adicional 500 playeras o 100 pares", color: "bg-yellow-500" },
|
|
{ id: "mega", name: "💎 MEGA", price: 9500, desc: "500 pares de tenis + adicional 250 playeras o 50 pares", color: "bg-blue-400" },
|
|
{ id: "premium", name: "⭐ PREMIUM", price: 4800, desc: "200 pares de tenis + adicional 100 playeras o 20 pares", color: "bg-purple-500" },
|
|
{ id: "basico", name: "🔹 Básico", price: 2900, desc: "100 pares de tenis + adicional 50 playeras o 10 pares", color: "bg-blue-600" },
|
|
{ id: "esencia", name: "🟢 ESENCIA", price: 1650, desc: "50 pares de tenis + adicional 25 playeras o 5 pares", color: "bg-green-500" },
|
|
{ id: "origen", name: "🔵 ORIGEN", price: 1250, desc: "35 pares de tenis + adicional 18 playeras o 3 pares", color: "bg-blue-700" },
|
|
{ id: "raiz", name: "🟡 RAÍZ", price: 950, desc: "25 pares de tenis + adicional 12 playeras o 2 pares", color: "bg-yellow-400" },
|
|
{ id: "mini", name: "🔴 Mini", price: 650, desc: "15 pares de tenis + adicional 8 playeras o 1 par", color: "bg-red-500" },
|
|
];
|
|
|
|
export function Catalog() {
|
|
return (
|
|
<section id="catalog" className="py-20 bg-neutral-50">
|
|
<Container>
|
|
<div className="text-center mb-16">
|
|
<Heading>Nuestras Pacas</Heading>
|
|
<p className="text-neutral-600 mt-4">Selecciona el paquete que mejor se adapte a tu inversión</p>
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
{products.map((p) => (
|
|
<Card key={p.id} className="flex flex-col h-full hover:shadow-lg transition-shadow">
|
|
<CardHeader>
|
|
<div className={`w-12 h-12 rounded-full ${p.color} mb-4 flex items-center justify-center text-white text-xl`}>
|
|
{p.name.split(' ')[0]}
|
|
</div>
|
|
<CardTitle>{p.name}</CardTitle>
|
|
<CardDescription className="text-2xl font-bold text-neutral-900">
|
|
${p.price.toLocaleString()} USD
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="flex-grow">
|
|
<p className="text-sm text-neutral-600">{p.desc}</p>
|
|
</CardContent>
|
|
<CardFooter>
|
|
<Button className="w-full" asChild>
|
|
<Link href={`/checkout?plan=${p.id}`}>Comprar Ahora</Link>
|
|
</Button>
|
|
</CardFooter>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</Container>
|
|
</section>
|
|
);
|
|
}
|