Qué es la plantilla
Una landing page para un producto de software, escrito con un producto de analítica como ejemplo. Es una sola aplicación Next.js, sin base de datos y sin back end, y no hay que configurar nada antes de la primera ejecución.
Incluye una página de inicio con una vista previa del panel en vivo en el hero, una página de precios, un blog, una página de contacto, páginas de inicio de sesión, registro y recuperación de contraseña, cuatro páginas legales y páginas de error.
Un vistazo al sitio
Con qué está construida
| Tecnología | Qué hace aquí |
|---|---|
| Next.js 16 (App Router) | El framework, las páginas, los metadatos y el servidor de producción |
| React 19 y TypeScript | Todos los componentes y archivos de código fuente |
| Tailwind CSS 4 | Todos los estilos |
| next-intl | Los textos en inglés y árabe y el idioma en cada dirección |
| React Hook Form y Zod | Los formularios y sus validaciones |
| Framer Motion y GSAP | Las animaciones |
| Recharts, dnd-kit y Embla | Los gráficos de la vista previa del panel, sus tarjetas que se pueden arrastrar y los carruseles |
| Tabler Icons | Los iconos |
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 Nextjs-landing-page-template-2:
| Ruta | Qué es |
|---|---|
src/ | La aplicación: las páginas, sus secciones, el encabezado y el pie de página, la vista previa del panel y la configuración de idiomas |
messages/ | Todos los textos visibles, en inglés y árabe |
public/ | Imágenes, los archivos de la fuente Clash Display y la imagen para compartir en redes sociales |
Dockerfile, .dockerignore | Construye el sitio en una imagen que lo sirve en el puerto 3030 |
.env.example | Los ajustes opcionales, con sus valores por defecto |
README.md | La guía de instalación y personalización |
LICENSE.md | Tu licencia comercial |
package.json, yarn.lock, .yarnrc.yml | Las dependencias y la configuración de Yarn 4 |
Conviene saber antes de empezar a construir sobre ella
- Los formularios validan lo que escriben los visitantes, pero no envían nada hasta que los conectes a tu propio servicio.
- El sitio es oscuro. Incluye cuatro temas de color y eliges uno con una sola línea.
- Los textos, cifras, personas, logotipos y artículos del blog son contenido de ejemplo que debes reemplazar. Las páginas legales también son texto de ejemplo.
El sitio incluye inglés y árabe. Cada dirección empieza por su idioma, como /en/pricing o /ar/pricing, y las páginas en árabe se muestran de derecha a izquierda.
En Windows, usa PowerShell o Git Bash para los comandos de estas guías.