Deck Mosaic Hero

<section class="ws-presentation-hero relative overflow-hidden bg-[var(--ws-presentation-hero-bg)] text-white"><div class="absolute inset-0 bg-[radial-gradient(circle_at_top_left,rgba(56,189,248,0.18),transparent_35%),radial-gradient(circle_at_80%_20%,rgba(168,85,247,0.16),transparent_28%),linear-gradient(180deg,rgba(15,23,42,0.35),rgba(15,23,42,0.92))]"></div><div class="relative mx-auto grid max-w-7xl gap-10 px-6 py-20 lg:grid-cols-[minmax(0,1fr)_minmax(28rem,34rem)] lg:items-center lg:py-28"><div><p class="text-sm font-medium uppercase tracking-[0.24em] text-sky-300">Presentation Systems</p><h1 class="mt-5 max-w-3xl text-5xl font-semibold tracking-[-0.04em] text-balance sm:text-6xl">Turn structured ideas into decks that already look directed.</h1><p class="mt-6 max-w-2xl text-lg leading-8 text-slate-300">Designed for story-driven products, investor narratives, strategy reviews, and AI-generated presentations that need more rhythm than a normal website hero can deliver.</p><div class="mt-8 flex flex-wrap gap-3"><a href="#" class="rounded-full bg-white px-5 py-3 text-sm font-semibold text-slate-950">Start with a prompt</a> <!-- ws-ok: CTA button intentionally white on dark background --><a href="#" class="rounded-full border border-white/15 px-5 py-3 text-sm font-semibold text-white/80">See story templates</a></div><div class="mt-10 grid max-w-xl grid-cols-3 gap-3 text-sm text-slate-300"><div class="rounded-2xl border border-white/10 bg-white/5 p-4"><p class="text-2xl font-semibold text-white">Hook</p><p class="mt-1">Lead with the sharpest idea.</p></div><div class="rounded-2xl border border-white/10 bg-white/5 p-4"><p class="text-2xl font-semibold text-white">Flow</p><p class="mt-1">Shape notes into a sequence.</p></div><div class="rounded-2xl border border-white/10 bg-white/5 p-4"><p class="text-2xl font-semibold text-white">Proof</p><p class="mt-1">Support the ask with evidence.</p></div></div></div><div class="grid grid-cols-2 gap-4 lg:pl-6"><article class="col-span-2 rounded-[1.75rem] border border-white/10 bg-white/10 p-5 backdrop-blur"><p class="text-xs uppercase tracking-[0.2em] text-sky-200">Strategy Review</p><div class="mt-4 grid grid-cols-[1.2fr_0.8fr] gap-4"><div class="rounded-2xl bg-slate-900/70 p-4"><div class="h-24 rounded-xl bg-[linear-gradient(135deg,rgba(56,189,248,0.35),rgba(168,85,247,0.35))]"></div><div class="mt-4 h-3 w-2/3 rounded-full bg-white/70"></div><div class="mt-2 h-3 w-5/6 rounded-full bg-white/30"></div><div class="mt-2 h-3 w-1/2 rounded-full bg-white/30"></div></div><div class="space-y-3"><div class="rounded-2xl bg-white/10 p-4"><div class="h-16 rounded-xl bg-white/10"></div><div class="mt-3 h-3 w-3/4 rounded-full bg-white/50"></div></div><div class="rounded-2xl bg-white/10 p-4"><div class="h-16 rounded-xl bg-white/10"></div><div class="mt-3 h-3 w-1/2 rounded-full bg-white/50"></div></div></div></div></article><article class="rounded-[1.5rem] border border-white/10 bg-white/5 p-4"><p class="text-xs uppercase tracking-[0.18em] text-white/50">Board Update</p><div class="mt-3 h-28 rounded-2xl bg-[linear-gradient(180deg,rgba(255,255,255,0.14),rgba(255,255,255,0.03))]"></div><div class="mt-4 h-3 w-4/5 rounded-full bg-white/50"></div><div class="mt-2 h-3 w-1/2 rounded-full bg-white/20"></div></article><article class="rounded-[1.5rem] border border-white/10 bg-white/5 p-4"><p class="text-xs uppercase tracking-[0.18em] text-white/50">Pitch Flow</p><div class="mt-3 h-28 rounded-2xl bg-[radial-gradient(circle_at_top_left,rgba(34,197,94,0.24),transparent_40%),linear-gradient(180deg,rgba(255,255,255,0.1),rgba(255,255,255,0.03))]"></div><div class="mt-4 h-3 w-2/3 rounded-full bg-white/50"></div><div class="mt-2 h-3 w-1/3 rounded-full bg-white/20"></div></article></div></div></section>