Marca

Haz tuyos el sitio web y el panel: el nombre, el logotipo y los iconos, los colores y la tipografía, los datos de contacto y los textos para los buscadores.

Para el paquete Full Stack

Dónde está la marca

Qué	Sitio web (`storefront/`)	Panel (`admin-dashboard/`)
Nombres, logotipo, dominio, contacto, enlaces	`src/config/brand.config.ts`	`src/config/brand.config.ts`, más el nombre en `messages/layouts/`
Colores	`src/styles/theme-variables.css`	`src/styles/theme-variables.css`
Archivos del logotipo e iconos	`public/brand/`, `public/`, `src/app/`	`public/brand/`, `public/`, `src/app/icon.svg`
Textos	`messages/`	`messages/`

Cada color es un token definido una vez para el tema claro y otra para el tema oscuro. Nada en el marcado tiene un color propio, así que un token cambiado llega a todas las páginas.

El nombre del sitio web

En storefront/src/config/brand.config.ts, cada nombre tiene un valor en inglés y otro en árabe:

storefront/src/config/brand.config.ts

name:      { en: "Food Studio", ar: "فود ستوديو" },   // the restaurant
company:   { en: "Food Studio", ar: "فود ستوديو" },   // legal or trading name
shortName: { en: "Food Studio", ar: "فود ستوديو" },   // tab titles and the app icon label
storeName: "Food Studio",                    // the logo link's accessible name

El nombre llega a los títulos de las páginas, al copyright del pie de página, al manifiesto de la aplicación instalable y a los datos estructurados que leen los buscadores.

El logotipo y los iconos del sitio web

El encabezado muestra un archivo de logotipo por idioma y tema, en storefront/public/brand/. Cada uno es el logotipo completo, símbolo y letras en una sola imagen.

Archivo	Se usa en
`public/brand/wordmark-white.webp`	Inglés, tema oscuro
`public/brand/wordmark-master.webp`	Inglés, tema claro
`public/brand/wordmark-ar-white.webp`	Árabe, tema oscuro
`public/brand/wordmark-ar-master.webp`	Árabe, tema claro

Sustitúyelos por los tuyos e indica el ancho de cada archivo, a una altura de 176, en LOCKUPS en src/layouts/app/NavBar/components/Logo.tsx.
Los iconos de la pantalla de inicio son public/web-app-manifest-192x192.png y public/web-app-manifest-512x512.png; los iconos del navegador son favicon.ico, icon0.svg, icon1.png y apple-icon.png en src/app/.
La estrella de la sección de recompensas es public/brand/rewards-star.svg.

Los colores y la tipografía del sitio web

Token	Rol
`--primaryColor`	Botones, estados seleccionados, el rojo de la marca
`--heading-red`	Las palabras de color en los títulos destacados

Ambos están en storefront/src/styles/theme-variables.css, una vez por tema. Comprueba que el texto sobre tu nuevo color de marca sigue teniendo un contraste de 4,5 a 1 en ambos temas. La tipografía es Montserrat para los títulos destacados, Inter para el texto latino e IBM Plex Sans Arabic para el árabe, cargadas en src/app/layout.tsx. Los colores de la barra del navegador y de la pantalla de bienvenida son theme y manifest en la configuración de marca.

Resultados de búsqueda, compartir y el dominio

meta en la configuración de marca contiene el título, la descripción y las palabras clave de la página de inicio en los dos idiomas, y la imagen para compartir, public/og-image.jpg a 1200 por 630. Sustituye esa imagen por la tuya.
Cada una de las demás páginas toma su título y su descripción de messages/seo/en.json y messages/seo/ar.json. La página de un plato usa el nombre, la descripción y la primera imagen del propio plato.
domain.url es la base de cada dirección canónica, del mapa del sitio y del archivo robots. Configúralo con tu dirección real antes de desplegar.

Datos de contacto y enlaces

contact en la configuración de marca contiene el correo, el teléfono y la dirección generales del restaurante, y links los enlaces al sitio web y a las redes sociales. La dirección solo se muestra cuando la API no tiene ninguna cocina que mostrar: las direcciones, los teléfonos y los horarios de las cocinas en las páginas de contacto y de ubicaciones vienen de las cocinas que editas en el panel.

El nombre, el logotipo y los colores del panel

Nombre: messages/layouts/en.json y ar.json, bajo brand y navbar, contienen el nombre, el título de la página, la descripción y la línea del pie de página. name y company en src/config/brand.config.ts son esos mismos nombres donde se necesita texto fuera de una traducción. Busca "Food Studio" en messages/ para encontrar el resto.
Logotipo: sustituye mark.svg, wordmark-white.webp, wordmark-master.webp, wordmark-ar-white.webp y wordmark-ar-master.webp en public/brand/, conservando los nombres, o apunta logo en la configuración de marca a archivos nuevos con su ancho a una altura de 176. Los iconos de la aplicación instalable son los dos archivos web-app-manifest de public/, y el favicon es src/app/icon.svg.
Colores: --primaryColor y --on-primary (el color de la marca y el texto sobre él), --brand-highlight y --brand-text (el color de la marca como texto o contorno), --background, --surface y --border, --text y --text-muted, y --errorColor, --success y --warning, en src/styles/theme-variables.css, una vez por tema.
Tipografía: el token --font-sans en src/styles/base.css, Inter Variable por defecto.
Dirección: NEXT_PUBLIC_DASHBOARD_URL en el .env del panel.

Los datos propios del restaurante

La carga de datos guarda el nombre, el eslogan, el correo de soporte y el teléfono del restaurante como ajustes: site_name, site_tagline, support_email y support_phone. El personal los cambia en el panel en Settings, Restaurant, All settings by key. Los nombres, las direcciones y los datos de contacto de las cocinas también se editan allí.

Textos y textos legales

Cada frase visible está en messages/, una carpeta por área con en.json y ar.json. Reescribe los textos en los dos archivos. La política de privacidad y las condiciones del servicio de messages/legal están escritas para un restaurante ficticio: sustitúyelas por textos que se ajusten a tu negocio y a tu país antes de pasar a producción.

Idiomas