feat(ecommerce): migrate Ari Shopping to Next.js 15 headless storefront v4

2026-07-19 19:37:41 -05:00
parent 383b644929
commit f263a9cc55
76 changed files with 1607 additions and 0 deletions
@@ -0,0 +1,11 @@
+import Image from "next/image";
+import Link from "next/link";
+import { Facebook, Instagram, MessageCircle } from "lucide-react";
+
+export function Footer() {
+  return <footer className="bg-slate-950 text-white"><div className="mx-auto grid max-w-7xl gap-10 px-4 py-14 sm:grid-cols-2 lg:grid-cols-4"><div><div className="flex items-center gap-4"><div className="relative size-16 overflow-hidden rounded-full"><Image src="/images/brand/logo-ari.png" alt="ARI Shopping" fill sizes="64px" className="object-cover" /></div><div><strong className="text-xl font-black">ARI Shopping</strong><p className="text-xs text-white/60">Tesoros para cada aventura.</p></div></div><div className="mt-5 flex gap-3"><Instagram /><Facebook /><MessageCircle /></div></div><FooterColumn title="Compra" links={["Novedades", "Juguetes", "Mochilas", "Regalos"]} /><FooterColumn title="Ayuda" links={["Preguntas frecuentes", "Envíos", "Cambios", "Contacto"]} /><div><h3 className="font-black">Newsletter</h3><p className="mt-3 text-sm leading-6 text-white/60">Recibe lanzamientos y promociones especiales.</p><div className="mt-4 flex rounded-full bg-white p-1"><input className="min-w-0 flex-1 bg-transparent px-4 text-sm text-slate-950 outline-none" placeholder="Tu correo" /><button className="rounded-full bg-yellow-300 px-4 text-sm font-black text-slate-950">Unirme</button></div></div></div><div className="border-t border-white/10 py-5 text-center text-xs text-white/50">© 2026 ARI Shopping · Frontend headless v4.0 · GitOps</div></footer>;
+}
+
+function FooterColumn({ title, links }: { title: string; links: string[] }) {
+  return <div><h3 className="font-black">{title}</h3><div className="mt-4 grid gap-3 text-sm text-white/60">{links.map((link) => <Link key={link} href="/catalog" className="hover:text-yellow-300">{link}</Link>)}</div></div>;
+}
@@ -0,0 +1,48 @@
+"use client";
+
+import Image from "next/image";
+import Link from "next/link";
+import { Heart, Menu, ShoppingCart, UserRound } from "lucide-react";
+import { PredictiveSearch } from "@/components/search/predictive-search";
+import { Button } from "@/components/ui/button";
+import type { Product } from "@/lib/headless/types";
+import { useCartStore } from "@/store/cart-store";
+
+const categories = [
+  { label: "Juguetes para bebés", href: "/catalog?category=Figuras" },
+  { label: "Educativos", href: "/catalog?category=Figuras" },
+  { label: "Muñecas", href: "/catalog?category=Peluches" },
+  { label: "Acción y aventura", href: "/catalog?collection=Marvel" },
+  { label: "Mochilas", href: "/catalog?category=Mochilas" },
+  { label: "Variedades", href: "/catalog" },
+];
+
+export function Navbar({ products }: { products: Product[] }) {
+  const items = useCartStore((state) => state.items);
+  const openCart = useCartStore((state) => state.openCart);
+  const count = items.reduce((sum, item) => sum + item.quantity, 0);
+
+  return (
+    <header className="sticky top-0 z-40 shadow-md">
+      <div className="bg-yellow-300 px-4 py-2 text-center text-xs font-black text-slate-950 sm:text-sm">Paga tus compras a cuotas · Envíos nacionales · <span className="underline">Compra segura con ARI</span></div>
+      <div className="bg-cyan-400 bg-[radial-gradient(circle_at_20%_20%,rgba(255,255,255,.18)_0_12%,transparent_13%),radial-gradient(circle_at_80%_70%,rgba(255,255,255,.12)_0_10%,transparent_11%)]">
+        <div className="mx-auto grid max-w-7xl grid-cols-[72px_1fr_auto] items-center gap-4 px-4 py-4 lg:grid-cols-[100px_minmax(420px,1fr)_auto] lg:gap-8">
+          <Link href="/" className="relative size-16 overflow-hidden rounded-full border-4 border-white bg-black shadow-xl lg:size-20"><Image src="/images/brand/logo-ari.png" alt="ARI Shopping" fill priority sizes="80px" className="object-cover" /></Link>
+          <PredictiveSearch products={products} />
+          <div className="hidden items-center gap-2 sm:flex">
+            <Button variant="ghost" size="icon" aria-label="Mi cuenta" className="bg-white/15 text-white hover:bg-white/25"><UserRound /></Button>
+            <Button variant="ghost" size="icon" aria-label="Favoritos" className="bg-white/15 text-white hover:bg-white/25"><Heart /></Button>
+            <Button variant="magenta" size="icon" onClick={openCart} aria-label={`Carrito con ${count} productos`} className="relative"><ShoppingCart /><span className="absolute -right-2 -top-2 grid size-6 place-items-center rounded-full bg-yellow-300 text-[11px] font-black text-slate-950">{count}</span></Button>
+          </div>
+          <Button variant="magenta" size="icon" className="sm:hidden" onClick={openCart}><ShoppingCart /></Button>
+        </div>
+      </div>
+      <nav className="bg-cyan-700 text-white">
+        <div className="mx-auto flex max-w-7xl items-center gap-1 overflow-x-auto px-4 py-2 [scrollbar-width:none]">
+          <Button variant="ghost" size="icon" className="shrink-0 text-white hover:bg-white/10 lg:mr-5"><Menu /></Button>
+          {categories.map((category) => <Link key={category.label} href={category.href} className="shrink-0 rounded-full px-4 py-2 text-sm font-extrabold hover:bg-white/10">{category.label}</Link>)}
+        </div>
+      </nav>
+    </header>
+  );
+}