From 66f047e1aabdbb41e6fa866cef804c9482412ed7 Mon Sep 17 00:00:00 2001 From: Matthew Meszaros Date: Tue, 26 May 2026 13:48:54 +0000 Subject: [PATCH] site(header): Cursor-style mega-menu for Product MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Hover or focus the Product nav item to reveal a wide (720px) mega-menu: - Top: featured 'Product overview' card with sky-gradient icon tile, plus a Resources column (Deliverability, API, Integrations, Changelog). - Two-column product grid grouped 'Send & deliver' (Warmup, Sending, Workers, Security) and 'Engage & analyse' (Inbox, Campaigns, CRM, Analytics) with icon + title + 1-line description per item. - Footer band with open-source link and pricing link. - Caret rotates 180° on open, panel fades + slides down 200ms. - Hover-bridge with 140ms close delay so cursor can travel from trigger to panel without flicker. Escape closes. --- site/src/components/Header.astro | 192 ++++++++++++++++++++++++++++--- 1 file changed, 173 insertions(+), 19 deletions(-) diff --git a/site/src/components/Header.astro b/site/src/components/Header.astro index 1cf36e47..a77955e1 100644 --- a/site/src/components/Header.astro +++ b/site/src/components/Header.astro @@ -1,5 +1,6 @@ --- import Wordmark from './Wordmark.astro'; +import Icon from './Icon.astro'; interface Props { /** Render as transparent over the sky hero, with light text. Becomes solid once scrolled past the hero. */ @@ -8,13 +9,34 @@ interface Props { const { onSky = false } = Astro.props; const path = Astro.url.pathname; -const nav: { label: string; href: string; match?: string }[] = [ - { label: 'Product', href: '/product/', match: '/product' }, - { label: 'Warmup', href: '/warmup/', match: '/warmup' }, - { label: 'Deliverability', href: '/deliverability/', match: '/deliverability' }, - { label: 'Security', href: '/security/', match: '/security' }, - { label: 'Pricing', href: '/pricing/', match: '/pricing' }, - { label: 'Learn', href: '/learn/', match: '/learn' }, + +// Product mega-menu items grouped into two columns +const productGroups = [ + { + label: 'Send & deliver', + items: [ + { icon: 'flame', href: '/warmup/', title: 'Warmup', desc: 'Reputation-safe pools and gradual ramps.' }, + { icon: 'send', href: '/sending/', title: 'Sending engine', desc: 'Distributed across mailboxes, workers, IPs.' }, + { icon: 'cpu', href: '/workers/', title: 'Workers', desc: 'One worker per machine, never NAT-shared.' }, + { icon: 'shield', href: '/security/', title: 'Security', desc: 'Envelope encryption with AWS KMS.' }, + ], + }, + { + label: 'Engage & analyse', + items: [ + { icon: 'inbox', href: '/inbox/', title: 'Unified inbox', desc: 'Every reply across every mailbox, classified.' }, + { icon: 'workflow', href: '/campaigns/', title: 'Campaigns', desc: 'Sequences with branching and A/B variants.' }, + { icon: 'contact', href: '/crm/', title: 'CRM', desc: 'Pipelines, deals and tasks next to sending.' }, + { icon: 'chart', href: '/analytics/', title: 'Analytics', desc: 'Placement, complaints, bounces, by mailbox.' }, + ], + }, +]; + +const nav: { label: string; href: string; match?: string; mega?: boolean }[] = [ + { label: 'Product', href: '/product/', match: '/product', mega: true }, + { label: 'Deliverability',href: '/deliverability/',match: '/deliverability' }, + { label: 'Pricing', href: '/pricing/', match: '/pricing' }, + { label: 'Learn', href: '/learn/', match: '/learn' }, ]; function active(match?: string) { @@ -33,19 +55,110 @@ function active(match?: string) {
-
+ +