Update src/app/page.tsx

Merge version_6 into main

src/app/chat/page.tsx

@@ -1,45 +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="text-stagger" 
-      defaultTextAnimation="entrance-slide" 
-      borderRadius="rounded" 
-      contentWidth="medium" 
-      sizing="medium" 
-      background="circleGradient" 
-      cardStyle="glass-elevated" 
-      primaryButtonStyle="gradient" 
-      secondaryButtonStyle="glass" 
-      headingFontWeight="normal"
+    <ThemeProvider
+        defaultButtonVariant="icon-arrow"
+        defaultTextAnimation="background-highlight"
+        borderRadius="soft"
+        contentWidth="medium"
+        sizing="mediumLargeSizeMediumTitles"
+        background="noise"
+        cardStyle="outline"
+        primaryButtonStyle="flat"
+        secondaryButtonStyle="solid"
+        headingFontWeight="semibold"
     >
-      <div id="nav" data-section="nav">
+      <ReactLenis root>
         <NavbarStyleFullscreen
-          navItems={[
-              { name: "Accueil", id: "/" },
-              { name: "Chat", id: "/chat" },
-          ]}
-          brandName="MathIA Chat"
+            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>
-      <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">3D Math Teacher</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">[3D Avatar Component: Teaching Active]</p>
-           </div>
+        <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>
-        <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">[Real-time Whiteboard Canvas]</p>
-           </div>
-        </div>
-      </main>
+      </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/page.tsx

@@ -10,19 +10,9 @@ 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) {
-          setGrokApiKey(data.apiKey);
-          console.log("API Key secured in memory");
-      }
-  };
-
   return (
     <ThemeProvider
         defaultButtonVariant="icon-arrow"
@@ -41,7 +31,7 @@ export default function LandingPage() {
             <NavbarStyleFullscreen
             navItems={[
                 { name: "Accueil", id: "hero" },
-                { name: "Chat", id: "chat" },
+                { name: "Chat", id: "/chat" },
                 { name: "Fonctionnalités", id: "features" },
                 { name: "FAQ", id: "faq" },
                 { name: "Contact", id: "contact" },
@@ -65,23 +55,6 @@ export default function LandingPage() {
             />
         </div>
 
-        <div id="chat" data-section="chat">
-            <CardStack
-                title="Grok Chat Interface"
-                description={grokApiKey ? "Connecté à Grok AI - Prêt à enseigner les mathématiques." : "Veuillez configurer votre clé API 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 ? "Grok: Système en ligne. Quelle équation souhaitez-vous résoudre ?" : "Grok: En attente de clé 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="about" data-section="about">
             <MediaAbout
             useInvertedBackground={false}
@@ -98,11 +71,11 @@ export default function LandingPage() {
             useInvertedBackground={false}
             animationType="slide-up"
             features={[
-                { icon: Lightbulb, title: "Chat Grok IA", description: "Interaction naturelle avec un modèle de langage performant." },
+                { 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: "Confidentialité", description: "Gestion sécurisée de vos clés API en local." },
+                { 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é."
@@ -115,7 +88,7 @@ export default function LandingPage() {
             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." },
+                { 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"
@@ -129,13 +102,12 @@ export default function LandingPage() {
             <ContactSplitForm
             useInvertedBackground={false}
             title="Accès au système"
-            description="Configurez votre environnement."
+            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 Grok", 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"
             />