Update src/app/page.tsx

Merge version_6 into main

src/app/chat/page.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import CardStack from '@/components/cardStack/CardStack';
+import { useState } from 'react';
+
+export default function ChatPage() {
+  const [grokApiKey] = useState("");
+
+  return (
+    <ThemeProvider
+        defaultButtonVariant="icon-arrow"
+        defaultTextAnimation="background-highlight"
+        borderRadius="soft"
+        contentWidth="medium"
+        sizing="mediumLargeSizeMediumTitles"
+        background="noise"
+        cardStyle="outline"
+        primaryButtonStyle="flat"
+        secondaryButtonStyle="solid"
+        headingFontWeight="semibold"
+    >
+      <ReactLenis root>
+        <NavbarStyleFullscreen
+            navItems={[
+                { name: "Accueil", id: "/" },
+                { name: "Chat", id: "/chat" },
+                { name: "Fonctionnalités", id: "/#features" },
+                { name: "FAQ", id: "/#faq" },
+                { name: "Contact", id: "/#contact" },
+            ]}
+            brandName="MathIA Grok"
+        />
+        <div className="min-h-screen pt-24 pb-12">
+            <CardStack
+                title="Grok Chat Interface"
+                description={grokApiKey ? "Connecté au moteur xAI - Tuteur mathématique activé." : "Veuillez configurer votre clé API xAI dans la section contact pour activer le tuteur IA."}
+                textboxLayout="split"
+                animationType="blur-reveal"
+                ariaLabel="Chat interface"
+                className="bg-black text-white"
+            >
+                <div className="flex flex-col gap-4 p-8 border border-neutral-800 rounded-lg">
+                    <div className="text-sm text-neutral-400">{grokApiKey ? "xAI/Grok: Système en ligne. Quelle équation souhaitez-vous résoudre ?" : "xAI/Grok: En attente de configuration API..."}</div>
+                    <div className="h-px w-full bg-neutral-800 my-2" />
+                    <div className="text-white font-medium">User: Explique-moi le calcul intégral.</div>
+                </div>
+            </CardStack>
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -10,6 +10,7 @@ import HeroLogoBillboardSplit from '@/components/sections/hero/HeroLogoBillboard
 import MediaAbout from '@/components/sections/about/MediaAbout';
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
 import { Lightbulb, Monitor, PenTool, ShieldCheck, Zap } from "lucide-react";
+import { useState } from 'react';
 
 export default function LandingPage() {
   return (
@@ -19,137 +20,106 @@ export default function LandingPage() {
         borderRadius="soft"
         contentWidth="small"
         sizing="mediumLargeSizeMediumTitles"
-        background="blurBottom"
+        background="noise"
-        cardStyle="layered-gradient"
+        cardStyle="outline"
-        primaryButtonStyle="gradient"
+        primaryButtonStyle="flat"
         secondaryButtonStyle="solid"
-        headingFontWeight="medium"
+        headingFontWeight="semibold"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
+        <div id="nav" data-section="nav">
-      <NavbarStyleFullscreen
+            <NavbarStyleFullscreen
-      navItems={[
+            navItems={[
-        {
+                { name: "Accueil", id: "hero" },
-          name: "Accueil",          id: "hero"},
+                { name: "Chat", id: "/chat" },
-        {
+                { name: "Fonctionnalités", id: "features" },
-          name: "Fonctionnalités",          id: "features"},
+                { name: "FAQ", id: "faq" },
-        {
+                { name: "Contact", id: "contact" },
-          name: "FAQ",          id: "faq"},
+            ]}
-        {
+            brandName="MathIA Grok"
-          name: "Contact",          id: "contact"},
+            />
-      ]}
+        </div>
-      brandName="MathIA Grok"
-    />
-  </div>
 
-  <div id="hero" data-section="hero">
+        <div id="hero" data-section="hero">
-      <HeroLogoBillboardSplit
+            <HeroLogoBillboardSplit
-      background={{
+            background={{ variant: "plain" }}
-        variant: "canvas-reveal"}}
+            logoText="MathIA x Grok"
-      logoText="MathIA x Grok"
+            description="Une interface de chat avancée combinant le raisonnement de Grok avec un espace de travail visuel. Posez vos questions, recevez des explications illustrées instantanément."
-      description="Expliquez vos problèmes mathématiques à une IA qui dessine en temps réel sur votre tableau blanc numérique. Une expérience naturelle et immersive propulsée par Grok AI."
+            buttons={[
-      buttons={[
+                { text: "Essayer la démo", href: "#contact" },
-        {
+            ]}
-          text: "Commencer maintenant",          href: "#contact"},
+            buttonAnimation="slide-up"
-      ]}
+            layoutOrder="default"
-      buttonAnimation="slide-up"
+            imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BiavO3dCn02likxwS7upWoCIlU/a-highly-sophisticated-digital-classroom-1775133772930-0a6d301f.png"
-      layoutOrder="default"
+            mediaAnimation="blur-reveal"
-      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BiavO3dCn02likxwS7upWoCIlU/a-highly-sophisticated-digital-classroom-1775133772930-0a6d301f.png"
+            />
-      mediaAnimation="blur-reveal"
+        </div>
-    />
-  </div>
 
-  <div id="about" data-section="about">
+        <div id="about" data-section="about">
-      <MediaAbout
+            <MediaAbout
-      useInvertedBackground={false}
+            useInvertedBackground={false}
-      title="Comprendre les Maths par le Visuel"
+            title="Réflexion augmentée"
-      description="Contrairement aux plateformes classiques, notre IA ne se contente pas d'écrire. Elle réfléchit, trace des graphes, et explique chaque étape avec des dessins naturels et intuitifs sur le tableau blanc. Intégration transparente de votre clé API Grok pour une intelligence sans limites."
+            description="MathIA utilise les capacités de raisonnement de Grok pour analyser des problèmes complexes et générer des solutions étape par étape sur un tableau blanc numérique, créant une expérience de chat interactive et visuelle."
-      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BiavO3dCn02likxwS7upWoCIlU/an-ai-powered-math-teacher-character-int-1775133776116-85c101a8.png"
+            imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BiavO3dCn02likxwS7upWoCIlU/an-ai-powered-math-teacher-character-int-1775133776116-85c101a8.png"
-      imageAlt="AI math tutor interface"
+            imageAlt="Interface de chat et tableau blanc"
-    />
+            />
-  </div>
+        </div>
 
-  <div id="features" data-section="features">
+        <div id="features" data-section="features">
-      <FeatureBorderGlow
+            <FeatureBorderGlow
-      textboxLayout="split"
+            textboxLayout="split"
-      useInvertedBackground={false}
+            useInvertedBackground={false}
-      animationType="slide-up"
+            animationType="slide-up"
-      features={[
+            features={[
-        {
+                { icon: Lightbulb, title: "Moteur Grok IA", description: "Interaction native avec le raisonnement logique de xAI." },
-          icon: Lightbulb,
+                { icon: PenTool, title: "Visualisation", description: "Conversion automatique des concepts mathématiques en schémas." },
-          title: "Raisonnement Grok AI",          description: "Accès direct à la puissance de raisonnement de Grok via votre clé API personnelle."},
+                { icon: Monitor, title: "Interface épurée", description: "Design noir et blanc minimaliste pour se concentrer sur l'essentiel." },
-        {
+                { icon: Zap, title: "Réponses rapides", description: "Latence ultra-faible pour un apprentissage fluide." },
-          icon: PenTool,
+                { icon: ShieldCheck, title: "Sécurité API", description: "Intégration sécurisée de votre clé xAI en local." },
-          title: "Dessin Naturel",          description: "Un rendu fluide des explications pour une compréhension visuelle parfaite des concepts."},
+            ]}
-        {
+            title="La puissance du visuel"
-          icon: Monitor,
+            description="Une interface pensée pour la clarté et l'efficacité."
-          title: "Tableau Blanc IA",          description: "Une interface immersive où l'IA trace les solutions comme un vrai professeur."},
+            />
-        {
+        </div>
-          icon: Zap,
-          title: "Réponses instantanées",          description: "Obtenez des explications complexes simplifiées en une fraction de seconde."},
-        {
-          icon: ShieldCheck,
-          title: "Intégration Sécurisée",          description: "Vos données et votre clé API restent privées et locales à votre session."},
-      ]}
-      title="Pourquoi MathIA?"
-      description="La technologie de pointe au service de votre pédagogie."
-    />
-  </div>
 
-  <div id="faq" data-section="faq">
+        <div id="faq" data-section="faq">
-      <FaqSplitMedia
+            <FaqSplitMedia
-      textboxLayout="split"
+            textboxLayout="split"
-      useInvertedBackground={false}
+            useInvertedBackground={false}
-      faqs={[
+            faqs={[
-        {
+                { id: "1", title: "Qu'est-ce que MathIA ?", content: "C'est une plateforme qui associe Grok AI à un canevas numérique interactif." },
-          id: "1",          title: "Comment intégrer ma clé API Grok ?",          content: "Il vous suffit d'insérer votre clé API dans les paramètres de votre tableau de bord MathIA, et notre moteur de rendu se connectera instantanément."},
+                { id: "2", title: "Besoin d'une clé API xAI ?", content: "Oui, vous utilisez votre clé API xAI pour une confidentialité totale lors de vos sessions de tutorat." },
-        {
+            ]}
-          id: "2",          title: "Le dessin est-il vraiment naturel ?",          content: "Oui, notre algorithme de tracé simule la pression et la vitesse d'une main humaine, offrant un rendu ultra-naturel sur le tableau blanc."},
+            imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BiavO3dCn02likxwS7upWoCIlU/clean-interface-showing-interactive-math-1775133774387-5fe1858a.png"
-        {
+            title="Questions Fréquentes"
-          id: "3",          title: "Quels types de maths sont supportés ?",          content: "De l'algèbre de base aux calculs avancés, notre système s'adapte à tous les niveaux grâce à l'intelligence de Grok."},
+            description="Plus d'informations sur MathIA."
-        {
+            faqsAnimation="slide-up"
-          id: "4",          title: "Est-ce compatible sur tablette ?",          content: "MathIA est entièrement optimisé pour les tablettes avec stylet pour une expérience de dessin fluide."},
+            mediaAnimation="slide-up"
-        {
+            />
-          id: "5",          title: "Puis-je exporter mes notes ?",          content: "Oui, chaque session sur le tableau blanc peut être exportée au format PDF ou image haute résolution."},
+        </div>
-      ]}
-      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BiavO3dCn02likxwS7upWoCIlU/clean-interface-showing-interactive-math-1775133774387-5fe1858a.png"
-      title="Questions Fréquentes"
-      description="Tout ce que vous devez savoir sur MathIA."
-      faqsAnimation="slide-up"
-      mediaAnimation="slide-up"
-    />
-  </div>
 
-  <div id="contact" data-section="contact">
+        <div id="contact" data-section="contact">
-      <ContactSplitForm
+            <ContactSplitForm
-      useInvertedBackground={false}
+            useInvertedBackground={false}
-      title="Configurez votre accès"
+            title="Accès au système"
-      description="Entrez vos informations pour activer votre espace MathIA et configurer votre connexion API."
+            description="Configurez votre clé API xAI pour activer le chat et les tutoriels."
-      inputs={[
+            inputs={[
-        {
+                { name: "name", type: "text", placeholder: "Nom", required: true },
-          name: "name",          type: "text",          placeholder: "Nom complet",          required: true,
+                { name: "email", type: "email", placeholder: "Email", required: true },
-        },
+                { name: "apiKey", type: "password", placeholder: "Clé API xAI", required: true },
-        {
+            ]}
-          name: "email",          type: "email",          placeholder: "Adresse e-mail",          required: true,
+            imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BiavO3dCn02likxwS7upWoCIlU/futuristic-digital-aesthetic-background--1775133773550-69c25a60.png"
-        },
+            mediaAnimation="blur-reveal"
-        {
+            />
-          name: "apiKey",          type: "password",          placeholder: "Votre clé API Grok AI",          required: true,
+        </div>
-        },
-      ]}
-      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BiavO3dCn02likxwS7upWoCIlU/futuristic-digital-aesthetic-background--1775133773550-69c25a60.png"
-      mediaAnimation="blur-reveal"
-    />
-  </div>
 
-  <div id="footer" data-section="footer">
+        <div id="footer" data-section="footer">
-      <FooterLogoReveal
+            <FooterLogoReveal
-      logoText="MathIA"
+            logoText="MathIA"
-      leftLink={{
+            leftLink={{ text: "Confidentialité", href: "#" }}
-        text: "Politique de confidentialité",        href: "#"}}
+            rightLink={{ text: "Contact", href: "#contact" }}
-      rightLink={{
+            />
-        text: "Contactez-nous",        href: "#contact"}}
+        </div>
-    />
-  </div>
       </ReactLenis>
     </ThemeProvider>
   );

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #050012;
+  --background: #000000;
-  --card: #040121;
+  --card: #0a0a0a;
-  --foreground: #f0e6ff;
+  --foreground: #ffffff;
-  --primary-cta: #c89bff;
+  --primary-cta: #ffffff;
-  --primary-cta-text: #050012;
+  --primary-cta-text: #0a0a0a;
-  --secondary-cta: #1d123b;
+  --secondary-cta: #1a1a1a;
-  --secondary-cta-text: #f0e6ff;
+  --secondary-cta-text: #ffffff;
-  --accent: #684f7b;
+  --accent: #333333;
-  --background-accent: #65417c;
+  --background-accent: #222222;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);