Skip to content

feat: modern full-width UX redesign#124

Merged
wavekat-eason merged 7 commits into
mainfrom
feat/ux-redesign
Jul 8, 2026
Merged

feat: modern full-width UX redesign#124
wavekat-eason merged 7 commits into
mainfrom
feat/ux-redesign

Conversation

@wavekat-eason

Copy link
Copy Markdown
Contributor

What

A site-wide UX refresh: full-width professional layout, a product-first homepage, and modernized chrome — across all 9 locales.

Layout & chrome

  • Full-bleed header/footer: sticky glass header bar and full-width footer, each with an inner max-w-6xl container; header gains a download CTA pill
  • Uniform page width: all pages standardize on max-w-6xl; the voice section keeps a focused max-w-4xl reading column while its sub-nav tabs align with the header's 6xl container
  • Footer: localized link grid, social icons, and a giant watermark wordmark strip

Homepage (product-first rethink)

  • Full-bleed hero with localized app screenshot (3D tilt), direct download button + platform dropdown right in the hero, and a GitHub link
  • Dark "statement band" spotlighting WaveKat Voice (visible in both themes)
  • Libraries drawn as the signal chain they form: pipeline flow with arrow connectors, foundation and tools grids with per-library accent colors
  • Scroll-reveal animations (IntersectionObserver, reduced-motion safe, content visible without JS)

Typography & styling

  • Inter for UI/body, JetBrains Mono kept as the accent voice (code, versions, kickers)
  • Brand gradient headline accent, orange selection/focus rings, boosted background wave visibility

Components

  • VoiceDownload/TalkCTA/PostCard/LanguageSwitcher restyled to match
  • Shared ConversionTracking component with double-bind guard replaces inline conversion scripts

All 177 pages build; npm run check:links passes; light/dark and all locales screenshot-verified.

🤖 Generated with Claude Code

https://claude.ai/code/session_013oRLgHKazJ3wCcj7aR8LbR

wavekat-eason and others added 7 commits July 8, 2026 19:13
- Inter for UI/body with JetBrains Mono kept as accent for code/repo names
- Full-width sticky glass header and richer full-width footer
- Homepage: gradient hero with direct platform-aware download button,
  localized product screenshot showcase, refreshed library cards
- Voice section: full-width underline-tab sub-nav
- Modernized blog cards, talk CTA, download pills across all 9 locales
- Shared ConversionTracking component so download clicks track anywhere

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013oRLgHKazJ3wCcj7aR8LbR
- Voice section content 3xl -> 5xl (all locales via layout)
- Blog listings 3xl -> 5xl with two-column card grid, larger heading
- About pages 3xl -> 4xl with larger heading
- Blog posts keep their reading-width column intentionally

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013oRLgHKazJ3wCcj7aR8LbR
- Voice section, blog listings, about, and 404 now share the landing
  page's 6xl container
- Blog listing cards flow three across on large screens
- Blog posts get the 6xl container with a centered reading column inside

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013oRLgHKazJ3wCcj7aR8LbR
- Hero: two-column with the real app screenshot large, in 3D
  perspective with a glow, over a dot-grid texture
- Download CTA pinned in the header on every page
- WaveKat Voice statement: full-bleed dark band in both themes
- Libraries drawn as the signal chain they are: vad -> turn -> asr
  -> tts with connecting arrows over a core/sip foundation row
- Cards get gradient hairlines and colored hover glows, no more
  uniform box grid
- Scroll-reveal motion (reduced-motion safe, content visible sans JS)
- Giant watermark wordmark closes the footer; wave background boosted

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013oRLgHKazJ3wCcj7aR8LbR
Content and sub-nav share a max-w-4xl column; header/footer stay
full width. Product pages read better narrower than the landing page.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013oRLgHKazJ3wCcj7aR8LbR
Tabs are chrome, not content — they share the header's 6xl container
while the content column stays at 4xl.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013oRLgHKazJ3wCcj7aR8LbR
The 2% white tint was indistinguishable from the page background, so
the product spotlight only existed in light mode. Raise the surface to
5% and the borders to 10% so the band reads as a distinct panel.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013oRLgHKazJ3wCcj7aR8LbR
@github-actions

github-actions Bot commented Jul 8, 2026

Copy link
Copy Markdown
Contributor

@wavekat-eason wavekat-eason merged commit f98a131 into main Jul 8, 2026
2 checks passed
@wavekat-eason wavekat-eason deleted the feat/ux-redesign branch July 8, 2026 08:14
wavekat-eason pushed a commit that referenced this pull request Jul 8, 2026
🤖 I have created a release *beep* *boop*
---


##
[0.0.44](wavekat-com-v0.0.43...wavekat-com-v0.0.44)
(2026-07-08)


### Features

* **blog:** click-to-call phone links post
([#122](#122))
([6465b51](6465b51))
* modern full-width UX redesign
([#124](#124))
([f98a131](f98a131))

---
This PR was generated with [Release
Please](https://github.com/googleapis/release-please). See
[documentation](https://github.com/googleapis/release-please#release-please).

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant