langgenius / langgenius/mosoo-website
feat(navigation): elevate the Products mega menu visual design
- Dominant language
- TypeScript
- Stars
- 2
- Forks
- 1
- Avg merge
- 52m
- Merged PRs (30d)
- 14
Description
## Background
The Products menu introduced in #95 is functional, but its current 380px single-column dropdown does not yet communicate the product family with enough visual presence. Evolve the existing menu into a premium, visually led mega menu for desktop—using the reference below as design direction, not as a literal copy.
## Design reference
> This is a reference for information hierarchy, color relationships, and layout mood only. Do not reuse Grain's logo, copy, imagery, trademarks, or other brand assets.
## Desired experience
- **Custom product identity:** Give Mosoo and Mosoo Computer considered, recognizable product marks / SVG treatments rather than generic stock glyphs. Keep the global Mosoo wordmark's existing role.
- **Color and surface:** Use the landing page's warm-paper / forest-green / ink token system with a restrained, intentional surface treatment. Depth and translucency should improve hierarchy and legibility, not be decorative noise.
- **Type hierarchy:** Product titles should have high contrast and emphasis; supporting descriptions should be clearly quieter; hosts and other metadata should recede another level without becoming unreadable.
- **Right-side visual panel:** Add a Mosoo-owned product or use-case visual card containing an image, short title, supporting copy, and a real localized destination. The panel should make the menu a navigation-and-discovery surface rather than a list of links.
## Phosphor glass-icon treatment spike
This menu may need glass-style product icons sourced from Phosphor. Treat that as a focused reusable pipeline, not a site-wide icon-library migration or hand-built one-off SVGs:
1. Start from approved Phosphor SVG/icon inputs.
2. Define a deterministic, token-driven treatment for the glass result (sizing, highlight, transparency, outline/shadow, and dark/light contrast).
3. Preserve accessible icon semantics and visual clarity at the actual menu sizes.
4. Document the input/output contract, constraints, and visual QA. If useful, package this as an agent-facing Skill so later product icon work follows the same process.
Pilot the treatment on this menu before deciding whether to adopt it elsewhere.
## Scope and constraints
- Build on `ProductsMenu` / `LoginLandingTopbar`; do not add new top-level navigation entries.
- Retain the existing Mosoo and Mosoo Computer URLs, Base UI `NavigationMenu` behavior, portal, keyboard flow, focus states, Escape handling, and reduced-motion support.
- Preserve the current lazy-loading/no-layout-shift intent.
- On small screens, do not force the desktop mega-menu layout or introduce horizontal overflow.
- Use only Mosoo-owned or clearly licensed visual assets. Images need appropriate `alt` text; purely decorative imagery should use an empty alt.
## Acceptance criteria
- On common desktop widths, opening **Products** exposes a polished two-part menu: product entries plus a right-side visual/story card.
- Both existing product destinations remain correct, with distinct product marks and clear three-level text hierarchy.
- The design is readable over all surfaces and interaction states; keyboard and screen-reader navigation work end to end.
- Mobile remains compact and usable without layout regression.
- The glass-icon pilot has documented reusable steps/assets and passes visual review at the shipped size.
- The implementation includes before/after desktop screenshots and a responsive check for review.
## Non-goals
- Do not rebuild the full top navigation, change product URLs, or copy the reference brand's assets or writing.
Contributor guide
No contributing guide indexed for this repository
Research direction
Start with the existing ProductsMenu and LoginLandingTopbar, then trace the Base UI NavigationMenu behavior, current product URLs, portal, keyboard flow, focus states, and mobile layout. Use the acceptance criteria as the completion checklist: a responsive two-part desktop menu, distinct product marks, accessible interaction states, correct destinations, and documented visual QA for the glass-icon pilot.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- accessibility, design, frontend, web-dev
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100