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
37 lines
1003 B
CSS
37 lines
1003 B
CSS
@import "tailwindcss";
|
|
@import "tw-animate-css";
|
|
|
|
@custom-variant dark (&:is(.dark *));
|
|
|
|
:root {
|
|
--card: oklch(1 0 0);
|
|
--card-foreground: oklch(0.141 0.005 285.823);
|
|
--primary: oklch(0.21 0.006 285.885);
|
|
--primary-foreground: oklch(0.985 0 0);
|
|
--border: oklch(0.92 0.004 286.32);
|
|
--radius: 0.625rem;
|
|
--background: oklch(1 0 0);
|
|
--foreground: oklch(0.141 0.005 285.823);
|
|
}
|
|
|
|
.dark {
|
|
--card: oklch(0.21 0.006 285.885);
|
|
--card-foreground: oklch(0.985 0 0);
|
|
--primary: oklch(0.985 0 0);
|
|
--primary-foreground: oklch(0.21 0.006 285.885);
|
|
--border: oklch(0.274 0.006 286.033);
|
|
--background: oklch(0.141 0.005 285.823);
|
|
--foreground: oklch(0.985 0 0);
|
|
}
|
|
|
|
@theme inline {
|
|
--color-background: var(--background);
|
|
--color-foreground: var(--foreground);
|
|
--color-card: var(--card);
|
|
--color-card-foreground: var(--card-foreground);
|
|
--color-primary: var(--primary);
|
|
--color-primary-foreground: var(--primary-foreground);
|
|
--color-border: var(--border);
|
|
--radius: 0.625rem;
|
|
}
|