Skip to content

Commit 933b810

Browse files
xiaoyu2erxiaoyu2er
committed
style: update home design
1 parent 392b38f commit 933b810

File tree

1 file changed

+79
-48
lines changed

1 file changed

+79
-48
lines changed

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

Lines changed: 79 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
1-
import { createMetadata } from '@/lib/metadata';
21
import { useTranslations } from 'next-intl';
3-
import { getTranslations } from 'next-intl/server';
42
import Link from 'next/link';
53

64
export default function HomePage() {
@@ -12,57 +10,64 @@ export default function HomePage() {
1210
}>;
1311

1412
return (
15-
<main className="flex flex-col items-center justify-center min-h-screen px-2">
13+
<main className="flex flex-col items-center justify-center min-h-screen bg-fd-background text-fd-foreground">
1614
{/* Hero Section */}
17-
<section className="w-full flex flex-col items-center pt-20 pb-10 text-center relative overflow-hidden">
18-
{/* Decorative SVGs or backgrounds can be added here if needed */}
19-
<h1 className="text-4xl md:text-6xl font-extrabold mb-4 gradient-text">
20-
{t('title')}
21-
</h1>
22-
<div className="text-lg md:text-2xl text-gray-600 dark:text-gray-300 max-w-4xl mb-8">
23-
{t.rich('subtitle', {
24-
strong: (chunks) => (
25-
<strong className="font-semibold text-black dark:text-white">
26-
{chunks}
27-
</strong>
28-
),
29-
})}
30-
</div>
31-
<div className="flex flex-col sm:flex-row gap-4 justify-center mb-6">
32-
<Link
33-
href="/docs"
34-
className="px-6 py-3 rounded-lg bg-black text-white font-semibold text-lg shadow hover:bg-gray-900 transition"
35-
>
36-
{t('getStarted')}
37-
</Link>
38-
<Link
39-
href="/learn"
40-
className="px-6 py-3 rounded-lg bg-white border border-gray-300 dark:bg-gray-900 dark:border-gray-700 text-black dark:text-white font-semibold text-lg shadow hover:bg-gray-100 dark:hover:bg-gray-800 transition"
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">
16+
{/* Decorative background pattern */}
17+
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_var(--color-fd-accent)_0%,_transparent_70%)] opacity-50" />
18+
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">
21+
{t('title')}
22+
</h1>
23+
<div className="text-xl md:text-2xl text-fd-muted-foreground max-w-4xl mb-10 leading-relaxed">
24+
{t.rich('subtitle', {
25+
strong: (chunks) => (
26+
<strong className="font-semibold text-fd-foreground">
27+
{chunks}
28+
</strong>
29+
),
30+
})}
31+
</div>
32+
33+
<div className="flex flex-col sm:flex-row gap-6 justify-center mb-8">
34+
<Link
35+
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"
37+
>
38+
{t('getStarted')}
39+
</Link>
40+
<Link
41+
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"
43+
>
44+
{t('learn')}
45+
</Link>
46+
</div>
47+
48+
<button
49+
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"
51+
type="button"
52+
// onClick={() => navigator.clipboard.writeText('npx create-next-app@latest')}
4153
>
42-
{t('learn')}
43-
</Link>
54+
<span className="relative z-10">{t('copyCommand')}</span>
55+
<div className="absolute inset-0 bg-fd-accent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
56+
</button>
4457
</div>
45-
<button
46-
aria-label="Copy npx command for creating a new Next.js app"
47-
className="mt-2 px-4 py-2 bg-gray-100 dark:bg-gray-800 rounded text-sm font-mono text-gray-800 dark:text-gray-200 border border-gray-200 dark:border-gray-700 hover:bg-gray-200 dark:hover:bg-gray-700 transition"
48-
type="button"
49-
// onClick={() => navigator.clipboard.writeText('npx create-next-app@latest')}
50-
>
51-
{t('copyCommand')}
52-
</button>
5358
</section>
5459

5560
{/* Features Section */}
56-
<section className="w-full max-w-5xl px-2 py-12">
57-
<div className="flex flex-col md:flex-row md:items-end md:justify-between mb-10 gap-2">
58-
<h2 className="text-3xl md:text-4xl font-bold gradient-text">
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">
5964
{t('featuresTitle')}
6065
</h2>
61-
<p className="text-lg text-gray-500 dark:text-gray-400">
66+
<p className="text-xl text-fd-muted-foreground max-w-md">
6267
{t('featuresSubtitle')}
6368
</p>
6469
</div>
65-
<div className="grid grid-cols-1 sm: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-8">
6671
{features.map(
6772
(
6873
feature: { title: string; desc: string; href: string },
@@ -72,13 +77,39 @@ export default function HomePage() {
7277
key={feature.title}
7378
href={feature.href}
7479
target={feature.href.startsWith('/') ? '_self' : '_blank'}
75-
className="block p-6 rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 shadow hover:shadow-lg transition group"
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"
7681
>
77-
<div className="text-xl font-semibold mb-2 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition">
78-
{feature.title}
79-
</div>
80-
<div className="text-gray-600 dark:text-gray-300 text-base">
81-
{feature.desc}
82+
{/* Hover effect background */}
83+
<div className="absolute inset-0 bg-purple-50 dark:bg-purple-900/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
84+
85+
<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">
87+
{feature.title}
88+
</div>
89+
<div className="text-fd-muted-foreground text-lg leading-relaxed group-hover:text-fd-foreground transition-colors duration-300">
90+
{feature.desc}
91+
</div>
92+
93+
{/* 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">
95+
<span className="text-sm font-semibold mr-2">
96+
{feature.href.startsWith('/') ? 'Explore' : 'Visit'}
97+
</span>
98+
<svg
99+
className="w-4 h-4"
100+
fill="none"
101+
stroke="currentColor"
102+
viewBox="0 0 24 24"
103+
>
104+
<title>Arrow Right</title>
105+
<path
106+
strokeLinecap="round"
107+
strokeLinejoin="round"
108+
strokeWidth={2}
109+
d="M9 5l7 7-7 7"
110+
/>
111+
</svg>
112+
</div>
82113
</div>
83114
</Link>
84115
),

0 commit comments

Comments
 (0)