Compare commits
10
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
b5c2c36749 | ||
|
|
f147f4c42c | ||
|
|
d44ef5c35e | ||
|
|
467a99365d | ||
|
|
3c4046926f | ||
|
|
93fbf3ed31 | ||
|
|
635a974a6c | ||
|
|
814df2af53 | ||
|
|
6d065709c1 | ||
|
|
de5371d556 |
No files matched your search
@@ -1,8 +1,16 @@
|
||||
# ADR 0007 — Identidad visual propia para ARI Shopping
|
||||
|
||||
**Estado:** aceptada (revisión 2, 2026-08-27 — el usuario delegó la elección final entre las 3 opciones de §4)
|
||||
**Estado:** reemplazada por [ADR 0008](0008-identidad-navy-coral.md) (2026-08-27)
|
||||
**Fecha:** 2026-08-27
|
||||
|
||||
> **Superseded (2026-08-27):** la Opción 2 "Atelier cálido" (ciruela/
|
||||
> carbón/cobre + Domine) descrita en este ADR se descartó — no
|
||||
> convenció combinada con el resto del sitio sin cambiar (header,
|
||||
> footer, home y producto seguían con la paleta anterior, ver §7). El
|
||||
> ADR 0008 documenta la dirección final ("Navy & Coral") y su
|
||||
> cronología completa. Este documento se conserva como registro
|
||||
> histórico, sin editar el resto de su contenido.
|
||||
|
||||
> **Corrección de dirección #1 (2026-08-27):** la primera versión de
|
||||
> este ADR proponía clonar la estética visual de Amazon. Se corrigió a
|
||||
> adoptar *principios* de UX, no la estética de un competidor —
|
||||
|
||||
@@ -0,0 +1,170 @@
|
||||
# ADR 0008 — Identidad visual "Navy & Coral" para ARI Shopping
|
||||
|
||||
**Estado:** aceptada (implementación en curso, por sub-fases)
|
||||
**Fecha:** 2026-08-27
|
||||
**Reemplaza a:** [ADR 0007](0007-identidad-visual-propia.md) (Opción 2, "Atelier cálido")
|
||||
|
||||
## 1. Contexto
|
||||
|
||||
Este es el tercer intento de identidad visual propia para ARI Shopping,
|
||||
después de dos ciclos de implementar-y-descartar en producción (ver
|
||||
cronología en §2). El costo real de esos dos ciclos no fue el tiempo
|
||||
de escribir el código, fue el tiempo de verlo mal en producción antes
|
||||
de poder juzgarlo — y en ambos casos el veredicto real no era sobre la
|
||||
paleta en sí, sino sobre verla mezclada con partes del sitio que
|
||||
todavía no se habían tocado.
|
||||
|
||||
## 2. Cronología completa
|
||||
|
||||
1. **Arcoíris original** — la identidad "juguetería" con la que arrancó
|
||||
el storefront: paleta de alta saturación (cian/violeta/fucsia/ámbar/
|
||||
amarillo/lima), `rounded-full` en casi todo, `font-black` como
|
||||
default. Nunca fue una decisión de marca, era el estado por defecto
|
||||
del scaffold inicial.
|
||||
2. **Intento de clon de Amazon** (descartado antes de implementarse) —
|
||||
la primera versión de ADR 0007 proponía clonar la estética visual de
|
||||
un competidor directamente. Se corrigió a adoptar *principios* de UX
|
||||
(jerarquía, densidad, señales de confianza), no la estética de nadie
|
||||
— ver la memoria de este cambio de dirección.
|
||||
3. **Terracota/espresso/pino/crema + Fraunces** ("cálido, confiable,
|
||||
ligeramente lúdico") — se implementó como *smoke test* aislado en
|
||||
producción (v1.0.176: solo el botón CTA de `ProductCard` en
|
||||
terracota + precio en Fraunces, todo lo demás sin tocar) y se
|
||||
revirtió. Dos motivos reales: (a) un token aislado rodeado del resto
|
||||
del esquema viejo (badges fucsia/amarillo neón) no es evaluable — el
|
||||
choque visual no era "la dirección de marca", era la mezcla
|
||||
incompleta; (b) terracota + serif cálida leía como *rústico/
|
||||
artesanal*, y el objetivo era premium/serio.
|
||||
4. **Ciruela/carbón/cobre "Atelier cálido"** (ADR 0007, Opción 2 de 3) —
|
||||
esta vez la implementación cubrió un conjunto completo de
|
||||
componentes que se ven juntos en la misma pantalla (tokens base,
|
||||
`button.tsx`, `badge.tsx`, `product-card.tsx`,
|
||||
`catalog-client.tsx`), evitando el error de proceso del punto
|
||||
anterior. Aun así, header, footer, home y página de producto/drawers
|
||||
quedaron deliberadamente pendientes de una siguiente pasada (ADR
|
||||
0007 §7). Resultado: se descartó — no convenció combinada con el
|
||||
resto del sitio sin cambiar. El catálogo aislado se veía coherente,
|
||||
pero el sitio completo (con el header/footer viejos alrededor)
|
||||
seguía sin leerse como una marca terminada.
|
||||
5. **"Navy & Coral"** (esta dirección, final) — marino/coral/coral
|
||||
claro + Poppins para momentos de marca. Ver especificación completa
|
||||
en §4.
|
||||
|
||||
## 3. Mejora de proceso: validar barato antes de implementar
|
||||
|
||||
A diferencia de los dos intentos anteriores, esta dirección se validó
|
||||
visualmente con el usuario mediante mockups de referencia simulados
|
||||
**fuera de este entorno, antes de tocar código real**. Ningún ciclo de
|
||||
implementación se gastó en generar opciones que después se
|
||||
descartarían por gusto — el código de esta ADR se escribe ya sobre una
|
||||
dirección aprobada.
|
||||
|
||||
Esto vale la pena dejarlo como práctica para el playbook de diseño de
|
||||
este proyecto: cuando el costo de deshacer una implementación en
|
||||
producción es alto (como pasó en los puntos 3 y 4 de §2), vale la pena
|
||||
invertir primero en una validación visual barata y rápida (mockup,
|
||||
preview, captura) antes de comprometer ciclos de implementación real,
|
||||
en vez de decidir la dirección *mientras* se implementa.
|
||||
|
||||
## 4. Especificación de marca
|
||||
|
||||
### Paleta
|
||||
|
||||
| Rol | Token | Valor |
|
||||
|---|---|---|
|
||||
| Ancla (header, footer, badge "Nuevo", fondo de hero) | `--color-ari-marino` | `#122844` |
|
||||
| Acento único de acción (CTA "Agregar al carrito", precio destacado) | `--color-ari-coral` | `#D85A30` |
|
||||
| Acento secundario (subtítulos sobre marino, ala inferior del isotipo) | `--color-ari-coral-claro` | `#F0997B` |
|
||||
| Fondo general | — | `#FFFFFF` (blanco puro; reemplaza `--color-ari-hueso`) |
|
||||
| Texto secundario / bordes | escala `slate-*` ya usada en el proyecto | sin token nuevo |
|
||||
|
||||
### Tipografía
|
||||
|
||||
- **Poppins, peso 700** — solo para los "momentos de marca": wordmark
|
||||
del logo, títulos de sección (`h1`/`h2`), precio de producto, texto
|
||||
de CTA. Es el único peso que se carga.
|
||||
- **Inter** (ya integrada) se mantiene para body/UI/navegación — no
|
||||
todo el sitio pasa a Poppins.
|
||||
- Domine (Opción 2 de ADR 0007) se elimina por completo, incluida su
|
||||
carga vía `next/font`.
|
||||
|
||||
### Isotipo
|
||||
|
||||
Mariposa geométrica simplificada, construida con 4 elipses (no el
|
||||
filigrana intrincado del logo original, que se perdía en tamaños
|
||||
chicos):
|
||||
|
||||
| Elemento | Parámetros | Color |
|
||||
|---|---|---|
|
||||
| Ala superior izquierda | elipse `rx=9 ry=7`, `cx=10 cy=8`, rotada -18° | `#D85A30` |
|
||||
| Ala superior derecha | elipse `rx=9 ry=7`, `cx=24 cy=8`, rotada 18° | `#D85A30` |
|
||||
| Ala inferior izquierda | elipse `rx=6 ry=5`, `cx=12 cy=16`, rotada -10° | `#F0997B` |
|
||||
| Ala inferior derecha | elipse `rx=6 ry=5`, `cx=22 cy=16`, rotada 10° | `#F0997B` |
|
||||
| Cuerpo | rectángulo `x=16 y=3 width=2 height=18`, redondeado | `#122844` |
|
||||
|
||||
Coordenadas base sobre `viewBox 34x24`, sobre fondo circular marino.
|
||||
Wordmark "ARI" (Poppins 700, blanco) + "shopping" debajo (Poppins 700,
|
||||
`#F0997B`, más chico, letter-spacing amplio).
|
||||
|
||||
Assets: `public/images/brand/logo-ari.svg` (lockup completo,
|
||||
reemplaza `logo-ari.png`) y `app/icon.svg` (versión reducida — solo
|
||||
círculo + mariposa, sin wordmark — favicon/app icon vía la convención
|
||||
de Next.js App Router).
|
||||
|
||||
## 5. Hallazgo: causa raíz del estado mixto anterior
|
||||
|
||||
Al auditar `navbar.tsx` para esta implementación se encontró que,
|
||||
desde el arranque de este proyecto de reskin, nunca se había tocado:
|
||||
una barra superior con gradiente `from-amber-300 via-yellow-200
|
||||
to-lime-200` y una línea decorativa `from-cyan-400 via-violet-500
|
||||
to-fuchsia-500`, ambas del esquema arcoíris original (punto 1 de §2).
|
||||
Esto confirma que el "estado mixto" visto en producción durante ADR
|
||||
0007 no era solo "header pendiente de una pasada futura" en abstracto
|
||||
— eran restos concretos y nunca inventariados del esquema anterior,
|
||||
conviviendo con cada iteración de paleta desde entonces sin que nadie
|
||||
los marcara como deuda. Se eliminan en la sub-fase 2 de esta
|
||||
implementación.
|
||||
|
||||
## 6. Plan de implementación
|
||||
|
||||
Por sub-fases, cada una con rama `fix/*`, diff mostrado y PR sin
|
||||
mergear hasta confirmación explícita del usuario. Cada sub-fase debe
|
||||
dejar el sitio en un estado internamente coherente (no fragmentos
|
||||
aislados en producción — la lección de los puntos 3 y 4 de §2) y debe
|
||||
confirmar con evidencia real (no supuesta) que el flujo de
|
||||
auto-refresh desde Medusa Admin (precio/descripción/imagen) sigue
|
||||
funcionando.
|
||||
|
||||
1. Tokens base + logo (`globals.css`, `logo-ari.svg`, favicon).
|
||||
2. Header + footer (`navbar.tsx` — incluida la limpieza de §5 —,
|
||||
`footer.tsx`, logo aplicado).
|
||||
3. Product card + grid de catálogo + badges.
|
||||
4. Home (hero, tiles de categoría, secciones).
|
||||
5. Página de producto + drawers de carrito/wishlist.
|
||||
|
||||
### Nota de implementación: alias de compatibilidad de tokens
|
||||
|
||||
La sub-fase 1 solo toca `globals.css`/`layout.tsx`/assets — no
|
||||
`catalog-client.tsx`, `product-card.tsx` ni `button.tsx`, que hoy
|
||||
siguen usando los nombres de token de ADR 0007
|
||||
(`ari-ciruela`, `ari-carbon-oscuro`, `ari-cobre`, `ari-carbon`,
|
||||
`ari-terracota-oscuro`, `ari-hueso`). Para no dejar esos usos sin
|
||||
estilo entre sub-fases, `globals.css` define esos nombres como alias
|
||||
temporales resueltos ya contra la paleta nueva. Cada sub-fase que
|
||||
toque esos archivos reemplaza el nombre de clase por el token
|
||||
definitivo; los alias se eliminan por completo al cerrar la sub-fase
|
||||
5.
|
||||
|
||||
## 7. Consecuencias
|
||||
|
||||
- El sitio completo adopta la paleta nueva en un solo despliegue desde
|
||||
la sub-fase 1 (vía los alias de §6), incluso antes de que cada
|
||||
componente migre al nombre de token definitivo — evita repetir el
|
||||
error de "token aislado rodeado del esquema viejo" de los puntos 3 y
|
||||
4 de §2.
|
||||
- Domine y su carga de fuente se eliminan; Poppins se agrega mínimo
|
||||
(solo peso 700).
|
||||
- Trabajo puramente de frontend: no requiere cambios en
|
||||
`commerce-backend`, `platform-infra`, ni CI nuevo.
|
||||
- `docs-portal` se actualiza con capturas/descripción del resultado
|
||||
final una vez cada sub-fase esté validada en producción, no antes.
|
||||
@@ -94,6 +94,7 @@ nav:
|
||||
- "0005 · Rediseño storefront": decisiones/0005-rediseno-storefront.md
|
||||
- "0006 · Motor de búsqueda y facetas": decisiones/0006-motor-busqueda-facetas.md
|
||||
- "0007 · Identidad visual propia": decisiones/0007-identidad-visual-propia.md
|
||||
- "0008 · Identidad Navy & Coral": decisiones/0008-identidad-navy-coral.md
|
||||
- Plantilla ADR: decisiones/plantilla-adr.md
|
||||
- Playbooks:
|
||||
- Crashloop Medusa: playbooks/incidente-crashloop-medusa.md
|
||||
|
||||
@@ -25,7 +25,7 @@ spec:
|
||||
runAsNonRoot: false
|
||||
containers:
|
||||
- name: app
|
||||
image: gitea.cruzcloud.net/devops/docs-portal:v1.0.175
|
||||
image: gitea.cruzcloud.net/devops/docs-portal:v1.0.181
|
||||
# El base saca TODAS las capabilities. Probado en vivo y
|
||||
# revertido: con drop: ALL (aunque se agregue NET_BIND_SERVICE
|
||||
# de vuelta) el propio entrypoint de nginx:1.27-alpine falla al
|
||||
|
||||
@@ -1,16 +1,26 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
@theme {
|
||||
/* 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;
|
||||
/* ADR 0008 ("Navy & Coral") -- reemplaza ADR 0007 (Opcion 2, "Atelier
|
||||
calido"). Ver docs-portal/docs/decisiones/0008-identidad-navy-coral.md */
|
||||
--color-ari-marino: #122844; /* ancla: header, footer, badge "Nuevo", fondo de hero */
|
||||
--color-ari-coral: #D85A30; /* acento unico de accion: CTA, precio destacado */
|
||||
--color-ari-coral-claro: #F0997B; /* acento secundario: subtitulos sobre marino, ala inferior del isotipo */
|
||||
|
||||
/* Alias de compatibilidad -- ADR 0007 definio estos nombres y hoy los
|
||||
siguen consumiendo catalog-client.tsx, product-card.tsx y button.tsx
|
||||
(migracion pendiente en las sub-fases 3-5 del ADR 0008). Se resuelven
|
||||
ya contra la paleta nueva para que ningun uso existente quede sin
|
||||
estilo entre sub-fases; se eliminan por completo al cerrar la
|
||||
sub-fase 5. No usar estos alias en código nuevo. */
|
||||
--color-ari-ciruela: var(--color-ari-coral);
|
||||
--color-ari-carbon-oscuro: var(--color-ari-marino);
|
||||
--color-ari-cobre: var(--color-ari-coral-claro);
|
||||
--color-ari-carbon: var(--color-ari-marino);
|
||||
--color-ari-terracota-oscuro: var(--color-ari-coral);
|
||||
--color-ari-hueso: #FFFFFF;
|
||||
|
||||
--font-display: var(--font-poppins), ui-sans-serif, system-ui, sans-serif;
|
||||
--animate-accordion-down: accordion-down .2s ease-out;
|
||||
--animate-accordion-up: accordion-up .2s ease-out;
|
||||
}
|
||||
@@ -21,10 +31,10 @@
|
||||
:root { color-scheme: light; }
|
||||
* { border-color: rgb(226 232 240); }
|
||||
html { scroll-behavior: smooth; }
|
||||
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; }
|
||||
body { margin: 0; background: #FFFFFF; color: var(--color-slate-900); 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(181 114 58 / .5); outline-offset: 3px; }
|
||||
::selection { background: rgb(91 50 86 / .2); color: var(--color-ari-carbon); }
|
||||
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgb(216 90 48 / .5); outline-offset: 3px; }
|
||||
::selection { background: rgb(216 90 48 / .15); color: var(--color-slate-900); }
|
||||
|
||||
.content-auto {
|
||||
content-visibility: auto;
|
||||
|
||||
@@ -0,0 +1,14 @@
|
||||
<!-- ADR 0008 ("Navy & Coral"). Version reducida del isotipo para favicon/
|
||||
app icon: solo circulo marino + mariposa, sin wordmark (no cabe
|
||||
legible a este tamano). Convencion de Next.js App Router: este
|
||||
archivo se sirve automaticamente como favicon/app icon. -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 34 34" role="img" aria-label="ARI shopping">
|
||||
<circle cx="17" cy="17" r="17" fill="#122844"/>
|
||||
<g transform="translate(0 5)">
|
||||
<ellipse cx="10" cy="8" rx="9" ry="7" transform="rotate(-18 10 8)" fill="#D85A30"/>
|
||||
<ellipse cx="24" cy="8" rx="9" ry="7" transform="rotate(18 24 8)" fill="#D85A30"/>
|
||||
<ellipse cx="12" cy="16" rx="6" ry="5" transform="rotate(-10 12 16)" fill="#F0997B"/>
|
||||
<ellipse cx="22" cy="16" rx="6" ry="5" transform="rotate(10 22 16)" fill="#F0997B"/>
|
||||
<rect x="16" y="3" width="2" height="18" rx="1" fill="#122844"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 895 B |
@@ -1,5 +1,5 @@
|
||||
import type { Metadata, Viewport } from "next";
|
||||
import { Domine, Inter } from "next/font/google";
|
||||
import { Inter, Poppins } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import { CartDrawer } from "@/components/cart/cart-drawer";
|
||||
import { Footer } from "@/components/layout/footer";
|
||||
@@ -21,15 +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: "#221D1A" };
|
||||
export const viewport: Viewport = { width: "device-width", initialScale: 1, themeColor: "#122844" };
|
||||
|
||||
// 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.
|
||||
// ADR 0008 ("Navy & Coral"): Poppins peso 700 para los "momentos de marca"
|
||||
// (wordmark, h1/h2, precio, CTA) + Inter para body/UI -- solo se carga el
|
||||
// peso 700, es el unico que usa --font-display.
|
||||
const inter = Inter({ subsets: ["latin"], variable: "--font-inter", display: "swap" });
|
||||
const domine = Domine({ subsets: ["latin"], variable: "--font-domine", display: "swap" });
|
||||
const poppins = Poppins({ subsets: ["latin"], weight: ["700"], variable: "--font-poppins", display: "swap" });
|
||||
|
||||
export default async function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
|
||||
const [products, categories] = await Promise.all([getProducts(), getCategories()]);
|
||||
return <html lang="es" className={`${inter.variable} ${domine.variable}`}><body><Navbar products={products} categories={categories} /><main>{children}</main><Footer /><CartDrawer /><WishlistDrawer /></body></html>;
|
||||
return <html lang="es" className={`${inter.variable} ${poppins.variable}`}><body><Navbar products={products} categories={categories} /><main>{children}</main><Footer /><CartDrawer /><WishlistDrawer /></body></html>;
|
||||
}
|
||||
@@ -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-ari-ciruela">
|
||||
<Link href="/catalog" prefetch={false} className="hover:text-ari-coral">
|
||||
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-ari-carbon">
|
||||
<span aria-current="page" className="text-ari-marino">
|
||||
{node.name}
|
||||
</span>
|
||||
) : (
|
||||
<Link href={`/catalog?category=${encodeURIComponent(node.name)}`} prefetch={false} className="hover:text-ari-ciruela">
|
||||
<Link href={`/catalog?category=${encodeURIComponent(node.name)}`} prefetch={false} className="hover:text-ari-coral">
|
||||
{node.name}
|
||||
</Link>
|
||||
)}
|
||||
@@ -342,23 +342,23 @@ export function CatalogClient({
|
||||
))}
|
||||
</nav>
|
||||
)}
|
||||
<span className="text-xs font-black uppercase tracking-[.18em] text-ari-ciruela">
|
||||
<span className="text-xs font-black uppercase tracking-[.18em] text-ari-coral">
|
||||
Catálogo completo
|
||||
</span>
|
||||
<h1 className="font-display mt-2 text-5xl font-bold tracking-tight text-ari-carbon">Todos los tesoros</h1>
|
||||
<h1 className="font-display mt-2 text-5xl font-bold tracking-tight text-ari-marino">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-lg border border-slate-100 bg-white p-6 shadow-lg shadow-ari-carbon-oscuro/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-marino/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-ari-cobre" />
|
||||
<SlidersHorizontal className="size-5 text-ari-coral-claro" />
|
||||
Filtros
|
||||
</strong>
|
||||
<button onClick={reset} className="text-xs font-black text-ari-ciruela">
|
||||
<button onClick={reset} className="text-xs font-black text-ari-coral">
|
||||
<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-ari-ciruela"
|
||||
className="w-full accent-ari-coral"
|
||||
/>
|
||||
<p className="mt-2 text-xs font-bold text-slate-500">
|
||||
Hasta ${maxPrice.toLocaleString("es-CO")}
|
||||
@@ -470,8 +470,8 @@ function Filter({
|
||||
onClick={() => onChange(value)}
|
||||
className={`rounded-md px-3 py-2 text-xs font-bold transition ${
|
||||
selected === value
|
||||
? "bg-ari-carbon-oscuro text-white"
|
||||
: "bg-slate-100 text-slate-600 hover:bg-ari-cobre/10"
|
||||
? "bg-ari-marino text-white"
|
||||
: "bg-slate-100 text-slate-600 hover:bg-ari-coral-claro/10"
|
||||
}`}
|
||||
>
|
||||
{value}
|
||||
|
||||
@@ -1,11 +1,10 @@
|
||||
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.1 · GitOps</div></footer>;
|
||||
return <footer className="bg-ari-marino 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 flex-col items-start gap-3"><img src="/images/brand/logo-ari.svg" alt="ARI shopping" className="h-11 w-auto" width={200} height={64} />{/* eslint-disable-line @next/next/no-img-element -- vector propio, next/image no optimiza SVG sin habilitar dangerouslyAllowSVG */}<p className="text-xs text-white/60">Tesoros para cada aventura.</p></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-ari-coral px-4 text-sm font-black text-white">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.1 · 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>;
|
||||
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-ari-coral-claro">{link}</Link>)}</div></div>;
|
||||
}
|
||||
@@ -1,6 +1,5 @@
|
||||
"use client";
|
||||
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { usePathname, useSearchParams } from "next/navigation";
|
||||
import { ChevronDown, Heart, LayoutGrid, Menu, MessageCircle, PackageCheck, ShoppingCart, UserRound } from "lucide-react";
|
||||
@@ -46,26 +45,27 @@ export function Navbar({ products, categories }: { products: Product[]; categori
|
||||
|
||||
return (
|
||||
<header className="sticky top-0 z-40 border-b border-slate-200/80 bg-white/95 shadow-sm backdrop-blur-xl">
|
||||
<div className="bg-gradient-to-r from-amber-300 via-yellow-200 to-lime-200 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 decoration-2 underline-offset-2">Compra segura con ARI</span>
|
||||
<div className="bg-ari-marino px-4 py-2 text-center text-xs font-black text-white sm:text-sm">
|
||||
Paga tus compras a cuotas · Envíos nacionales · <span className="underline decoration-ari-coral-claro decoration-2 underline-offset-2">Compra segura con ARI</span>
|
||||
</div>
|
||||
|
||||
<div className="relative overflow-visible bg-white">
|
||||
<div className="pointer-events-none absolute inset-x-0 top-0 h-1 bg-gradient-to-r from-cyan-400 via-violet-500 to-fuchsia-500" />
|
||||
<div className="mx-auto grid max-w-7xl grid-cols-[72px_1fr_auto] items-center gap-4 px-4 py-4 lg:grid-cols-[92px_minmax(420px,1fr)_auto] lg:gap-8">
|
||||
<Link href="/" className="relative size-16 overflow-hidden rounded-full border-2 border-slate-900 bg-black shadow-lg lg:size-20">
|
||||
<Image src="/images/brand/logo-ari.png" alt="ARI Shopping" fill priority sizes="80px" className="object-cover" />
|
||||
<div className="pointer-events-none absolute inset-x-0 top-0 h-1 bg-ari-coral" />
|
||||
<div className="mx-auto grid max-w-7xl grid-cols-[auto_1fr_auto] items-center gap-4 px-4 py-4 lg:gap-8">
|
||||
<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.svg" alt="ARI shopping" className="h-11 w-auto lg:h-14" width={200} height={64} />
|
||||
</Link>
|
||||
<PredictiveSearch />
|
||||
<div className="flex items-center gap-2">
|
||||
<Button variant="outline" size="icon" aria-label="Mi cuenta" className="hidden border-slate-300 bg-white text-slate-900 hover:border-violet-400 hover:bg-violet-50 sm:inline-flex" onClick={() => setAccountOpen(true)}><UserRound /></Button>
|
||||
<Button variant="outline" size="icon" aria-label={`Favoritos: ${wishlistCount}`} className="relative hidden border-slate-300 bg-white text-slate-900 hover:border-fuchsia-400 hover:bg-fuchsia-50 sm:inline-flex" onClick={openWishlist}>
|
||||
<Button variant="outline" size="icon" aria-label="Mi cuenta" className="hidden border-slate-300 bg-white text-slate-900 hover:border-ari-coral hover:bg-ari-coral/10 sm:inline-flex" onClick={() => setAccountOpen(true)}><UserRound /></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-violet-600 text-[10px] font-black text-white">{wishlistCount}</span>}
|
||||
{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 shadow-lg shadow-fuchsia-500/20">
|
||||
<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-yellow-300 text-[11px] font-black text-slate-950">{count}</span>
|
||||
<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>
|
||||
@@ -82,7 +82,7 @@ export function Navbar({ products, categories }: { products: Product[]; categori
|
||||
<SheetDescription>Categorías y colecciones del catálogo.</SheetDescription>
|
||||
</SheetHeader>
|
||||
<div className="flex-1 overflow-y-auto p-6">
|
||||
<p className="mb-3 text-xs font-black uppercase tracking-[.16em] text-fuchsia-600">Categorías</p>
|
||||
<p className="mb-3 text-xs font-black uppercase tracking-[.16em] text-ari-coral">Categorías</p>
|
||||
<div className="grid gap-2">
|
||||
<Suspense fallback={<MobileCategoryLinksFallback tree={tree} onNavigate={() => setMenuOpen(false)} />}>
|
||||
<MobileCategoryLinks tree={tree} onNavigate={() => setMenuOpen(false)} />
|
||||
@@ -90,9 +90,9 @@ export function Navbar({ products, categories }: { products: Product[]; categori
|
||||
</div>
|
||||
{collections.length > 0 && (
|
||||
<>
|
||||
<p className="mb-3 mt-8 text-xs font-black uppercase tracking-[.16em] text-violet-600">Colecciones</p>
|
||||
<p className="mb-3 mt-8 text-xs font-black uppercase tracking-[.16em] text-ari-marino">Colecciones</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{collections.map((collection) => <Link key={collection} href={`/catalog?collection=${encodeURIComponent(collection)}`} onClick={() => setMenuOpen(false)} className="rounded-full bg-slate-100 px-4 py-2 text-sm font-bold hover:bg-violet-100 hover:text-violet-700">{collection}</Link>)}
|
||||
{collections.map((collection) => <Link key={collection} href={`/catalog?collection=${encodeURIComponent(collection)}`} onClick={() => setMenuOpen(false)} className="rounded-full bg-slate-100 px-4 py-2 text-sm font-bold hover:bg-ari-coral/10 hover:text-ari-coral">{collection}</Link>)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
@@ -107,7 +107,7 @@ export function Navbar({ products, categories }: { products: Product[]; categori
|
||||
<Dialog open={accountOpen} onOpenChange={setAccountOpen}>
|
||||
<DialogContent className="max-w-lg p-7">
|
||||
<div className="pr-10">
|
||||
<span className="text-xs font-black uppercase tracking-[.16em] text-violet-600">Atención personalizada</span>
|
||||
<span className="text-xs font-black uppercase tracking-[.16em] text-ari-coral">Atención personalizada</span>
|
||||
<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">
|
||||
@@ -136,16 +136,16 @@ function useCategoryNavigationState() {
|
||||
function pillClass(active: boolean): string {
|
||||
return `shrink-0 rounded-full px-4 py-2 text-sm font-extrabold transition ${
|
||||
active
|
||||
? "bg-gradient-to-r from-cyan-500 to-violet-500 text-white shadow-lg shadow-violet-950/30"
|
||||
: "text-white/90 hover:bg-gradient-to-r hover:from-cyan-500 hover:to-violet-500 hover:text-white"
|
||||
? "bg-white text-ari-marino shadow-lg shadow-black/10"
|
||||
: "text-white/90 hover:bg-white/10 hover:text-white"
|
||||
}`;
|
||||
}
|
||||
|
||||
function mobileLinkClass(active: boolean): string {
|
||||
return `rounded-2xl border px-4 py-3 font-extrabold transition ${
|
||||
active
|
||||
? "border-violet-500 bg-violet-50 text-violet-700"
|
||||
: "border-slate-200 hover:border-cyan-400 hover:bg-cyan-50"
|
||||
? "border-ari-coral bg-ari-coral/5 text-ari-coral"
|
||||
: "border-slate-200 hover:border-ari-coral/50 hover:bg-ari-coral/5"
|
||||
}`;
|
||||
}
|
||||
|
||||
@@ -170,7 +170,7 @@ function CategoryNavBar({
|
||||
isAllActive: boolean;
|
||||
}) {
|
||||
return (
|
||||
<nav className="border-b-4 border-fuchsia-500 bg-slate-950 text-white">
|
||||
<nav className="bg-ari-marino text-white">
|
||||
<div className="mx-auto flex max-w-7xl items-center gap-1 px-4 py-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
@@ -227,7 +227,7 @@ function DepartmentsMegaMenu({ tree, isActive }: { tree: CategoryNode[]; isActiv
|
||||
</button>
|
||||
|
||||
{open && (
|
||||
<div className="absolute left-0 top-full z-50 mt-1 w-[min(92vw,64rem)] rounded-2xl border border-slate-800 bg-slate-950 p-6 shadow-2xl">
|
||||
<div className="absolute left-0 top-full z-50 mt-1 w-[min(92vw,64rem)] rounded-2xl border border-white/10 bg-ari-marino p-6 shadow-2xl">
|
||||
<div className="grid grid-cols-2 gap-x-6 gap-y-5 sm:grid-cols-3 lg:grid-cols-6">
|
||||
{tree.map((root) => (
|
||||
<div key={root.id}>
|
||||
@@ -237,7 +237,7 @@ function DepartmentsMegaMenu({ tree, isActive }: { tree: CategoryNode[]; isActiv
|
||||
aria-current={isActive(root.name) ? "page" : undefined}
|
||||
onClick={() => setOpen(false)}
|
||||
className={`block text-sm font-black uppercase tracking-wide transition ${
|
||||
isActive(root.name) ? "text-fuchsia-400" : "text-white hover:text-fuchsia-400"
|
||||
isActive(root.name) ? "text-ari-coral-claro" : "text-white hover:text-ari-coral-claro"
|
||||
}`}
|
||||
>
|
||||
{root.name}
|
||||
@@ -251,7 +251,7 @@ function DepartmentsMegaMenu({ tree, isActive }: { tree: CategoryNode[]; isActiv
|
||||
prefetch={false}
|
||||
aria-current={isActive(child.name) ? "page" : undefined}
|
||||
onClick={() => setOpen(false)}
|
||||
className={`block text-sm transition ${isActive(child.name) ? "font-bold text-violet-300" : "text-white/70 hover:text-white"}`}
|
||||
className={`block text-sm transition ${isActive(child.name) ? "font-bold text-ari-coral-claro" : "text-white/70 hover:text-white"}`}
|
||||
>
|
||||
{child.name}
|
||||
</Link>
|
||||
|
||||
@@ -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-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">
|
||||
<article className="group flex h-full flex-col overflow-hidden rounded-lg border border-slate-100 bg-white shadow-lg shadow-ari-marino/5 transition duration-300 hover:-translate-y-1.5 hover:shadow-2xl hover:shadow-ari-coral/10">
|
||||
<div className="relative aspect-square overflow-hidden bg-white">
|
||||
<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-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 className="absolute left-3 top-3 flex gap-2">{discountPercent && discountPercent > 0 && <Badge className="bg-ari-coral text-white">-{discountPercent}%</Badge>}{product.isNew && <Badge className="bg-ari-marino text-white">Nuevo</Badge>}{product.featured && <Badge className="bg-ari-coral-claro 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-coral text-white" : "bg-white/95 text-slate-900 hover:text-ari-coral"}`} 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-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>
|
||||
<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-coral-claro/10 px-2 py-1 text-ari-coral-claro">{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-marino group-hover:text-ari-coral">{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">
|
||||
@@ -55,7 +55,7 @@ export function ProductCard({ product, priority = false }: { product: Product; p
|
||||
onClick={() => setSelectedVariantId(variant.id)}
|
||||
className={`rounded-md border px-2.5 py-1 text-xs font-bold transition ${
|
||||
selectedVariantId === variant.id
|
||||
? "border-ari-ciruela bg-ari-ciruela/10 text-ari-ciruela"
|
||||
? "border-ari-coral bg-ari-coral/10 text-ari-coral"
|
||||
: "border-slate-200 text-slate-600 hover:border-slate-400"
|
||||
} ${!variant.available ? "cursor-not-allowed opacity-40" : ""}`}
|
||||
>
|
||||
@@ -70,7 +70,7 @@ 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="font-display text-base font-bold text-ari-carbon">{formatMoney(product.price, product.currency)}</strong>
|
||||
<strong className="font-display text-base font-bold text-ari-marino">{formatMoney(product.price, product.currency)}</strong>
|
||||
</div>
|
||||
<Button variant="primary" size="sm" onClick={() => addItem(product, selectedVariantId)}><ShoppingBag className="size-4" />Agregar</Button>
|
||||
</div>
|
||||
|
||||
@@ -25,7 +25,7 @@ spec:
|
||||
runAsUser: 1001
|
||||
containers:
|
||||
- name: app
|
||||
image: gitea.cruzcloud.net/devops/ecommerce-frontend:v1.0.177
|
||||
image: gitea.cruzcloud.net/devops/ecommerce-frontend:v1.0.182
|
||||
env:
|
||||
- name: HEADLESS_PROVIDER
|
||||
value: medusa
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 8.0 KiB |
@@ -0,0 +1,15 @@
|
||||
<!-- ADR 0008 ("Navy & Coral"). Isotipo: mariposa geometrica de 4 elipses
|
||||
sobre circulo/campo marino + wordmark "ARI shopping".
|
||||
Ver docs-portal/docs/decisiones/0008-identidad-navy-coral.md -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 64" role="img" aria-label="ARI shopping">
|
||||
<rect width="200" height="64" rx="12" fill="#122844"/>
|
||||
<g transform="translate(14 20)">
|
||||
<ellipse cx="10" cy="8" rx="9" ry="7" transform="rotate(-18 10 8)" fill="#D85A30"/>
|
||||
<ellipse cx="24" cy="8" rx="9" ry="7" transform="rotate(18 24 8)" fill="#D85A30"/>
|
||||
<ellipse cx="12" cy="16" rx="6" ry="5" transform="rotate(-10 12 16)" fill="#F0997B"/>
|
||||
<ellipse cx="22" cy="16" rx="6" ry="5" transform="rotate(10 22 16)" fill="#F0997B"/>
|
||||
<rect x="16" y="3" width="2" height="18" rx="1" fill="#122844"/>
|
||||
</g>
|
||||
<text x="64" y="38" font-family="Poppins, ui-sans-serif, system-ui, sans-serif" font-weight="700" font-size="26" fill="#FFFFFF">ARI</text>
|
||||
<text x="64" y="53" font-family="Poppins, ui-sans-serif, system-ui, sans-serif" font-weight="700" font-size="11" letter-spacing="2.5" fill="#F0997B">shopping</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
Reference in new issue
Block a user