feat(ecommerce): ADR 0007 Opcion 2 "Atelier calido" - Sub-fase 1+3
Identidad visual propia premium (ver docs-portal/docs/decisiones/0007-identidad-visual-propia.md, revision 2). Correccion de proceso respecto al intento anterior (v1.0.176, revertido): en vez de un token aislado en un solo boton, esta pasada toca de punta a punta los componentes que se ven juntos en la misma pantalla para que ninguna card quede a mitad de camino. - globals.css: paleta ciruela/carbon-oscuro/cobre/hueso (reemplaza cyan/magenta/yellow/blue, confirmado sin uso previo). Domine (titulares/precio) + Inter (UI/cuerpo) via next/font/google -- antes "Inter" era solo un fallback de CSS sin garantia real de carga. - button.tsx: variant "magenta" renombrada a "primary" (ya no es magenta, es ciruela solida) y su color redefinido -- renombrada en los 8 archivos que la usaban para no dejar un nombre enganoso. Radio base rounded-full -> rounded-lg, ring de foco retintado. - product-card.tsx: badges NUEVO/TOP/descuento en la paleta nueva (no mas fucsia/amarillo neon), precio en Domine, radio y sombra consistentes con el boton. - catalog-client.tsx: solo clases de color/radio en breadcrumb, filtro de precio, pills de filtro y boton de reset -- cero cambios de logica. Header, footer, home y pagina de producto/drawers quedan con la paleta anterior a proposito -- Sub-fases 2, 4 y 5 pendientes. Validado con `docker build --target builder` (npm ci + next build con typecheck completo) -- compila limpio.
This commit is contained in:
devops committed
1 parent
699598ab06
commit
a01ab55ebe
12 files changed
+251
-260
No files matched your search
@@ -1,10 +1,16 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
@theme {
|
||||
--color-ari-cyan: #06b6d4;
|
||||
--color-ari-magenta: #ec4899;
|
||||
--color-ari-yellow: #fde047;
|
||||
--color-ari-blue: #0f172a;
|
||||
/* ADR 0007 (Opcion 2, "Atelier calido") -- identidad premium propia,
|
||||
no derivada de ningun competidor. Ver
|
||||
docs-portal/docs/decisiones/0007-identidad-visual-propia.md */
|
||||
--color-ari-ciruela: #5B3256; /* CTA -- unico uso reservado a accion */
|
||||
--color-ari-carbon-oscuro: #221D1A; /* ancla oscura: header/footer, badge "Nuevo" */
|
||||
--color-ari-cobre: #B5723A; /* acento: links, badge "Top", foco */
|
||||
--color-ari-hueso: #F7F1E6; /* fondo general */
|
||||
--color-ari-carbon: #2A2420; /* texto principal */
|
||||
--color-ari-terracota-oscuro: #9C4A2E; /* badge de descuento */
|
||||
--font-display: var(--font-domine), ui-serif, Georgia, serif;
|
||||
--animate-accordion-down: accordion-down .2s ease-out;
|
||||
--animate-accordion-up: accordion-up .2s ease-out;
|
||||
}
|
||||
@@ -15,10 +21,10 @@
|
||||
:root { color-scheme: light; }
|
||||
* { border-color: rgb(226 232 240); }
|
||||
html { scroll-behavior: smooth; }
|
||||
body { margin: 0; background: #fff; color: #0f172a; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-rendering: optimizeLegibility; }
|
||||
body { margin: 0; background: var(--color-ari-hueso); color: var(--color-ari-carbon); font-family: var(--font-inter), ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-rendering: optimizeLegibility; }
|
||||
button, a { -webkit-tap-highlight-color: transparent; }
|
||||
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgb(167 139 250 / .55); outline-offset: 3px; }
|
||||
::selection { background: #fde047; color: #0f172a; }
|
||||
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgb(181 114 58 / .5); outline-offset: 3px; }
|
||||
::selection { background: rgb(91 50 86 / .2); color: var(--color-ari-carbon); }
|
||||
|
||||
.content-auto {
|
||||
content-visibility: auto;
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import type { Metadata, Viewport } from "next";
|
||||
import { Domine, Inter } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import { CartDrawer } from "@/components/cart/cart-drawer";
|
||||
import { Footer } from "@/components/layout/footer";
|
||||
@@ -20,9 +21,15 @@ export const metadata: Metadata = {
|
||||
openGraph: { title: "ARI Shopping", description: "Tesoros para cada aventura.", type: "website", locale: "es_CO" },
|
||||
};
|
||||
|
||||
export const viewport: Viewport = { width: "device-width", initialScale: 1, themeColor: "#0f172a" };
|
||||
export const viewport: Viewport = { width: "device-width", initialScale: 1, themeColor: "#221D1A" };
|
||||
|
||||
// ADR 0007 (Opcion 2, "Atelier calido"): Domine (titulares/precio) + Inter
|
||||
// (UI/cuerpo) via next/font -- antes "Inter" era solo un nombre de fallback
|
||||
// en el CSS, sin garantia real de que el navegador tuviera esa fuente.
|
||||
const inter = Inter({ subsets: ["latin"], variable: "--font-inter", display: "swap" });
|
||||
const domine = Domine({ subsets: ["latin"], variable: "--font-domine", display: "swap" });
|
||||
|
||||
export default async function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
|
||||
const [products, categories] = await Promise.all([getProducts(), getCategories()]);
|
||||
return <html lang="es"><body><Navbar products={products} categories={categories} /><main>{children}</main><Footer /><CartDrawer /><WishlistDrawer /></body></html>;
|
||||
return <html lang="es" className={`${inter.variable} ${domine.variable}`}><body><Navbar products={products} categories={categories} /><main>{children}</main><Footer /><CartDrawer /><WishlistDrawer /></body></html>;
|
||||
}
|
||||
@@ -2,5 +2,5 @@ import Link from "next/link";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
export default function NotFound() {
|
||||
return <section className="grid min-h-[60vh] place-items-center px-4 text-center"><div><span className="text-7xl font-black text-cyan-500">404</span><h1 className="mt-3 text-3xl font-black">Este tesoro no existe</h1><p className="mt-3 text-slate-500">Regresa al catálogo para continuar explorando.</p><Button asChild variant="magenta" className="mt-6"><Link href="/catalog">Ir al catálogo</Link></Button></div></section>;
|
||||
return <section className="grid min-h-[60vh] place-items-center px-4 text-center"><div><span className="text-7xl font-black text-cyan-500">404</span><h1 className="mt-3 text-3xl font-black">Este tesoro no existe</h1><p className="mt-3 text-slate-500">Regresa al catálogo para continuar explorando.</p><Button asChild variant="primary" className="mt-6"><Link href="/catalog">Ir al catálogo</Link></Button></div></section>;
|
||||
}
|
||||
@@ -49,7 +49,7 @@ export function CartDrawer() {
|
||||
<div className="space-y-4 border-t border-slate-100 p-6">
|
||||
<div><div className="mb-2 flex justify-between text-xs font-bold text-slate-600"><span>{pricedItems ? "Progreso para envío gratis" : "Cotización personalizada"}</span><span>{pricedItems ? `${Math.round(progress)}%` : "Por confirmar"}</span></div><Progress value={progress} /></div>
|
||||
<div className="flex items-center justify-between"><span className="font-bold text-slate-600">Subtotal</span><strong className="text-xl font-black">{pricedItems ? formatMoney(subtotal) : "Por confirmar"}</strong></div>
|
||||
<Button variant="magenta" size="lg" className="w-full" disabled={!items.length} onClick={checkout}>Continuar por WhatsApp</Button>
|
||||
<Button variant="primary" size="lg" className="w-full" disabled={!items.length} onClick={checkout}>Continuar por WhatsApp</Button>
|
||||
<Button variant="ghost" className="w-full" disabled={!items.length} onClick={clearCart}>Vaciar carrito</Button>
|
||||
</div>
|
||||
</SheetContent>
|
||||
|
||||
@@ -323,18 +323,18 @@ export function CatalogClient({
|
||||
<div className="mb-8">
|
||||
{breadcrumb.length > 0 && (
|
||||
<nav aria-label="Breadcrumb" className="mb-4 flex flex-wrap items-center gap-1.5 text-xs font-bold text-slate-500">
|
||||
<Link href="/catalog" prefetch={false} className="hover:text-fuchsia-600">
|
||||
<Link href="/catalog" prefetch={false} className="hover:text-ari-ciruela">
|
||||
Inicio
|
||||
</Link>
|
||||
{breadcrumb.map((node, index) => (
|
||||
<span key={node.id} className="flex items-center gap-1.5">
|
||||
<ChevronRight className="size-3" />
|
||||
{index === breadcrumb.length - 1 ? (
|
||||
<span aria-current="page" className="text-slate-900">
|
||||
<span aria-current="page" className="text-ari-carbon">
|
||||
{node.name}
|
||||
</span>
|
||||
) : (
|
||||
<Link href={`/catalog?category=${encodeURIComponent(node.name)}`} prefetch={false} className="hover:text-fuchsia-600">
|
||||
<Link href={`/catalog?category=${encodeURIComponent(node.name)}`} prefetch={false} className="hover:text-ari-ciruela">
|
||||
{node.name}
|
||||
</Link>
|
||||
)}
|
||||
@@ -342,23 +342,23 @@ export function CatalogClient({
|
||||
))}
|
||||
</nav>
|
||||
)}
|
||||
<span className="text-xs font-black uppercase tracking-[.18em] text-fuchsia-600">
|
||||
<span className="text-xs font-black uppercase tracking-[.18em] text-ari-ciruela">
|
||||
Catálogo completo
|
||||
</span>
|
||||
<h1 className="mt-2 text-5xl font-black tracking-tight">Todos los tesoros</h1>
|
||||
<h1 className="font-display mt-2 text-5xl font-bold tracking-tight text-ari-carbon">Todos los tesoros</h1>
|
||||
<p className="mt-3 text-slate-500">
|
||||
Filtra por categoría, marca o edad sin recargar la página.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-8 lg:grid-cols-[260px_1fr]">
|
||||
<aside className="h-fit space-y-6 rounded-3xl border border-slate-100 bg-white p-6 shadow-lg shadow-slate-900/5 lg:sticky lg:top-44">
|
||||
<aside className="h-fit space-y-6 rounded-lg border border-slate-100 bg-white p-6 shadow-lg shadow-ari-carbon-oscuro/5 lg:sticky lg:top-44">
|
||||
<div className="flex items-center justify-between">
|
||||
<strong className="flex items-center gap-2 text-lg font-black">
|
||||
<SlidersHorizontal className="size-5 text-cyan-600" />
|
||||
<SlidersHorizontal className="size-5 text-ari-cobre" />
|
||||
Filtros
|
||||
</strong>
|
||||
<button onClick={reset} className="text-xs font-black text-fuchsia-600">
|
||||
<button onClick={reset} className="text-xs font-black text-ari-ciruela">
|
||||
<X className="mr-1 inline size-3" />
|
||||
Limpiar
|
||||
</button>
|
||||
@@ -392,7 +392,7 @@ export function CatalogClient({
|
||||
step={5000}
|
||||
value={maxPrice}
|
||||
onChange={(event) => setMaxPrice(Number(event.target.value))}
|
||||
className="w-full accent-fuchsia-500"
|
||||
className="w-full accent-ari-ciruela"
|
||||
/>
|
||||
<p className="mt-2 text-xs font-bold text-slate-500">
|
||||
Hasta ${maxPrice.toLocaleString("es-CO")}
|
||||
@@ -412,7 +412,7 @@ export function CatalogClient({
|
||||
<select
|
||||
value={sort}
|
||||
onChange={(event) => setSort(event.target.value)}
|
||||
className="h-11 rounded-full border border-slate-200 bg-white px-4 text-sm font-bold"
|
||||
className="h-11 rounded-lg border border-slate-200 bg-white px-4 text-sm font-bold"
|
||||
>
|
||||
<option value="featured">Destacados</option>
|
||||
<option value="new">Novedades</option>
|
||||
@@ -431,10 +431,10 @@ export function CatalogClient({
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid min-h-80 place-items-center rounded-3xl border border-dashed border-slate-300 text-center">
|
||||
<div className="grid min-h-80 place-items-center rounded-lg border border-dashed border-slate-300 text-center">
|
||||
<div>
|
||||
<p className="text-xl font-black">No encontramos productos</p>
|
||||
<Button variant="magenta" className="mt-4" onClick={reset}>
|
||||
<Button variant="primary" className="mt-4" onClick={reset}>
|
||||
Restablecer filtros
|
||||
</Button>
|
||||
</div>
|
||||
@@ -468,10 +468,10 @@ function Filter({
|
||||
type="button"
|
||||
key={value}
|
||||
onClick={() => onChange(value)}
|
||||
className={`rounded-full px-3 py-2 text-xs font-bold transition ${
|
||||
className={`rounded-md px-3 py-2 text-xs font-bold transition ${
|
||||
selected === value
|
||||
? "bg-slate-950 text-white"
|
||||
: "bg-slate-100 text-slate-600 hover:bg-cyan-100"
|
||||
? "bg-ari-carbon-oscuro text-white"
|
||||
: "bg-slate-100 text-slate-600 hover:bg-ari-cobre/10"
|
||||
}`}
|
||||
>
|
||||
{value}
|
||||
|
||||
@@ -63,7 +63,7 @@ export function Navbar({ products, categories }: { products: Product[]; categori
|
||||
<Heart />
|
||||
{wishlistCount > 0 && <span className="absolute -right-1.5 -top-1.5 grid size-5 place-items-center rounded-full bg-violet-600 text-[10px] font-black text-white">{wishlistCount}</span>}
|
||||
</Button>
|
||||
<Button variant="magenta" size="icon" onClick={openCart} aria-label={`Carrito con ${count} productos`} className="relative shadow-lg shadow-fuchsia-500/20">
|
||||
<Button variant="primary" size="icon" onClick={openCart} aria-label={`Carrito con ${count} productos`} className="relative shadow-lg shadow-fuchsia-500/20">
|
||||
<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>
|
||||
@@ -111,7 +111,7 @@ export function Navbar({ products, categories }: { products: Product[]; categori
|
||||
<h2 className="mt-3 text-3xl font-black">Tu cuenta ARI</h2>
|
||||
<p className="mt-3 text-sm leading-6 text-slate-600">El inicio de sesión quedará conectado al backend headless. Mientras tanto, puedes gestionar pedidos y disponibilidad directamente por WhatsApp.</p>
|
||||
<div className="mt-6 grid gap-3">
|
||||
<Button asChild variant="magenta" size="lg"><a href={process.env.NEXT_PUBLIC_WHATSAPP_URL ?? "https://wa.link/rvcqqc"} target="_blank" rel="noopener noreferrer"><MessageCircle />Hablar con ARI</a></Button>
|
||||
<Button asChild variant="primary" size="lg"><a href={process.env.NEXT_PUBLIC_WHATSAPP_URL ?? "https://wa.link/rvcqqc"} target="_blank" rel="noopener noreferrer"><MessageCircle />Hablar con ARI</a></Button>
|
||||
<Button asChild variant="outline"><Link href="/catalog" onClick={() => setAccountOpen(false)}><PackageCheck />Ver mis opciones de compra</Link></Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -7,5 +7,5 @@ import { useCartStore } from "@/store/cart-store";
|
||||
|
||||
export function MobileAddToCart({ product }: { product: Product }) {
|
||||
const addItem = useCartStore((state) => state.addItem);
|
||||
return <div className="fixed inset-x-0 bottom-0 z-40 border-t border-slate-200 bg-white/95 p-3 shadow-2xl backdrop-blur lg:hidden"><Button variant="magenta" size="lg" className="w-full" onClick={() => addItem(product, product.variants[0]?.id)}><ShoppingBag />Añadir al carrito</Button></div>;
|
||||
return <div className="fixed inset-x-0 bottom-0 z-40 border-t border-slate-200 bg-white/95 p-3 shadow-2xl backdrop-blur lg:hidden"><Button variant="primary" size="lg" className="w-full" onClick={() => addItem(product, product.variants[0]?.id)}><ShoppingBag />Añadir al carrito</Button></div>;
|
||||
}
|
||||
@@ -33,15 +33,15 @@ export function ProductCard({ product, priority = false }: { product: Product; p
|
||||
: null;
|
||||
|
||||
return (
|
||||
<article className="group flex h-full flex-col overflow-hidden rounded-3xl border border-slate-100 bg-white shadow-lg shadow-slate-900/5 transition duration-300 hover:-translate-y-1.5 hover:shadow-2xl hover:shadow-violet-500/10">
|
||||
<div className="relative aspect-square overflow-hidden bg-slate-50">
|
||||
<article className="group flex h-full flex-col overflow-hidden rounded-lg border border-slate-100 bg-white shadow-lg shadow-ari-carbon-oscuro/5 transition duration-300 hover:-translate-y-1.5 hover:shadow-2xl hover:shadow-ari-ciruela/10">
|
||||
<div className="relative aspect-square overflow-hidden bg-ari-hueso">
|
||||
<Link href={`/product/${product.slug}`} prefetch={false}><Image src={product.thumbnail} alt={product.name} fill priority={priority} sizes="(max-width: 640px) 82vw, (max-width: 1024px) 44vw, 280px" className="object-cover transition duration-500 group-hover:scale-[1.035]" /></Link>
|
||||
<div className="absolute left-3 top-3 flex gap-2">{discountPercent && discountPercent > 0 && <Badge className="bg-rose-600 text-white">-{discountPercent}%</Badge>}{product.isNew && <Badge className="bg-fuchsia-500 text-white">Nuevo</Badge>}{product.featured && <Badge className="bg-yellow-300 text-slate-950"><Sparkles className="mr-1 size-3" />Top</Badge>}</div>
|
||||
<button type="button" aria-label={isFavorite ? "Quitar de favoritos" : "Agregar a favoritos"} aria-pressed={isFavorite} className={`absolute right-3 top-3 rounded-full p-2.5 shadow-lg backdrop-blur transition ${isFavorite ? "bg-fuchsia-500 text-white" : "bg-white/95 text-slate-900 hover:text-fuchsia-500"}`} onClick={() => toggleProduct(product)}><Heart className={`size-4 ${isFavorite ? "fill-current" : ""}`} /></button>
|
||||
<div className="absolute left-3 top-3 flex gap-2">{discountPercent && discountPercent > 0 && <Badge className="bg-ari-terracota-oscuro text-white">-{discountPercent}%</Badge>}{product.isNew && <Badge className="bg-ari-carbon-oscuro text-white">Nuevo</Badge>}{product.featured && <Badge className="bg-ari-cobre text-white"><Sparkles className="mr-1 size-3" />Top</Badge>}</div>
|
||||
<button type="button" aria-label={isFavorite ? "Quitar de favoritos" : "Agregar a favoritos"} aria-pressed={isFavorite} className={`absolute right-3 top-3 rounded-full p-2.5 shadow-lg backdrop-blur transition ${isFavorite ? "bg-ari-ciruela text-white" : "bg-white/95 text-slate-900 hover:text-ari-ciruela"}`} onClick={() => toggleProduct(product)}><Heart className={`size-4 ${isFavorite ? "fill-current" : ""}`} /></button>
|
||||
</div>
|
||||
<div className="flex flex-1 flex-col space-y-3 p-5">
|
||||
<div className="flex items-center justify-between gap-2 text-xs font-bold text-slate-500"><span>{product.category}</span><span className="rounded-full bg-cyan-50 px-2 py-1 text-cyan-700">{product.collection}</span></div>
|
||||
<Link href={`/product/${product.slug}`} prefetch={false}><h3 className="line-clamp-2 min-h-12 text-lg font-black leading-6 text-slate-950 group-hover:text-fuchsia-600">{product.name}</h3></Link>
|
||||
<div className="flex items-center justify-between gap-2 text-xs font-bold text-slate-500"><span>{product.category}</span><span className="rounded-md bg-ari-cobre/10 px-2 py-1 text-ari-cobre">{product.collection}</span></div>
|
||||
<Link href={`/product/${product.slug}`} prefetch={false}><h3 className="line-clamp-2 min-h-12 text-lg font-black leading-6 text-ari-carbon group-hover:text-ari-ciruela">{product.name}</h3></Link>
|
||||
<p className="line-clamp-2 min-h-10 text-sm leading-5 text-slate-500">{product.shortDescription}</p>
|
||||
{product.variants.length > 1 && (
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
@@ -53,9 +53,9 @@ export function ProductCard({ product, priority = false }: { product: Product; p
|
||||
aria-pressed={selectedVariantId === variant.id}
|
||||
aria-label={`${variant.name}: ${variant.value}`}
|
||||
onClick={() => setSelectedVariantId(variant.id)}
|
||||
className={`rounded-full border px-2.5 py-1 text-xs font-bold transition ${
|
||||
className={`rounded-md border px-2.5 py-1 text-xs font-bold transition ${
|
||||
selectedVariantId === variant.id
|
||||
? "border-fuchsia-500 bg-fuchsia-50 text-fuchsia-700"
|
||||
? "border-ari-ciruela bg-ari-ciruela/10 text-ari-ciruela"
|
||||
: "border-slate-200 text-slate-600 hover:border-slate-400"
|
||||
} ${!variant.available ? "cursor-not-allowed opacity-40" : ""}`}
|
||||
>
|
||||
@@ -70,9 +70,9 @@ export function ProductCard({ product, priority = false }: { product: Product; p
|
||||
<div className="mt-auto flex items-center justify-between gap-3 pt-1">
|
||||
<div className="flex flex-col">
|
||||
{product.compareAtPrice && <span className="text-xs font-bold text-slate-400 line-through">{formatMoney(product.compareAtPrice, product.currency)}</span>}
|
||||
<strong className="text-sm font-black">{formatMoney(product.price, product.currency)}</strong>
|
||||
<strong className="font-display text-base font-bold text-ari-carbon">{formatMoney(product.price, product.currency)}</strong>
|
||||
</div>
|
||||
<Button variant="magenta" size="sm" onClick={() => addItem(product, selectedVariantId)}><ShoppingBag className="size-4" />Agregar</Button>
|
||||
<Button variant="primary" size="sm" onClick={() => addItem(product, selectedVariantId)}><ShoppingBag className="size-4" />Agregar</Button>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
@@ -18,5 +18,5 @@ export function ProductPurchase({ product }: { product: Product }) {
|
||||
selectedVariant.inventoryQuantity <= LOW_STOCK_THRESHOLD
|
||||
? selectedVariant.inventoryQuantity
|
||||
: null;
|
||||
return <div><div className="mb-5 flex flex-wrap gap-2">{product.variants.map((variant) => <button key={variant.id} onClick={() => setVariantId(variant.id)} className={`rounded-full border px-4 py-2 text-sm font-bold ${variantId === variant.id ? "border-fuchsia-500 bg-fuchsia-50 text-fuchsia-700" : "border-slate-200"}`}>{variant.value}</button>)}</div><div className="mb-6 flex items-end gap-3"><strong className="text-3xl font-black">{formatMoney(product.price, product.currency)}</strong>{product.compareAtPrice && <del className="text-slate-400">{formatMoney(product.compareAtPrice, product.currency)}</del>}</div><Button variant="magenta" size="lg" className="w-full" onClick={() => addItem(product, variantId)}><ShoppingBag />Añadir al carrito</Button><div className="mt-5 grid gap-3 rounded-2xl bg-slate-50 p-4 text-sm">{lowStock !== null ? <span className="flex items-center gap-2 font-bold text-amber-600"><TriangleAlert className="size-4" />Quedan {lowStock} unidades</span> : <span className="flex items-center gap-2 font-bold"><CheckCircle2 className="size-4 text-emerald-500" />Disponibilidad por confirmar</span>}<span className="flex items-center gap-2 font-bold"><Truck className="size-4 text-cyan-600" />Envíos nacionales</span></div></div>;
|
||||
return <div><div className="mb-5 flex flex-wrap gap-2">{product.variants.map((variant) => <button key={variant.id} onClick={() => setVariantId(variant.id)} className={`rounded-full border px-4 py-2 text-sm font-bold ${variantId === variant.id ? "border-fuchsia-500 bg-fuchsia-50 text-fuchsia-700" : "border-slate-200"}`}>{variant.value}</button>)}</div><div className="mb-6 flex items-end gap-3"><strong className="text-3xl font-black">{formatMoney(product.price, product.currency)}</strong>{product.compareAtPrice && <del className="text-slate-400">{formatMoney(product.compareAtPrice, product.currency)}</del>}</div><Button variant="primary" size="lg" className="w-full" onClick={() => addItem(product, variantId)}><ShoppingBag />Añadir al carrito</Button><div className="mt-5 grid gap-3 rounded-2xl bg-slate-50 p-4 text-sm">{lowStock !== null ? <span className="flex items-center gap-2 font-bold text-amber-600"><TriangleAlert className="size-4" />Quedan {lowStock} unidades</span> : <span className="flex items-center gap-2 font-bold"><CheckCircle2 className="size-4 text-emerald-500" />Disponibilidad por confirmar</span>}<span className="flex items-center gap-2 font-bold"><Truck className="size-4 text-cyan-600" />Envíos nacionales</span></div></div>;
|
||||
}
|
||||
@@ -4,14 +4,20 @@ import { cva, type VariantProps } from "class-variance-authority";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const buttonVariants = cva(
|
||||
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-full text-sm font-extrabold transition-all focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-cyan-300/40 disabled:pointer-events-none disabled:opacity-50",
|
||||
// ADR 0007 (Opcion 2, "Atelier calido"): radio moderado en vez de
|
||||
// rounded-full, ring de foco tintado con el acento de marca en vez de
|
||||
// cyan generico.
|
||||
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-extrabold transition-all focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ari-cobre/40 disabled:pointer-events-none disabled:opacity-50",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-slate-950 text-white shadow-lg hover:-translate-y-0.5 hover:bg-slate-800",
|
||||
magenta: "bg-gradient-to-r from-fuchsia-500 to-pink-500 text-white shadow-lg shadow-pink-500/25 hover:-translate-y-0.5",
|
||||
// Unico color reservado a accion (nunca decorativo) -- bloque
|
||||
// solido, no gradiente, sobre toda la superficie del sitio que
|
||||
// ya usaba esta variant (carrito, WhatsApp, checkout, "Agregar").
|
||||
primary: "bg-ari-ciruela text-white shadow-lg shadow-ari-ciruela/25 hover:-translate-y-0.5 hover:brightness-110",
|
||||
yellow: "bg-yellow-300 text-slate-950 shadow-lg shadow-yellow-400/25 hover:-translate-y-0.5 hover:bg-yellow-200",
|
||||
outline: "border border-slate-200 bg-white text-slate-950 hover:border-cyan-400 hover:bg-cyan-50",
|
||||
outline: "border border-slate-200 bg-white text-slate-950 hover:border-ari-cobre hover:bg-ari-cobre/10",
|
||||
ghost: "text-slate-700 hover:bg-slate-100",
|
||||
},
|
||||
size: {
|
||||
|
||||
@@ -35,7 +35,7 @@ export function WishlistDrawer() {
|
||||
<div>
|
||||
<Link href={`/product/${product.slug}`} onClick={closeWishlist} prefetch={false} className="text-sm font-black leading-5 hover:text-fuchsia-600">{product.name}</Link>
|
||||
<p className="mt-1 text-xs text-slate-500">{product.category} · {product.collection}</p>
|
||||
<Button size="sm" variant="magenta" className="mt-3" onClick={() => addItem(product, product.variants[0]?.id)}><ShoppingBag className="size-3.5" />Agregar</Button>
|
||||
<Button size="sm" variant="primary" className="mt-3" onClick={() => addItem(product, product.variants[0]?.id)}><ShoppingBag className="size-3.5" />Agregar</Button>
|
||||
</div>
|
||||
<button className="self-start rounded-full p-2 text-slate-400 hover:bg-rose-50 hover:text-rose-600" onClick={() => removeProduct(product.id)} aria-label="Quitar favorito"><Trash2 className="size-4" /></button>
|
||||
</article>
|
||||
|
||||
Reference in new issue
Block a user