Marca

Dónde está la marca

Cada color es un token definido una vez para el tema claro (:root) y una vez para el tema oscuro (:root[data-theme="dark"]). Los componentes solo leen tokens, así que un token cambiado llega a todas las páginas. Cambia un color de marca en ambos bloques, o un tema conservará el antiguo.

El nombre, el correo de contacto y el mercado del sitio web

En storefront/src/config/brand.config.ts:

name: "Ticketory",                    // the manifest and search engines' structured data
description: "...",                   // the installable app's description
mark: "/brand/mark.svg",              // structured data for search engines
lockups: { en: {...}, ar: {...} },    // the header and footer logo, with each file's size
themeColor: { light: "#FFFBF0", dark: "#111111" }, // the browser bar
contactEmail: "support@example.test", // until the API's settings answer
market: {
  currency: "USD",           // money with no currency of its own
  timeZone: "Europe/London", // dates with no time zone of their own
},
keywords: ["events", "tickets", ...],

El nombre tal como lo escribe cada idioma, usado en los títulos de pestañas y en las tarjetas para compartir, es meta.siteName en messages/layouts/en.json y ar.json. El nombre del producto también aparece en frases, en ambos idiomas: busca en messages/ Ticketory y su escritura en árabe, تيكيتوري, y reescribe esas líneas.

Los lockups, iconos y decoraciones del sitio web

Cada lockup es una imagen terminada con fondo transparente, recortada a su contenido. Sustitúyelos por los tuyos en cualquier tamaño y escribe el ancho y el alto de cada archivo en lockups en la configuración de marca, para que la cabecera mantenga sus proporciones.

Las estrellas, ondas, triángulos, círculos, puntos y zigzags alrededor de las secciones son los archivos SVG de public/decor/. Cada sección lista dónde están sus formas en la carpeta constants/ de su función (las del pie de página, en src/layouts/app/SiteFooter/constants/): borra una fila para quitar una forma, o pon tu propio SVG en public/decor/ y añade su nombre de archivo a DecorAsset en src/components/Decorations/types.ts.

Los colores y la tipografía del sitio web

El texto sobre los fondos rosa, amarillo y turquesa es negro (--on-accent), y sobre azul y tinta es crema. Comprueba que el texto sobre tus colores sigue leyéndose a 4,5 a 1 en ambos temas. Cada evento también lleva su propio color de entrada, elegido en el editor de eventos.

Los archivos de fuentes se incluyen en src/fonts/ de cada aplicación, así que una construcción nunca las descarga: Archivo Black para los titulares (Lalezar en árabe) y DM Sans para el texto (Noto Sans Arabic), todas bajo la licencia SIL Open Font License en src/fonts/OFL.txt. Para cambiar una, pon el archivo .woff2 en src/fonts/, apunta la llamada a localFont hacia él y añade su licencia a OFL.txt.

Resultados de búsqueda, compartir y el dominio

• NEXT_PUBLIC_SITE_URL es la base de cada dirección canónica, de las alternativas de idioma, de las tarjetas para compartir, de robots.txt y del mapa del sitio. Defínela con tu dirección real antes de construir.
• El título, la descripción y el texto para compartir por defecto están bajo meta en messages/layouts; los de cada página están bajo meta en su namespace de messages/. Una página de evento usa el título y el resumen del evento.
• El mapa del sitio lista las páginas de inicio, eventos, recintos, organizadores, precios, preguntas frecuentes, contacto y legales, cada evento, recinto y organizador público, cada uno en ambos idiomas con su alternativa. robots.txt mantiene fuera las páginas de cuenta, pago, pedido e inicio de sesión.
• El dinero se escribe igual en ambos idiomas, con el símbolo primero y dígitos latinos ($41.20), mediante src/lib/format/formatMoney.ts.

Claro, oscuro y del sistema

Ambas aplicaciones ofrecen Sistema, Claro y Oscuro. Sistema sigue al sistema operativo y cambia cuando él cambia. La elección se guarda en el localStorage del navegador (ticketory-theme en el sitio web, ticketory-admin-theme en el panel), no se envía nada a la API, y un pequeño script en la cabecera de la página la aplica antes del primer pintado, así que una recarga nunca muestra un destello del otro tema. Los colores de la barra del navegador son themeColor en el sitio web y theme en la configuración de marca del panel.

El nombre, los lockups y los colores del panel

• Nombre: name en src/config/brand.config.ts, en inglés y árabe (Ticketory y تيكيتوري, también en company, shortName, el texto alternativo del logotipo y manifest), es la parte de marca de cada título de página (Events | Ticketory) y el texto alternativo del lockup; meta contiene el título, la descripción y las palabras clave por defecto y la imagen para compartir (public/og-image.jpg, de 1200 por 630), domain.url la base de las URL absolutas de metadatos (NEXT_PUBLIC_DASHBOARD_URL la anula), manifest la aplicación instalable. El título propio de cada página está bajo meta.titles en los namespaces dashboard y auth de messages/.
• Lockups e iconos: sustituye los cuatro archivos lockup-*.webp y mark.svg de public/brand/, manteniendo los nombres, o cambia las rutas y los tamaños en BRAND_LOCKUPS. El icono de la pestaña del navegador es src/app/icon0.svg, el icono del iPhone src/app/apple-icon.png, y los iconos de la aplicación instalable los dos archivos web-app-manifest de public/.
• Colores: --background, --surface y --surface-elevated, --surface-hover, --surface-sunken, --text, --text-muted, --border, --primaryColor, los acentos, --ink-button y --on-ink, --errorColor, --shadow-ink, y los pares --tone-* de las etiquetas de estado, en src/styles/theme-variables.css, una vez por tema. Qué estado toma qué tono está en src/config/statusTones.ts.
• Fuentes: DM Sans, Noto Sans Arabic, Archivo Black y Lalezar, cargadas desde src/fonts/ en src/app/layout.tsx y asignadas en src/styles/base.css.

Los datos propios del organizador

El nombre de cada espacio de trabajo, el correo de soporte, la moneda (USD, EUR, GBP, SAR o AED), la zona horaria y la comisión de reserva, que el asistente siempre paga al pagar, son ajustes, que se editan en el panel en Settings, General. El sitio web los lee de GET /api/public/settings, junto con la duración de la reserva de asientos (diez minutos en los datos de ejemplo) y los métodos de pago ofrecidos. Cada evento también lleva su propia zona horaria.

Los lockups de la marca no se suben en el panel: vienen de los archivos de arriba.

Los textos y las páginas legales

Cada frase visible está en messages/, una carpeta por área con en.json y ar.json. Reescribe los textos en ambos archivos. La política de privacidad, las condiciones y la política de cancelación de messages/legal son textos de ejemplo: reescríbelos para tu negocio y tu país antes de vender entradas reales.

• Idiomas