# Éclat Botanique Site e-commerce React multi-pages pour une boutique française de cosmétiques naturels, avec catalogue filtrable, fiches produits, panier persistant et thème clair/sombre. ## Masterplan - Offrir une vitrine e-commerce mobile-first, chaleureuse et premium pour vendre une gamme courte de soins botaniques. - Aider les utilisateurs à trouver un produit par besoin de peau, catégorie ou actif via un catalogue simple et éditorialisé. - Proposer un parcours de démonstration complet : accueil → boutique → fiche produit → ajout panier → panier → validation simulée. - Rester 100% frontend : pas de backend, pas de paiement réel, pas d’authentification, pas de compte utilisateur. - Valoriser une esthétique sensorielle : images produits Unsplash, cartes arrondies, fonds botaniques, glassmorphism léger et thème clair/sombre. ## Tech Stack & Architecture - **Frontend statique sans build step** : `index.html` charge Tailwind via CDN, `styles/main.css`, puis `src/main.js` en module ES. - **React 19.2.0 via esm.sh** : imports CDN directs dans chaque fichier concerné. Ne pas ajouter de dépendances npm sans introduire explicitement un système de build. - **JSX sans transpilation** : les composants utilisent `htm` via `src/jsx.js` et le tag `html`. Écrire : ```js return html`

...

`; ``` Ne pas écrire de JSX classique (``) hors template `html`. - **Routing** : `HashRouter` de `react-router-dom@7.1.5` dans `src/App.js`. Les URLs sont de type `/#/boutique`, adaptées à un hébergement statique. - **Shell d’application** : - `src/main.js` monte `` dans `#root`. - `src/App.js` définit les routes imbriquées sous `Layout`. - `src/components/Layout.js` rend `Header`, ``, puis `Footer`. - **State management** : - Panier global avec `zustand@5.0.8` dans `src/store/useCartStore.js`. - Persistance via middleware `persist`, clé `eclat-botanique-cart`. - Thème clair/sombre via Context React dans `src/mainProviders.js`, persisté sous `eclat-theme`. - **Catalogue** : source unique dans `src/data/products.js`. Les pages doivent importer `products` et `categories`, jamais dupliquer les données produit. - **UI** : - Tailwind CDN pour layout, spacing, responsive, états hover/focus. - Variables HSL, ombres, rayons, fond botanique et helpers `.glass`, `.product-orb`, `.no-scrollbar` dans `styles/main.css`. - Icônes via `lucide-react@0.468.0`. - Les pages catalogue/fiche utilisent `product.image`; le panier utilise un aperçu abstrait `.product-orb` basé sur `product.colors`, car le store ne persiste pas les URLs d’images. ## File Structure ```txt index.html Entrée HTML, Tailwind CDN, styles/main.css, root React et script src/main.js. styles/main.css Thèmes clair/sombre, variables HSL, fond botanique, glass, product-orb, focus, no-scrollbar. src/main.js Point d’entrée ReactDOM ; rend Providers puis App. src/jsx.js Bridge htm + React.createElement ; obligatoire pour écrire html`...` sans transpilation JSX. src/mainProviders.js ThemeProvider/useTheme ; applique .dark sur et persiste eclat-theme. src/App.js HashRouter et routes : /, /boutique, /produit/:id, /panier, /apropos, *. src/components/Layout.js Shell commun avec Header, main Outlet et Footer. src/components/Header.js Logo, nav desktop, toggle thème, icône panier avec compteur, raccourci boutique mobile. src/components/Footer.js Bloc marque, liens internes, promesses cosmétiques. src/components/ProductCard.js Carte produit réutilisée par Home et Shop ; image, badge, rating, prix, ajout panier. src/data/products.js Catalogue statique, catégories de filtre et champs métier produits. src/store/useCartStore.js Store Zustand persistant : items, addItem, decreaseItem, removeItem, clearCart. src/pages/Home.js Hero éditorial, bénéfices, sélection des 3 premiers produits. src/pages/Shop.js Catalogue filtrable par recherche texte et catégorie. src/pages/ProductDetail.js Fiche produit par id, ingrédients, avis, ajout panier, fallback introuvable. src/pages/Cart.js Panier persistant, quantités, suppression, frais de livraison, total, validation simulée. src/pages/About.js Page éditoriale sur l’approche botanique et les engagements. src/pages/NotFound.js Page 404 thématisée avec retour accueil. CLAUDE.md Documentation projet destinée aux agents IA ; doit refléter le code courant. ``` ## Key Features ### Accueil - `src/pages/Home.js` présente : - un hero “Nouvelle routine éclat 2026” ; - deux CTA vers `/boutique` et `/apropos` ; - trois bénéfices : actifs traçables, formules efficaces, livraison soignée ; - une sélection des 3 premiers produits via `products.slice(0, 3)`. - Ne pas hardcoder les produits en vedette ailleurs : l’ordre dans `src/data/products.js` pilote cette sélection. ### Catalogue boutique - `src/pages/Shop.js` affiche tous les produits avec `ProductCard`. - Recherche locale côté client sur : - `product.name` - `product.skin` - `product.short` - Filtre par catégorie depuis `categories`, avec `Tous` comme valeur par défaut. - Si aucun résultat : afficher l’état vide “Aucun soin trouvé”. - Les filtres ne sont pas synchronisés dans l’URL ; ils vivent uniquement en state React local. ### Fiche produit - Route : `/#/produit/:id`. - `src/pages/ProductDetail.js` recherche le produit par `products.find((item) => item.id === id)`. - Champs utilisés : - `id`, `name`, `category`, `price`, `rating`, `reviews`, `skin`, `volume`, `badge`, `details`, `ingredients`, `image`. - Si l’id n’existe pas, afficher le fallback “Soin introuvable” avec retour boutique. - Le bouton “Ajouter au panier” appelle `useCartStore().addItem(product)`. ### Panier persistant - Store : `src/store/useCartStore.js`. - Clé localStorage : `eclat-botanique-cart`. - Modèle d’item panier persisté : ```js { id, name, price, volume, colors, quantity } ``` - `addItem(product)` : - incrémente `quantity` si l’id existe déjà ; - sinon ajoute un item minimal dérivé du produit. - `decreaseItem(id)` décrémente puis supprime l’item si la quantité tombe à 0. - `removeItem(id)` supprime directement une ligne. - `clearCart()` vide le panier. - `src/pages/Cart.js` calcule : - sous-total : somme `price * quantity` ; - livraison : `0 €` si sous-total `>= 60` ou panier vide, sinon `5 €` ; - total : sous-total + livraison. - Validation simulée : le bouton vide le panier puis navigue vers `/`. Aucun paiement réel. ### Thème clair/sombre - `src/mainProviders.js` lit `localStorage.getItem('eclat-theme') === 'dark'`. - Un effet applique ou retire la classe `.dark` sur `document.documentElement`. - Les couleurs ne passent pas par la config Tailwind mais par variables CSS HSL dans `styles/main.css`. - `Header.js` affiche `Sun` en mode sombre et `Moon` en mode clair. ### Navigation - Header desktop : - Accueil `/` - Boutique `/boutique` - Notre approche `/apropos` - Header mobile : - pas de menu déroulant ; - l’icône `Menu` est un raccourci direct vers `/boutique`. - Panier accessible via icône `ShoppingBag` avec badge compteur total des quantités. - Footer répète les liens : catalogue, engagements, panier. ## Design Guidelines - **Style général** : cosmétique premium, botanique, doux, sensoriel. - **Couleurs** : - fond clair crème : `--background: 34 54% 96%` - texte prune foncé : `--foreground: 335 26% 16%` - primaire rose botanique : `--primary: 335 64% 46%` - secondaire vert végétal : `--secondary: 151 34% 42%` - mode sombre prune profond avec rose plus lumineux. - **Formes** : - cartes très arrondies avec `--radius-lg: 28px` - éléments internes souvent `--radius-md: 18px` - boutons principaux en pilule `rounded-full`. - **Effets** : - `.botanical-bg` combine deux dégradés radiaux et un dégradé linéaire. - `.glass` sert aux blocs hero/visuels avec fond translucide + blur. - `.product-orb` génère des visuels abstraits à partir de `--orb-a`/`--orb-b`. - Hover produit : légère translation verticale et ombre `--shadow-md`. - **Images** : - Cartes : ratio `aspect-[5/6]`, `object-cover`, zoom au hover. - Fiche produit : image carrée `aspect-square`. - Les URLs viennent de `product.image`. - **Typographie** : - Police système avec priorité `Inter` si disponible. - Titres en `font-black`, textes descriptifs en couleur `--muted-foreground`. - **Responsive** : - Mobile-first. - Grilles produits : 1 colonne mobile, 2 colonnes `sm`, 3 colonnes `xl` ou `lg` selon page. - Navigation principale cachée sous `md`. ## App Flow 1. **Découverte** - L’utilisateur arrive sur `/#/`. - Il lit le hero, consulte les bénéfices et les essentiels. - CTA principal vers `/#/boutique`. 2. **Recherche produit** - Dans `/#/boutique`, l’utilisateur filtre par catégorie ou saisit un besoin. - Les résultats se mettent à jour immédiatement côté client. - Chaque carte permet soit d’ouvrir la fiche, soit d’ajouter directement au panier. 3. **Consultation fiche** - `/#/produit/:id` affiche détails, avis, besoin de peau, volume et ingrédients. - Si l’URL contient un id invalide, afficher l’état “Soin introuvable”. 4. **Ajout panier** - Depuis une carte ou une fiche, `addItem(product)` met à jour Zustand. - Le badge panier dans `Header.js` reflète la somme des quantités. - Le panier persiste après refresh grâce à localStorage. 5. **Gestion panier** - `/#/panier` permet d’augmenter, diminuer, supprimer. - Si le panier est vide, afficher un état vide avec CTA vers la boutique. - Le résumé applique la livraison offerte dès 60 €. 6. **Validation simulée** - Le bouton “Valider la commande” vide le store et redirige vers `/`. - Ne pas créer de confirmation backend ou transaction réelle sans changer l’architecture. ## Conventions - **Langue UI** : français partout, ton premium mais simple. - **Composants** : - Exports nommés uniquement : `export function ProductCard(...)`. - Imports relatifs avec extension `.js`. - Utiliser `html` depuis `../jsx.js` ou `./jsx.js` selon le niveau. - **HTM gotchas** : - Les composants dynamiques s’écrivent `<${Component} />`. - Les routes utilisent `element=${html`<${Page} />`}`. - Pour mapper des listes, toujours fournir `key`. - Les classes conditionnelles se construisent en string JS dans `className=${...}`. - **Styles** : - Privilégier Tailwind inline pour les layouts. - Ajouter uniquement les primitives globales réutilisables dans `styles/main.css`. - Utiliser les variables comme `hsl(var(--primary))`, `hsl(var(--card)/0.82)`. - **Produits** : - Ajouter/modifier les produits uniquement dans `src/data/products.js`. - Chaque produit doit au minimum conserver les champs utilisés par les pages : `id`, `name`, `category`, `price`, `rating`, `reviews`, `skin`, `volume`, `badge`, `short`, `details`, `ingredients`, `image`, `colors`. - `colors` doit contenir deux couleurs valides pour les aperçus panier. - Si une nouvelle catégorie est ajoutée, vérifier que `categories` l’inclut. - **Ajouter une page** : 1. Créer `src/pages/NouvellePage.js`. 2. Importer la page dans `src/App.js`. 3. Ajouter une `` sous la route `Layout`. 4. Ajouter un lien dans `Header.js` ou `Footer.js` seulement si elle fait partie de la navigation principale. - **Ajouter une feature panier** : - Modifier d’abord `src/store/useCartStore.js`. - Garder le modèle persisté minimal pour éviter de stocker des données produit obsolètes. - Si un nouveau champ panier est requis, prévoir la compatibilité avec les anciens items déjà en localStorage. - **Aucune API backend** : - Pas de endpoints, pas de base de données, pas d’authentification. - Les intégrations externes actuelles sont uniquement les CDNs : Tailwind, esm.sh, Unsplash images. ## Platform (GenMB) This app is built and hosted on GenMB. **Runtime:** Browser sandbox (iframe) or Cloud Run. No Node.js server — all code runs client-side unless `backend/` exists. **Dependencies:** CDN-only (esm.sh, cdn.tailwindcss.com, unpkg). Use ES module imports with full CDN URLs. No `npm install` at runtime. **Entry point:** `index.html` must include all CDN script tags. Tailwind via CDN with inline config. **Built-in services (relative API paths only, never hardcode domains):** - `/api/ai/completion` — AI proxy | `/api/data/{appId}/*` — PostgreSQL (DataConnect SDK) - `/api/storage/{appId}/*` — File uploads (GCS) | `/api/auth/google/*` — Google OAuth - `/api/contact/submit` — Contact form | SDKs: `window.genmb.db`, `.storage`, `.auth` **File structure:** `index.html` (entry), `src/` (source), `styles/` (CSS), `backend/` (optional FastAPI), `CLAUDE.md` (this file). **Cannot:** Install npm packages at runtime, access filesystem, make direct server-side calls from frontend, modify infra.