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: { en: "Velra", ar: "فيلرا" },          // tab titles, sharing cards, the wordmark, the manifest
contactEmail: "hello@velra.example",          // until the dashboard's settings answer
market: {
  currency: "AED",        // prices without a currency of their own, budget ranges, the footer
  timeZone: "Asia/Dubai", // viewing slots and dates
  utcOffset: "+04:00",    // the offset a viewing's preferred time is sent in
  areaServed: "Dubai",    // the agency's structured data for search engines
},

El logotipo de texto junto a la marca es texto real, así que sigue a name. El nombre y la ciudad también aparecen en frases, en ambos idiomas: busca en messages/ Velra y فيلرا, y Dubai y دبي, y reescribe esas líneas. La indicación de zona horaria de messages/viewing dice UTC+4.

La marca, los iconos y las fotos del sitio web

Sustituye los archivos y conserva sus nombres, o cambia mark.color y mark.white en la configuración de marca. Las fotos propias de la agencia (el estudio, la recepción, los paneles de compra y alquiler, los mosaicos de tipo de propiedad) las sirve la API desde public/media/velra/site/ en la carpeta de la API: sustitúyelas con los mismos nombres. agency-studio.webp es también la imagen para compartir de cada página que no tiene una propiedad propia.

Los colores y la tipografía del sitio web

storefront/BRANDING.md lista todos los tokens. Comprueba que el texto sobre tus colores se sigue leyendo a 4.5 a 1 en ambos temas. Las fuentes se cargan con next/font/google, así que se sirven con la construcción: Manrope para texto latino, Noto Sans Arabic para texto árabe, y Cormorant Garamond y Noto Naskh Arabic para los títulos. Los colores de la barra del navegador son themeColor.light y themeColor.dark en la configuración de marca.

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.
• Los títulos y descripciones de las páginas están bajo meta en cada espacio de nombres de messages/ (el de la página de inicio en messages/home, el predeterminado en messages/layouts). Una página de propiedad usa el título y la descripción SEO de la propia propiedad, escritos en el editor, y su foto de portada.
• Los precios se formatean en src/lib/utils/formatPrice.ts como el código de moneda seguido del importe en dígitos latinos (AED 4,850,000); los alquileres añaden el periodo de las traducciones. Los rangos de presupuesto de la búsqueda están en src/constants/search/priceRanges.ts.

Claro, oscuro y del sistema

Ambas aplicaciones tienen un menú de tema con Sistema, Claro y Oscuro. Sistema sigue al sistema operativo y cambia cuando este cambia. La elección se guarda en el localStorage del navegador (velra-theme en el sitio web, velra-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 el otro tema por un instante.

El nombre, la marca y los colores del panel

• Nombre: name en src/config/brand.config.ts es el logotipo de texto y la mitad de marca de cada título de página (Properties | Velra); meta contiene el título, la descripción y las palabras clave por defecto, domain.url la base de las URL absolutas de metadatos, manifest la aplicación instalable. El título propio de cada página está bajo meta.titles en los espacios de nombres dashboard y auth de messages/.
• Marca: sustituye public/brand/velra-mark.svg y velra-mark-white.svg, conservando los nombres. El icono de la pestaña del navegador es src/app/icon0.svg, el icono de iPhone src/app/apple-icon.png, y los iconos de la aplicación instalable los dos archivos web-app-manifest de public/.
• Colores: --primaryColor, --primaryColorHover, --primary-foreground y --primary-tint, --background, --surface, --text, --text-muted, --border y --errorColor, además de los pares --tone-* para 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: Manrope, Noto Sans Arabic, Cormorant Garamond y Noto Naskh Arabic, cargadas en src/app/layout.tsx y asignadas en src/styles/base.css.

Los datos propios de la agencia

El nombre, el eslogan, la descripción, el correo de contacto y la ciudad de la agencia son ajustes, que se editan en el panel en Ajustes, Agencia, y el sitio web los lee de GET /api/settings/public. La carga inicial los guarda como agency_name, agency_tagline_en, agency_tagline_ar, agency_description_en, agency_description_ar, contact_email y agency_city. Las viviendas que destaca la página de inicio, y la vivienda cuya estancia amueblada muestra, se definen en Ajustes, Página de inicio.

El logotipo de la marca no se sube en el panel: viene de los archivos de arriba.

Textos y política de privacidad

Cada frase visible está en messages/, una carpeta por área con en.json y ar.json; los nombres de las comodidades están en messages/amenities. Reescribe el texto en ambos archivos. La política de privacidad de messages/privacy es texto de plantilla escrito para una agencia ficticia y lo dice en la página: reescríbela para tu agencia y tu país antes de publicar, y luego quita esa nota (el último párrafo de src/features/privacy/components/PrivacyHeader.tsx y su clave templateNote en ambos archivos).

• Idiomas