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.
This commit is contained in:
devops committed
1 parent
3ad6951f44
commit
7d27b527e2
3 files changed
+115
-44
No files matched your search
@@ -1,7 +1,7 @@
|
|||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { ArrowRight } from "lucide-react";
|
import { ArrowRight } from "lucide-react";
|
||||||
import { CategoryTiles } from "@/components/home/category-tiles";
|
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 { TrustBar } from "@/components/home/trust-bar";
|
||||||
import { ProductCarousel } from "@/components/product/product-carousel";
|
import { ProductCarousel } from "@/components/product/product-carousel";
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
@@ -17,5 +17,5 @@ export const dynamic = "force-dynamic";
|
|||||||
export default async function HomePage() {
|
export default async function HomePage() {
|
||||||
const [products, categories] = await Promise.all([getProducts(), getCategories()]);
|
const [products, categories] = await Promise.all([getProducts(), getCategories()]);
|
||||||
const treasures = products.filter((product) => product.isNew || product.featured).slice(0, 8);
|
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></>;
|
||||||
}
|
}
|
||||||
@@ -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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in new issue
Block a user