Update src/app/page.tsx

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 CardStack from '@/components/cardStack/CardStack';
 
 export default function LandingPage() {
   return (
@@ -30,6 +31,7 @@ export default function LandingPage() {
       <NavbarStyleFullscreen
       navItems={[
         { name: "Accueil", id: "hero" },
+        { name: "Chat", id: "chat" },
         { name: "Fonctionnalités", id: "features" },
         { name: "FAQ", id: "faq" },
         { name: "Contact", id: "contact" },
@@ -53,6 +55,23 @@ export default function LandingPage() {
     />
   </div>
 
+  <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."
+        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="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}
@@ -121,4 +140,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}