/* eslint-disable */ // MS BRIDGE — Section 4: Pour qui // 3 grouped role tabs (Stratégie / Opérationnel / Exécution), // big card on the right with constat + bullets + product mock. ;(function () { const T = window.MSB.tokens; const { useState, useEffect, useRef } = React; /* =========================================================================== * CONTENT * ======================================================================= */ const GROUPS = [ { id: "strategy", num: "01", label: "Stratégie & pilotage", roles: ["Directeur Marketing", "CMO", "Head of Growth"], angle: "La qualité de la donnée sur laquelle vos décisions sont prises.", constatLead: "Le vrai frein à votre performance n'est pas", constatStrike: "le budget", constatTail: ". C'est la donnée sur laquelle il est orienté.", tu: false, bullets: [ { text: "Vision exécutive des pain points qui freinent réellement vos deals, analysés en continu depuis vos calls.", }, { text: "Le bon commercial à rencontrer pour creuser le bon pain point — vos réunions marketing-sales partent d'un sujet documenté, plus d'un agenda flou.", feature: "Rencontre Sales", }, { text: "Rapports hebdo et synthèses d'objections automatisés, directement dans Claude.", feature: "MS·Bridge dans Claude · MCP", }, { text: "ROI tangible — vous savez ce qui convertit, vous ne le supposez plus.", }, ], proof: "De « je pense que ça marche » à « je sais ce qui convertit ».", visual: "rencontre", }, { id: "operational", num: "02", label: "Stratégie opérationnelle", roles: ["Responsable Marketing", "Growth Marketer", "Social Media Manager", "Traffic Manager", "Community Manager"], angle: "Des angles, des hooks et des creatives ancrés dans la réalité terrain.", constatLead: "Les meilleurs angles sont déjà dans les appels de vos commerciaux.", constatStrike: "L'intuition", constatTail: " ne suffit plus.", tu: false, bullets: [ { text: "Posts, séquences email, scripts TikTok et creatives ads générés depuis les pain points du terrain.", feature: "Studio de Contenu", }, { text: "Un Kanban de production — de l'idée détectée au contenu publié, en un seul endroit.", }, { text: "Chat RAG sur toutes vos données marketing & sales — interrogez vos calls 24/7, sans attendre personne.", feature: "Chat RAG", }, { text: "Chaque contenu reste ancré sur une objection réelle détectée dans les calls — fini le contenu hors-sol.", }, ], proof: "Du contenu ancré dans la réalité, pas dans des hypothèses.", visual: "kanban", }, { id: "solopreneur", num: "03", label: "Solopreneur", roles: ["Consultant", "Indépendant", "Freelance"], angle: "L'art de transformer vos conversations en un système de génération de leads qualifiés.", constatLead: "Pour attirer des leads qualifiés en continu,", constatStrike: "l'intuition", constatTail: " ne suffit plus. Vos contenus doivent viser juste.", tu: false, bullets: [ { text: "Une stratégie de prospection mieux orientée : acquérez une connaissance fine de leurs besoins avec le module Détecter.", feature: "Module /Détecter", }, { text: "Transformez un pain point en véritable outil applicatif via le Studio Lead Magnet pour accélérer votre génération de leads.", feature: "Studio Lead Magnet", }, { text: "Posts, séquences email et scripts briefés automatiquement sur les vraies objections détectées dans vos propres calls.", feature: "Studio de Contenu", }, { text: "Chat RAG sur toutes vos données — interrogez vos calls passés comme un second cerveau, 24/7.", feature: "Chat RAG", }, ], proof: "De 2 jours de recherche à 10 minutes pour briefer une semaine de contenu.", visual: "studios", }, ]; /* =========================================================================== * HEADER * ======================================================================= */ function WhoEyebrow({ index = "05", label = "Pour qui" }) { return (
{index} {label}
); } function SectionHeader({ titleSize = 52, align = "center" }) { return (

Trois façons{" "} de l'exploiter.

Du pilotage stratégique à l'exécution créative chaque rôle pioche dans la même donnée terrain, mais y trouve une réponse différente à son problème.

); } /* =========================================================================== * TABS * ======================================================================= */ function GroupTabs({ active, setActive, layout = "row" }) { const isRow = layout === "row"; const isSlider = layout === "slider"; const scrollRef = useRef(null); // Sync scroll position when active changes from parent (e.g. clicking a dot) useEffect(() => { if (isSlider && scrollRef.current) { const cards = Array.from(scrollRef.current.children); const activeIndex = GROUPS.findIndex(g => g.id === active); if (cards && cards[activeIndex]) { const leftPos = cards[activeIndex].offsetLeft - scrollRef.current.offsetLeft; if (Math.abs(scrollRef.current.scrollLeft - leftPos) > 10) { scrollRef.current.scrollTo({ left: leftPos, behavior: "smooth" }); } } } }, [active, isSlider]); const handleScroll = () => { if (isSlider && scrollRef.current) { const scrollLeft = scrollRef.current.scrollLeft; const cards = Array.from(scrollRef.current.children); if (cards && cards.length > 0) { let activeIndex = 0; let minDiff = Infinity; for (let i = 0; i < cards.length; i++) { const leftPos = cards[i].offsetLeft - scrollRef.current.offsetLeft; const diff = Math.abs(scrollLeft - leftPos); if (diff < minDiff) { minDiff = diff; activeIndex = i; } } const activeGroup = GROUPS[activeIndex]; if (activeGroup && active !== activeGroup.id) { setActive(activeGroup.id); } } } }; if (isSlider) { return (
); } function WhoDesktop() { const [active, setActive] = useState("strategy"); const group = GROUPS.find(g => g.id === active); return (
); } function WhoTablet() { const [active, setActive] = useState("strategy"); const group = GROUPS.find(g => g.id === active); return (
); } function WhoMobile() { const [active, setActive] = useState("strategy"); const group = GROUPS.find(g => g.id === active); return (
); } function WhoV2() { const [w, setW] = React.useState(typeof window !== "undefined" ? window.innerWidth : 1280); React.useEffect(() => { const o = () => setW(window.innerWidth); window.addEventListener("resize", o); return () => window.removeEventListener("resize", o); }, []); const C = w < 700 ? WhoMobile : w < 1100 ? WhoTablet : WhoDesktop; return ; } Object.assign(window, { WhoDesktop, WhoTablet, WhoMobile, WhoV2 }); })();