src/ ├── assets/ # Images, logo GISE ├── components/ # Les petits morceaux réutilisables (Boutons, Cartes, Navbar, Footer) ├── layouts/ # Les "moules" des pages │ ├── PublicLayout.jsx # Moule avec Header/Footer standard │ └── AppLayout.jsx # Moule avec Barre latérale (Sidebar) pour l'espace client ├── pages/ # Les grandes pages │ ├── public/ # Accueil, Login, Register... │ └── app/ # Dashboard, Services, Factures... ├── services/ # Le "moteur" : fonctions pour parler à l'API FOSSBilling/Hestia └── App.jsx # Le routeur principal 1. Les Routes Publiques (La Vitrine) Ces pages sont accessibles à tout le monde. / (Accueil) : La page d'atterrissage. Une grande image forte (le Bunker), les 3 piliers (Web, VPS, Cloud), et un gros appel à l'action. /offres (Catalogue global) : Une page qui résume tous les produits. /offres/web : Détail des offres d'hébergement HestiaCP. /offres/vps : Détail des serveurs n8n, etc. /offres/cloud : Détail des offres Nextcloud. /login (Connexion) : Le formulaire pour entrer dans le Bunker. /register (Inscription) : Le formulaire pour créer un compte. /password-reset (Mot de passe oublié) : Essentiel. 2. Les Routes Privées (L'Espace Client protégé) Ces routes nécessitent que l'utilisateur ait un token valide (il est connecté). Si un visiteur non connecté essaie d'y aller, il sera redirigé vers /login. /dashboard (Vue d'ensemble) : Le centre de contrôle. /services (Inventaire global) : La liste de tout ce que possède le client. /services/web : Ses sites hébergés sur HestiaCP (avec le bouton SSO magique). /services/vps : Ses serveurs. /services/cloud : Son stockage Nextcloud. /billing (Facturation) : Historique, factures impayées (relié à FOSSBilling). /support (Tickets) : Ouvrir et suivre des demandes d'aide. /settings (Profil) : Gérer ses infos perso et mots de passe. III. Comment structurer ça dans ton code React ? Pour garder un code propre, tu vas créer une arborescence de dossiers logique dans ton projet Vite (dossier src/).