Update app/page.tsx

2026-01-16 16:33:26 +00:00 · 2026-01-16 16:33:26 +00:00 · dbc11140b7
parent 41940102b2
commit dbc11140b7
1 changed files with 54 additions and 0 deletions
--- a/app/page.tsx
+++ b/app/page.tsx
@ -0,0 +1,54 @@
+import { Footer } from "@/components/footer";
+import { NavBar } from "@/components/navbar";
+import { Hero } from "@/components/hero";
+import { Catalog } from "@/components/catalog";
+import { Container } from "@/components/container";
+import { Heading } from "@/components/heading";
+import { ShieldCheck, Truck, CreditCard, Headphones } from "lucide-react";
+
+export default function Home() {
+  return (
+    <main>
+      <NavBar />
+      <Hero />
+      
+      <section className="py-16 border-y bg-white">
+        <Container>
+          <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
+            <Feature icon={<ShieldCheck className="w-8 h-8 text-blue-600" />} title="Compra Segura" desc="Transacciones protegidas y transparencia total." />
+            <Feature icon={<Truck className="w-8 h-8 text-blue-600" />} title="Envíos Rápidos" desc="Número de guía inmediato tras confirmar pago." />
+            <Feature icon={<CreditCard className="w-8 h-8 text-blue-600" />} title="Múltiples Pagos" desc="Binance, Tarjeta, OXXO, ACH y más." />
+            <Feature icon={<Headphones className="w-8 h-8 text-blue-600" />} title="Soporte 24/7" desc="Atención personalizada para mayoristas." />
+          </div>
+        </Container>
+      </section>
+
+      <Catalog />
+
+      <section className="py-20">
+        <Container>
+          <div className="max-w-3xl mx-auto text-center">
+            <Heading>¿Por qué confiar en nosotros?</Heading>
+            <p className="mt-6 text-lg text-neutral-600 leading-relaxed">
+              En <strong>EL PALACIO DE TENI</strong>, entendemos que tu inversión es lo más importante. 
+              Somos líderes en la distribución de calzado por mayoreo, ofreciendo transparencia en cada paso. 
+              Desde el momento de tu pago, nuestro sistema genera automáticamente tu orden y te mantenemos 
+              informado hasta que la mercancía llegue a tu puerta.
+            </p>
+          </div>
+        </Container>
+      </section>
+      <Footer />
+    </main>
+  );
+}
+
+function Feature({ icon, title, desc }: { icon: React.ReactNode, title: string, desc: string }) {
+  return (
+    <div className="flex flex-col items-center text-center p-4">
+      <div className="mb-4">{icon}</div>
+      <h3 className="font-bold text-lg mb-2">{title}</h3>
+      <p className="text-sm text-neutral-500">{desc}</p>
+    </div>
+  );
+}