Qué es la plantilla
Una landing page de una sola página para un producto de IA, hecha con Next.js, TypeScript y Tailwind CSS. La marca de ejemplo se llama Nova. Diez secciones van desde la portada hasta la llamada a la acción final, entre una cabecera y un pie de página.
| Sección | Qué muestra | Carpeta |
|---|---|---|
| Portada | El titular, dos botones, una línea de confianza con una valoración y la imagen del producto | src/features/home/Hero |
| Prueba social | Seis logotipos de empresas y cuatro cifras clave | src/features/home/SocialProof |
| Cómo funciona | Cuatro pasos numerados con imágenes, en un carrusel deslizable en los móviles | src/features/home/HowItWorks |
| Funciones | Cuatro pestañas, cada una con una imagen y sus ventajas principales | src/features/home/Features |
| Integraciones | Doce logotipos de herramientas con su categoría | src/features/home/Integrations |
| Testimonios | Tres citas de clientes en un carrusel que avanza solo | src/features/home/Testimonials |
| Vista previa del blog | Tres tarjetas de artículos con categoría, fecha y tiempo de lectura | src/features/home/BlogPreview |
| Precios | Tres planes con un selector mensual y anual | src/features/home/Pricing |
| Preguntas frecuentes | Seis preguntas que se abren y se cierran | src/features/home/Faq |
| Llamada a la acción | Un mensaje de cierre con dos botones, adonde llevan los enlaces de contacto | src/features/home/Cta |
La cabecera tiene dos menús desplegables, el selector de idioma y un menú para móviles. El pie de página tiene tres grupos de enlaces, los iconos sociales y los enlaces legales.
Es una sola página: las tarjetas del blog, los enlaces de los menús y los botones son marcadores para tus propias páginas y acciones.
Las tecnologías
| Tecnología | Uso |
|---|---|
| Next.js 15 (App Router) y React 19 | El sitio, generado como páginas estáticas |
| TypeScript | El código |
| Tailwind CSS 3 | Los estilos |
| next-intl | Inglés y árabe, con el idioma al principio de la dirección |
| Framer Motion | Las animaciones de entrada |
| Radix UI | El acordeón de preguntas frecuentes y las pestañas de funciones |
| Embla Carousel | Los carruseles en los móviles |
| Lucide React | Los iconos |
Cada dependencia está fijada a una versión exacta en package.json, y se incluye yarn.lock, así que tu instalación coincide con la que se usó para probar la plantilla.
Qué incluye la descarga
El ZIP se extrae en una sola carpeta, landing-page-template-3:
| Ruta | Qué es |
|---|---|
src/ | El código del sitio, con una carpeta por sección |
messages/ | Todos los textos de la página, en en.json y ar.json |
public/ | Imágenes, logotipos, iconos y la imagen para compartir en redes |
Dockerfile | Construye y sirve el sitio en una sola imagen |
package.json, yarn.lock, .yarnrc.yml | Las dependencias fijadas y Yarn 4 |
.env.example | El único ajuste opcional, la dirección del sitio |
README.md | La guía de instalación |
LICENSE | La licencia MIT |
No hay back end, base de datos ni cuenta que configurar. La plantilla es gratuita y de código abierto con licencia MIT.
El sitio funciona en inglés en /en y en árabe en /ar, con la página en árabe de derecha a izquierda.
En Windows, usa PowerShell o Git Bash para los comandos de estas guías.