Now the login is handled by the HomePage

app/page.tsx

@@ -1,10 +1,32 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { useRouter } from "next/navigation"
 import Link from "next/link"
 import { Button } from "@/components/ui/button"
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
 import { Badge } from "@/components/ui/badge"
-import { Shield, Key, Database, Zap, Users, Globe, CheckCircle, ArrowRight, Code } from "lucide-react"
+import { Shield, ArrowRight, Key, Zap, Users, Globe, Database, Code, CheckCircle } from "lucide-react"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import AuthModal from "@/components/4nk/AuthModal"
+import Iframe from "@/components/4nk/Iframe"
+import UserStore from "@/lib/4nk/UserStore"
 
 export default function HomePage() {
+  const [showLoginModal, setShowLoginModal] = useState(false)
+  const [isConnected, setIsConnected] = useState(false)
+  const [userPairingId, setUserPairingId] = useState<string | null>(null)
+
+  const router = useRouter()
+  const iframeUrl = process.env.NEXT_PUBLIC_4NK_IFRAME_URL || "https://dev3.4nkweb.com"
+
+  useEffect(() => {
+    setIsConnected(UserStore.getInstance().isConnected());
+  });
+
+  useEffect(() => {
+    setUserPairingId(UserStore.getInstance().getUserPairingId());
+  });
+
   return (
     <div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50">
       {/* Header */}
@@ -30,9 +52,7 @@ export default function HomePage() {
             <Link href="/formation">
               <Button variant="outline">Formation</Button>
             </Link>
-            <Link href="/login">
+            <Button onClick={() => setShowLoginModal(true)}>Connexion</Button>
-              <Button>Connexion</Button>
-            </Link>
           </nav>
         </div>
       </header>
@@ -63,6 +83,21 @@ export default function HomePage() {
         </div>
       </section>
 
+      {/* Modal d’authentification */}
+      {showLoginModal && (
+        <AuthModal
+          isOpen={showLoginModal}
+          onConnect={() => {
+            setShowLoginModal(false)
+            router.push("/dashboard") // ✅ redirection après login
+          }}
+          onClose={() => setShowLoginModal(false)}
+          iframeUrl={iframeUrl}
+        />
+      )}
+
+      {isConnected && <Iframe iframeUrl={iframeUrl} />}
+
       {/* Product Features */}
       <section id="produit" className="py-16 px-4 bg-white">
         <div className="container mx-auto">