// HeroV2 — restructured for launch. // The TAGLINE leads (it's a new brand; nobody knows Ondion yet). // The "bottleneck" hook becomes a supporting thesis below. function HeroV2({ taglineColor = "iridescent" }) { const { lang } = React.useContext(window.LangContext); const { isMobile } = window.useBreakpoint(); const [vw, setVw] = React.useState(window.innerWidth); React.useEffect(() => { const h = () => setVw(window.innerWidth); window.addEventListener('resize', h, { passive: true }); return () => window.removeEventListener('resize', h); }, []); // Blob switches to top-right corner at 1024px — same breakpoint SideRail disappears const isBlobMobile = vw < 1024; const isCompact = !isBlobMobile && vw < 1440; const isTabletLayout = vw >= 768 && vw < 1024; // At 2400px+ blob is physically separated from text (1200px gap) — mask not needed const isWide = vw >= 2400; // Color treatment for the big tagline const colorPresets = { iridescent: { className: "grad-iridescent", style: {}, }, platinum: { className: "grad-silver-gold", style: {}, }, silver: { className: "", style: { background: "linear-gradient(135deg, #ffffff 0%, #d8dde8 30%, #b8c0d0 60%, #8e8ea8 100%)", WebkitBackgroundClip: "text", backgroundClip: "text", WebkitTextFillColor: "transparent", color: "transparent", }, }, mono: { className: "", style: { color: "#ffffff" }, }, }; const preset = colorPresets[taglineColor] || colorPresets.iridescent; const en = { eyebrow: "Ondion", hook: "Most companies don't have an AI problem.", hookAccent: "They have unclear processes, siloed knowledge, too many tools — and no clear structure yet for how AI can be used.", desc: "That structure is what I build for you.", practiceLabel: "Practice", practiceValue: "AI Systems Architecture", readOn: "How I work", forLabel: "For", forValue: "Creative & live production\nSMEs · DE · EN", }; const de = { eyebrow: "Ondion", hook: "Die meisten Unternehmen haben kein KI-Problem.", hookAccent: "Sie haben unklare Prozesse, isoliertes Wissen, zu viele Tools — und noch keine klare Struktur dafür, wie KI sinnvoll eingesetzt werden kann.", desc: "Diese Struktur schaffe ich für Sie.", practiceLabel: "Praxis", practiceValue: "KI-Systemarchitektur", readOn: "Wie ich arbeite", forLabel: "Für", forValue: "Kreativ- & Eventwirtschaft\nKMU · DE · EN", }; const t = lang === 'de' ? de : en; return (
{/* Violet halo glow behind blob */}
); } window.HeroV2 = HeroV2;