// Home page — single-scroll long-form built to mirror the Canva mockup const HomePage = ({ navigate }) => { return (
{/* HERO */} {/* TRUSTED BY MARQUEE */}
Tante aziende si fidano già di noi
{/* MEDIA SECTION */}

Siamo un media digitale e
facciamo divulgazione sui social

E lo facciamo attraverso le nostre verticali Media:

{/* MEDIA NUMBERS */}

Portiamo il tuo brand
davanti a milioni di persone

Le nostre sono tra le community
più grandi delle rispettive verticali} /> Le impression che generiamo
ogni 3 mesi tra i nostri canali} divider /> I brand con cui abbiamo
collaborato negli ultimi 12 mesi} divider />
{/* CONTENT STUDIO INTRO */}

Siamo un content studio
e raccontiamo il tuo brand al mondo

E lo facciamo creando contenuti per il tuo brand che le persone vogliono vedere:

{/* AGENCY STACKED SCROLL */} {/* CTA — split: Media (green) + Agency (blue) */}
{/* LEFT — Media */} {/* divider */}
{/* RIGHT — Agency */}
); }; /* ============ Media card ============ */ function NumberStat({ value, desc, divider }) { // Render value with the trailing "+" colored separately const m = String(value).match(/^(.*?)(\+)?$/); const main = m[1]; const plus = m[2]; return (
{main} {plus && +}
{desc}
); } function MediaCarousel({ children }) { const ref = React.useRef(null); const [active, setActive] = React.useState(0); const count = React.Children.count(children); const onScroll = () => { const el = ref.current; if (!el) return; const center = el.scrollLeft + el.clientWidth / 2; let best = 0,bestD = Infinity; Array.from(el.children).forEach((c, i) => { const cc = c.offsetLeft + c.offsetWidth / 2; const d = Math.abs(cc - center); if (d < bestD) {bestD = d;best = i;} }); setActive(best); }; const goTo = (i) => { const el = ref.current; if (!el) return; const c = el.children[i]; if (!c) return; el.scrollTo({ left: c.offsetLeft - (el.clientWidth - c.offsetWidth) / 2, behavior: "smooth" }); }; return (
{children}
{Array.from({ length: count }).map((_, i) =>
); } function MediaCard({ img, logo, handle, tagline, highlight, hlBg, hoverBg, glow, slug, navigate }) { const [hover, setHover] = React.useState(false); return (
{glow && } {handle}
{handle}
{tagline}{" "} {highlight}
{e.preventDefault();if (slug && navigate) navigate(slug);}} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} style={{ alignSelf: "flex-start", background: hover ? hoverBg : "#E5E5E5", color: hover ? "#fff" : "#0A0A0A", padding: "12px 22px", fontWeight: 700, fontSize: 15, borderRadius: "999px 999px 999px 0px", display: "inline-flex", alignItems: "center", gap: 8, transition: "background 200ms, color 200ms" }}> Scopri di più
); } function CoverEconomic() { return (
Episode 142
Perché lo
spread
è tornato.
); } function CoverTech() { return (
// AI · LIVE
Il modello
che cambia
tutto.
); } /* ============ Big stat ============ */ function BigStat({ value, label }) { return (
{value}
{label}
); } /* ============ Service Block ============ */ function ServiceBlock({ index, kicker, title, body, bullets, cta, onCta, navigate, visual, flip, shadow = "var(--c-violet)", background }) { return (
{!flip &&
{visual}
}
{index} — {kicker}

{title}

{body}

    {bullets.map((b, i) =>
  • ✓ {b}
    • )}
{e.preventDefault();onCta && onCta();}} className="link-arrow"> {cta}
{flip &&
{visual}
}
); } /* ============ YouTube mock visual ============ */ function YouTubeMock() { return (
{/* fake search row */}
{/* video thumbs */}
{["#0F5132", "#6B3FFE", "#FF2895"].map((c, i) =>
)}
{[1, 2, 3].map((i) =>
)}
); } /* ============ Short Form mock ============ */ function ShortFormMock() { return (
{[ { bg: "#E5E2FF", play: "#6B3FFE" }, { bg: "#C5E8D8", play: "#0F5132" }, { bg: "#FFD6BD", play: "#FF5C2E" }]. map((c, i) =>
)}
{/* metric chips */}
{[["Hook rate", "7,8%"], ["CTR", "4,2%"], ["ROAS", "2,3x"]].map(([k, v], i) =>
{v} · {k}
)}
); } /* ============ Social mock ============ */ function SocialMock() { return (
{/* back card: grid */}
{[ ["Post", "#E5E2FF", "#6B3FFE"], ["Reel", "#FFD6BD", "#7A2A14"], ["Carosello", "#D7CCFF", "#3A1FB0"], ["Reel", "#FFD6BD", "#7A2A14"], ["Post", "#E5E2FF", "#6B3FFE"], ["Carosello", "#D7CCFF", "#3A1FB0"], ["Carosello", "#D7CCFF", "#3A1FB0"], ["Reel", "#FFD6BD", "#7A2A14"], ["Post", "#E5E2FF", "#6B3FFE"]]. map(([label, bg, color], i) =>
{label}
)}
{/* front card: schedule, overlapping */}
3 contenuti programmati per domani
); } function ScheduleRow({ Glyph, bg, border, name, time, arrowBg }) { return (
{name}
{time}
); } window.HomePage = HomePage;