// Header / Logo / Theme + Lang toggle const { useState, useEffect, useRef, useMemo } = React; function Logo({ size = 32 }) { return ( ); } function Header({ lang, setLang, theme, setTheme }) { const t = I18N[lang]; const [scrolled, setScrolled] = useState(false); const [open, setOpen] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 8); window.addEventListener('scroll', onScroll); return () => window.removeEventListener('scroll', onScroll); }, []); const navLinks = [ { href: 'cloud.html', label: t.nav.cloud, color: 'var(--cloud)' }, { href: 'media.html', label: t.nav.media, color: 'var(--media)' }, { href: 'tools.html', label: t.nav.tools, color: 'var(--tools)' }, { href: '#partners', label: t.nav.partner, color: 'var(--fg)' }, { href: '#contact', label: t.nav.contact, color: 'var(--fg)' }, ]; return (
{['de', 'en'].map(l => ( ))}
{open && (
{navLinks.map((l, i) => ( setOpen(false)} style={{ padding: '14px 0', fontSize: 16, borderBottom: '1px solid var(--line)' }}>{l.label} ))}
)}
); } function TickerLine({ items }) { const text = items.join(' ✦ '); return (
{[0,1,2,3].map(i => {text} ✦ )}
); } function Hero({ t, density }) { const [mouse, setMouse] = useState({ x: 0.5, y: 0.5 }); useEffect(() => { const onMove = (e) => setMouse({ x: e.clientX / window.innerWidth, y: e.clientY / window.innerHeight }); window.addEventListener('mousemove', onMove); return () => window.removeEventListener('mousemove', onMove); }, []); const tx = (mouse.x - 0.5) * 30; const ty = (mouse.y - 0.5) * 30; const py = density === 'compact' ? '60px 0 40px' : '100px 0 60px'; return (
[ {t.hero.kicker} ] {t.hero.live}

{t.hero.line1} {t.hero.line2}

9

{t.hero.sub}

{t.hero.cta} → {t.hero.ctaSecondary}
); } function OSStrip({ t }) { const o = t.os; const glyphs = { macOS: , Windows: , Linux: , iOS: , iPadOS: , }; return (
{o.kicker}

{o.title}

{o.sub}

    {o.list.map((name) => (
  • {glyphs[name]}
    {name}
    • ))}
); } function Why({ t }) { return (
{t.why.kicker}

{t.why.title}

{t.why.points.map((p, i) => (
{p.n}

{p.h}

{p.t}

))}
); } function DivisionCard({ id, accentVar, idx, total, data }) { const [hover, setHover] = useState(false); return (
setHover(true)} onMouseLeave={() => setHover(false)} style={{ position: 'relative', padding: '48px 40px', borderTop: '1px solid var(--line)', cursor: 'pointer', overflow: 'hidden', transition: 'all 250ms ease', background: hover ? `color-mix(in oklch, ${accentVar} 8%, transparent)` : 'transparent' }}>
0{idx + 1} / 0{total}
init9.{data.tag}

{data.title}

{data.desc}

→
); } function Divisions({ t }) { const list = [ { id: 'cloud', accent: 'var(--cloud)', data: t.div.cloud }, { id: 'media', accent: 'var(--media)', data: t.div.media }, { id: 'tools', accent: 'var(--tools)', data: t.div.tools }, ]; return (
{t.div.kicker}

init9.cloud · init9.media · init9.tools

{list.map((d, i) => ( ))}
); } const PARTNERS = [ { name: 'Atlassian', cat: 'Tools' }, { name: 'Jira', cat: 'Tools' }, { name: 'Confluence', cat: 'Tools' }, { name: 'Ubiquiti', cat: 'Network', featured: true }, { name: 'UniFi', cat: 'Network' }, { name: 'Microsoft 365', cat: 'Cloud' }, { name: 'Google Workspace', cat: 'Cloud' }, { name: 'AWS', cat: 'Cloud' }, { name: 'Hetzner', cat: 'Hosting' }, { name: 'Cloudflare', cat: 'Edge' }, { name: 'Adobe', cat: 'Media' }, { name: 'DaVinci Resolve', cat: 'Media' }, { name: 'Sony', cat: 'Hardware' }, { name: 'DJI', cat: 'Drone' }, { name: 'Figma', cat: 'Design' }, { name: 'GitHub', cat: 'Dev' }, ]; function Marquee({ items, speed = 60, reverse = false }) { const text = (
{items.map((p, i) => ( {p.featured && ★ Featured} {p.name} /{p.cat} ))}
); return (
{[0,1,2].map(i => {text})}
); } function Partners({ t }) { return (
{t.partners.kicker}

{t.partners.title}

{t.partners.sub}

U
[ Ubiquiti / UniFi gear photo ]
★ {t.partners.featured}

Ubiquiti. Networking that just works.

{t.partners.ubntDesc}

{['UniFi Network', 'UniFi Protect', 'UniFi Talk', 'UISP'].map((p) => ( {p} ))}
); } function CTA({ t }) { return (
); } function Footer({ t, lang }) { const year = new Date().getFullYear(); return ( ); } Object.assign(window, { Header, Hero, Why, Divisions, Partners, CTA, Footer, TickerLine, OSStrip });