Update components/catalog.tsx

components/catalog.tsx

@@ -0,0 +1,54 @@
+"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>
+  );
+}