Hazlo tuyo

Dónde está cada cosa

Con yarn dev en marcha, cada vez que guardas se ve en la página al instante. Con Docker, vuelve a construir la imagen para ver un cambio.

Textos

Cada palabra de la página está en messages/en.json y messages/ar.json, agrupada por sección: hero, socialProof, howItWorks, features, integrations, testimonials, blog, pricing, faq y cta, además de header, footer y metadata. Cambia el valor, conserva la clave y cámbialo en los dos archivos.

Las palabras entre llaves, como {brand}, {year} o {count}, las rellena el código: déjalas como están. En la línea trustedBy de la portada, conserva también las etiquetas alrededor de {count}.

Algunas cifras están en el código, no en los archivos de mensajes:

Cada id de las preguntas frecuentes necesita su question y su answer bajo faq.items en los dos archivos de mensajes. Los precios se muestran en dólares, mediante pricing.price en los archivos de mensajes.

Nombre de la marca y logotipo

brand.name en los dos archivos de mensajes es el único lugar para cambiar el nombre de la marca. Es el nombre junto al logotipo, en la cabecera y en el pie de página, y el símbolo del logotipo muestra su primera letra. Cada texto que nombra la marca dice {brand} y toma este valor: el título de la página, la descripción de la imagen para compartir, la insignia de la portada, dos testimonios, el mensaje de cierre y la línea de copyright.

El nombre de la app instalada también lo sigue: src/app/manifest.ts lee brand.name de los mensajes en inglés.

El símbolo del logotipo se dibuja en src/components/Logo.tsx: un cuadrado girado con el degradado de rojo a ámbar. Sustitúyelo por tu propio SVG, o por una imagen de public/, para usar tu logotipo.

Los iconos del navegador y del móvil son public/favicon.svg, public/favicon.ico, public/favicon-96x96.png, public/apple-touch-icon.png y los dos archivos public/web-app-manifest-*.png. Sustitúyelos por archivos con los mismos nombres y tamaños. El manifiesto en sí es src/app/manifest.ts.

Imágenes y logotipos

Para usar tu propia imagen, ponla en public/images/ y escribe su ruta, empezando por /images/, en el archivo de constantes de la sección. Una imagen de otro sitio web necesita su servidor en images.remotePatterns en next.config.mjs; si no, Next.js se niega a cargarla. images.unsplash.com y cdn.simpleicons.org ya están en la lista.

Las fotos de Unsplash y los logotipos de Simple Icons son de ejemplo. Sustitúyelos por tus propios archivos en public/images/ antes de publicar.

Colores

El color de acento es un degradado de rojo a ámbar, escrito con las clases de Tailwind from-red-500 y to-amber-500, con otros tonos red-* y amber-* para bordes, brillos e iconos. Para cambiarlo, busca red- y amber- en src/ y sustitúyelos por tus colores. Empieza por src/components/GradientButton.tsx, que usan todos los botones con degradado.

La página está diseñada en oscuro: el fondo es negro (bg-black en src/app/[locale]/layout.tsx y src/app/[locale]/page.tsx), y next-themes empieza en modo oscuro. Los tokens del tema en src/app/globals.css y tailwind.config.ts dan color a las piezas compartidas de src/components/ui/.

Fuentes

src/app/[locale]/layout.tsx carga Inter para el inglés y Noto Sans Arabic para el árabe mediante next/font/google, que las descarga al construir y las sirve desde tu propio sitio. Para cambiar una, importa otra fuente de next/font/google y úsala en lugar de Inter o Noto_Sans_Arabic.

Las secciones y su orden

src/app/[locale]/page.tsx enumera las secciones en el orden en que aparecen: Hero, SocialProof, HowItWorks, Features, Integrations, Testimonials, BlogPreview, Pricing, Faq y Cta. Mueve una línea para mover una sección, o bórrala para quitar la sección.

Cada sección es una carpeta en src/features/home/, con components/, constants/, hooks/ y types/ dentro. Para añadir una, copia esa estructura, añade sus textos a los dos archivos de mensajes y colócala en page.tsx.

Los enlaces Pricing y Testimonials de la cabecera saltan a las secciones con los id pricing y testimonials, y los enlaces de contacto a la llamada a la acción final, cuyo id es contact. Conserva esos id mientras los enlaces apunten a ellos.

Enlaces y botones

Los enlaces de ejemplo todavía no llevan a ninguna parte. Defínelos antes de publicar:

Los enlaces de contacto bajo las preguntas frecuentes y las integraciones ya funcionan: saltan a la llamada a la acción final.

Los botones (Log in, Get Started, Start Free Trial, Watch Demo, los botones de los planes, Read More y View All Articles) son botones simples sin destino. Para convertir uno en enlace, dale asChild y pon un enlace dentro, con su texto y su icono:

<GradientButton asChild className="h-10 sm:h-12 px-6 sm:px-8">
  <a href="https://app.your-domain.com/signup">{t("primaryCta")}</a>
</GradientButton>

Búsqueda y redes sociales

• Título y descripción de la página: metadata.title y metadata.description en los dos archivos de mensajes. metadata.imageAlt describe la imagen para compartir.
• Imagen para compartir: public/image.png, de 1200 x 630 píxeles.
• Enlace canónico y alternativas de idioma: se construyen a partir de NEXT_PUBLIC_SITE_URL, que defines al desplegar.
• src/app/[locale]/layout.tsx también define una etiqueta generator con el nombre del autor de la plantilla. Cámbiala o quítala ahí.
• La plantilla no incluye robots.txt ni sitemap. Añade src/app/robots.ts y src/app/sitemap.ts si los quieres.

• Define tu dirección

Siguiente

• Idiomas y escritura de derecha a izquierda
• Publícalo en internet