Update src/app/chat/page.tsx

Merge version_4 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">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>
+        <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>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -11,8 +11,18 @@ 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"
@@ -58,14 +68,14 @@ export default function LandingPage() {
         <div id="chat" data-section="chat">
             <CardStack
                 title="Grok Chat Interface"
-                description="Une interface de discussion ultra-minimaliste inspirée par l'esthétique xAI. Dialogue direct, clair et sans distraction pour vos besoins analytiques."
+                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">Grok: Comment puis-je vous aider aujourd'hui ?</div>
+                    <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>
@@ -125,6 +135,7 @@ export default function LandingPage() {
                 { name: "email", type: "email", placeholder: "Email", required: true },
                 { name: "apiKey", type: "password", placeholder: "Clé API Grok", 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"
             />