feat(ecommerce): banner dinámico desde catálogo real y buscador en dos filas en mobile
- hero-carousel.tsx: slides derivados de productos featured/nuevos reales (imagen, nombre, precio, link, badge de % OFF) en vez de un array hardcodeado; fallback estático solo si la tienda no tiene productos activos. - navbar.tsx: en mobile/tablet el buscador pasa a una segunda fila a todo el ancho debajo de logo+iconos (antes competía por espacio en una sola fila y quedaba recortado); desktop sin cambios. - docs: ADR 0010 documentando el pivote de pago PayU→Rapyd(descartado)→ ePayco, la integración de EnvíoClick y checklist de pruebas reales pendientes desde el storefront; puntero agregado desde ADR 0009. Co-Authored-By: Claude Sonnet 5 <[email protected]> Claude-Session: https://claude.ai/code/session_01THZFwPzrwv6VAbuwmaf5vR
This commit is contained in:
devopsandClaude Sonnet 5 committed
1 parent
1e6009daf7
commit
1abc69825c
5 files changed
+402
-35
No files matched your search
@@ -55,34 +55,47 @@ export function Navbar({ products, categories }: { products: Product[]; categori
|
||||
|
||||
<div className="relative overflow-visible bg-white">
|
||||
<div className="pointer-events-none absolute inset-x-0 top-0 h-1 bg-ari-coral-claro" />
|
||||
<div className="mx-auto grid max-w-7xl grid-cols-[auto_1fr_auto] items-center gap-4 px-4 py-4 lg:gap-8">
|
||||
{/* Isotipo circular con icono + wordmark integrados (como en la
|
||||
version previa a ADR 0008), pedido explicito del usuario en
|
||||
vez del lockup rectangular. logo-ari.svg (rectangular) se
|
||||
mantiene para el footer. */}
|
||||
<Link href="/" aria-label="ARI shopping" className="shrink-0">
|
||||
{/* eslint-disable-next-line @next/next/no-img-element -- vector propio, next/image no optimiza SVG sin habilitar dangerouslyAllowSVG */}
|
||||
<img src="/images/brand/logo-ari-circular.svg" alt="ARI shopping" className="size-16 lg:size-20" width={200} height={200} />
|
||||
</Link>
|
||||
<PredictiveSearch />
|
||||
<div className="flex items-center gap-2">
|
||||
{/* Antes escondido en mobile (solo alcanzable desde el menu
|
||||
hamburguesa) -- pedido explicito del usuario: visible
|
||||
siempre en el header, con un punto verde cuando hay sesion
|
||||
iniciada (mismo patron que el badge de cantidad del
|
||||
carrito/favoritos, pero de presencia, no de conteo). */}
|
||||
<Button variant="outline" size="icon" aria-label={isLoggedIn ? "Mi cuenta (sesión iniciada)" : "Mi cuenta"} className="relative inline-flex border-slate-300 bg-white text-slate-900 hover:border-ari-coral hover:bg-ari-coral/10" onClick={() => setAccountOpen(true)}>
|
||||
<UserRound />
|
||||
{isLoggedIn && <span className="absolute -right-1 -top-1 size-3 rounded-full border-2 border-white bg-emerald-500" />}
|
||||
</Button>
|
||||
<Button variant="outline" size="icon" aria-label={`Favoritos: ${wishlistCount}`} className="relative hidden border-slate-300 bg-white text-slate-900 hover:border-ari-coral hover:bg-ari-coral/10 sm:inline-flex" onClick={openWishlist}>
|
||||
<Heart />
|
||||
{wishlistCount > 0 && <span className="absolute -right-1.5 -top-1.5 grid size-5 place-items-center rounded-full bg-ari-marino text-[10px] font-black text-white">{wishlistCount}</span>}
|
||||
</Button>
|
||||
<Button variant="primary" 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-ari-marino text-[11px] font-black text-white">{count}</span>
|
||||
</Button>
|
||||
{/* ADR 0010: en mobile/tablet el buscador se movio a una segunda
|
||||
fila a todo el ancho, debajo de logo+iconos (antes competia por
|
||||
espacio en una sola fila con el grid_[auto_1fr_auto] y quedaba
|
||||
angosto/recortado). En desktop (lg+) se mantiene la fila unica
|
||||
original -- ahi sobra espacio y partirla en dos solo alargaria
|
||||
el header sin necesidad. */}
|
||||
<div className="mx-auto max-w-7xl px-4 py-3 lg:py-4">
|
||||
<div className="flex items-center justify-between gap-4 lg:grid lg:grid-cols-[auto_1fr_auto] lg:gap-8">
|
||||
{/* Isotipo circular con icono + wordmark integrados (como en la
|
||||
version previa a ADR 0008), pedido explicito del usuario en
|
||||
vez del lockup rectangular. logo-ari.svg (rectangular) se
|
||||
mantiene para el footer. */}
|
||||
<Link href="/" aria-label="ARI shopping" className="shrink-0">
|
||||
{/* eslint-disable-next-line @next/next/no-img-element -- vector propio, next/image no optimiza SVG sin habilitar dangerouslyAllowSVG */}
|
||||
<img src="/images/brand/logo-ari-circular.svg" alt="ARI shopping" className="size-16 lg:size-20" width={200} height={200} />
|
||||
</Link>
|
||||
<div className="hidden lg:block">
|
||||
<PredictiveSearch />
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{/* Antes escondido en mobile (solo alcanzable desde el menu
|
||||
hamburguesa) -- pedido explicito del usuario: visible
|
||||
siempre en el header, con un punto verde cuando hay sesion
|
||||
iniciada (mismo patron que el badge de cantidad del
|
||||
carrito/favoritos, pero de presencia, no de conteo). */}
|
||||
<Button variant="outline" size="icon" aria-label={isLoggedIn ? "Mi cuenta (sesión iniciada)" : "Mi cuenta"} className="relative inline-flex border-slate-300 bg-white text-slate-900 hover:border-ari-coral hover:bg-ari-coral/10" onClick={() => setAccountOpen(true)}>
|
||||
<UserRound />
|
||||
{isLoggedIn && <span className="absolute -right-1 -top-1 size-3 rounded-full border-2 border-white bg-emerald-500" />}
|
||||
</Button>
|
||||
<Button variant="outline" size="icon" aria-label={`Favoritos: ${wishlistCount}`} className="relative hidden border-slate-300 bg-white text-slate-900 hover:border-ari-coral hover:bg-ari-coral/10 sm:inline-flex" onClick={openWishlist}>
|
||||
<Heart />
|
||||
{wishlistCount > 0 && <span className="absolute -right-1.5 -top-1.5 grid size-5 place-items-center rounded-full bg-ari-marino text-[10px] font-black text-white">{wishlistCount}</span>}
|
||||
</Button>
|
||||
<Button variant="primary" 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-ari-marino text-[11px] font-black text-white">{count}</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-3 lg:hidden">
|
||||
<PredictiveSearch />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in new issue
Block a user