Haz que sea tu marca

Dónde cambiar el nombre, los metadatos, el logo, los iconos, los colores, las fuentes y las imágenes del panel.

Para el paquete Front + Back

Todas las rutas de abajo están dentro de la carpeta del panel: front-end en Full Stack, la propia carpeta en el paquete Admin Dashboard. Ejecuta yarn dev mientras editas: la página se recarga cada vez que guardas.

Para cambiar	Edita
El nombre, los metadatos de la página y el nombre y la versión del pie de página	`src/config/brand.config.ts`
El logotipo	`public/assets/images/logo-for-lightmode.png` y `logo-for-darkmode.png`
Los iconos	`src/app/favicon.ico`, `icon0.svg`, `icon1.png`, `apple-icon.png` y los dos `web-app-manifest-*.png` en `public/`
Los colores	`src/styles/theme-variables.css`
La fuente árabe	`src/app/layout.tsx` y `src/styles/base.css`
Las palabras en pantalla y los títulos de las pestañas	`messages/<namespace>/en.json` y `ar.json`
La dirección del sitio	`NEXT_PUBLIC_BASE_URL` en `.env`, o un argumento de construcción de Docker

Nombre y metadatos

Un único objeto, BRAND_CONFIG en src/config/brand.config.ts, contiene la marca en inglés y en árabe allí donde una persona la lee. El nombre es Aniq Dashboard de fábrica.

Campo	Se usa para
`name`	Los títulos de las pestañas del navegador (`Users \| Aniq Dashboard`) y el pie de página del panel
`company`	El pie de página del panel, después de "by", y los datos estructurados de Organization en el encabezado de la página
`version`	La versión del pie de página
`logo.icon`, `logo.alt`	El icono de los datos estructurados y el logo de imagen de la barra lateral
`meta.title`, `meta.description`, `meta.keywords`, `meta.author`	Los metadatos de la página
`meta.ogImage`, `meta.twitterImage`	La imagen de vista previa cuando se comparte un enlace. Pon el archivo en `public/` y da su ruta.
`theme.light`, `theme.dark`	El color de la barra de direcciones del navegador en cada modo
`manifest`	El nombre, el nombre corto, los colores y los iconos de la aplicación instalada
`links`, `contact`	Los datos estructurados de Organization. Quita lo que no tengas.

El logotipo

El logo de la barra lateral y del encabezado es una imagen de fondo que sigue al tema: public/assets/images/logo-for-lightmode.png en modo claro y logo-for-darkmode.png en modo oscuro. Reemplaza los dos archivos y conserva los nombres, o apunta --logo-bg-image a otros archivos en src/styles/theme-variables.css, una vez en el bloque claro y otra en el oscuro.

Iconos

Archivo	Qué es
`src/app/favicon.ico`	El icono de la pestaña del navegador
`src/app/icon0.svg`, `src/app/icon1.png`	Los iconos que Next.js enlaza en el encabezado de la página
`src/app/apple-icon.png`	El icono en la pantalla de inicio de un iPhone o iPad
`public/web-app-manifest-192x192.png`, `public/web-app-manifest-512x512.png`	Los iconos de la aplicación instalada, listados en `manifest.icons`

Colores

Cada color es una variable CSS en src/styles/theme-variables.css, definida una vez para el modo claro (:root) y otra para el modo oscuro. El color de la marca es --primaryColor, con --primaryColorHover; las superficies, los bordes y el texto tienen sus propias variables en el mismo archivo. Cambia un valor allí y todas las pantallas lo siguen.

src/styles/theme-variables.css

--primaryColor: #2c2c2c;
--primaryColorHover: #1a1a1a;

Los componentes usan las variables como bg-[var(--surface)], text-[var(--text-muted)] y similares, así que un componente nuevo conserva ambos temas si hace lo mismo.

Fuentes

El texto en inglés usa la pila de fuentes del sistema. Las páginas en árabe usan IBM Plex Sans Arabic, cargada desde Google Fonts mediante next/font en src/app/layout.tsx y aplicada en src/styles/base.css cuando la página está en árabe. La fuente se descarga al construir la aplicación y luego la sirve la propia aplicación. Para usar otra fuente, impórtala desde next/font/google en layout.tsx en su lugar y conserva el nombre de variable, --font-sans-arabic.

Imágenes

Archivo	Dónde aparece
`public/assets/images/login/login.png`	La ilustración de la página de inicio de sesión
`public/assets/images/avatar/sphere-light.png`, `sphere-dark.png`	El avatar del asistente de IA junto a sus respuestas
`public/assets/images/avatar/person/*.png`, `public/assets/images/project/project.png`	Las imágenes de los administradores, usuarios y proyectos de ejemplo

Textos y títulos de página

Todas las palabras en pantalla vienen de los archivos de mensajes en messages/<namespace>/en.json y ar.json. Los títulos de las pestañas del navegador vienen de messages/metadata/<locale>.json y se muestran como el título de la página seguido del nombre. Edita los dos idiomas cuando cambies un texto.

Idiomas

Lista de comprobación

Nombres, metadatos y enlaces en src/config/brand.config.ts.
NEXT_PUBLIC_BASE_URL definido con tu dirección.
Los dos archivos de logo.
Los iconos en src/app/ y public/.
--primaryColor y los demás colores en src/styles/theme-variables.css.
Los textos en messages/, en los dos idiomas.