 ihavecoke
|
b6e83e209a
|
Rebuild homepage with new brand design system and interactive sections (#888)
## Summary
A complete overhaul of the Longbridge Developers homepage, introducing a
new brand design system built on inspira-ui animations, interactive
product showcases, and a unified multi-language content structure.
### New homepage sections
- **HeroSection** — Animated FlickeringGrid background, ColourfulText
rotating product showcase, interactive CTA buttons
- **PlatformStats** — 4 key stats with animated NumberTicker and hover
detail cards
- **CapSection** — Developer capability highlights with Spotlight +
Expand hover interaction
- **ArchSection** — Architecture diagram (custom SVG bus-topology) with
SdkMarquee
- **ProductCLI** — Interactive terminal mockup with real CLI output,
theme-aware (follows VitePress isDark), click-to-switch features
- **ProductMCP** — Custom SVG bus-topology diagram replacing VueFlow,
per-client config panels (shell/JSON/UI), tab sync with diagram
- **ProductSkill** — AI agent simulator with macOS traffic light dots
and install flow
- **ProductOpenAPI** — Bento Grid SDK showcase with Shiki syntax
highlighting, 6 SDKs × 4 domain code examples
- **GetStarted** — Quick-start cards
### Design system additions
- 15+ inspira-ui animation components (`FlickeringGrid`,
`ColourfulText`, `NumberTicker`, `BorderBeam`, `Marquee`,
`AnimatedBeam`, etc.)
- Tailwind CSS integration (`postcss.config.mjs`, `tailwind.css`)
- Unified section styles: consistent title/subtitle spacing (24px gap),
muted subtitle color, 14px minimum font size
### i18n
- 150+ new keys added across `en.json`, `zh-CN.json`, `zh-HK.json`
- All three locales kept in sync
|
2026-04-13 19:57:54 +08:00 |
|