Marca
Dónde están el nombre, el logotipo, los iconos, los colores y las fuentes de la tienda en cada aplicación, y qué cambiar para que sea tu propia marca.
Para el paquete Full Stack
Dónde está la marca
La marca se configura en archivos, no en el panel. La tienda y el panel de administración tienen cada uno sus propias copias, así que cambia cada aplicación que publiques.
| Qué | Tienda (storefront/) | Panel de administración (admin-dashboard/) |
|---|---|---|
| Nombre, descripción, contacto, enlaces | src/config/brand.config.ts | src/config/brand.config.ts |
| Logotipo | El nombre, escrito como texto por src/layouts/app/NavBar/components/Logo.tsx | public/assets/images/logo-for-lightmode.png y logo-for-darkmode.png |
| Favicon e iconos de la aplicación | src/app/ (favicon.ico, icon0.svg, icon1.png, apple-icon.png) y public/web-app-manifest-192x192.png y -512x512.png | Los mismos archivos en sus propios src/app/ y public/ |
| Colores | src/styles/theme-variables.css | src/styles/theme-variables.css |
| Fuentes | src/app/layout.tsx y src/styles/base.css | Ninguna configurada: la pila de fuentes del sistema |
| Textos | messages/<namespace>/<locale>.json | messages/ y las etiquetas de la barra lateral en navigationData.ts |
yarn dev muestra un cambio al instante. Una versión de producción compila la marca dentro, así que vuelve a ejecutar yarn build, o docker compose up --build para el paquete Full Stack.
El nombre en la tienda
La tienda se entrega como STORE (ستور en árabe). Todo está en BRAND_CONFIG, en storefront/src/config/brand.config.ts; los campos de texto tienen un valor en y uno ar.
| Campo | Dónde aparece |
|---|---|
storeName | El logotipo: una marca de texto en la barra de navegación y en el pie de página, y el copyright del pie de página. |
name | La pestaña del navegador (Page | Name), el nombre del sitio en la vista previa al compartir y los datos del sitio web que leen los buscadores. |
company | El nombre de la organización que leen los buscadores. |
meta.title, meta.description, meta.keywords, meta.author | El título de la página de inicio y la descripción y las palabras clave por defecto. |
meta.ogImage, meta.twitterImage | La imagen que se muestra cuando se comparte una página, una ruta dentro de public/. Se entrega con la foto principal de la página de inicio. |
logo.icon | El logotipo de la organización que leen los buscadores. |
theme.light, theme.dark | El color de la barra de herramientas del navegador en los móviles. |
manifest | El nombre, los colores y los iconos de la aplicación instalada. |
contact.email, contact.phone, contact.address | La columna de contacto del pie de página y la página de contacto. Se entregan con datos de ejemplo: sustitúyelos. |
links.instagram, links.twitter, links.facebook, links.linkedin | Los iconos sociales del pie de página, como URL completas (twitter se muestra como X). Cada uno que rellenes recibe un icono; los vacíos se ocultan. Se entregan vacíos, así que una tienda nueva no muestra ninguna fila social. Las mismas URL se indican a los buscadores como los perfiles de la organización. |
La dirección pública del sitio viene de NEXT_PUBLIC_SITE_URL, no de este archivo. Los textos incluidos describen una tienda de moda masculina: las descripciones de brand.config.ts, la página de inicio en messages/home/ y los títulos de las páginas en messages/seo/ son los lugares donde reescribirlos.
El nombre en el panel de administración
El panel se entrega como Aniq Dashboard. Todo está en BRAND_CONFIG, en admin-dashboard/src/config/brand.config.ts; los campos de texto tienen un valor en y uno ar.
| Campo | Dónde aparece |
|---|---|
name | El título de la pestaña del navegador en cada página, el nombre en la cabecera, el nombre del sitio en la vista previa al compartir y el pie de página. |
company | La línea "by" del pie de página, y la organización que leen los buscadores. |
version | El pie de página. |
logo.alt | La etiqueta del logotipo para lectores de pantalla en la página de inicio de sesión. |
logo.icon | El logotipo de la organización que leen los buscadores. No se dibuja en pantalla. |
meta | El título, la descripción, las palabras clave y el autor por defecto, y la imagen que se muestra cuando se comparte un enlace al panel. |
domain.url | La base para los enlaces absolutos de los metadatos. Viene como https://yourdomain.com: pon la propia dirección del panel de administración. |
theme, manifest | El color de la barra de herramientas del navegador, y el nombre, los colores y los iconos de la aplicación instalada. |
contact, links | El correo, el teléfono y los perfiles de la organización, solo para los buscadores. |
El panel se entrega como Aniq Dashboard, con su icono de aplicación (/web-app-manifest-512x512.png) como imagen al compartir. Apunta meta.ogImage y meta.twitterImage a tu propio archivo dentro de public/; una imagen de 1200 por 630 es la que mejor llena las tarjetas de vista previa grandes.
Logotipo e iconos
- El logotipo de la tienda es su nombre en texto, a partir de
storeName, en la barra de navegación (src/layouts/app/NavBar/components/Logo.tsx) y en el pie de página (src/layouts/app/footer/components/FooterBrandIntro.tsx). Para usar una imagen en su lugar, pon tu propia imagen enLogo.tsx. Los archivoslogo-for-lightmode.pngylogo-for-darkmode.pngde la tienda no se usan. - El logotipo del panel, en la cabecera y en la página de inicio de sesión, son dos imágenes, una por tema: sustituye
public/assets/images/logo-for-lightmode.pngylogo-for-darkmode.png, conservando sus nombres.src/styles/theme-variables.cssapunta a ellas mediante--logo-bg-image. - Sustituye el favicon y los iconos de la aplicación en
src/app/ypublic/de cada aplicación, conservando los nombres de los archivos, para que los manifiestos y el navegador los sigan encontrando.
Colores y temas
Cada aplicación define sus colores como variables CSS en src/styles/theme-variables.css: un conjunto bajo :root para el tema claro y otro bajo .dark para el tema oscuro. El color de acento es --primaryColor, #ee8038 en ambas aplicaciones.
| Variable | Qué colorea |
|---|---|
--primaryColor, --primaryColorHover | Botones, enlaces y resaltados |
--accent-text | Texto en color de acento sobre superficies claras (solo en la tienda) |
--background | La página |
--surface, --surface-hover | Tarjetas, paneles y su estado al pasar el cursor (la tienda añade --surface-elevated) |
--text, --text-muted | Texto principal y texto secundario |
--border | Separadores y contornos de los campos |
- Cambia un color en ambos conjuntos, para que los dos temas sigan coordinados.
- El tema sigue al del sistema del visitante hasta que elige uno con el selector, que entonces se recuerda en el navegador.
themeenbrand.config.tses solo el color de la barra de herramientas del navegador, no el de la interfaz.
Fuentes
La tienda carga tres Google Fonts con un solo enlace en src/app/layout.tsx: Plus Jakarta Sans para todo el texto latino, aplicada a body en src/styles/base.css; Zain para el texto árabe, en el mismo archivo; e IBM Plex Sans Arabic para los titulares en árabe, mediante la clase .font-display-ar en src/styles/utilities.css.
Para cambiar una, sustituye su familia en el enlace de Google Fonts de layout.tsx y luego el font-family correspondiente en esos archivos CSS. Elige una fuente árabe que tenga los pesos que usan las páginas.
El panel de administración no carga ninguna fuente web y usa la pila de fuentes del sistema. Si quieres una, añádela de la misma forma.
Encuentra cada mención del nombre
Los mensajes de la tienda no repiten el nombre: el copyright del pie de página lo rellena a partir de storeName. El nombre del panel aparece en sus propios textos. Revisa ambas aplicaciones:
storefrontgrep -rn "STORE\|ستور" src messagesadmin-dashboardgrep -rn "Aniq\|أنيق" src messagesLa API
La API no tiene marca propia y no envía correos. Sus mensajes de inicio de sesión y de error son texto plano en back-end/src/i18n/translations/<locale>/.