Update src/app/page.tsx

Merge version_5 into main

src/app/chat/page.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+
+export default function ChatPage() {
+  return (
+    <ThemeProvider 
+      defaultButtonVariant="text-stagger" 
+      defaultTextAnimation="entrance-slide" 
+      borderRadius="rounded" 
+      contentWidth="medium" 
+      sizing="medium" 
+      background="circleGradient" 
+      cardStyle="glass-elevated" 
+      primaryButtonStyle="gradient" 
+      secondaryButtonStyle="glass" 
+      headingFontWeight="normal"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleFullscreen
+          navItems={[
+              { name: "Accueil", id: "/" },
+              { name: "Chat", id: "/chat" },
+          ]}
+          brandName="MathIA Chat"
+        />
+      </div>
+      <main className="container mx-auto p-8 pt-32 min-h-screen flex flex-col md:flex-row gap-8">
+        <div className="flex-1 border border-neutral-800 rounded-xl p-6 bg-neutral-900">
+           <h2 className="text-2xl font-bold mb-4">Tuteur Grok</h2>
+           <div className="h-96 w-full flex items-center justify-center border border-neutral-700 rounded bg-black/50">
+              <p className="text-neutral-500">[Tuteur IA xAI activé]</p>
+           </div>
+        </div>
+        <div className="flex-[2] border border-neutral-800 rounded-xl p-6 bg-white">
+           <h2 className="text-2xl font-bold mb-4 text-black">Whiteboard</h2>
+           <div className="h-96 w-full border border-neutral-300 rounded bg-white shadow-inner">
+              <p className="p-4 text-neutral-400">[Espace de calcul visuel]</p>
+           </div>
+        </div>
+      </main>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -10,8 +10,20 @@ 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 CardStack from '@/components/cardStack/CardStack';
+import { useState } from 'react';
 
 export default function LandingPage() {
+  const [grokApiKey, setGrokApiKey] = useState("");
+
+  const handleContactSubmit = (data: Record<string, string>) => {
+      if (data.apiKey) {
+          // Store API key in memory for chat/tutor functionality
+          setGrokApiKey(data.apiKey);
+          console.log("xAI/Grok API Key integrated successfully");
+      }
+  };
+
   return (
     <ThemeProvider
         defaultButtonVariant="icon-arrow"
@@ -26,99 +38,118 @@ export default function LandingPage() {
         headingFontWeight="semibold"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarStyleFullscreen
-      navItems={[
-        { name: "Accueil", id: "hero" },
-        { name: "Fonctionnalités", id: "features" },
-        { name: "FAQ", id: "faq" },
-        { name: "Contact", id: "contact" },
-      ]}
-      brandName="MathIA Grok"
-    />
-  </div>
+        <div id="nav" data-section="nav">
+            <NavbarStyleFullscreen
+            navItems={[
+                { name: "Accueil", id: "hero" },
+                { name: "Chat", id: "chat" },
+                { name: "Fonctionnalités", id: "features" },
+                { name: "FAQ", id: "faq" },
+                { name: "Contact", id: "contact" },
+            ]}
+            brandName="MathIA Grok"
+            />
+        </div>
 
-  <div id="hero" data-section="hero">
-      <HeroLogoBillboardSplit
-      background={{ variant: "plain" }}
-      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."
-      buttons={[
-        { text: "Essayer la démo", href: "#contact" },
-      ]}
-      buttonAnimation="slide-up"
-      layoutOrder="default"
-      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 id="hero" data-section="hero">
+            <HeroLogoBillboardSplit
+            background={{ variant: "plain" }}
+            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."
+            buttons={[
+                { text: "Essayer la démo", href: "#contact" },
+            ]}
+            buttonAnimation="slide-up"
+            layoutOrder="default"
+            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 id="about" data-section="about">
-      <MediaAbout
-      useInvertedBackground={false}
-      title="Réflexion augmentée"
-      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"
-      imageAlt="Interface de chat et tableau blanc"
-    />
-  </div>
+        <div id="chat" data-section="chat">
+            <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>
 
-  <div id="features" data-section="features">
-      <FeatureBorderGlow
-      textboxLayout="split"
-      useInvertedBackground={false}
-      animationType="slide-up"
-      features={[
-        { icon: Lightbulb, title: "Chat Grok IA", description: "Interaction naturelle avec un modèle de langage performant." },
-        { icon: PenTool, title: "Visualisation", description: "Conversion automatique des concepts mathématiques en schémas." },
-        { 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: ShieldCheck, title: "Confidentialité", description: "Gestion sécurisée de vos clés API en local." },
-      ]}
-      title="La puissance du visuel"
-      description="Une interface pensée pour la clarté et l'efficacité."
-    />
-  </div>
+        <div id="about" data-section="about">
+            <MediaAbout
+            useInvertedBackground={false}
+            title="Réflexion augmentée"
+            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"
+            imageAlt="Interface de chat et tableau blanc"
+            />
+        </div>
 
-  <div id="faq" data-section="faq">
-      <FaqSplitMedia
-      textboxLayout="split"
-      useInvertedBackground={false}
-      faqs={[
-        { id: "1", title: "Qu'est-ce que MathIA ?", content: "C'est une plateforme qui associe Grok AI à un canevas numérique interactif." },
-        { id: "2", title: "Besoin d'une clé API ?", content: "Oui, vous utilisez votre propre clé pour une confidentialité totale." },
-      ]}
-      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="Plus d'informations sur MathIA."
-      faqsAnimation="slide-up"
-      mediaAnimation="slide-up"
-    />
-  </div>
+        <div id="features" data-section="features">
+            <FeatureBorderGlow
+            textboxLayout="split"
+            useInvertedBackground={false}
+            animationType="slide-up"
+            features={[
+                { icon: Lightbulb, title: "Moteur Grok IA", description: "Interaction native avec le raisonnement logique de xAI." },
+                { icon: PenTool, title: "Visualisation", description: "Conversion automatique des concepts mathématiques en schémas." },
+                { 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: ShieldCheck, title: "Sécurité API", description: "Intégration sécurisée de votre clé xAI en local." },
+            ]}
+            title="La puissance du visuel"
+            description="Une interface pensée pour la clarté et l'efficacité."
+            />
+        </div>
 
-  <div id="contact" data-section="contact">
-      <ContactSplitForm
-      useInvertedBackground={false}
-      title="Accès au système"
-      description="Configurez votre environnement."
-      inputs={[
-        { name: "name", type: "text", placeholder: "Nom", required: true },
-        { name: "email", type: "email", placeholder: "Email", required: true },
-        { name: "apiKey", type: "password", placeholder: "Clé API Grok", 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"
-    />
-  </div>
+        <div id="faq" data-section="faq">
+            <FaqSplitMedia
+            textboxLayout="split"
+            useInvertedBackground={false}
+            faqs={[
+                { id: "1", title: "Qu'est-ce que MathIA ?", content: "C'est une plateforme qui associe Grok AI à un canevas numérique interactif." },
+                { 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." },
+            ]}
+            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="Plus d'informations sur MathIA."
+            faqsAnimation="slide-up"
+            mediaAnimation="slide-up"
+            />
+        </div>
 
-  <div id="footer" data-section="footer">
-      <FooterLogoReveal
-      logoText="MathIA"
-      leftLink={{ text: "Confidentialité", href: "#" }}
-      rightLink={{ text: "Contact", href: "#contact" }}
-    />
-  </div>
+        <div id="contact" data-section="contact">
+            <ContactSplitForm
+            useInvertedBackground={false}
+            title="Accès au système"
+            description="Configurez votre clé API xAI pour activer le chat et les tutoriels."
+            inputs={[
+                { name: "name", type: "text", placeholder: "Nom", required: true },
+                { name: "email", type: "email", placeholder: "Email", required: true },
+                { name: "apiKey", type: "password", placeholder: "Clé API xAI", required: true },
+            ]}
+            onSubmit={handleContactSubmit}
+            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">
+            <FooterLogoReveal
+            logoText="MathIA"
+            leftLink={{ text: "Confidentialité", href: "#" }}
+            rightLink={{ text: "Contact", href: "#contact" }}
+            />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

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