Qué es la plantilla
MONO es un sitio web de una sola página para una agencia de diseño o desarrollo web, con un estilo brutalista en blanco y negro. Es una única app de Next.js: sin base de datos, sin panel de administración y sin servidor propio que mantener.
La página se compone de estas secciones, de arriba abajo:
| Sección | Qué muestra | Carpeta |
|---|---|---|
| Barra de navegación | El logotipo, enlaces a cuatro secciones, el selector de idioma y un botón de contacto | src/layouts/Navbar/ |
| Portada | Un titular de tres líneas, una breve introducción, dos botones y una forma animada | src/features/home/Hero/ |
| Características | Cuatro tarjetas sobre el enfoque de la agencia | src/features/home/Features/ |
| Trabajos | Cuatro proyectos, cada uno con una imagen, un título y un año | src/features/home/Work/ |
| Proceso | Cinco pasos numerados | src/features/home/Process/ |
| Testimonios | Tres citas de clientes con controles de anterior y siguiente | src/features/home/Testimonials/ |
| Precios | Tres planes con un selector mensual y anual | src/features/home/Pricing/ |
| Contacto | Un formulario de contacto con validación, el correo, el teléfono, la dirección y los enlaces sociales | src/features/home/Contact/ |
| Pie de página | Enlaces a las secciones, enlaces legales, iconos sociales y la línea de copyright | src/layouts/Footer/ |
Con qué está hecha
| Tecnología | Se usa para |
|---|---|
| Next.js 15 y React 19 | La app, con el App Router |
| TypeScript | Seguridad de tipos |
| Tailwind CSS 3 | Estilos |
| next-intl 4 | Direcciones y textos en inglés y árabe |
| Motion | Animaciones |
| React Hook Form y Zod | El formulario de contacto y su validación |
| TanStack Query | El envío del formulario de contacto |
| Lucide React | Iconos |
Cada dependencia está fijada a una versión exacta 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 contiene una carpeta, landing-page-template-1:
| Ruta | Qué es |
|---|---|
README.md | Instalación, scripts, ajustes y dónde cambiar cada cosa |
LICENSE | La licencia MIT |
Dockerfile, .dockerignore | La imagen de Docker |
.env.example | Los dos ajustes opcionales |
messages/ | Todos los textos visibles, en en.json y ar.json |
public/ | Las imágenes de los proyectos, los iconos y la imagen de vista previa para redes sociales |
src/ | El código |
package.json, yarn.lock, .yarnrc.yml | Las dependencias y los ajustes de Yarn |
El sitio viene en inglés y árabe: el inglés en /en y el árabe en /ar, de derecha a izquierda y con su propia fuente.
Licencia
MONO es gratuita bajo la licencia MIT. Puedes usarla para tus sitios web y los de tus clientes, modificarla y publicarla. Conserva el aviso de copyright de LICENSE.
En Windows, usa PowerShell o Git Bash para los comandos de estas guías.