From 1926d51213dabc69230da1a0ca561cee6707e970 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 11 Feb 2026 16:46:54 +0000
Subject: [PATCH] =?UTF-8?q?fix:=20supprime=20social=20proof=20fake,=20fixe?=
 =?UTF-8?q?=20banni=C3=A8re=20+=20navbar,=20popup=20mobile?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Supprime SocialProofTicker (notifications fake visiblement artificielles)
- Navbar passe de fixed à sticky pour s'empiler correctement sous la bannière
- Bannière d'annonce responsive (texte court sur mobile, bouton close adapté)
- Hero: réduit le padding top (plus besoin de compenser un navbar fixed)
- Exit-intent popup fonctionne sur mobile (trigger au scroll-up après 60% de page)
- Popup responsive: tailles ajustées pour mobile

https://claude.ai/code/session_01H2aRGDaKgarPvhay2HxN6Y
---
 app/page.tsx                             |  6 +-
 components/marketing/AnnouncementBar.tsx | 24 +++++---
 components/marketing/ExitIntentPopup.tsx | 76 +++++++++++++++++-------
 components/marketing/Hero.tsx            |  2 +-
 components/marketing/Navbar.tsx          | 10 ++--
 5 files changed, 80 insertions(+), 38 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index bbd18d6..c702024 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -11,7 +11,6 @@ import TrustBadges from "@/components/marketing/TrustBadges";
 import FAQ from "@/components/marketing/FAQ";
 import FinalCTA from "@/components/marketing/FinalCTA";
 import Footer from "@/components/marketing/Footer";
-import SocialProofTicker from "@/components/marketing/SocialProofTicker";
 import ExitIntentPopup from "@/components/marketing/ExitIntentPopup";
 import StickyMobileCTA from "@/components/marketing/StickyMobileCTA";
 
@@ -59,10 +58,7 @@ export default function LandingPage() {
       {/* Footer */}
       <Footer />
 
-      {/* Social proof notifications (bottom left) */}
-      <SocialProofTicker />
-
-      {/* Exit intent popup (desktop only) */}
+      {/* Exit intent popup */}
       <ExitIntentPopup />
 
       {/* Sticky mobile CTA bar */}
diff --git a/components/marketing/AnnouncementBar.tsx b/components/marketing/AnnouncementBar.tsx
index b94f09d..45331ed 100644
--- a/components/marketing/AnnouncementBar.tsx
+++ b/components/marketing/AnnouncementBar.tsx
@@ -9,18 +9,28 @@ export default function AnnouncementBar() {
   if (!visible) return null;
 
   return (
-    <div className="relative bg-gradient-to-r from-primary via-primary-hover to-primary text-white text-center py-2.5 px-4 text-sm font-medium z-[60]">
+    <div className="relative bg-gradient-to-r from-primary via-primary-hover to-primary text-white text-center py-2 px-10 text-xs sm:text-sm font-medium">
       <Link href="/candidature" className="hover:underline">
-        Places limit&eacute;es &mdash; Nouvelle session de formation TikTok Shop
-        ouverte &rarr; <span className="underline font-bold">Candidater</span>
+        <span className="hidden sm:inline">
+          Places limit&eacute;es &mdash; Nouvelle session de formation TikTok Shop ouverte &rarr;{" "}
+          <span className="underline font-bold">Candidater</span>
+        </span>
+        <span className="sm:hidden">
+          Places limit&eacute;es &mdash;{" "}
+          <span className="underline font-bold">Candidater maintenant</span>
+        </span>
       </Link>
       <button
-        onClick={() => setVisible(false)}
-        className="absolute right-3 top-1/2 -translate-y-1/2 text-white/70 hover:text-white cursor-pointer"
+        onClick={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          setVisible(false);
+        }}
+        className="absolute right-2 top-1/2 -translate-y-1/2 text-white/70 hover:text-white cursor-pointer p-1"
         aria-label="Fermer"
       >
-        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+        <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M6 18L18 6M6 6l12 12" />
         </svg>
       </button>
     </div>
diff --git a/components/marketing/ExitIntentPopup.tsx b/components/marketing/ExitIntentPopup.tsx
index 2a32841..f282ff7 100644
--- a/components/marketing/ExitIntentPopup.tsx
+++ b/components/marketing/ExitIntentPopup.tsx
@@ -1,33 +1,68 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import Link from "next/link";
 import Button from "@/components/ui/Button";
 
 export default function ExitIntentPopup() {
   const [show, setShow] = useState(false);
   const [dismissed, setDismissed] = useState(false);
+  const lastScrollY = useRef(0);
+  const maxScrollY = useRef(0);
 
   useEffect(() => {
     if (dismissed) return;
 
     // Check if already shown this session
-    if (sessionStorage.getItem("hooklab_exit_popup")) return;
+    if (typeof window !== "undefined" && sessionStorage.getItem("hooklab_exit_popup")) {
+      setDismissed(true);
+      return;
+    }
 
-    const handleMouseLeave = (e: MouseEvent) => {
-      if (e.clientY <= 5 && !show && !dismissed) {
+    const triggerPopup = () => {
+      if (!show && !dismissed) {
         setShow(true);
         sessionStorage.setItem("hooklab_exit_popup", "1");
       }
     };
 
-    // Only on desktop
-    if (window.innerWidth >= 768) {
-      document.addEventListener("mouseleave", handleMouseLeave);
-    }
+    // Desktop: mouse leaves viewport at top
+    const handleMouseLeave = (e: MouseEvent) => {
+      if (e.clientY <= 5) {
+        triggerPopup();
+      }
+    };
+
+    // Mobile: user scrolls back up fast after scrolling at least 60% of the page
+    const handleScroll = () => {
+      const currentY = window.scrollY;
+      const pageHeight = document.documentElement.scrollHeight - window.innerHeight;
+      const scrollPercent = pageHeight > 0 ? currentY / pageHeight : 0;
+
+      if (currentY > maxScrollY.current) {
+        maxScrollY.current = currentY;
+      }
+
+      // Trigger if user scrolled past 60% of page and then scrolls up by 300px+
+      const scrolledUpAmount = maxScrollY.current - currentY;
+      const maxScrollPercent = pageHeight > 0 ? maxScrollY.current / pageHeight : 0;
+
+      if (maxScrollPercent > 0.6 && scrolledUpAmount > 300 && scrollPercent < 0.4) {
+        triggerPopup();
+      }
+
+      lastScrollY.current = currentY;
+    };
+
+    // Desktop: mouseleave
+    document.addEventListener("mouseleave", handleMouseLeave);
+
+    // Mobile: scroll-based trigger
+    window.addEventListener("scroll", handleScroll, { passive: true });
 
     return () => {
       document.removeEventListener("mouseleave", handleMouseLeave);
+      window.removeEventListener("scroll", handleScroll);
     };
   }, [show, dismissed]);
 
@@ -47,7 +82,7 @@ export default function ExitIntentPopup() {
       />
 
       {/* Modal */}
-      <div className="relative bg-dark-light border border-dark-border rounded-3xl p-8 max-w-md w-full shadow-2xl animate-scale-in">
+      <div className="relative bg-dark-light border border-dark-border rounded-3xl p-6 sm:p-8 max-w-md w-full shadow-2xl animate-scale-in">
         {/* Close */}
         <button
           onClick={handleClose}
@@ -61,28 +96,29 @@ export default function ExitIntentPopup() {
 
         <div className="text-center">
           {/* Icon */}
-          <div className="w-16 h-16 gradient-bg rounded-full flex items-center justify-center mx-auto mb-5">
-            <svg className="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <div className="w-14 h-14 sm:w-16 sm:h-16 gradient-bg rounded-full flex items-center justify-center mx-auto mb-4 sm:mb-5">
+            <svg className="w-7 h-7 sm:w-8 sm:h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
             </svg>
           </div>
 
-          <h3 className="text-2xl font-bold text-white mb-3">
-            Attends ! Tu passes &agrave; c&ocirc;t&eacute; d&apos;une opportunit&eacute;
+          <h3 className="text-xl sm:text-2xl font-bold text-white mb-2 sm:mb-3">
+            Tu h&eacute;sites encore ?
           </h3>
-          <p className="text-white/60 text-sm mb-6 leading-relaxed">
-            TikTok Shop vient d&apos;arriver en France et le march&eacute; n&apos;est pas encore satur&eacute;.
-            Les premiers cr&eacute;ateurs sont ceux qui gagnent le plus. Ne laisse pas passer ta chance.
+          <p className="text-white/60 text-sm mb-5 sm:mb-6 leading-relaxed">
+            TikTok Shop vient d&apos;arriver en France. Le march&eacute; n&apos;est pas
+            encore satur&eacute; et les premiers cr&eacute;ateurs captent
+            l&apos;essentiel des commissions.
           </p>
 
           {/* Stats */}
-          <div className="grid grid-cols-2 gap-3 mb-6">
+          <div className="grid grid-cols-2 gap-3 mb-5 sm:mb-6">
             <div className="bg-dark border border-dark-border rounded-xl p-3">
-              <p className="text-xl font-bold gradient-text">50,5M&euro;</p>
+              <p className="text-lg sm:text-xl font-bold gradient-text">50,5M&euro;</p>
               <p className="text-white/40 text-xs">March&eacute; FR en 2 mois</p>
             </div>
             <div className="bg-dark border border-dark-border rounded-xl p-3">
-              <p className="text-xl font-bold gradient-text">10-30%</p>
+              <p className="text-lg sm:text-xl font-bold gradient-text">10-30%</p>
               <p className="text-white/40 text-xs">Commission par vente</p>
             </div>
           </div>
@@ -96,7 +132,7 @@ export default function ExitIntentPopup() {
             onClick={handleClose}
             className="text-white/30 text-xs hover:text-white/50 transition-colors cursor-pointer"
           >
-            Non merci, je pr&eacute;f&egrave;re me lancer seul
+            Non merci
           </button>
         </div>
       </div>
diff --git a/components/marketing/Hero.tsx b/components/marketing/Hero.tsx
index a70f5c8..b345c4c 100644
--- a/components/marketing/Hero.tsx
+++ b/components/marketing/Hero.tsx
@@ -3,7 +3,7 @@ import Button from "@/components/ui/Button";
 
 export default function Hero() {
   return (
-    <section className="relative pt-32 pb-20 md:pt-40 md:pb-32 overflow-hidden">
+    <section className="relative pt-16 pb-20 md:pt-24 md:pb-32 overflow-hidden">
       {/* Gradient background effect */}
       <div className="absolute inset-0 overflow-hidden">
         <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[800px] h-[400px] bg-primary/20 rounded-full blur-[120px]" />
diff --git a/components/marketing/Navbar.tsx b/components/marketing/Navbar.tsx
index 361973f..e5e0cb6 100644
--- a/components/marketing/Navbar.tsx
+++ b/components/marketing/Navbar.tsx
@@ -8,7 +8,7 @@ export default function Navbar() {
   const [isOpen, setIsOpen] = useState(false);
 
   return (
-    <nav className="fixed top-0 left-0 right-0 z-50 glass">
+    <nav className="sticky top-0 z-50 glass">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="flex items-center justify-between h-16 md:h-20">
           {/* Logo */}
@@ -27,13 +27,13 @@ export default function Navbar() {
               href="#methode"
               className="text-white/70 hover:text-white transition-colors text-sm font-medium"
             >
-              Methode
+              M&eacute;thode
             </a>
             <a
               href="#temoignages"
               className="text-white/70 hover:text-white transition-colors text-sm font-medium"
             >
-              Resultats
+              R&eacute;sultats
             </a>
             <a
               href="#tarif"
@@ -101,14 +101,14 @@ export default function Navbar() {
                 className="text-white/70 hover:text-white transition-colors text-sm font-medium"
                 onClick={() => setIsOpen(false)}
               >
-                Methode
+                M&eacute;thode
               </a>
               <a
                 href="#temoignages"
                 className="text-white/70 hover:text-white transition-colors text-sm font-medium"
                 onClick={() => setIsOpen(false)}
               >
-                Resultats
+                R&eacute;sultats
               </a>
               <a
                 href="#tarif"