Skip to content

Commit b1178b6

Browse files
xiaoyu2erxiaoyu2er
committed
feat: update style
1 parent efa79e3 commit b1178b6

File tree

3 files changed

+46
-46
lines changed

3 files changed

+46
-46
lines changed

‎apps/docs/src/app/(home)/blog/page.tsx‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -14,29 +14,29 @@ export default function Page(): React.ReactElement {
1414
return (
1515
<main className="min-h-screen bg-fd-background">
1616
{/* Hero Section */}
17-
<section className="w-full py-20 relative overflow-hidden">
17+
<section className="w-full py-12 relative overflow-hidden">
1818
{/* Background decoration */}
1919
<div className="absolute inset-0 bg-fd-muted opacity-50" />
2020
<div className="absolute top-0 left-1/4 w-96 h-96 bg-purple-100 dark:bg-purple-900/20 rounded-full blur-3xl opacity-30" />
2121
<div className="absolute bottom-0 right-1/4 w-96 h-96 bg-blue-100 dark:bg-blue-900/20 rounded-full blur-3xl opacity-30" />
2222

23-
<div className="container max-w-6xl mx-auto px-6 relative z-10">
23+
<div className="container max-w-5xl mx-auto px-6 relative z-10">
2424
<div className="text-center">
25-
<h1 className="text-5xl md:text-7xl font-extrabold text-fd-foreground mb-6 leading-tight">
25+
<h1 className="text-4xl md:text-6xl font-extrabold text-fd-foreground mb-4 leading-tight">
2626
{tBase('blog')}
2727
</h1>
2828
</div>
2929
</div>
3030
</section>
3131

3232
{/* Blog Posts Grid */}
33-
<section className="container max-w-6xl mx-auto px-6 py-16">
34-
<div className="space-y-16">
33+
<section className="container max-w-5xl mx-auto px-6 py-12">
34+
<div className="space-y-12">
3535
{/* Featured Post */}
3636
{posts.length > 0 && (
3737
<div>
38-
<div className="flex items-center gap-3 mb-8">
39-
<h2 className="text-3xl font-bold text-fd-foreground">
38+
<div className="flex items-center gap-3 mb-6">
39+
<h2 className="text-2xl font-bold text-fd-foreground">
4040
{t('latestPost')}
4141
</h2>
4242
</div>
@@ -45,8 +45,8 @@ export default function Page(): React.ReactElement {
4545
className="group block bg-fd-card border border-fd-border rounded-2xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 hover:scale-[1.02] relative"
4646
>
4747
<div className="absolute inset-0 bg-purple-50 dark:bg-purple-900/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
48-
<div className="relative p-8 md:p-12">
49-
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
48+
<div className="relative p-6 md:p-8">
49+
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-4">
5050
<time className="text-fd-muted-foreground">
5151
{new Date(
5252
posts[0].data.date ?? posts[0].file.name,
@@ -74,10 +74,10 @@ export default function Page(): React.ReactElement {
7474
</svg>
7575
</div>
7676
</div>
77-
<h3 className="text-3xl md:text-4xl font-bold text-fd-foreground mb-4 group-hover:text-purple-600 dark:group-hover:text-purple-400 transition-colors duration-300">
77+
<h3 className="text-2xl md:text-3xl font-bold text-fd-foreground mb-3 group-hover:text-purple-600 dark:group-hover:text-purple-400 transition-colors duration-300">
7878
{posts[0].data.title}
7979
</h3>
80-
<p className="text-lg text-fd-muted-foreground leading-relaxed">
80+
<p className="text-base text-fd-muted-foreground leading-relaxed">
8181
{posts[0].data.description}
8282
</p>
8383
</div>
@@ -88,19 +88,19 @@ export default function Page(): React.ReactElement {
8888
{/* Other Posts Grid */}
8989
{posts.length > 1 && (
9090
<div>
91-
<h2 className="text-3xl font-bold text-fd-foreground mb-8">
91+
<h2 className="text-2xl font-bold text-fd-foreground mb-6">
9292
{t('allPosts')}
9393
</h2>
94-
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
94+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
9595
{posts.slice(1).map((post) => (
9696
<Link
9797
key={post.url}
9898
href={post.url}
9999
className="group block bg-fd-card border border-fd-border rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-105 relative"
100100
>
101101
<div className="absolute inset-0 bg-purple-50 dark:bg-purple-900/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
102-
<div className="relative p-6">
103-
<div className="mb-4">
102+
<div className="relative p-5">
103+
<div className="mb-3">
104104
<time className="text-sm text-fd-muted-foreground">
105105
{new Date(
106106
post.data.date ?? post.file.name,
@@ -112,11 +112,11 @@ export default function Page(): React.ReactElement {
112112
</time>
113113
</div>
114114

115-
<h3 className="text-xl font-bold text-fd-foreground mb-3 line-clamp-2 group-hover:text-purple-600 dark:group-hover:text-purple-400 transition-colors duration-300">
115+
<h3 className="text-lg font-bold text-fd-foreground mb-2 line-clamp-2 group-hover:text-purple-600 dark:group-hover:text-purple-400 transition-colors duration-300">
116116
{post.data.title}
117117
</h3>
118118

119-
<p className="text-fd-muted-foreground text-sm leading-relaxed mb-4 line-clamp-3">
119+
<p className="text-fd-muted-foreground text-sm leading-relaxed mb-3 line-clamp-3">
120120
{post.data.description}
121121
</p>
122122

‎apps/docs/src/app/(home)/learn/page.tsx‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -12,27 +12,27 @@ export default function LearnIndexPage() {
1212
return (
1313
<main className="min-h-screen bg-fd-background">
1414
{/* Hero Section */}
15-
<section className="w-full py-20 relative overflow-hidden">
15+
<section className="w-full py-12 relative overflow-hidden">
1616
{/* Background decoration */}
1717
<div className="absolute inset-0 bg-fd-muted opacity-50" />
1818
<div className="absolute top-0 right-1/4 w-96 h-96 bg-purple-100 dark:bg-purple-900/20 rounded-full blur-3xl opacity-30" />
1919
<div className="absolute bottom-0 left-1/4 w-96 h-96 bg-blue-100 dark:bg-blue-900/20 rounded-full blur-3xl opacity-30" />
2020

21-
<div className="container max-w-6xl mx-auto px-6 relative z-10">
21+
<div className="container max-w-5xl mx-auto px-6 relative z-10">
2222
<div className="text-center">
23-
<h1 className="text-5xl md:text-7xl font-extrabold text-fd-foreground mb-6 leading-tight">
23+
<h1 className="text-4xl md:text-6xl font-extrabold text-fd-foreground mb-4 leading-tight">
2424
{t('title')}
2525
</h1>
26-
<p className="text-xl md:text-2xl text-fd-muted-foreground max-w-3xl mx-auto leading-relaxed">
26+
<p className="text-lg md:text-xl text-fd-muted-foreground max-w-2xl mx-auto leading-relaxed">
2727
{t('subtitle')}
2828
</p>
2929
</div>
3030
</div>
3131
</section>
3232

3333
{/* Learning Paths Section */}
34-
<section className="container max-w-6xl mx-auto px-6 py-16">
35-
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto">
34+
<section className="container max-w-5xl mx-auto px-6 py-12">
35+
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-3xl mx-auto">
3636
{learnTabs.map((tab, index) => (
3737
<Link
3838
key={tab.url}
@@ -42,21 +42,21 @@ export default function LearnIndexPage() {
4242
{/* Hover effect background */}
4343
<div className="absolute inset-0 bg-purple-50 dark:bg-purple-900/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
4444

45-
<div className="relative p-8">
45+
<div className="relative p-6">
4646
{/* Icon and number */}
47-
<div className="flex items-center justify-between mb-6">
48-
<div className="text-4xl">{tab.icon}</div>
49-
<div className="w-8 h-8 bg-fd-accent text-fd-accent-foreground rounded-full flex items-center justify-center text-sm font-bold">
47+
<div className="flex items-center justify-between mb-4">
48+
<div className="text-3xl">{tab.icon}</div>
49+
<div className="w-7 h-7 bg-fd-accent text-fd-accent-foreground rounded-full flex items-center justify-center text-xs font-bold">
5050
{String(index + 1).padStart(2, '0')}
5151
</div>
5252
</div>
5353

5454
{/* Content */}
55-
<h3 className="text-2xl font-bold text-fd-foreground mb-4 group-hover:text-purple-600 dark:group-hover:text-purple-400 transition-colors duration-300">
55+
<h3 className="text-xl font-bold text-fd-foreground mb-3 group-hover:text-purple-600 dark:group-hover:text-purple-400 transition-colors duration-300">
5656
{tab.title}
5757
</h3>
5858

59-
<p className="text-fd-muted-foreground leading-relaxed mb-6">
59+
<p className="text-fd-muted-foreground leading-relaxed mb-4 text-sm">
6060
{tab.description}
6161
</p>
6262

‎apps/docs/src/app/(home)/page.tsx‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -12,15 +12,15 @@ export default function HomePage() {
1212
return (
1313
<main className="flex flex-col items-center justify-center min-h-screen bg-fd-background text-fd-foreground">
1414
{/* Hero Section */}
15-
<section className="w-full flex flex-col items-center pt-20 pb-16 text-center relative overflow-hidden bg-gradient-to-b from-fd-background to-fd-muted">
15+
<section className="w-full flex flex-col items-center pt-12 pb-10 text-center relative overflow-hidden bg-gradient-to-b from-fd-background to-fd-muted">
1616
{/* Decorative background pattern */}
1717
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_var(--color-fd-accent)_0%,_transparent_70%)] opacity-50" />
1818

19-
<div className="relative z-10 max-w-6xl px-4">
20-
<h1 className="text-5xl md:text-7xl font-extrabold mb-6 text-fd-foreground leading-tight">
19+
<div className="relative z-10 max-w-5xl px-4">
20+
<h1 className="text-4xl md:text-6xl font-extrabold mb-4 text-fd-foreground leading-tight">
2121
{t('title')}
2222
</h1>
23-
<div className="text-xl md:text-2xl text-fd-muted-foreground max-w-4xl mb-10 leading-relaxed">
23+
<div className="text-lg md:text-xl text-fd-muted-foreground max-w-3xl mb-8 leading-relaxed">
2424
{t.rich('subtitle', {
2525
strong: (chunks) => (
2626
<strong className="font-semibold text-fd-foreground">
@@ -30,24 +30,24 @@ export default function HomePage() {
3030
})}
3131
</div>
3232

33-
<div className="flex flex-col sm:flex-row gap-6 justify-center mb-8">
33+
<div className="flex flex-col sm:flex-row gap-4 justify-center mb-6">
3434
<Link
3535
href="/docs"
36-
className="px-8 py-4 rounded-xl bg-fd-primary text-fd-primary-foreground font-semibold text-lg shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-105"
36+
className="px-6 py-3 rounded-xl bg-fd-primary text-fd-primary-foreground font-semibold text-base shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-105"
3737
>
3838
{t('getStarted')}
3939
</Link>
4040
<Link
4141
href="/learn"
42-
className="px-8 py-4 rounded-xl bg-fd-card border-2 border-fd-border text-fd-foreground font-semibold text-lg shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-105 hover:border-purple-400"
42+
className="px-6 py-3 rounded-xl bg-fd-card border-2 border-fd-border text-fd-foreground font-semibold text-base shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-105 hover:border-purple-400"
4343
>
4444
{t('learn')}
4545
</Link>
4646
</div>
4747

4848
<button
4949
aria-label="Copy npx command for creating a new Next.js app"
50-
className="group mt-4 px-6 py-3 bg-fd-secondary rounded-lg text-sm font-mono text-fd-muted-foreground border border-fd-border hover:border-purple-400 hover:bg-fd-accent transition-all duration-300 hover:scale-105 relative overflow-hidden"
50+
className="group mt-3 px-5 py-2 bg-fd-secondary rounded-lg text-xs font-mono text-fd-muted-foreground border border-fd-border hover:border-purple-400 hover:bg-fd-accent transition-all duration-300 hover:scale-105 relative overflow-hidden"
5151
type="button"
5252
// onClick={() => navigator.clipboard.writeText('npx create-next-app@latest')}
5353
>
@@ -58,16 +58,16 @@ export default function HomePage() {
5858
</section>
5959

6060
{/* Features Section */}
61-
<section className="w-full max-w-6xl px-6 py-16">
62-
<div className="flex flex-col md:flex-row md:items-end md:justify-between mb-12 gap-4">
63-
<h2 className="text-4xl md:text-5xl font-bold text-fd-foreground">
61+
<section className="w-full max-w-5xl px-6 py-12">
62+
<div className="flex flex-col md:flex-row md:items-end md:justify-between mb-8 gap-4">
63+
<h2 className="text-3xl md:text-4xl font-bold text-fd-foreground">
6464
{t('featuresTitle')}
6565
</h2>
66-
<p className="text-xl text-fd-muted-foreground max-w-md">
66+
<p className="text-lg text-fd-muted-foreground max-w-md">
6767
{t('featuresSubtitle')}
6868
</p>
6969
</div>
70-
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
70+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
7171
{features.map(
7272
(
7373
feature: { title: string; desc: string; href: string },
@@ -77,21 +77,21 @@ export default function HomePage() {
7777
key={feature.title}
7878
href={feature.href}
7979
target={feature.href.startsWith('/') ? '_self' : '_blank'}
80-
className="group block p-8 rounded-2xl border border-fd-border bg-fd-card shadow-lg hover:shadow-2xl transition-all duration-300 hover:scale-105 hover:border-purple-400 relative overflow-hidden"
80+
className="group block p-6 rounded-2xl border border-fd-border bg-fd-card shadow-lg hover:shadow-2xl transition-all duration-300 hover:scale-105 hover:border-purple-400 relative overflow-hidden"
8181
>
8282
{/* Hover effect background */}
8383
<div className="absolute inset-0 bg-purple-50 dark:bg-purple-900/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
8484

8585
<div className="relative z-10">
86-
<div className="text-2xl font-bold mb-4 text-fd-foreground group-hover:text-purple-600 transition-colors duration-300">
86+
<div className="text-xl font-bold mb-3 text-fd-foreground group-hover:text-purple-600 transition-colors duration-300">
8787
{feature.title}
8888
</div>
89-
<div className="text-fd-muted-foreground text-lg leading-relaxed group-hover:text-fd-foreground transition-colors duration-300">
89+
<div className="text-fd-muted-foreground text-base leading-relaxed group-hover:text-fd-foreground transition-colors duration-300">
9090
{feature.desc}
9191
</div>
9292

9393
{/* Link arrow indicator */}
94-
<div className="mt-6 flex items-center text-purple-600 opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-x-0 group-hover:translate-x-2">
94+
<div className="mt-4 flex items-center text-purple-600 opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-x-0 group-hover:translate-x-2">
9595
<span className="text-sm font-semibold mr-2">
9696
{feature.href.startsWith('/') ? 'Explore' : 'Visit'}
9797
</span>

0 commit comments

Comments
 (0)