Marca
Dónde están el nombre, el logotipo, los iconos, los colores y las fuentes del producto, y qué cambiar para que sea tu propia marca.
Para el paquete Full Stack
Dónde está la marca
La marca se define en archivos, no en una pantalla de ajustes. Las rutas están dentro de dashboard/.
| Qué | Dónde |
|---|---|
| Nombre, descripción, enlaces, contacto | src/config/brand.config.ts |
| El logotipo junto al nombre | src/components/icons/KinoraMark.tsx, dibujado en código en lugar de un archivo de imagen |
| 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 |
| El crédito del pie de página | src/config/author.config.ts |
| Colores | src/styles/theme-variables.css |
| Fuentes | src/app/layout.tsx |
| Textos | messages/<namespace>/<locale>.json, y las etiquetas de la barra lateral en src/layouts/dashboard/sidebar/config/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
El producto viene como Kinora (كينورا en árabe). Todo está en BRAND_CONFIG, en src/config/brand.config.ts; los campos de texto tienen un valor en y otro ar.
| Campo | Dónde aparece |
|---|---|
name | La barra lateral junto al logotipo, la barra superior de las páginas de inicio de sesión, registro y contraseña, el pie de página del panel, el título de la tarjeta de bienvenida, el banner de análisis de actividad y el creador de una ruta GPX exportada. |
version | El pie de página del panel, después del nombre. |
company | El nombre de la organización que leen los buscadores. |
meta.title, meta.description, meta.keywords, meta.author | El título de la pestaña del navegador, y la descripción y las palabras clave de cada página. |
meta.ogImage, meta.twitterImage | La imagen que se muestra cuando se comparte una página, una ruta dentro de public/. Las dos vienen como el icono de la aplicación de 512 px. |
domain.url | La dirección base de los metadatos para compartir. Viene como https://yourdomain.com: pon la tuya. |
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. |
links, contact | Los datos de la organización que leen los buscadores. Vienen apuntando al creador de la plantilla: sustitúyelos. |
El nombre también aparece en algunos mensajes: la tarjeta de bienvenida en messages/dashboard/en.json ("Welcome to Kinora") y los saludos del asistente en messages/ai-assistant/en.json ("Ask Kinora about…"), con sus equivalentes ar.json. Busca Kinora y كينورا en las dos carpetas.
El logotipo y los iconos
- El logotipo, dos chevrones ascendentes, es el SVG de
src/components/icons/KinoraMark.tsx. Toma su color del tema, así que se ve bien en claro y en oscuro. Sustituye sus trazados por tu propio logotipo, o muestra tu propio logo en su lugar ensrc/layouts/dashboard/sidebar/components/SidebarBrand.tsxy en la página de inicio de sesión (src/layouts/auth/login/components/AuthTopBar.tsxyAuthPanel.tsx). - El icono de la pestaña del navegador es
src/app/favicon.icoconicon0.svgyicon1.png;apple-icon.pnges el icono de la pantalla de inicio del iPhone. - La aplicación instalada usa
public/web-app-manifest-192x192.pngypublic/web-app-manifest-512x512.png, quebrand.config.tstambién usa como imagen para compartir. Mantén los nombres de archivo, o cambia las rutas enbrand.config.ts.
public/assets/images/logo-for-lightmode.png y logo-for-darkmode.png también vienen incluidos, pero ninguna pantalla los muestra: solo los lee la barra de navegación de src/layouts/app/NavBar, y ninguna página muestra esa barra. Reemplazarlos no cambia nada en pantalla.
El crédito del pie de página
El pie de página del panel muestra el año, name y version en un lado y "by Aniq UI" en el otro, un enlace al creador de la plantilla. El pie del cuadro de búsqueda lleva el mismo crédito. Ambos lo leen de src/config/author.config.ts (name, url, byLabel) y lo dibujan en src/layouts/dashboard/dashboardFooter.tsx y src/components/SearchModal/components/SearchFooter.tsx.
Colores
Cada color es un token en src/styles/theme-variables.css, con un bloque para el tema claro y otro para el oscuro. El color de acento es lima: --primaryColor es #9ae600 en los dos, con --primaryColorHover y los tokens --accent-* al lado para texto, brillo y degradados. Cámbialos y todos los botones, anillos y gráficos que usan el acento los siguen.
- Cada cuenta también puede elegir su propio acento y tema en Settings, en Appearance. Esa elección se guarda con la cuenta y reconstruye los tokens de acento a partir de ella.
manifest.themeColor(#9AE600) ythemeenbrand.config.tsson los colores propios del navegador, fuera de la página: ajústalos para que coincidan.
Fuentes
Se cargan dos fuentes de Google en src/app/layout.tsx mediante next/font: Inter para el texto latino e IBM Plex Sans Arabic para el árabe. Cambia cualquiera de esas importaciones por otra fuente de next/font/google, manteniendo su nombre variable.
Textos
Cada palabra visible está en messages/, una carpeta por namespace con un en.json y un ar.json en cada una. Cambia el valor, mantén la clave y cámbialo en los dos archivos.
En la API
La API no guarda ningún logo ni color. La carga de datos escribe Kinora en dos sitios que quizá quieras cambiar: el ajuste de aplicación site_name (se guarda, pero nada lo lee) y el dispositivo "Kinora Band Pro" en back-end/src/database/seeders/fitness-devices-data.ts.