From 5cbb659d544f8cec1bb19375b0dfe9ee45de137c Mon Sep 17 00:00:00 2001 From: t8y2 <1156263951@qq.com> Date: Sat, 16 May 2026 16:03:04 +0800 Subject: [PATCH] feat: redesign docs landing hero with Tailwind migration MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Migrate landing CSS from raw classes to Tailwind v4 utilities (~1180 → ~680 lines) - Add @theme block with landing design tokens - Shrink download button, add OS auto-detection - Nav bar transparent at top, glass effect on scroll - Adjust hero spacing, title size, background color - Remove white background from logo and favicon - Force subtitle to single line on desktop --- docs/app/[lang]/page.tsx | 181 +-- docs/app/global.css | 1191 +++++------------ .../aceternity/HeroProductStage.tsx | 73 +- .../aceternity/InfiniteMovingCards.tsx | 16 +- docs/components/landing/InstallTabs.tsx | 206 +-- docs/components/landing/LandingNav.tsx | 26 + docs/public/favicon.png | Bin 88141 -> 88494 bytes docs/public/logo.png | Bin 32083 -> 88494 bytes 8 files changed, 600 insertions(+), 1093 deletions(-) create mode 100644 docs/components/landing/LandingNav.tsx diff --git a/docs/app/[lang]/page.tsx b/docs/app/[lang]/page.tsx index 4a9c0557c..8e0c27b6b 100644 --- a/docs/app/[lang]/page.tsx +++ b/docs/app/[lang]/page.tsx @@ -3,6 +3,7 @@ import type { CSSProperties } from 'react'; import { HeroProductStage } from '@/components/aceternity/HeroProductStage'; import { InfiniteMovingCards } from '@/components/aceternity/InfiniteMovingCards'; import { Spotlight } from '@/components/aceternity/Spotlight'; +import { LandingNav } from '@/components/landing/LandingNav'; import { InstallTabs } from '@/components/landing/InstallTabs'; import { RevealSection } from '@/components/landing/RevealSection'; import { @@ -349,11 +350,11 @@ const i18nText = { navChangelog: 'Changelog', navCommunity: 'Community', lang: '中文', - eyebrow: 'Open-source database workspace', - heroTitle: 'A focused database client for daily work.', + heroTitle: 'A focused database client for daily work', heroSubtitle: 'DBX brings connections, SQL editing, data grids, schema tools, AI assistance, and self-hosted access into one lightweight product.', download: 'Download DBX', + downloadName: 'Download DBX', readDocs: 'Read the docs', docsStart: 'Start here', docsStartDesc: 'Install DBX, create your first connection, and learn the main workflow.', @@ -375,10 +376,10 @@ const i18nText = { navChangelog: '更新日志', navCommunity: '社区', lang: 'English', - eyebrow: '开源数据库工作台', - heroTitle: '专注日常工作的数据库客户端。', + heroTitle: '专注日常工作的数据库客户端', heroSubtitle: 'DBX 将连接管理、SQL 编辑、数据表格、结构工具、AI 助手和自托管访问放进一个轻量产品里。', download: '下载 DBX', + downloadName: '下载 DBX', readDocs: '查看文档', docsStart: '从这里开始', docsStartDesc: '安装 DBX、创建第一个连接,并了解主要工作流。', @@ -414,81 +415,90 @@ export default async function LandingPage({ return (
- + + {/* Hero */}
-
-
{t.eyebrow}
-

{t.heroTitle}

-

{t.heroSubtitle}

-
- - {t.download} - - - - {t.readDocs} - +
+
+

+ {t.heroTitle} +

+

+ {t.heroSubtitle} +

+
+ +
- +
-
- + {/* Metrics */} + {metricItems.map((item) => ( -
- {item.value} - {item.label} +
+ {item.value} + {item.label}
))} - + {/* Doc start */} +
-

{t.docsStart}

-

{t.docsStartDesc}

+

{t.docsStart}

+

{t.docsStartDesc}

- + {t.readDocs}
- -
-

{t.workflowsTitle}

-

{t.workflowsDesc}

+ {/* Workflows */} + +
+

{t.workflowsTitle}

+

{t.workflowsDesc}

-
- {workflowItems.map((item) => ( - - -

{item.title}

-

{item.desc}

- +
+ {workflowItems.map((item, i) => ( + + +

{item.title}

+

{item.desc}

+ {t.readDocs} @@ -497,78 +507,83 @@ export default async function LandingPage({
- -
-

{t.supportTitle}

-

{t.supportDesc}

+ {/* Database support */} + +
+

{t.supportTitle}

+

{t.supportDesc}

-
+
{databaseSupport.map((db) => ( -
-
- {db.icon ? : {db.initials}} +
+
+ {db.icon ? : {db.initials}}
- {db.name} + {db.name}
))}
- -
-

{t.testimonialsTitle}

-

{t.testimonialsDesc}

+ {/* Testimonials */} + +
+

{t.testimonialsTitle}

+

{t.testimonialsDesc}

-
+
- -
-

{t.capabilitiesTitle}

+ {/* Capabilities */} + +
+

{t.capabilitiesTitle}

-
+
{capabilityItems.map((item) => ( -
- - {item.label} +
+ + {item.label}
))}
- -
{latest.version}
-
-

{latest.title}

-

{latest.desc}

+ {/* Updates */} + +
{latest.version}
+
+

{latest.title}

+

{latest.desc}

-