Qué es la plantilla
Una landing page para un producto o un negocio, escrita con Publino como ejemplo, una plataforma inventada que vende componentes de interfaz y plantillas y despliega sitios web. Es una sola app Next.js sin base de datos ni back end, y no hace falta configurar nada antes de la primera ejecución.
Tiene tres páginas: una página de inicio con una maqueta animada del panel bajo el titular, una página de precios y una página de contacto. Incluye temas oscuro y claro, e inglés y árabe.
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 | Todo el estilo, con variables de color para los modos claro y oscuro |
| next-intl | Los textos en inglés y árabe y el idioma en la dirección |
| React Hook Form y Zod | Los dos formularios y sus validaciones |
| Motion | Las animaciones |
| Recharts, dnd-kit y cobe | El gráfico de una tarjeta de características, las tarjetas de la maqueta del panel que puedes arrastrar y el globo 3D |
| Radix UI y Tabler Icons | Las pestañas, los tooltips y las etiquetas, y 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 Publino-template:
| Ruta | Qué es |
|---|---|
src/ | La app: las páginas y sus secciones, el encabezado, la maqueta del panel, las tarjetas de características y la configuración de idiomas |
messages/ | Todos los textos visibles, en inglés y árabe |
public/ | Las imágenes, los favicons, los iconos de la app y la imagen para compartir en redes |
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 dos formularios validan lo que escriben los visitantes, pero no envían nada hasta que los conectes a tu propio servicio.
- Nada cobra pagos. Los botones de los planes llevan a la página de contacto o al formulario de la página de inicio.
- Algunos botones son marcadores de posición para que los apuntes a tus propias páginas, como Login, Book a call y los dos botones del hero.
- Los textos, las cifras, las personas, los precios y las tarjetas de plantillas son contenido de ejemplo que debes reemplazar.
El sitio incluye inglés y árabe. Las direcciones en inglés no llevan prefijo, como /pricing; las del árabe empiezan por /ar, como /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.