Adaptez-le à votre marque

Où se trouve chaque chose

Lancez yarn dev pendant que vous travaillez : la page se recharge à chaque enregistrement.

Textes

Chaque mot de la page vient de messages/en.json et messages/ar.json. Modifiez la valeur, jamais la clé, et gardez les mêmes clés dans les deux fichiers.

Le mot géant est dessiné avec la police Thunder, en majuscules, et vaut JUICY dans les deux langues. Gardez-le en lettres latines, ou changez aussi sa police.

Remplacer une saveur

Une saveur est un identifiant qui relie une canette 3D, un thème de couleurs, une image de fruit et ses textes. Les étapes ci-dessous remplacent Mango Burst par une nouvelle saveur, Peach Fizz, avec l'identifiant peachFizz. Procédez de la même façon pour n'importe laquelle des quatre.

1. 01

   Renommez l'identifiant

   Dans src/types/juice.ts, remplacez l'ancien identifiant par le nouveau. À partir de là, TypeScript signale chaque fichier qui utilise encore l'ancien identifiant.

   src/types/juice.tsCopier

   export type JuiceId =
     | "lemonGinger"
     | "blueberryAcai"
     | "peachFizz"
     | "raspberryRose";
2. 02

   Créez le modèle de la canette

   Chaque canette est un fichier .glb avec un maillage et deux matériaux : M_Aluminum, le corps en métal, et M_Cola, l'étiquette. L'étiquette est une image enroulée autour de la canette, de 2048 sur 958 pixels, stockée dans le .glb. Pour créer votre canette, ouvrez-en une existante dans Blender (File > Import > glTF 2.0), remplacez l'image du matériau M_Cola par votre propre étiquette à la même taille, et exportez-la avec File > Export > glTF 2.0, au format glTF Binary (.glb). Gardez la taille et la position du modèle pour qu'il se place sur la roue comme les autres.

   Enregistrez-le sous public/assets/3d/can/peach.glb. Le code rend chaque matériau métallique et brillant quand il charge le modèle (metalness et roughness dans src/features/carousel/hooks/useCanModel.ts), changez donc la finition là plutôt que dans Blender.
3. 03

   Faites pointer la roue vers le modèle

   Dans src/features/carousel/constants/juiceCans.ts, modifiez l'entrée. L'ordre de cette liste est l'ordre sur la roue, et la première canette est celle sur laquelle la page s'ouvre.

   src/features/carousel/constants/juiceCans.tsCopier

   { id: "peachFizz", model: "/assets/3d/can/peach.glb" },
4. 04

   Donnez-lui ses couleurs

   Dans src/features/product-showcase/constants/themes.ts, renommez l'entrée et définissez ses couleurs. Ce que chacune colore est décrit dans Couleurs.

   src/features/product-showcase/constants/themes.tsCopier

   peachFizz: {
     mainBgColor: "#F4A27B",
     blurColor: "#FFE1D2",
     textColor: "white",
     accentColor: "rgba(255, 255, 255, 0.9)",
     buttonBgColor: "white",
     buttonTextColor: "#F4A27B",
   },
5. 05

   Ajoutez son image de fruit

   Placez un PNG à fond transparent dans public/assets/images/fruit/, de 400 sur 600 pixels comme les autres, et indiquez son nom dans src/features/floating-fruits/constants/fruitImages.ts. La page l'affiche quatre fois autour de la canette, à différentes tailles et sous différents angles.

   src/features/floating-fruits/constants/fruitImages.tsCopier

   peachFizz: "peach.png",
6. 06

   Écrivez ses textes

   Dans messages/en.json comme dans messages/ar.json, renommez les clés de la saveur sous juices et cart.items et écrivez les nouveaux textes.

   messages/en.jsonCopier

   "juices": {
     "peachFizz": {
       "name": "Peach Fizz",
       "description": "Ripe peaches and a light sparkle, cold from the can."
     }
   }
7. 07

   Mettez à jour le panier, si la saveur y figure

   Le panneau du panier affiche les articles de src/features/navigation/constants/sampleCartItems.ts : Lemon Ginger et Blueberry Açai. Si la vôtre en fait partie, changez son juiceId, son price et son image, une photo de la canette dans public/assets/images/can/.
8. 08

   Vérifiez

   Terminaldans juicyCopier

   yarn typecheck
   yarn dev

   Résultat attendu: yarn typecheck ne signale aucune erreur, et la nouvelle canette tourne en place avec ses couleurs, son fruit et ses textes.

   Un problème ?

Quand vous remplacez la première saveur, Lemon Ginger, changez aussi DEFAULT_JUICE_ID à la fin de themes.ts, et le background de body dans src/app/globals.css par son mainBgColor. Cette couleur s'affiche un instant avant que la page ait fini de charger.

Couleurs

Chaque saveur a un thème dans src/features/product-showcase/constants/themes.ts. La page passe en douceur d'un thème à l'autre quand la roue tourne.

textColor et accentColor font partie de chaque thème, mais aucun composant ne les lit. Le texte de la page est blanc.

Pendant que la page tourne, useBodyBackground dans src/features/landing/hooks/ peint le fond de la page avec le mainBgColor de la saveur active. Le fond de body dans src/app/globals.css, #82AF38, ne couvre que l'instant avant le chargement de la page : changez-le en même temps que la première saveur.

La lumière reflétée sur les canettes vient de public/assets/hdri/forest_slope_1k.hdr, l'image Forest Slope de Poly Haven (CC0). Pour la changer, placez un autre fichier .hdr dans ce dossier et indiquez son nom dans src/features/carousel/constants/environment.ts.

Images

Remplacez un fichier par le vôtre sous le même nom, ou changez le nom là où le tableau l'indique.

Le nombre de glaçons et de feuilles, sur téléphone et sur les écrans plus grands, est défini dans src/features/ice-cubes/constants/layout.ts.

Polices

• Thunder, le mot géant : ses fichiers sont dans src/app/fonts/ et src/app/[locale]/layout.tsx les charge avec localFont. Pour utiliser une autre police, placez ses fichiers là et changez les chemins src.
• Cairo, le texte arabe : chargée depuis Google Fonts dans le même fichier avec next/font/google. Remplacez Cairo par une autre police Google qui a le sous-ensemble arabic.
• Le texte latin utilise Arial, défini sur body dans src/app/globals.css.

Parties de la page

La page tient dans un seul fichier, src/app/[locale]/page.tsx, qui place chaque partie. Pour en retirer une, supprimez son élément à cet endroit.

Liens et boutons

Les liens du menu de contact sont dans src/features/product-showcase/constants/contactLinks.ts. Chacun a un id, une url et une icon de react-icons, et son libellé se trouve sous contact.links.<id> dans les fichiers de messages. Remplacez les deux liens d'exemple par les vôtres.

import { FaInstagram } from "react-icons/fa6";

{ id: "instagram", url: "https://www.instagram.com/your-brand", icon: FaInstagram },

• Les éléments du menu sont listés par identifiant dans src/features/navigation/constants/navItems.ts, avec leurs libellés sous nav.items. Ce ne sont que des libellés qui ne mènent encore nulle part : pour en transformer un en lien, affichez un <a> avec votre adresse dans src/features/navigation/components/NavLinks.tsx.
• See More, Checkout et View Cart n'ont encore aucune action. Ajoutez un onClick ou transformez-les en liens là où ils sont dessinés : src/features/product-showcase/components/ProductInfo.tsx et src/features/navigation/components/CartSummary.tsx.
• Le formulaire de connexion vérifie ses champs puis les vide. Pour connecter des personnes, envoyez les valeurs depuis onSubmit dans src/features/navigation/hooks/useSignInForm.ts vers votre propre back-end.

Tailles de bouteille

Les boutons ronds de taille viennent de src/features/product-showcase/constants/sizes.ts. Appuyer sur un bouton le sélectionne ; selected: true marque celui qui est choisi à l'ouverture de la page. Le libellé de l'unité se trouve sous units dans les fichiers de messages.

{ value: "355", unit: "ml", selected: true },

Titre, description de la page et référencement

Le titre de l'onglet du navigateur et la description affichée par les moteurs de recherche sont metadata.title et metadata.description dans chaque fichier de messages, chaque langue a donc les siens. L'icône de l'onglet est src/app/favicon.ico : remplacez-la par la vôtre sous le même nom.

Le template ne définit ni adresse du site, ni image de partage, ni sitemap, ni robots.txt. Une fois votre domaine connu, ajoutez-les dans generateMetadata dans src/app/[locale]/layout.tsx, par exemple :

return {
  metadataBase: new URL("https://www.your-domain.com"),
  title: t("title"),
  description: t("description"),
  openGraph: { images: "/og.png" },
};

Placez l'image de partage dans public/og.png, en 1200 sur 630 pixels.