Marca

Dónde está la marca

La marca se define en archivos, no en el panel de administración. El sitio para estudiantes y el panel de administración tienen cada uno su propia copia, así que cambia cada aplicación que publiques.

El nombre en el sitio para estudiantes

Las rutas están dentro de frontend/.

La dirección pública del sitio viene de NEXT_PUBLIC_SITE_URL, no de estos archivos.

• Ajustes del sitio para estudiantes y del panel de administración

El nombre también aparece en los textos: la línea de copyright del pie de página, el nombre accesible del logotipo (brand.logoLabel en messages/layouts), las páginas de inicio y de información, las páginas de inicio de sesión y las páginas legales. Encuentra todas las apariciones en ambos idiomas:

grep -rn "Learnio" messages
grep -rn "ليرنيو" messages

• Hay un solo texto escrito en el código: el hashtag LearnioLMS en src/components/ui/ShareModal.tsx.
• Los términos y la política de privacidad en messages/legal incluyen datos de contacto de ejemplo (legal@learnio.com, privacy@learnio.com, una dirección en Dubái). Sustitúyelos por los tuyos antes de pasar a producción.

El nombre en el panel de administración

Todo está en BRAND_CONFIG, en admin-dashboard/src/config/brand.config.ts. Los campos de texto tienen un valor en y uno ar.

Todos los lugares que nombran el producto leen BRAND_CONFIG, así que cambiar el nombre ahí cambia a la vez la barra lateral, la tarjeta de inicio de sesión, los dos pies de página y los títulos de las páginas. Los archivos de mensajes del panel no contienen el nombre del producto: la frase de la línea de copyright es una traducción (layouts.footer.copyright) en la que el nombre se rellena desde la configuración.

Archivos del logotipo

El cambio más sencillo es sustituir cada archivo por el tuyo, con la misma ruta y el mismo nombre. Usa un PNG con fondo transparente.

• El sitio para estudiantes muestra un mismo logotipo de texto en páginas claras y oscuras, así que elige un diseño que se lea bien en ambas.
• En el panel de administración, los dos archivos de tema se eligen con --logo-bg-image en src/styles/theme-variables.css. Vienen con la misma imagen.
• La copia de learnio-wordmark.png del panel de administración no la usa ninguna página.

Para usar un archivo con otro nombre en el panel, apunta logo.icon de BRAND_CONFIG a él. Si tu diseño tiene otra forma, actualiza el tamaño declarado para que no se deforme: el width y el height de ASSETS en src/components/ui/BrandLogo.tsx del sitio para estudiantes, y width={512} y height={474} en src/layouts/dashboard/sidebar/components/SidebarBrand.tsx (en ambas aplicaciones) y en src/layouts/auth/components/FormPanel.tsx del panel.

Favicon, iconos de la aplicación e imágenes para compartir

Next.js encuentra los archivos de src/app/ por su nombre y escribe las etiquetas de la página para ellos, así que sustituye los archivos y conserva sus nombres.

El panel tiene un único manifest de aplicación web, servido en /manifest.webmanifest desde src/app/manifest.ts, que lee manifest de BRAND_CONFIG:

• manifest.icons enumera los iconos de la aplicación instalada: /icon.png (512 × 512) y /apple-icon.png (180 × 180), los dos archivos de src/app/. Sustituir esos archivos cambia a la vez el icono del navegador y el de la aplicación instalada. Si apuntas una entrada a otro archivo, indica su tamaño real.
• meta.ogImage y meta.twitterImage son las vistas previas de los enlaces, /assets/brand/learnio-mark.png por defecto. Los metadatos declaran la imagen como 512 × 474 y usan la tarjeta pequeña summary, así que una sustituta de otro tamaño necesita cambiar también el width y el height de src/app/layout.tsx.
• El panel pide a los buscadores que no lo indexen, en los metadatos de la página y en public/robots.txt: es una herramienta del personal, no una página pública.

Colores en el sitio para estudiantes

Las páginas públicas leen sus colores de variables CSS en src/styles/theme-variables.css: los valores claros bajo :root y los oscuros bajo .dark. El naranja de la marca es #FF6A3D.

• El panel del estudiante con sesión iniciada usa la paleta del panel de administración, copiada en src/styles/dashboard-theme.css y limitada al panel. Su naranja es #FF8A00. La copia se mantiene a mano: cuando cambie un color en theme-variables.css del panel de administración, cámbialo también en este archivo.
• Algunas ilustraciones escriben el naranja directamente en lugar de usar una variable: el perfil del instructor y los pasos "How it works" de la página de inicio. Busca FF6A3D en src/features.
• El color que el navegador pinta alrededor de la página (la barra de direcciones en el móvil) es SITE.browserChrome en src/config/site.ts, un valor por tema, cada uno igual al fondo de página de ese tema. Los colores de la aplicación instalada son SITE.themeColor y SITE.backgroundColor en el mismo archivo.

Colores en el panel de administración

Todos los colores son variables CSS en src/styles/theme-variables.css, los claros bajo :root y los oscuros bajo .dark. El naranja de la marca es --primaryColor, #ff8a00 en ambos temas, con --primaryColorHover para su hover.

• Los tonos del naranja están escritos como valores propios: la familia --accent-*, la familia --chip-* y --btn-primary-fill, que es #ff6a3d en el tema claro. Para cambiar el color de la marca, busca ff8a00, 255, 138, 0 y ff6a3d en el archivo y ajusta los tonos que tienen al lado.
• Aparte de los colores del navegador que se indican más abajo, este archivo es el único lugar donde el panel de administración escribe el naranja. Ningún componente lo tiene escrito en el código.
• Los colores de la interfaz del navegador son theme.light y theme.dark en BRAND_CONFIG. La aplicación instalada usa manifest.themeColor y manifest.backgroundColor.

Fuentes

Ambas aplicaciones cargan Inter para el inglés e IBM Plex Sans Arabic para el árabe mediante next/font/google en src/app/layout.tsx, que las sirve desde tu propio dominio. src/styles/base.css cambia a la fuente árabe cuando el idioma de la página es ar.

Para cambiar una fuente, importa otra de next/font/google y conserva su nombre de variable, para que las hojas de estilos la usen sin cambios. En el sitio para estudiantes:

import { IBM_Plex_Sans_Arabic, Manrope } from "next/font/google";

const inter = Manrope({
  subsets: ["latin"],
  display: "swap",
  variable: "--font-inter",
});

Una fuente que no es variable necesita una lista weight, como la tiene la árabe. El src/styles/base.css del sitio para estudiantes también indica 'Inter' como alternativa; actualízalo si cambias el nombre de la variable.

Correos electrónicos y la API

• Remitente: MAIL_FROM en back-end/.env es el nombre y la dirección desde los que llega cada correo, por ejemplo Learnio <noreply@example.com>.
• Nombre: los emails nombran el producto mediante el marcador {site} de src/i18n/translations/<locale>/mail.json, que se rellena con el ajuste site_name. Cámbialo en la pestaña App Settings de Settings del panel de administración; se aplica al siguiente email que se envíe.
• Respuestas: el ajuste support_email es la dirección de respuesta de todos los emails, para que una respuesta llegue a una persona y no al remitente que no admite respuestas.
• Redacción: los asuntos y los cuerpos están en src/i18n/translations/en/mail.json y src/i18n/translations/ar/mail.json.
• Aspecto: los correos no llevan logotipo. Sus colores están escritos en src/modules/mail/templates/layout.ts (INK, MUTED, PAGE, CARD), porque los clientes de correo descartan las hojas de estilos.
• Los enlaces de los correos abren el sitio para estudiantes en FRONTEND_URL.

• Ajustes del correo electrónico