Ce qu'est le template
Un site vitrine d'une page pour une marque de jus. Une roue 3D de quatre canettes tourne avec la molette de la souris, les touches fléchées ou les boutons fléchés, et toute la page prend les couleurs de la saveur au premier plan.
- Carrousel de canettes 3D : quatre canettes sur une roue, une par quart de tour. Faites glisser une canette pour la faire pivoter ; elle revient en place quand vous la lâchez.
- Un thème par saveur : le fond, le halo derrière la canette et les boutons changent de couleur avec le jus sélectionné.
- Des fruits flottants, des glaçons et des feuilles autour de la scène, et une ondulation d'eau qui suit le pointeur.
- Une mise en page distincte pour les téléphones, utilisée à 600 pixels de large et moins.
- Anglais et arabe, avec la page arabe disposée de droite à gauche.
Les saveurs sont Lemon Ginger, Blueberry Açai, Mango Burst et Raspberry Rosé.
Le formulaire de connexion et le panneau du panier sont des éléments de démonstration. Le formulaire vérifie ses champs, mais il n'y a pas de back-end, donc rien n'est envoyé nulle part. Le panier affiche deux articles d'exemple.
Avec quoi il est construit
| Partie | Construit avec |
|---|---|
| Framework | Next.js 15 (App Router), React 19, TypeScript |
| Styles | Tailwind CSS 4 |
| Scène 3D | React Three Fiber, Three.js et Drei |
| Animation | GSAP, et react-water-wave pour l'ondulation |
| Langues | next-intl |
| Formulaire de connexion | React Hook Form avec Zod |
Il n'y a ni base de données ni API. Le site ne lit aucune variable d'environnement : il n'y a donc rien à configurer avant de le lancer, et chaque fichier qu'il charge est fourni dans le dossier.
Ce que contient le téléchargement
Le ZIP contient un seul dossier, juicy, avec tout le site :
| Chemin | Description |
|---|---|
messages/ | Les textes de la page, en.json et ar.json |
public/assets/ | Les modèles 3D des canettes et les images |
src/app/[locale]/ | La mise en page (langue, sens d'écriture, polices, titre de la page) et la page |
src/features/ | Les parties de la page : le carrousel, les fruits, la glace, la navigation et le texte produit |
Dockerfile | Construit une image qui sert le site sur le port 3030 |
README.md | Le guide, également dans cette documentation |
LICENSE.md | La licence |
Les dépendances sont figées à des versions exactes et yarn.lock est inclus, vous installez donc les versions avec lesquelles le template a été testé.
L'anglais est sur /en et l'arabe sur /ar. Sous Windows, utilisez PowerShell ou Git Bash pour les commandes de cette documentation.