Hazla tuya

Ejecuta el sitio con yarn dev mientras editas: la página se recarga cada vez que guardas. Todas las rutas de abajo son relativas a la carpeta landing-page-template-2.

Los dos ajustes

Sin Docker, ponlos en .env.local (copia .env.example). Con Docker, pásalos como argumentos de construcción: la construcción de la imagen no lee los archivos .env ni .env.local.

NEXT_PUBLIC_SITE_URL=https://www.your-domain.com

docker build -t saas-landing --build-arg NEXT_PUBLIC_SITE_URL=https://www.your-domain.com .

El nombre de la marca y el logotipo

name en src/config/site.ts es la marca. El logotipo del encabezado y del pie de página es su primera letra en un cuadrado de color, seguida del nombre, y lo dibuja src/components/Logo.tsx. Los textos que dicen {brand} en los archivos de mensajes también lo usan.

name: "SaasPro",

El mismo valor rellena el título de la página, la tarjeta para compartir en redes, el menú Resources y el manifiesto de la aplicación web, que src/app/manifest.ts genera con los colores oscuros de la página. Cambias el nombre en un solo sitio.

creator, en el mismo archivo, es el autor que aparece en los metadatos de la página. Cámbialo también.

Texto

Cada palabra visible, cada descripción de imagen y el título de la página están en messages/en.json y messages/ar.json. Cada sección tiene su propio bloque, con su nombre: Header, Hero, SocialProof, Features, HowItWorks, Testimonials, Pricing, Comparison, Integrations, Faq, Blog, Cta, Newsletter y Footer.

• Cambia el valor, conserva la clave y cámbialo en ambos archivos. Una clave que falta en un archivo aparece como un error de mensaje ausente en la página de ese idioma.
• Las palabras entre llaves, como {brand} y {year}, las rellena la aplicación. Consérvalas tal cual.
• En HowItWorks.title, las palabras entre <highlight> y </highlight> se muestran con el color degradado. Conserva ambas etiquetas.

• Idiomas

Imágenes

El cambio más fácil es reemplazar un archivo por uno tuyo con el mismo nombre. Para un archivo nuevo, ponlo en public/ y usa su ruta desde la raíz del sitio, como /images/your-photo.jpg.

Una imagen de otro sitio web solo se carga si su host figura en images.remotePatterns en next.config.js. Solo figura images.unsplash.com. Añade ahí tu host, o copia los archivos en public/.

remotePatterns: [
  { protocol: "https", hostname: "images.unsplash.com" },
  { protocol: "https", hostname: "cdn.your-domain.com" },
],

Precios y planes

Los precios están en dos lugares, uno por sección. Cambia ambos para que coincidan:

Las características de un plan se listan por id en featureIds, y cada id necesita su texto bajo el plan en ambos archivos de mensajes. popular: true marca el plan con la insignia Most Popular.

Los precios son mensuales, en dólares estadounidenses, y src/hooks/usePriceFormatter.ts les da el formato del idioma de la página. Para mostrar otra moneda, cambia su valor por defecto currency = "USD" por el código de tu moneda, como "EUR".

Colores

• Los colores de acento: clases de Tailwind moradas y rosas (purple-*, pink-*) en los componentes, como from-purple-600 to-pink-500 en los botones y el logotipo. Busca purple- y pink- en la carpeta src para cambiarlas todas.
• El fondo de la página: bg-gray-950 en el elemento exterior de la página en src/app/[locale]/page.tsx. Las secciones usan clases gray-* sobre él.
• El botón y el campo compartidos: las variables CSS de src/styles/globals.css, como --primary y --ring. El bloque .dark es el que se usa.

La página siempre es oscura: src/app/[locale]/layout.tsx añade la clase dark e inicia el proveedor de tema con defaultTheme="dark". No hay tema claro ni selector de tema.

Fuentes

src/lib/fonts.ts carga Inter para el inglés y Noto Sans Arabic para el árabe desde Google Fonts, mediante next/font. Las fuentes se descargan al construir el sitio y luego las sirve el propio sitio. src/app/[locale]/layout.tsx elige la fuente según el idioma.

import { Inter, Noto_Sans_Arabic } from "next/font/google";

export const inter = Inter({ subsets: ["latin"] });
export const notoSansArabic = Noto_Sans_Arabic({ subsets: ["arabic"] });

Para usar otra fuente de Google, impórtala desde next/font/google en lugar de una de estas y conserva el nombre exportado, o cambia el nombre donde lo usa layout.tsx.

Secciones

src/app/[locale]/page.tsx lista las secciones en el orden en que aparecen. Elimina una línea para ocultar una sección, o muévela para cambiar el orden. Cada sección está en su propia carpeta dentro de src/features/home/.

<Header />
<Hero />
<SocialProof />
<Features />
<HowItWorks />
<Testimonials />
<Pricing />
<ComparisonTable />
<Integrations />
<Faq />
<BlogPreview />
<Cta />
<Footer />

El encabezado enlaza a las secciones por su id, como #pricing y #testimonials. Si eliminas una sección, elimina también su enlace.

Para añadir una sección:

1. Crea src/features/home/<Section>/ con un index.tsx y las carpetas components/ y constants/, como tienen las demás secciones.
2. Añade sus textos bajo una clave nueva en ambos archivos de mensajes y léelos con useTranslations.
3. Expórtala desde src/features/home/index.ts y colócala en src/app/[locale]/page.tsx.

La sección de newsletter

En src/features/home/Newsletter/ se incluye una sección de newsletter con un formulario de correo electrónico, pero no está en la página. Para mostrarla, impórtala junto a las demás y colócala, por ejemplo antes de la llamada a la acción:

import {
  …
  BlogPreview,
  Newsletter,
  Cta,
} from "@/features/home";

<BlogPreview />
<Newsletter />
<Cta />

El formulario necesita una API propia. Configura NEXT_PUBLIC_API_BASE_URL con su dirección; el formulario envía { "email": "…" } como JSON en un POST a <NEXT_PUBLIC_API_BASE_URL>/newsletter/subscribe, directamente desde el navegador del visitante.

• Una respuesta 2xx muestra el mensaje de éxito y vacía el formulario.
• Cualquier otra respuesta, un error de red o una NEXT_PUBLIC_API_BASE_URL vacía muestran el mensaje de error. No se envía nada mientras la variable está vacía.
• Como es el navegador quien envía la solicitud, tu API debe permitir la dirección de tu sitio en sus ajustes de CORS.

Los textos están bajo Newsletter en los archivos de mensajes.

Enlaces y botones

La mayoría de los enlaces de la plantilla apuntan a # hasta que les das un destino:

Los botones Get Started, Start Free Trial y Book a Demo, y los botones de las tarjetas de precios, son botones simples sin destino. Para convertir uno en enlace, dale al Button la prop asChild y pon un Link dentro, como hace src/components/LocaleSwitcher.tsx:

import { Link } from "@/i18n/navigation";

<Button asChild className="…">
  <Link href="/signup">{common("getStarted")}</Link>
</Button>

El Link de @/i18n/navigation mantiene el idioma del visitante en la dirección. Para otro sitio web, usa en su lugar un <a href="https://…"> simple.

Fechas y el año del copyright

• El año del copyright del pie de página es el año en que se construyó el sitio, desde COPYRIGHT_YEAR en src/layouts/Footer/constants/footer.ts. Vuelve a construirlo en un año nuevo para actualizarlo.
• La fecha y el tiempo de lectura de cada tarjeta del blog son publishedAt y readMinutes en src/features/home/BlogPreview/constants/articles.ts; su título y su resumen están bajo Blog en los archivos de mensajes.

Buscadores y compartir

• El título y la descripción de la página son Metadata.title y Metadata.description en cada archivo de mensajes, así que cada idioma tiene los suyos.
• NEXT_PUBLIC_SITE_URL da a cada página su dirección canonical (/en o /ar) y los enlaces entre los dos idiomas. Ponle tu dominio antes de construir para producción, o los buscadores y las tarjetas sociales apuntarán a localhost.
• La tarjeta para compartir en redes sociales usa public/image.png (1200 por 630) con el mismo título y la misma descripción.
• La plantilla no incluye sitemap.xml ni robots.txt.