Hazla tuya

Dónde cambiar los textos, los proyectos, los precios, las imágenes, los colores, las fuentes, las secciones, los enlaces, el formulario de contacto y los datos para buscadores.

Textos

Cada palabra visible, cada etiqueta de botón y texto alternativo, y el título y la descripción de la página están en messages/en.json y messages/ar.json. Cambia el valor, conserva la clave y cambia los dos archivos.

Parte de la página	Clave en los archivos de mensajes
Título de la página, descripción, nombre del sitio	`metadata`
Nombre de marca en el logotipo	`common.brand`
Barra de navegación y menú móvil	`navigation`
Portada	`hero`
Características	`features`
Trabajos	`work`
Proceso	`process`
Testimonios	`testimonials`
Precios	`pricing`
Contacto, el formulario y la dirección	`contact`
Pie de página	`footer`

Las palabras entre llaves, como {year} en footer.copyright, las rellena la página. Déjalas tal cual en los dos idiomas.
Las características de cada plan son una lista: añade o quita líneas en pricing.plans.basic.features (y standard, premium) en los dos archivos.

Proyectos, características, pasos, testimonios y planes

Cada uno es una lista en la carpeta constants/ de su sección. La key de cada entrada da nombre a su texto en los archivos de mensajes.

Lista	Archivo	Además de la clave
Proyectos	`src/features/home/Work/constants/projectItems.ts`	`image`, `year`
Características	`src/features/home/Features/constants/featureItems.ts`	`icon`, un icono de Lucide
Pasos del proceso	`src/features/home/Process/constants/processSteps.ts`	`number`
Testimonios	`src/features/home/Testimonials/constants/testimonialItems.ts`	Nada
Planes	`src/features/home/Pricing/constants/pricingPlans.ts`	`monthlyPrice`, `annualPrice`, `popular`

Para añadir uno, añade una entrada con una key nueva y después el texto de esa clave en los dos archivos de mensajes. Un proyecto nuevo con la clave atlas necesita work.projects.atlas.title y work.projects.atlas.subtitle.

Precios y moneda

Los importes son números simples, monthlyPrice y annualPrice, en pricingPlans.ts. La moneda se define una sola vez, currency: "USD", en src/features/home/Pricing/components/PricingCard.tsx: cámbiala por otro código de moneda como EUR. Los precios se formatean según el idioma de la página.

La etiqueta "Save 20%" es texto, pricing.save. Actualízala cuando cambie tu descuento anual.

Imágenes

Imagen	Archivo
Proyectos, mostrados en marcos 4:3	De `public/works/1.webp` a `4.webp`, listados en `projectItems.ts`
Tarjeta de vista previa para redes sociales, 1200 por 630	`public/image.png`
Iconos del navegador y de la pantalla de inicio	`public/favicon.ico`, `favicon.svg`, `favicon-96x96.png`, `apple-touch-icon.png`, `web-app-manifest-192x192.png`, `web-app-manifest-512x512.png`

Conserva el nombre de un archivo para sustituirlo sin tocar el código, o cambia su ruta en projectItems.ts. Las imágenes de los proyectos se ven en escala de grises hasta que pasas el puntero por encima.

Colores

La paleta es la lista de variables CSS al principio de src/styles/globals.css, como --background, --foreground, --primary y --border, escritas como números HSL y usadas por tailwind.config.ts. --radius vale 0rem, lo que mantiene todas las esquinas rectas.

Muchas secciones también usan directamente las clases de negro, blanco y neutro de Tailwind, como bg-black y text-white/70. Un esquema de colores nuevo implica cambiar también esas clases en los archivos de las secciones.

El sitio solo tiene modo oscuro: el layout aplica la clase dark y el tema no sigue el sistema del visitante.

Fuentes

src/app/[locale]/layout.tsx carga Inter para el inglés y Noto Sans Arabic para el árabe con next/font/google, y el texto de la página usa la de su idioma.

Inter también se publica como la variable CSS --font-inter, que usan los títulos (h1 a h6) en src/styles/globals.css, en todos los idiomas salvo el árabe. Para cambiar la fuente en inglés, importa otra familia de next/font/google en el layout y mantén variable: "--font-inter" en ella, para que los títulos la sigan.

Secciones

src/app/[locale]/page.tsx enumera las secciones en orden. Mueve una línea para reordenarlas o borra una para quitar su sección. Cada sección está en src/features/home/, en su propia carpeta.

Cuando quites una sección, quita también su enlace de src/layouts/constants/sectionLinks.ts, para que la barra de navegación y el pie de página no apunten a ella.

Enlaces y botones

Enlaces	Archivo
Enlaces a secciones de la barra de navegación y del pie de página (`#features`, `#work`, `#process`, `#pricing`)	`src/layouts/constants/sectionLinks.ts`
Iconos sociales del pie de página	`src/layouts/Footer/constants/socialLinks.ts`
Enlaces de privacidad y condiciones	`src/layouts/Footer/constants/legalLinks.ts`
Enlaces sociales de la sección de contacto	`src/features/home/Contact/constants/contactSocials.ts`
Correo y teléfono de contacto	`src/features/home/Contact/constants/contactDetails.ts`

Los enlaces sociales y legales vienen como #: pon tu propia dirección en cada href. La plantilla no tiene página propia de privacidad ni de condiciones.

Botones sin destino

El botón de contacto de la barra de navegación y del menú móvil, los dos botones de la portada, View All Work, los botones de precios y las tarjetas de proyecto todavía no enlazan a ningún sitio. Convierte cada uno en un enlace al destino que quieras, como #contact, en src/layouts/Navbar/components/DesktopNav.tsx y MobileMenu.tsx, src/features/home/Hero/components/HeroButtons.tsx, src/features/home/Work/index.tsx y components/ProjectCard.tsx, y src/features/home/Pricing/components/PricingCard.tsx.

El formulario de contacto

El formulario valida el nombre, el correo y el mensaje en el navegador antes de enviar; los textos de error están en contact.form.validation. A dónde envía depende de NEXT_PUBLIC_API_BASE_URL:

Vacío, por defecto: no se envía nada. Tras una breve pausa el formulario muestra su mensaje de éxito, para que puedas probarlo.
Definido: el formulario envía POST a la ruta /contact de tu API con el cuerpo JSON { name, email, message }. Una respuesta 2xx muestra el mensaje de éxito, salvo que su JSON diga "success": false; cualquier otra respuesta muestra el mensaje de error.

La petición la envía el navegador del visitante, así que tu API debe aceptar peticiones desde la dirección de tu sitio (CORS). La llamada está en src/lib/api/contact.ts. El valor se escribe durante la compilación: vuelve a compilar después de definirlo.

Buscadores y tarjetas para redes sociales

El título de la página, la descripción, el nombre del sitio y el texto alternativo de la imagen de vista previa están en metadata en cada archivo de mensajes. NEXT_PUBLIC_SITE_URL define el enlace canónico, los enlaces de idioma en y ar y la dirección de las tarjetas de vista previa, que muestran public/image.png.

generator en src/app/[locale]/layout.tsx indica el autor de la plantilla en la cabecera de la página. Pon tu propio nombre o quita la línea.
public/site.webmanifest llama al sitio Mono para los móviles que lo añaden a la pantalla de inicio. Pon ahí el nombre de tu sitio.
La plantilla no incluye robots.txt ni sitemap. Añade src/app/robots.ts y src/app/sitemap.ts si los quieres.

Define la dirección de tu sitio

El cursor personalizado

En pantallas de 768 píxeles de ancho o más, la página oculta el puntero del sistema y dibuja su propio punto y anillo, desde src/components/FloatingCursor/. Para conservar el puntero normal, quita <FloatingCursor /> de src/app/[locale]/layout.tsx y las reglas cursor: none cerca del principio de src/styles/globals.css.