Qué es la plantilla
Una landing page de una sola página para un producto de software, con precios. Es una única aplicación Next.js: sin base de datos, sin back end y sin nada que configurar antes de la primera ejecución.
La página se compone de estas secciones, de arriba abajo:
| Sección | Qué muestra |
|---|---|
| Encabezado | El logotipo, dos menús con submenús (Products y Resources), enlaces a los precios y a los testimonios, el selector de idioma y un menú móvil |
| Hero | Un titular, dos botones y una imagen del producto |
| Prueba social | Logotipos de empresas y cuatro cifras |
| Características | Seis tarjetas de características |
| Cómo funciona | Cuatro pasos, cada uno con una imagen |
| Testimonios | Tres citas de clientes con fotos |
| Precios | Tres planes mensuales, con el del medio marcado como Most Popular |
| Tabla comparativa | Los tres planes uno al lado del otro, característica por característica |
| Integraciones | Diez logotipos de herramientas |
| Preguntas frecuentes | Seis preguntas que se abren y se cierran |
| Vista previa del blog | Tres tarjetas de artículos |
| Llamada a la acción | Un botón final con tres garantías |
| Pie de página | Columnas de enlaces, enlaces a redes sociales y la línea de copyright |
También se incluye una sección de newsletter con un formulario de suscripción en src/features/home/Newsletter/. No aparece en la página hasta que la añades.
Un vistazo a la página
Con qué está construida
| Tecnología | Qué hace aquí |
|---|---|
| Next.js 15 (App Router) | El framework, el enrutamiento y el servidor de producción |
| TypeScript | Todos los archivos de código fuente |
| Tailwind CSS | Todos los estilos |
| next-intl | Los textos en inglés y en árabe, y el idioma en la dirección |
| Framer Motion | Las animaciones |
| Radix UI | El acordeón de preguntas frecuentes y el slot del botón |
| Lucide React | Los iconos |
| React Hook Form, Zod y TanStack Query | El formulario de newsletter, sus validaciones y su solicitud |
Cada dependencia está fijada a una versión exacta en package.json, y se incluye yarn.lock, así que tu instalación obtiene las mismas versiones con las que se probó la plantilla.
Qué incluye la descarga
El ZIP se extrae en una carpeta llamada landing-page-template-2:
| Ruta | Qué es |
|---|---|
src/ | La aplicación: la página, sus secciones, el encabezado y el pie de página, la configuración de idiomas |
messages/ | Todos los textos visibles, en en.json y ar.json |
public/ | Imágenes, logotipos y favicons |
Dockerfile | Construye el sitio en una imagen que lo sirve en el puerto 3030 |
.env.example | Los dos ajustes opcionales, con sus valores por defecto |
README.md | La guía de instalación y personalización |
package.json, yarn.lock, .yarnrc.yml | Las dependencias y la configuración de Yarn 4 |
LICENSE | La licencia MIT |
La página se incluye en inglés y en árabe. Cada dirección empieza por su idioma, /en o /ar, y la página en árabe se muestra de derecha a izquierda. La página siempre es oscura.
En Windows, usa PowerShell o Git Bash para los comandos de estas guías.