From 7d27b527e2017303584586e12f36474b1f483a55 Mon Sep 17 00:00:00 2001
From: Cristian Felipe Cruz Buitron <cristiancruz0529@gmail.com>
Date: Fri, 28 Aug 2026 17:37:42 +0000
Subject: [PATCH] feat(ecommerce): ADR 0008 sub-fase 4 - hero carrusel azul con
 dots

Reemplaza hero-bento.tsx (grid estatico de 3 tarjetas en fucsia/rosa/
rojo/violeta del esquema arcoiris original, nunca migrado -- sub-fase
4 del ADR 0008 pendiente) por hero-carousel.tsx: un slide a la vez
sobre fondo azul de marca (--color-ari-marino) para los tres
mensajes promocionales existentes, con dots de paginacion clicables
abajo (patron pedido explicitamente por el usuario) y autoplay cada
6s (respeta prefers-reduced-motion). Actualiza app/page.tsx para usar
el componente nuevo y elimina hero-bento.tsx.
---
 workloads/ecommerce/app/page.tsx              |   4 +-
 .../ecommerce/components/home/hero-bento.tsx  |  42 -------
 .../components/home/hero-carousel.tsx         | 113 ++++++++++++++++++
 3 files changed, 115 insertions(+), 44 deletions(-)
 delete mode 100644 workloads/ecommerce/components/home/hero-bento.tsx
 create mode 100644 workloads/ecommerce/components/home/hero-carousel.tsx

diff --git a/workloads/ecommerce/app/page.tsx b/workloads/ecommerce/app/page.tsx
index 0e91d18..753ae5a 100644
--- a/workloads/ecommerce/app/page.tsx
+++ b/workloads/ecommerce/app/page.tsx
@@ -1,7 +1,7 @@
 import Link from "next/link";
 import { ArrowRight } from "lucide-react";
 import { CategoryTiles } from "@/components/home/category-tiles";
-import { HeroBento } from "@/components/home/hero-bento";
+import { HeroCarousel } from "@/components/home/hero-carousel";
 import { TrustBar } from "@/components/home/trust-bar";
 import { ProductCarousel } from "@/components/product/product-carousel";
 import { Button } from "@/components/ui/button";
@@ -17,5 +17,5 @@ export const dynamic = "force-dynamic";
 export default async function HomePage() {
   const [products, categories] = await Promise.all([getProducts(), getCategories()]);
   const treasures = products.filter((product) => product.isNew || product.featured).slice(0, 8);
-  return <><HeroBento /><TrustBar /><div className="content-auto"><CategoryTiles categories={categories} /></div><section className="content-auto mx-auto max-w-7xl px-4 py-14"><div className="mb-8 flex items-end justify-between gap-5"><div><span className="text-xs font-black uppercase tracking-[.18em] text-fuchsia-600">Novedades</span><h2 className="mt-2 text-4xl font-black tracking-tight sm:text-5xl">Tesoros recién llegados</h2><p className="mt-3 text-slate-500">Desliza y encuentra nuevos favoritos.</p></div><Button asChild variant="outline" className="hidden sm:inline-flex"><Link href="/catalog">Ver catálogo <ArrowRight className="size-4" /></Link></Button></div><ProductCarousel products={treasures} /></section><section className="content-auto mx-auto max-w-7xl px-4 pb-20"><div className="grid overflow-hidden rounded-[2rem] bg-gradient-to-r from-cyan-500 via-blue-600 to-violet-600 text-white shadow-2xl lg:grid-cols-[1fr_.7fr]"><div className="p-8 sm:p-12"><span className="text-xs font-black uppercase tracking-[.18em] text-yellow-300">Club ARI</span><h2 className="mt-3 text-4xl font-black tracking-tight sm:text-6xl">Promociones, lanzamientos y mucha diversión.</h2><p className="mt-5 max-w-xl text-white/80">Únete a nuestra comunidad y recibe primero las novedades del catálogo.</p><Button variant="yellow" size="lg" className="mt-7">Quiero unirme</Button></div><div className="min-h-64 bg-[url('/images/promo/promo-backpacks.webp')] bg-cover bg-center" /></div></section></>;
+  return <><HeroCarousel /><TrustBar /><div className="content-auto"><CategoryTiles categories={categories} /></div><section className="content-auto mx-auto max-w-7xl px-4 py-14"><div className="mb-8 flex items-end justify-between gap-5"><div><span className="text-xs font-black uppercase tracking-[.18em] text-fuchsia-600">Novedades</span><h2 className="mt-2 text-4xl font-black tracking-tight sm:text-5xl">Tesoros recién llegados</h2><p className="mt-3 text-slate-500">Desliza y encuentra nuevos favoritos.</p></div><Button asChild variant="outline" className="hidden sm:inline-flex"><Link href="/catalog">Ver catálogo <ArrowRight className="size-4" /></Link></Button></div><ProductCarousel products={treasures} /></section><section className="content-auto mx-auto max-w-7xl px-4 pb-20"><div className="grid overflow-hidden rounded-[2rem] bg-gradient-to-r from-cyan-500 via-blue-600 to-violet-600 text-white shadow-2xl lg:grid-cols-[1fr_.7fr]"><div className="p-8 sm:p-12"><span className="text-xs font-black uppercase tracking-[.18em] text-yellow-300">Club ARI</span><h2 className="mt-3 text-4xl font-black tracking-tight sm:text-6xl">Promociones, lanzamientos y mucha diversión.</h2><p className="mt-5 max-w-xl text-white/80">Únete a nuestra comunidad y recibe primero las novedades del catálogo.</p><Button variant="yellow" size="lg" className="mt-7">Quiero unirme</Button></div><div className="min-h-64 bg-[url('/images/promo/promo-backpacks.webp')] bg-cover bg-center" /></div></section></>;
 }
diff --git a/workloads/ecommerce/components/home/hero-bento.tsx b/workloads/ecommerce/components/home/hero-bento.tsx
deleted file mode 100644
index 77c5b6c..0000000
--- a/workloads/ecommerce/components/home/hero-bento.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-"use client";
-
-import Image from "next/image";
-import Link from "next/link";
-import { ArrowRight, BadgePercent, Sparkles } from "lucide-react";
-import { motion, useReducedMotion } from "motion/react";
-import { Button } from "@/components/ui/button";
-
-export function HeroBento() {
-  const reduceMotion = useReducedMotion();
-  const initial = reduceMotion ? false : { opacity: 0, y: 20 };
-
-  return (
-    <section className="mx-auto max-w-7xl px-4 py-7 lg:py-10">
-      <div className="grid gap-5 lg:grid-cols-[1.55fr_.8fr]">
-        <motion.article initial={initial} animate={{ opacity: 1, y: 0 }} className="grid min-h-[470px] overflow-hidden rounded-[2rem] bg-fuchsia-500 text-white shadow-2xl lg:min-h-[560px] lg:grid-cols-[.82fr_1.18fr]">
-          <div className="relative z-10 flex flex-col justify-center bg-gradient-to-br from-fuchsia-600 via-pink-500 to-rose-500 p-7 lg:p-11">
-            <div className="mb-5 inline-flex w-fit items-center gap-2 rounded-full bg-yellow-300 px-4 py-2 text-xs font-black uppercase tracking-wider text-slate-950"><Sparkles className="size-4" />Celebración ARI</div>
-            <h1 className="text-5xl font-black leading-[.92] tracking-[-.06em] sm:text-6xl lg:text-7xl"><span className="block">Hasta</span><span className="text-yellow-300">50% OFF</span><span className="mt-3 block text-3xl tracking-tight sm:text-4xl">en tesoros seleccionados</span></h1>
-            <p className="mt-6 max-w-md text-base font-semibold text-white/95 sm:text-lg">Personajes, mochilas y regalos que convierten cualquier día en una celebración.</p>
-            <Button asChild variant="yellow" size="lg" className="mt-8 w-fit"><Link href="/catalog">Comprar ahora <ArrowRight className="size-5" /></Link></Button>
-          </div>
-          <div className="relative min-h-[360px] bg-white lg:min-h-full">
-            <Image src="/images/promo/hero-vibrant.webp" alt="Promoción principal de Ari Shopping" fill priority sizes="(max-width: 1024px) 100vw, 42vw" className="object-cover object-center" />
-          </div>
-        </motion.article>
-
-        <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-1">
-          <motion.article initial={reduceMotion ? false : { opacity: 0, x: 18 }} animate={{ opacity: 1, x: 0 }} transition={{ delay: .08 }} className="grid min-h-60 overflow-hidden rounded-[2rem] bg-red-600 text-white shadow-xl sm:grid-cols-[.9fr_1.1fr] lg:min-h-0">
-            <div className="relative z-10 flex flex-col justify-center bg-gradient-to-br from-red-600 to-rose-700 p-6"><span className="text-xs font-black uppercase tracking-wider text-yellow-300">Héroes favoritos</span><h2 className="mt-2 text-3xl font-black leading-none">Acción y aventura</h2><Button asChild variant="yellow" size="sm" className="mt-5 w-fit"><Link href="/catalog?collection=Marvel">Comprar ahora</Link></Button></div>
-            <div className="relative min-h-56 bg-white"><Image src="/images/promo/promo-marvel.webp" alt="Colección Marvel" fill sizes="(max-width: 1024px) 50vw, 18vw" className="object-cover object-center" /></div>
-          </motion.article>
-
-          <motion.article initial={reduceMotion ? false : { opacity: 0, x: 18 }} animate={{ opacity: 1, x: 0 }} transition={{ delay: .14 }} className="grid min-h-60 overflow-hidden rounded-[2rem] bg-violet-600 text-white shadow-xl sm:grid-cols-[.9fr_1.1fr] lg:min-h-0">
-            <div className="relative z-10 flex flex-col justify-center bg-gradient-to-br from-violet-600 to-cyan-600 p-6"><div className="inline-flex w-fit items-center gap-1 rounded-full bg-white px-3 py-1 text-xs font-black text-fuchsia-600"><BadgePercent className="size-4" />Novedad</div><h2 className="mt-3 text-3xl font-black leading-none">Tesoros para regalar</h2><Button asChild variant="outline" size="sm" className="mt-5 w-fit border-white bg-white"><Link href="/catalog">Descubrir</Link></Button></div>
-            <div className="relative min-h-56 bg-white"><Image src="/images/promo/promo-characters.webp" alt="Personajes y peluches" fill sizes="(max-width: 1024px) 50vw, 18vw" className="object-cover object-center" /></div>
-          </motion.article>
-        </div>
-      </div>
-    </section>
-  );
-}
diff --git a/workloads/ecommerce/components/home/hero-carousel.tsx b/workloads/ecommerce/components/home/hero-carousel.tsx
new file mode 100644
index 0000000..7380a39
--- /dev/null
+++ b/workloads/ecommerce/components/home/hero-carousel.tsx
@@ -0,0 +1,113 @@
+"use client";
+
+import Image from "next/image";
+import Link from "next/link";
+import { ArrowRight, BadgePercent, Sparkles } from "lucide-react";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { useEffect, useState } from "react";
+import { Button } from "@/components/ui/button";
+
+// ADR 0008 sub-fase 4: hero azul con dots de paginacion (carrusel), en vez
+// del bento estatico de 3 tarjetas en fucsia/rojo/violeta del esquema
+// arcoiris original. Un slide a la vez, fondo azul de marca en los tres,
+// para leerse como una sola pieza de marca en vez de 3 bloques de colores
+// distintos.
+const slides = [
+  {
+    id: "celebracion",
+    badge: "Celebración ARI",
+    icon: Sparkles,
+    title: "Hasta 50% OFF",
+    subtitle: "en tesoros seleccionados",
+    description: "Personajes, mochilas y regalos que convierten cualquier día en una celebración.",
+    href: "/catalog",
+    image: "/images/promo/hero-vibrant.webp",
+    imageAlt: "Promoción principal de Ari Shopping",
+  },
+  {
+    id: "marvel",
+    badge: "Héroes favoritos",
+    icon: BadgePercent,
+    title: "Acción y aventura",
+    subtitle: "colección Marvel",
+    description: "Figuras, mochilas y sets listos para la próxima misión.",
+    href: "/catalog?collection=Marvel",
+    image: "/images/promo/promo-marvel.webp",
+    imageAlt: "Colección Marvel",
+  },
+  {
+    id: "regalos",
+    badge: "Novedad",
+    icon: Sparkles,
+    title: "Tesoros para regalar",
+    subtitle: "",
+    description: "Personajes y peluches para sorprender en cualquier ocasión.",
+    href: "/catalog",
+    image: "/images/promo/promo-characters.webp",
+    imageAlt: "Personajes y peluches",
+  },
+];
+
+const AUTOPLAY_MS = 6000;
+
+export function HeroCarousel() {
+  const reduceMotion = useReducedMotion();
+  const [index, setIndex] = useState(0);
+
+  useEffect(() => {
+    if (reduceMotion) return;
+    const timer = setInterval(() => setIndex((current) => (current + 1) % slides.length), AUTOPLAY_MS);
+    return () => clearInterval(timer);
+  }, [reduceMotion]);
+
+  const slide = slides[index];
+  const Icon = slide.icon;
+
+  return (
+    <section className="mx-auto max-w-7xl px-4 py-7 lg:py-10">
+      <div className="relative overflow-hidden rounded-[2rem] bg-ari-marino text-white shadow-2xl">
+        <AnimatePresence mode="wait">
+          <motion.article
+            key={slide.id}
+            initial={reduceMotion ? false : { opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={reduceMotion ? undefined : { opacity: 0 }}
+            transition={{ duration: 0.4 }}
+            className="grid min-h-[420px] lg:min-h-[500px] lg:grid-cols-2"
+          >
+            <div className="relative z-10 flex flex-col justify-center p-7 lg:p-14">
+              <div className="mb-5 inline-flex w-fit items-center gap-2 rounded-full bg-ari-coral-claro px-4 py-2 text-xs font-black uppercase tracking-wider text-ari-marino">
+                <Icon className="size-4" />
+                {slide.badge}
+              </div>
+              <h1 className="text-5xl font-black leading-[.95] tracking-[-.04em] sm:text-6xl">{slide.title}</h1>
+              {slide.subtitle && <p className="mt-2 text-2xl font-bold text-ari-coral-claro">{slide.subtitle}</p>}
+              <p className="mt-6 max-w-md text-base font-semibold text-white/90 sm:text-lg">{slide.description}</p>
+              <Button asChild variant="yellow" size="lg" className="mt-8 w-fit">
+                <Link href={slide.href}>
+                  Comprar ahora <ArrowRight className="size-5" />
+                </Link>
+              </Button>
+            </div>
+            <div className="relative min-h-[280px] bg-white lg:min-h-full">
+              <Image src={slide.image} alt={slide.imageAlt} fill priority={index === 0} sizes="(max-width: 1024px) 100vw, 50vw" className="object-cover object-center" />
+            </div>
+          </motion.article>
+        </AnimatePresence>
+
+        <div className="absolute inset-x-0 bottom-5 z-20 flex justify-center gap-2">
+          {slides.map((item, itemIndex) => (
+            <button
+              key={item.id}
+              type="button"
+              aria-label={`Ir a la diapositiva ${itemIndex + 1}: ${item.badge}`}
+              aria-current={itemIndex === index ? "true" : undefined}
+              onClick={() => setIndex(itemIndex)}
+              className={`h-2.5 rounded-full transition-all ${itemIndex === index ? "w-7 bg-ari-coral-claro" : "w-2.5 bg-white/50 hover:bg-white/80"}`}
+            />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}