Qué es la plantilla
Un sitio de una sola página para una marca de zumos. Una rueda 3D con cuatro latas de zumo gira con la rueda del ratón, las flechas del teclado o los botones de flecha, y toda la página toma los colores del sabor que está delante.
- Carrusel de latas 3D: cuatro latas en una rueda, una por cada cuarto de vuelta. Arrastra una lata para girarla; vuelve a su sitio cuando la sueltas.
- Un tema por sabor: el fondo, el brillo detrás de la lata y los botones cambian de color con el zumo seleccionado.
- Frutas flotantes, cubitos de hielo y hojas alrededor de la escena, y una onda de agua que sigue al puntero.
- Un diseño propio para móviles, que se usa a partir de 600 píxeles de ancho o menos.
- Inglés y árabe, con la página en árabe de derecha a izquierda.
Los sabores son Lemon Ginger, Blueberry Açai, Mango Burst y Raspberry Rosé.
El formulario de inicio de sesión y el panel del carrito son una interfaz de demostración. El formulario valida sus campos, pero no hay back-end, así que no se envía nada a ningún sitio. El carrito muestra dos artículos de ejemplo.
Con qué está hecha
| Parte | Hecha con |
|---|---|
| Framework | Next.js 15 (App Router), React 19, TypeScript |
| Estilos | Tailwind CSS 4 |
| Escena 3D | React Three Fiber, Three.js y Drei |
| Animación | GSAP, y react-water-wave para la onda |
| Idiomas | next-intl |
| Formulario de inicio de sesión | React Hook Form con Zod |
No hay base de datos ni API. El sitio no lee variables de entorno, así que no hay nada que configurar antes de ejecutarlo, y todos los archivos que carga vienen en la carpeta.
Qué incluye la descarga
El ZIP contiene una carpeta, juicy, con todo el sitio:
| Ruta | Qué es |
|---|---|
messages/ | Los textos de la página, en.json y ar.json |
public/assets/ | Los modelos 3D de las latas y las imágenes |
src/app/[locale]/ | El layout (idioma, dirección, fuentes, título de la página) y la página |
src/features/ | Las partes de la página: el carrusel, las frutas, el hielo, la navegación y el texto del producto |
Dockerfile | Construye una imagen que sirve el sitio en el puerto 3030 |
README.md | La guía, también incluida en esta documentación |
LICENSE.md | La licencia |
Las dependencias están fijadas a versiones exactas y se incluye yarn.lock, así que instalas las mismas versiones con las que se probó la plantilla.
El inglés está en /en y el árabe en /ar. En Windows, usa PowerShell o Git Bash para los comandos de esta documentación.