mirror of
https://github.com/longbridge/developers.git
synced 2026-09-19 03:34:09 +08:00
ihavecoke
b6e83e209a
## 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
2.2 KiB
2.2 KiB
Design Context
Users
Mixed audience: professional fintech developers (quant trading, algo trading), individual investors building tools, AI developers integrating via MCP/Skill, and students exploring financial APIs. They use the site during working hours at desks — browsing docs, copying code, configuring SDKs. The core job: integrate real-time market data and trading into their applications as fast as possible.
Brand Personality
Clear, concise, serious. The interface should feel like a reliable financial infrastructure provider — not flashy, not playful, but genuinely trustworthy. Users are entrusting real money to this API. The tone is confident without being corporate-stiff. Think: a well-organized engineering handbook, not a marketing landing page.
Aesthetic Direction
- Reference: Stripe Docs, Vercel Docs — clean developer documentation with code-first presentation, clear navigation, generous whitespace
- Anti-reference: Generic fintech dashboards with gratuitous charts, dark-mode-everything with neon glows, over-animated marketing pages
- Theme: Light mode primary (docs browsing context), dark mode supported
- Brand color:
#00b8b8(teal/cyan) — used sparingly as accent, not splashed everywhere - Typography: Current system uses Inter — functional but generic. Body text needs to be highly readable at small sizes for docs/code contexts
Design Principles
- Content density over decoration — Every pixel should serve information delivery. Remove ornament that doesn't help users find what they need.
- Code is the hero — SDK examples, CLI commands, API responses should be the visual centerpiece, not marketing copy or illustrations.
- Trust through clarity — Financial platforms earn trust by being predictable and well-organized, not by looking expensive. Clear hierarchy, consistent patterns, no surprises.
- Progressive complexity — Surface simple getting-started paths first. Let advanced capabilities (WebSocket protocols, order types, rate limits) reveal themselves through exploration, not upfront bombardment.
- Respect the developer's time — Fast page loads, scannable layouts, copy-paste ready code blocks. Every interaction should feel like it saves time, not wastes it.