Update components/hero.tsx

components/hero.tsx

@@ -0,0 +1,35 @@
+"use client";
+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 Link from "next/link";
+
+export function Hero() {
+  return (
+    <section className="relative pt-20 pb-16 md:pt-32 md:pb-24 overflow-hidden">
+      <Container>
+        <div className="flex flex-col items-center text-center">
+          <Badge className="mb-4">Distribuidor Mayorista #1</Badge>
+          <Heading as="h1" className="text-4xl md:text-7xl font-bold tracking-tight">
+            EL PALACIO DE <span className="text-blue-600">TENI</span>
+          </Heading>
+          <Subheading className="mt-6 max-w-2xl text-lg text-neutral-600">
+            Venta de pacas de tenis originales y premium para revendedores. 
+            Impulsa tu negocio con los mejores precios del mercado en USD y MXN. 
+            Envíos garantizados con número de guía.
+          </Subheading>
+          <div className="mt-10 flex flex-col sm:flex-row gap-4">
+            <Button size="lg" asChild>
+              <Link href="#catalog">Ver Catálogo de Pacas</Link>
+            </Button>
+            <Button size="lg" variant="outline" asChild>
+              <Link href="/tracking">Rastrear mi Pedido</Link>
+            </Button>
+          </div>
+        </div>
+      </Container>
+    </section>
+  );
+}