// Top navigation + Hero (with hero variants for tweaks) function Nav({ onScroll }) { const [scrolled, setScrolled] = useState(false); const [menuOpen, setMenuOpen] = useState(false); useEffect(() => { const onS = () => setScrolled(window.scrollY > 24); onS(); window.addEventListener("scroll", onS, { passive: true }); return () => window.removeEventListener("scroll", onS); }, []); // Cerrar menú al hacer click en un link const closeMenu = () => setMenuOpen(false); return ( ); } const navLink = { fontSize: 14, fontWeight: 500, color: "var(--ink-soft)", letterSpacing: "-0.005em", }; function Logo({ size = 28, color = "var(--ink)" }) { // Matches the four-square mark from the app return ( ); } // ---------- HERO VARIANTS ---------- function Hero({ variant = "split", headline = "default", shotStyle = "browser" }) { const headlines = { default: ( <> Crea tu plan de marketing
profesional con IA. ), method: ( <> El método
Media Planning Canvas,
ahora con IA. ), learn: ( <> Aprende a hacer planes
de marketing mientras
creas el tuyo. ), methodology: ( <> No es un chatbot.
Es metodología. ), }; const headlineEl = headlines[headline] || headlines.default; if (variant === "centered") return ; if (variant === "editorial") return ; return ; } function HeroEyebrow() { return (
Plan de marketing con IA +10.000 PROFESIONALES YA USAN EL MEDIA PLANNING CANVAS
); } function HeroCTAs() { return (
Empezar gratis → Ver los 5 pasos Sin tarjeta · Plan Free incluido
); } function HeroSubline() { return (

Cinco fases. Nuestra IA entrenada para acompañarte. Vídeo píldoras para formarte como experto en planes de marketing. Termina con un plan de medios real, mensualizado y exportable a PDF.

); } function HeroShot({ shotStyle }) { if (shotStyle === "floating") { return (
Media Planning Canvas — Plan de marketing con IA
); } if (shotStyle === "stack") { return (
); } // default: browser — imagen hero nueva return (
Media Planning Canvas — Plan de marketing con IA
); } function HeroSplit({ headline, shotStyle }) { return (

{headline}

); } function HeroCentered({ headline, shotStyle }) { return (

{headline}

); } function HeroEditorial({ headline, shotStyle }) { return (

{headline}

); } function BrandStrip() { return (
PROFESIONALES QUE HAN APRENDIDO CON EL MÉTODO
{[0, 1].map((rep) => (
{[ "EY", "KPMG", "IE BUSINESS SCHOOL", "COCA-COLA", "LEROY MERLIN", "P&G", "OMNICOM MEDIA", "HAVAS MEDIA", "SACYR", "NESTLÉ", "MERCK", "MASTERCARD", "GOOGLE", "SAGE", "ORACLE", "UBER", "NETFLIX", "MÁS ORANGE", "BT", ].map((b, i) => ( {b} ))}
))}
); } Object.assign(window, { Nav, Hero, Logo });