/* eslint-disable */ // MS BRIDGE — Hero v2 (restyle) // Direction: dark hero (Mindly) + clean technical detailing (Insight). // Sharp corners, two-tone ghost headline, beta urgency, social proof + handwritten note, // VSL straddling the dark→light transition, tools marquee on the light side. // Accent is tweakable: MS Bridge red vs reference orange. ;(function () { const { useState, useEffect, useRef } = React; /* ----------------------------- palette ----------------------------- */ const INK = "#0B0B0C"; // hero dark base const TXT_HI = "#F6F5F3"; const TXT_MD = "rgba(246,245,243,0.60)"; const TXT_LO = "rgba(246,245,243,0.38)"; const LIGHT = "#FFFFFF"; const INK_L = "#16150F"; // ink on light const MID_L = "#5C5A52"; const ACCENTS = { "#E8291C": { base: "#E8291C", dark: "#B5180C", glow: "rgba(232,41,28,0.20)", on: "#fff" }, "#FF6200": { base: "#FF6200", dark: "#D65200", glow: "rgba(255,98,0,0.22)", on: "#fff" }, }; /* ----------------------------- atoms ----------------------------- */ function MonoLabel({ children, color = TXT_LO, style }) { return ( {children} ); } function ArrowIcon({ size = 15, color = "currentColor" }) { return ( ); } /* ----------------------------- nav ----------------------------- */ function Logo({ accent }) { return ( MS Bridge — Marketing & Sales ); } const NAV = [ { label: "Comment ça marche", href: "#how" }, { label: "Programme Bêta", href: "beta-program.html" }, { label: "Témoignages", href: "#proof" }, { label: "Podcast", href: "podcast.html" }, { label: "FAQ", href: "#faq" }, ]; const getHref = (href) => { const isHome = !window.location.pathname.includes('beta-program') && !window.location.pathname.includes('podcast') && !window.location.pathname.includes('confirmation'); if (href.startsWith('#')) { return isHome ? href : 'index.html' + href; } return href; }; function Nav({ accent }) { const [open, setOpen] = useState(false); return (
Connexion Commencer gratuitement
{open && (
{NAV.map((n) => ( setOpen(false)}> {n.label} ))} setOpen(false)}> Connexion setOpen(false)} style={{ background: accent.base, color: accent.on }}> Commencer gratuitement
)}
); } /* ----------------------------- urgency pill ----------------------------- */ function UrgencyPill({ accent }) { return (
Bêta publique
); } /* ----------------------------- beta form ----------------------------- */ function BetaForm({ accent }) { const [loading, setLoading] = useState(false); const handleSubmit = async (e) => { e.preventDefault(); setLoading(true); try { const data = new FormData(e.target); data.append("access_key", "bd1d8fa4-172c-4363-9436-9514e961cff1"); const res = await fetch("https://api.web3forms.com/submit", { method: "POST", body: data, headers: { Accept: "application/json" } }); if (res.ok) { window.location.href = "https://www.msbridge.io/confirmation.html"; } else { setLoading(false); } } catch { setLoading(false); } }; return (
Commencer gratuitement
); } /* ----------------------------- social proof ----------------------------- */ const AV = [ "linear-gradient(135deg,#f5d0b0,#b8794a)", "linear-gradient(135deg,#bcd3f0,#5577a8)", "linear-gradient(135deg,#d9c4ea,#8a6bb0)", "linear-gradient(135deg,#cfe6c2,#6f9c52)", ]; function SocialProof({ accent }) { return (
Déjà adopté par des équipes marketing & indépendant Même logique pour les solopreneurs
); } /* ----------------------------- VSL placeholder ----------------------------- */ function Vsl({ accent, isMobile }) { const iframeRef = useRef(null); const [isPlaying, setIsPlaying] = useState(false); useEffect(() => { if (!document.querySelector('script[src="https://player.vimeo.com/api/player.js"]')) { const script = document.createElement("script"); script.src = "https://player.vimeo.com/api/player.js"; script.async = true; document.body.appendChild(script); } }, []); const handlePlayClick = () => { if (window.Vimeo && window.Vimeo.Player && iframeRef.current) { const player = new window.Vimeo.Player(iframeRef.current); player.setVolume(1).catch(() => {}); player.setCurrentTime(0).catch(() => {}); player.play().catch(() => {}); } setIsPlaying(true); }; return (
{!isPlaying && (
)}
Présenté par Henri Priso Expert Marketing
); } /* ----------------------------- tools strip ----------------------------- */ const TL = (window.MSB && window.MSB.toolLogos) || {}; const TOOLS = [ ["Microsoft Teams", TL.teams], ["Google Meet", TL.meet], ["Zoom", TL.zoom], ["Fireflies", TL.fireflies], ["Modjo", TL.modjo], ["Gong", TL.gong], ["Aircall", TL.aircall], ["Ringover", TL.ringover], ]; function ToolsStrip() { const dup = [...TOOLS, ...TOOLS]; return (
{dup.map(([name, src], i) => (
{src ? : null} {name}
))}
); } /* ----------------------------- hero ----------------------------- */ function useIsMobile() { const [isMobile, setIsMobile] = useState(window.innerWidth <= 760); useEffect(() => { const handleResize = () => setIsMobile(window.innerWidth <= 760); window.addEventListener("resize", handleResize); return () => window.removeEventListener("resize", handleResize); }, []); return isMobile; } function Hero({ accentKey, gridOpacity, ghost }) { const accent = ACCENTS[accentKey] || ACCENTS["#E8291C"]; const isMobile = useIsMobile(); return (
{/* grid + glow */}
{/* light side — VSL straddles the seam (desktop) or only tools strip (mobile) */}
{!isMobile &&
}
→ Compatible avec vos outils
Solution RGPD Compliance
); } /* ----------------------------- export ----------------------------- */ Object.assign(window, { HeroV2: Hero, MSBNav: Nav }); })();