feat(landing-page): fold Agent into a Product mega menu (#5705)

The top nav listed Product and Agent as sibling tabs. Product is really the
umbrella for what Open Design ships, so promote it to a multi-column mega
menu whose columns are top-level categories: a Products column (Open Design /
HTML Anything / HTML Video) and an Agent column (the coding agents, header
linking to the /agents/ hub). This declutters the bar and leaves room to add
more category columns (e.g. Feature) later without another top-level tab.

- Product trigger opens `.nav-dropdown-mega`: flex columns, each a category
  with a small-caps head + list; the long Agent list caps its own height and
  scrolls so the panel never runs off short viewports.
- Product now lights up for /agents/ pages too, since Agent lives inside it.
- Remove the standalone Agent top-level tab.
- Mobile drawer flattens the mega to stacked full-width categories and drops
  the Agent scroll cap so the list flows naturally.

No new i18n keys — reuses the existing `product` / `agent` labels, so all 11
locales are covered. `astro check` passes with 0 errors.

Co-authored-by: Joey <236967869+joeylee12629-star@users.noreply.github.com>

Author: joeylee12629-star

apps/landing-page/app/_components/header.tsx

@@ -208,14 +208,16 @@ export function Header({
         </button>
         <nav id='primary-nav' data-nav-primary>
           <ul className='nav-links'>
-            {/* Product — the Open Design products. The trigger lights up only
-                for its own family; every other section maps to its own
-                trigger below, so a sub-page never marks Product by accident.
-                It is a <button> (not a link) so it never navigates — Product
-                used to bounce to the homepage — but its dropdown is revealed
-                by the SAME pure-CSS :hover / :focus-within rule as the hub
-                menus, so it works with no JS (first paint / script failure)
-                and on touch (tapping focuses the button → :focus-within). */}
+            {/* Product — a mega menu whose columns are top-level categories:
+                the Open Design product family and the Agent catalog today,
+                with room to add more (e.g. Feature) as its own column later.
+                The trigger is a <button> (not a link) so it never navigates —
+                Product used to bounce to the homepage — but its panel is
+                revealed by the SAME pure-CSS :hover / :focus-within rule as
+                the hub menus, so it works with no JS (first paint / script
+                failure) and on touch (tapping focuses the button →
+                :focus-within). It lights up for the whole product family AND
+                for /agents/ pages now that Agent lives inside it. */}
             <li className='has-dropdown'>
               <button
                 type='button'
@@ -224,36 +226,73 @@ export function Header({
                   (active === 'product' ||
                   active === 'home' ||
                   active === 'html-anything' ||
-                  active === 'html-video'
+                  active === 'html-video' ||
+                  active === 'agent'
                     ? ' is-active'
                     : '')
                 }
               >
                 {productMenuCopy.product}
                 <span className='dropdown-caret' aria-hidden='true'>▾</span>
               </button>
-              <ul className='nav-dropdown' aria-label={productMenuCopy.product}>
-                <li>
-                  <a href={href('/')}>
-                    <span className='dropdown-name'>{productMenuCopy.openDesignName}</span>
-                    <span className='dropdown-blurb'>{productMenuCopy.openDesignBlurb}</span>
-                  </a>
+              <ul
+                className='nav-dropdown nav-dropdown-mega'
+                aria-label={productMenuCopy.product}
+              >
+                {/* Products column — the Open Design product family. Names
+                    only (no blurbs): keeps the column compact and aligned
+                    with the Agent column, and avoids per-locale width blowups
+                    from long descriptions. */}
+                <li className='nav-mega-col'>
+                  <span className='nav-mega-col-head'>{productMenuCopy.product}</span>
+                  <ul className='nav-mega-list'>
+                    <li>
+                      <a href={href('/')}>
+                        <span className='dropdown-name'>{productMenuCopy.openDesignName}</span>
+                      </a>
+                    </li>
+                    <li>
+                      <a
+                        href={href('/html-anything/')}
+                        className={active === 'html-anything' ? 'is-active' : undefined}
+                      >
+                        <span className='dropdown-name'>{productMenuCopy.htmlAnythingName}</span>
+                      </a>
+                    </li>
+                    <li>
+                      <a href={href('/html-video/')}>
+                        <span className='dropdown-name'>{productMenuCopy.htmlVideoName}</span>
+                      </a>
+                    </li>
+                  </ul>
                 </li>
-                <li>
+                {/* Agent column — the coding agents each with a dedicated
+                    design page. The column header links to the /agents/ hub
+                    (the old top-level Agent tab's target). The list caps its
+                    own height and scrolls so 21 rows never run the panel
+                    off-screen; the shorter Products column stays static. */}
+                <li className='nav-mega-col nav-mega-col-agent'>
                   <a
-                    href={href('/html-anything/')}
-                    className={active === 'html-anything' ? 'is-active' : undefined}
+                    href={href('/agents/')}
+                    className={
+                      'nav-mega-col-head' + (active === 'agent' ? ' is-active' : '')
+                    }
                   >
-                    <span className='dropdown-name'>{productMenuCopy.htmlAnythingName}</span>
-                    <span className='dropdown-blurb'>{productMenuCopy.htmlAnythingBlurb}</span>
-                  </a>
-                </li>
-                <li>
-                  <a href={href('/html-video/')}>
-                    <span className='dropdown-name'>{productMenuCopy.htmlVideoName}</span>
-                    <span className='dropdown-blurb'>{productMenuCopy.htmlVideoBlurb}</span>
+                    {productMenuCopy.agent}
                   </a>
+                  <ul className='nav-mega-list nav-mega-list-scroll'>
+                    {AGENTS.map((agent) => (
+                      <li key={agent.route}>
+                        <a href={href(`/agents/${agent.route}/`)}>
+                          <span className='dropdown-name'>{agent.name}</span>
+                        </a>
+                      </li>
+                    ))}
+                  </ul>
                 </li>
+                {/* Future category columns (e.g. Feature) drop in here as
+                    another <li className='nav-mega-col'> with its own head +
+                    list; the panel widens automatically. */}
               </ul>
             </li>
 
@@ -311,32 +350,6 @@ export function Header({
               </ul>
             </li>
 
-            {/* Agent — the coding agents with a dedicated design page. The
-                top-level link goes to the /agents/ hub. */}
-            <li className='has-dropdown'>
-              <a
-                href={href('/agents/')}
-                className={active === 'agent' ? 'is-active' : undefined}
-              >
-                {productMenuCopy.agent}
-                <span className='dropdown-caret' aria-hidden='true'>▾</span>
-              </a>
-              {/* 21 coding-agent rows — reuse the tall-dropdown height cap so
-                  the panel scrolls instead of running off short viewports. */}
-              <ul
-                className='nav-dropdown nav-dropdown-solution'
-                aria-label={productMenuCopy.agent}
-              >
-                {AGENTS.map((agent) => (
-                  <li key={agent.route}>
-                    <a href={href(`/agents/${agent.route}/`)}>
-                      <span className='dropdown-name'>{agent.name}</span>
-                    </a>
-                  </li>
-                ))}
-              </ul>
-            </li>
-
             {/* Plugins — the three composable catalogs. */}
             <li className='has-dropdown'>
               <a

apps/landing-page/app/globals.css

@@ -1052,6 +1052,63 @@ body::before {
   overflow-y: auto;
 }
 
+/* Product mega menu — category columns side by side. Each `.nav-mega-col` is
+   one top-level category (Products, Agent, and later e.g. Feature); adding a
+   column just widens the panel. Reuses the base `.nav-dropdown` card chrome
+   (paper, border, shadow, item hover fills) and only lays the columns out.
+   Product is the leftmost nav item, so the panel opens rightward with no
+   right-edge overflow risk. */
+.nav-dropdown-mega {
+  display: flex;
+  gap: 0;
+  min-width: 0;
+  max-width: min(94vw, 640px);
+}
+.nav-dropdown-mega .nav-mega-col {
+  display: flex;
+  flex-direction: column;
+  flex: 0 0 auto;
+  min-width: 216px;
+}
+.nav-dropdown-mega .nav-mega-col + .nav-mega-col {
+  margin-left: 6px;
+  padding-left: 6px;
+  border-left: 1px solid rgba(26, 26, 26, 0.08);
+}
+.nav-dropdown-mega .nav-mega-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+/* Column header — small-caps category label, matching the grouped-dropdown
+   label. When it is a link (Agent → /agents/ hub) it tints on hover; it
+   overrides the generic `.nav-dropdown a` block/padding/hover-fill styles. */
+.nav-dropdown-mega .nav-mega-col-head {
+  display: block;
+  padding: 4px 12px 6px;
+  font-family: var(--sans);
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--ink-faint);
+  text-decoration: none;
+}
+a.nav-mega-col-head:hover {
+  background: transparent;
+  color: var(--coral);
+}
+a.nav-mega-col-head.is-active {
+  background: transparent;
+  color: var(--ink);
+}
+/* A long column (Agent: 21 rows) caps its own height and scrolls so the
+   panel never runs off short viewports; shorter columns stay static. */
+.nav-dropdown-mega .nav-mega-list-scroll {
+  max-height: min(60vh, 420px);
+  overflow-y: auto;
+}
+
 /*
  * Hamburger toggle. Hidden at desktop widths (≥1080px). At narrower
  * viewports it replaces the inline nav-links and toggles a panel
@@ -5561,6 +5618,17 @@ footer .container {
   /* Let the Solution panel flow naturally inside the flattened nav panel
      instead of scrolling within a capped box. */
   .nav-dropdown-solution { max-height: none; overflow: visible; }
+  /* Product mega menu flattens to stacked full-width categories in the mobile
+     drawer: drop the flex columns, dividers, and the agent scroll cap so each
+     category reads as a labeled vertical list. */
+  .nav-dropdown-mega { display: block; max-width: none; }
+  .nav-dropdown-mega .nav-mega-col { min-width: 0; }
+  .nav-dropdown-mega .nav-mega-col + .nav-mega-col {
+    margin-left: 0;
+    padding-left: 0;
+    border-left: none;
+  }
+  .nav-dropdown-mega .nav-mega-list-scroll { max-height: none; overflow: visible; }
 }
 @media (max-width: 1080px) {
   .container { padding: 0 32px; }