Marca
Haz tuyos el sitio web y el panel: el nombre, la marca y los iconos, los colores y la tipografía, los datos de la empresa y los textos para buscadores.
Para el paquete Full Stack
Dónde está la marca
| Qué | Sitio web (storefront/) | Panel (admin-dashboard/) |
|---|---|---|
| Nombre y metadatos | src/config/brand.config.ts | src/config/brand.config.ts |
| Valores alternativos de zona horaria y moneda | src/config/booking.config.ts | Los ajustes de la empresa |
| Colores, radio, sombras | src/styles/theme-variables.css | src/styles/theme-variables.css |
| Marca e iconos | public/brand/, public/, src/app/ | public/brand/, public/, src/app/ |
| Fuentes | src/app/[locale]/layout.tsx, archivos en src/fonts/ | src/app/layout.tsx, archivos en src/fonts/ |
| Textos | messages/ | messages/ |
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 del sitio web y sus valores alternativos
En storefront/src/config/brand.config.ts y storefront/src/config/booking.config.ts:
// brand.config.ts
name: { en: "Hollina", ar: "Hollina" }, // tab titles, sharing cards, the wordmark, the manifest
tagline: { en: "...", ar: "..." }, // until the dashboard's settings answer
description: { en: "...", ar: "..." }, // the installable app's description
contactEmail: "hello@example.com", // until the dashboard's settings answer
contactPhone: "+1 202 555 0147", // until the dashboard's settings answer
keywords: ["vacation rental", ...], // the meta keywords
// booking.config.ts
DEFAULT_TIMEZONE = "America/New_York"; // calendar days, "today", the i18n clock
DEFAULT_CURRENCY = "USD"; // prices without a currency of their ownEl logotipo de texto junto a la marca es texto en vivo en Outfit (src/components/BrandMark.tsx), así que sigue a name. El nombre de la empresa también aparece en frases, en ambos idiomas: busca en messages/ el texto Hollina y reescribe esas líneas. El tiempo de respuesta de la página de contacto y del diálogo de preguntas ("normalmente en un día") es texto de messages/contact y messages/inquiry.
La marca, los iconos y las fotografías del sitio web
| Archivo | Se usa para |
|---|---|
public/brand/hollina-mark.svg | La marca en el tema claro (cabecera, pie de página) |
public/brand/hollina-mark-white.svg | La marca en el tema oscuro |
src/app/icon.svg | El icono de la pestaña del navegador |
src/app/apple-icon.png | El icono de la pantalla de inicio en iPhone y iPad |
public/web-app-manifest-192x192.png, public/web-app-manifest-512x512.png | Los iconos de la aplicación instalable |
public/icons/stay-types/type-*.svg | Las seis marcas de tipo de alojamiento, dibujadas en currentColor |
public/icons/flags/us.svg, sa.svg | Las banderas del menú de idiomas |
Sustituye los archivos y conserva sus nombres, o cambia mark.color y mark.white en la configuración de marca. Las fotografías propias de la empresa las sirve la API desde public/media/hollina/site/ en la carpeta de la API: 01-hero.webp (la imagen para compartir de cada página sin fotografía propia), how-dates.webp, how-pay.webp y how-arrive.webp (los tres pasos de "Cómo funciona") y host-desk.webp (la tarjeta del equipo anfitrión en la página de contacto). Sustitúyelas con los mismos nombres. Las fotografías de alojamientos y destinos se suben en el panel.
Los colores y la tipografía del sitio web
| Token | Claro | Oscuro | Rol |
|---|---|---|---|
--primaryColor | #3F5B38 | #AEC79F | Acciones principales, controles seleccionados, precios, el marco doble, el anillo de foco |
--primaryColorHover | #30472B | #C1D6B5 | Al pasar el cursor y al pulsar |
--primary-tint | #E2E9D8 | #2B3B2A | Rellenos seleccionados, las noches seleccionadas en un calendario, paneles discretos |
--background | #F4F5EE | #171D17 | Página |
--surface | #FFFFFF | #222B22 | Tarjetas, cabecera, pie de página, diálogos |
--text | #263128 | #F0F3EB | Títulos y texto destacado |
--text-muted | #586454 | #BEC8B7 | Texto secundario |
storefront/BRANDING.md lista todos los tokens. Comprueba que el texto sobre tus colores se siga leyendo con una relación de 4,5 a 1 en ambos temas. Los archivos de fuentes se incluyen en src/fonts/ y se cargan con next/font/local, así que una construcción nunca los descarga y el sitio no hace ninguna petición a Google: Outfit para el texto latino y el logotipo de texto, Instrument Serif para los títulos de exhibición y Noto Sans Arabic para el texto en árabe, todas bajo la licencia SIL Open Font License. El color de la zona del mapa es STAY_AREA_COLOR en src/lib/map/mapConfig.ts, y los colores de la barra del navegador son themeColor.light y themeColor.dark en la configuración de marca.
Resultados de búsqueda, contenido compartido, precios y el dominio
NEXT_PUBLIC_SITE_URLes 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 las descripciones de página están bajo
metaen cada espacio de nombres demessages/(el de la página de inicio enmessages/home, el predeterminado enmessages/layouts). La página de un alojamiento usa el título y la descripción SEO propios del alojamiento, escritos en el editor, y su fotografía de portada. - Los precios se formatean en un solo lugar,
src/lib/utils/formatPrice.ts, como el código de la moneda seguido del importe en dígitos latinos (USD 240), y los dibujasrc/components/PriceDisplay. Una tarifa por noche añade su período desde las traducciones (/ night,common.stay.perNightenmessages/common).
Claro, oscuro y del sistema
Ambas aplicaciones tienen un control 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 (hollina-theme en el sitio web, hollina-admin-theme en el panel), no se envía nada a la API, y un script corto en el head de la página la aplica antes del primer pintado, así que una recarga nunca muestra por un instante el otro tema.
El nombre, la marca y los colores del panel
- Nombre:
nameensrc/config/brand.config.tses el logotipo de texto y la mitad de marca de cada título de página (Bookings | Hollina);metaguarda el título, la descripción, las palabras clave y el autor por defecto,domain.urlla base de las URL absolutas de los metadatos ymanifestla aplicación instalable. El título propio de cada página está bajometa.titlesen los espacios de nombresdashboardyauthdemessages/, y la etiqueta junto al logotipo de texto de la cabecera esheader.workspaceenmessages/dashboard. - Marca: sustituye
public/brand/hollina-mark.svgyhollina-mark-white.svg, conservando los nombres;BrandMarklos pinta a partir del token--logo-bg-imageensrc/styles/theme-variables.css. El icono de la pestaña del navegador essrc/app/icon0.svg, el icono del iPhonesrc/app/apple-icon.png, y los iconos de la aplicación instalable los dos archivosweb-app-manifestdepublic/. - Colores:
--primaryColor,--primaryColorHover,--on-primary,--primary-tint,--background,--surface,--text,--text-muted,--bordery--errorColor, más los pares--tone-*para las etiquetas de estado, ensrc/styles/theme-variables.css, una vez por tema. Qué estado toma qué tono está ensrc/config/statusTones.ts. - Fuentes: Outfit y Noto Sans Arabic, incluidas en
src/fonts/, cargadas ensrc/app/layout.tsxy asignadas ensrc/styles/base.css.
Los datos propios de la empresa
Lo que los huéspedes leen sobre la empresa son datos, no código. Se edita en los ajustes del panel y el sitio web lo lee de GET /api/settings/public, que recurre a la configuración de marca solo hasta que responde.
| Pestaña | Ajustes |
|---|---|
| Empresa | company_name, company_tagline y company_description en ambos idiomas, contact_email, contact_phone, contact_address_hint, currency, timezone, default_check_in_time, default_check_out_time, service_email_signature |
| Página de inicio | home_hero_stay_reference (el alojamiento del hero) y home_featured_references (los alojamientos destacados, en orden) |
| Pagos | allow_pay_on_arrival y la cancellation_policy que leen los huéspedes, en ambos idiomas |
La moneda es USD y la zona horaria America/New_York, las únicas opciones que ofrece el panel. El logotipo de la marca no se sube en el panel: viene de los archivos anteriores.
Textos y política de privacidad
Cada frase visible está en messages/, una carpeta por área con en.json y ar.json. Reescribe el texto en ambos archivos. La política de privacidad en messages/privacy es texto de plantilla y así lo dice en la página: reescríbela para tu empresa y tu país antes de pasar a producción, y luego quita esa nota (el panel enmarcado en src/features/privacy/components/PrivacyHeader.tsx, y su clave templateNote en ambos archivos). Su línea de contacto muestra el correo electrónico de los ajustes del panel.