Jimbo's Hot Sauce

Pourquoi ce projet existe

La plupart des présentations de boutiques en ligne vous montrent un thème dans lequel on a déposé les produits de quelqu’un d’autre. Nous voulions montrer le contraire : une marque et une boutique complètes, inventées de toutes pièces, pour que vous puissiez juger le savoir-faire plutôt que les données de démonstration. Jimbo’s est fictif. Le symbole de marque, les sept étiquettes, les photos de bouteilles, les textes et le code ont tous été produits par Nova.

Ce que comprend la réalisation

• Identité de marque — mot-symbole de style diner rétro, palette marine / crème / rouge et système d’étiquettes appliqué de façon uniforme à sept produits

• Photographie de produits — chaque bouteille photographiée, détourée et harmonisée en couleur, en plus de compositions d’ensembles et d’images de mise en situation

• Boutique en ligne — bannière principale, rangée des meilleurs vendeurs, ensembles, histoire du fondateur, avis et inscription à l’infolettre

• Pages de produits — un sélecteur de paquets de 1 / 3 / 5 dont les prix sont calculés à partir d’une seule valeur de rabais, de sorte qu’une économie annoncée ne peut jamais s’écarter du total facturé

• L’indice de piquant — une échelle interactive de toute la gamme. Sur ordinateur, vous survolez; sur écran tactile, la position de défilement sert elle-même de commande : faire glisser le pouce fait monter le piquant, et l’affichage, la couleur et le repère suivent

• Un vrai panier — état réactif partagé, contrôles de quantité, sous-total en temps réel et seuil de livraison gratuite

Comment c’est conçu techniquement

Laravel 13 sert une seule coquille; toute la boutique en ligne est une application monopage (SPA) Vue 3 avec routage par historique, mise en forme à l’aide des jetons de design de Tailwind v4. Les fichiers compilés sont versionnés avec le code, de sorte qu’un déploiement n’exécute jamais d’installation de paquets sur le serveur et ne peut pas être livré à moitié. Il n’y a aucune base de données derrière — les sessions et le cache reposent sur le système de fichiers, ce qui rend l’ensemble peu coûteux à héberger et presque impossible à briser.

Des détails réfléchis

• Les animations sont optionnelles : chaque animation d’entrée est conditionnée par prefers-reduced-motion, et les éléments sont par défaut dans leur état final, de sorte que rien ne peut rester invisible

• La bouteille de la bannière principale déborde par-dessus l’en-tête fixe, puis s’en dégage au défilement plutôt que de dériver en travers de la navigation

• La mise en page est déterminée par les points de rupture, non par la largeur du contenu, de sorte qu’un nom de produit court et un nom long se disposent de façon identique

• Focus clavier, liens d’évitement et comportement entièrement adaptatif jusqu’à 390 px