Styled App Bar - Copy this React, Mui Component to your project
Crée une interface de type SaaS avec les éléments suivants :1. Barre de navigation horizontale (topbar principale) :•Fixe en haut de la page, avec fond violet foncé.•Présente sur toutes les pages du SaaS.•À gauche : logo de l’application.•À droite :•Un bouton d’action principal “Ask Sensia” (style gradient violet bleu).•Liens de navigation “Discover” et “Space”.•Un bouton “Usage and Plan” (fond orange).•Un avatar utilisateur rond avec initiales.2. Sidebar verticale (secondaire et contextuelle) :•Présente uniquement sur certaines pages, comme cette page d’accueil utilisateur.•Fond blanc ou gris clair, avec bord droit léger.•Contient :•Un bouton New.•Deux éléments : Space et Threads, avec icônes.• un bouton collapse/expand visible et sticky (chevron clair).•Comportement :•Largeur : 200px ouverte, 40px fermée.•Animation fluide d’ouverture/fermeture.•Affichage conditionnel du texte (mode réduit = icônes seules).•Prévoir des tooltips sur les icônes lorsque la sidebar est repliée.3. Zone de contenu principal (page actuelle) :•Centrée verticalement et horizontalement.•Contient :•Le logo de l’app centré.•Un titre : “Ask, Analyze, Decide.”•Un sous titre : “Your marketing data finally accessible through simple conversation”•Un champ de saisie avec placeholder : “Ask your question, Sensia will illuminate your insight!”•Un bouton d’envoi (flèche bleue).•Trois boutons secondaires :•“Create a new project”•“Create a search agent”•“Add source to an existing project”•Ajouter : animations légères (ex : loader), hover states sur les boutons.4. Responsive
