Haz que sea tu marca

Ejecuta el sitio con yarn dev mientras editas: la página se recarga cada vez que guardas.

El nombre del sitio

El nombre es Publino por defecto, بوبلينو en árabe. Aparece en varios textos, cada uno en los dos archivos de mensajes:

• metadata.siteName, metadata.title y metadata.description en messages/common/<locale>.json: el nombre que muestran los buscadores y las tarjetas sociales, y el título y la descripción de la página de inicio.
• navigation.logo en los mismos archivos: el nombre junto al logo en el encabezado y en la barra lateral de la maqueta del panel.
• footer.copyright en los mismos archivos: la línea al final de cada página. El sitio rellena {year}; consérvalo.
• whyChooseUs.title y footer.description en messages/home/<locale>.json: dos frases de la página de inicio.
• PricingPage.meta en messages/pricing/<locale>.json y ContactPage.meta en messages/contact/<locale>.json: los títulos Publino | Pricing y Publino | Contact us, y sus descripciones.

Otros dos lugares lo contienen como texto plano: el logotipo en src/features/home/Footer/index.tsx, y name y short_name en public/site.webmanifest, el nombre que muestra un teléfono cuando el sitio se añade a su pantalla de inicio.

El logotipo

El logo es un icono de cohete de Tabler Icons seguido del nombre del sitio. El encabezado lo dibuja en src/layouts/Navbar/index.tsx, y la maqueta del panel repite el icono en src/features/home/DashboardMockup/components/Sidebar/components/BrandHeader.tsx.

Cambia el icono por otro icono de Tabler, o por tu propia imagen, por ejemplo un archivo que pongas en public/:

import Image from "next/image";

const logo = {
  icon: <Image src="/your-logo.svg" alt="" width={20} height={20} priority />,
  text: t("logo"),
};

Temas claro y oscuro

El sitio tiene un tema claro y uno oscuro, y se abre en oscuro. El botón del sol y la luna del encabezado cambia entre ellos, y el navegador recuerda la elección del visitante.

Los dos temas son un conjunto de colores en src/styles/theme.css: los colores claros bajo :root y los oscuros bajo [data-theme="dark"]. La paleta es negro, blanco y grises, con el azul como acento para los anillos de foco, las tendencias al alza y los puntos del mapa. Cambia un valor ahí y todas las páginas lo siguen, como --interactive-primary para los botones principales o --background para la página.

[data-theme="dark"] {
    --background: #000000;
    --interactive-primary: #ffffff;
}

Para abrir en claro en la primera visita, cambia "dark" por "light" en src/providers/ThemeProvider.tsx y en el script dentro de src/app/[locale]/layout.tsx, en todos los lugares donde aparece en ambos archivos.

• El sitio sigue oscuro

Fuentes

El sitio usa las fuentes del sistema del visitante en los dos idiomas: --font-sans y --font-mono en src/styles/theme.css. No se descarga nada, así que el texto aparece al instante.

Para usar una fuente de Google, cárgala con next/font/google en src/app/[locale]/layout.tsx, pon su clase en <html> y nombra su variable CSS primero en --font-sans. Para el árabe, elige una fuente que cubra las letras árabes, como Noto Sans Arabic.

El favicon y los iconos de la app

Cada página enlaza public/favicon.svg como su icono, public/apple-touch-icon.png para los iPhone y public/site.webmanifest, que nombra web-app-manifest-192x192.png y web-app-manifest-512x512.png. Reemplaza cada archivo por el tuyo con el mismo nombre. public/favicon.ico es el recurso de reserva que los navegadores piden por su cuenta.

El icono de 512 píxeles es también el logo que ven los buscadores para tu organización.

La imagen que se muestra al compartir una página

Las redes sociales y las apps de chat muestran public/image.png, de 1200 por 630 píxeles, cuando alguien comparte una página. Reemplázala por tu propia imagen del mismo tamaño. Si cambias el tamaño, cambia también width y height en ogImage en src/config/site.config.ts.

Su descripción para lectores de pantalla es metadata.imageAlt en messages/common/<locale>.json. La tarjeta de características Performance Metrics de la página de inicio muestra la misma imagen que el sitio que analiza, así que tu imagen aparece ahí también.

Cómo funcionan los temas