Skip to content

Commit 481c269

Browse files
AIwork4meAIwork4me
committed
feat: 响应式设计 - 字体/间距/尺寸按比例缩放
- 添加 clamp() 响应式字体类（hero/section/body/button） - 添加响应式间距类（section/card/button） - 更新所有组件使用响应式类 - 背景光晕和容器宽度自适应 技术：clamp(min, preferred, max) 实现窗口缩放时控件按比例跟随
1 parent 09deecb commit 481c269

4 files changed

Lines changed: 368 additions & 72 deletions

File tree

‎platform/src/app/[locale]/layout.tsx‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,25 @@
11
import type { Metadata } from 'next'
2-
import { Noto_Sans_SC } from 'next/font/google'
2+
import { Inter, Noto_Sans_SC } from 'next/font/google'
33
import { NextIntlClientProvider } from 'next-intl'
44
import { getMessages } from 'next-intl/server'
55
import { notFound } from 'next/navigation'
66
import '../globals.css'
77
import { routing } from '@/i18n/routing'
88
import BackToTop from '@/components/BackToTop'
99

10+
// Inter - 英文主字体（高端感）
11+
const inter = Inter({
12+
subsets: ['latin'],
13+
variable: '--font-inter',
14+
display: 'swap',
15+
})
16+
17+
// Noto Sans SC - 中文主字体
1018
const notoSansSC = Noto_Sans_SC({
1119
subsets: ['latin'],
1220
weight: ['400', '500', '600', '700'],
1321
variable: '--font-sans',
22+
display: 'swap',
1423
})
1524

1625
export function generateStaticParams() {
@@ -100,7 +109,7 @@ export default async function LocaleLayout({
100109
const messages = await getMessages()
101110

102111
return (
103-
<html lang={locale} className={notoSansSC.variable}>
112+
<html lang={locale} className={`${inter.variable} ${notoSansSC.variable}`}>
104113
<body className="font-sans antialiased">
105114
<NextIntlClientProvider messages={messages}>
106115
{children}

‎platform/src/app/[locale]/page.tsx‎

Lines changed: 93 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -8,22 +8,57 @@ function Hero() {
88
const t = useTranslations('hero')
99

1010
return (
11-
<section className="min-h-screen flex items-center justify-center relative overflow-hidden pt-16 bg-gradient-to-br from-surface to-surface-container">
12-
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-primary/15 via-transparent to-transparent" />
13-
<div className="relative z-10 text-center px-4 max-w-4xl mx-auto">
14-
<h1 className="text-4xl sm:text-5xl md:text-6xl font-bold text-on-surface mb-6 leading-tight">
11+
<section className="min-h-screen relative overflow-hidden bg-gradient-to-br from-surface via-surface to-surface-container">
12+
{/* 背景装饰：柔和的径向渐变 */}
13+
<div className="absolute inset-0 bg-gradient-radial from-primary/10 via-transparent to-transparent opacity-80" />
14+
15+
{/* 额外的光晕效果 - 响应式尺寸 */}
16+
<div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[clamp(400px,50vw,800px)] h-[clamp(200px,25vw,400px)] bg-primary/5 blur-3xl rounded-full" />
17+
18+
{/* 主内容区 - 固定 padding-top，不再居中 */}
19+
<div className="relative z-10 text-center px-[clamp(1.5rem,4vw,3rem)] max-w-5xl mx-auto pt-32 sm:pt-40 md:pt-44">
20+
{/* 主标题：响应式 32px - 80px */}
21+
<h1 className="text-responsive-hero font-bold text-on-surface mb-8 tracking-tight animate-fade-in-up">
1522
{t('title')}
1623
</h1>
17-
<p className="text-lg sm:text-xl text-on-surface-variant mb-8 max-w-2xl mx-auto leading-relaxed">
24+
25+
{/* 副标题：响应式 16px - 24px */}
26+
<p className="text-responsive-subtitle text-on-surface-variant mb-12 max-w-3xl mx-auto font-normal animate-fade-in-up" style={{ animationDelay: '100ms' }}>
1827
{t('subtitle')}
1928
</p>
29+
30+
{/* CTA 按钮 - 响应式尺寸 */}
2031
<a
21-
href="#pricing"
22-
className="inline-block bg-primary-container hover:bg-primary-container-high text-on-surface px-8 py-4 rounded-xl text-lg font-semibold transition-all transform hover:scale-105 shadow-lg shadow-primary/20"
32+
href="#outline"
33+
className="
34+
inline-flex
35+
items-center
36+
justify-center
37+
bg-primary-container
38+
hover:bg-primary-container-light
39+
text-on-surface
40+
px-responsive-button
41+
py-responsive-button
42+
rounded-xl
43+
text-responsive-button
44+
font-semibold
45+
transition-all
46+
duration-200
47+
ease-m3-standard
48+
transform
49+
hover:scale-[1.03]
50+
hover:shadow-primary-glow
51+
active:scale-[0.98]
52+
animate-fade-in-up
53+
"
54+
style={{ animationDelay: '200ms' }}
2355
>
2456
{t('cta')}
2557
</a>
2658
</div>
59+
60+
{/* 底部渐变遮罩，柔和过渡到下一个区块 */}
61+
<div className="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-surface to-transparent" />
2762
</section>
2863
)
2964
}
@@ -38,16 +73,17 @@ function PainPoints() {
3873
]
3974

4075
return (
41-
<section className="py-20 bg-surface">
42-
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
43-
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
76+
<section className="py-responsive-section bg-surface">
77+
<div className="max-w-7xl mx-auto px-[clamp(1rem,3vw,2rem)]">
78+
{/* 响应式网格：自动适配 1-3 列 */}
79+
<div className="grid grid-cols-1 md:grid-cols-3 gap-[clamp(1rem,2vw,1.5rem)]">
4480
{pains.map((pain) => (
4581
<div
4682
key={pain.key}
47-
className="bg-surface-container rounded-2xl p-8 text-center border border-outline-variant hover:border-outline transition-colors"
83+
className="bg-surface-container rounded-2xl p-responsive-card text-center border border-outline-variant hover:border-outline transition-colors"
4884
>
4985
<div className="text-4xl mb-4">{pain.icon}</div>
50-
<h3 className="text-lg font-medium text-on-surface">{pain.title}</h3>
86+
<h3 className="text-responsive-card font-medium text-on-surface">{pain.title}</h3>
5187
</div>
5288
))}
5389
</div>
@@ -66,18 +102,18 @@ function Solution() {
66102
]
67103

68104
return (
69-
<section className="py-24 bg-surface-container">
70-
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
71-
<h2 className="text-3xl sm:text-4xl font-bold text-on-surface text-center mb-16">
105+
<section className="py-responsive-section bg-surface-container">
106+
<div className="max-w-7xl mx-auto px-[clamp(1rem,3vw,2rem)]">
107+
<h2 className="text-responsive-section font-bold text-on-surface text-center mb-16">
72108
{t('title')}
73109
</h2>
74-
<div className="flex flex-col md:flex-row items-center justify-center gap-4 md:gap-8">
110+
<div className="flex flex-col md:flex-row items-center justify-center gap-[clamp(1rem,2vw,2rem)]">
75111
{steps.map((step, index) => (
76112
<div key={step.key} className="flex items-center">
77-
<div className="bg-surface rounded-2xl p-6 text-center min-w-[160px] border border-outline-variant">
113+
<div className="bg-surface rounded-2xl p-responsive-card text-center min-w-[clamp(140px,18vw,200px)] border border-outline-variant">
78114
<div className="text-3xl mb-2">{step.icon}</div>
79-
<div className="text-on-surface font-medium mb-1">{step.title}</div>
80-
<div className="text-on-surface-variant text-sm">{step.role}</div>
115+
<div className="text-responsive-card text-on-surface font-medium mb-1">{step.title}</div>
116+
<div className="text-responsive-small text-on-surface-variant">{step.role}</div>
81117
</div>
82118
{index < steps.length - 1 && (
83119
<span className="hidden md:block text-primary text-2xl mx-2">→</span>
@@ -86,9 +122,9 @@ function Solution() {
86122
))}
87123
</div>
88124
<div className="mt-12 text-center">
89-
<div className="inline-flex items-center gap-3 bg-surface rounded-2xl px-8 py-4 border border-primary/30">
125+
<div className="inline-flex items-center gap-3 bg-surface rounded-2xl px-responsive-button py-4 border border-primary/30">
90126
<span className="text-2xl">{t('result.icon')}</span>
91-
<span className="text-on-surface font-medium">{t('result.title')}</span>
127+
<span className="text-responsive-card text-on-surface font-medium">{t('result.title')}</span>
92128
</div>
93129
</div>
94130
</div>
@@ -106,9 +142,9 @@ function CourseOutline() {
106142
}))
107143

108144
return (
109-
<section id="outline" className="py-24 bg-surface">
110-
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
111-
<h2 className="text-3xl sm:text-4xl font-bold text-on-surface text-center mb-16">
145+
<section id="outline" className="py-responsive-section bg-surface">
146+
<div className="max-w-4xl mx-auto px-[clamp(1rem,3vw,2rem)]">
147+
<h2 className="text-responsive-section font-bold text-on-surface text-center mb-16">
112148
{t('title')}
113149
</h2>
114150
<div className="space-y-4">
@@ -121,8 +157,8 @@ function CourseOutline() {
121157
{chapter.num}
122158
</span>
123159
<div>
124-
<h3 className="text-on-surface font-medium">{chapter.title}</h3>
125-
<p className="text-on-surface-variant text-sm">{chapter.desc}</p>
160+
<h3 className="text-responsive-card text-on-surface font-medium">{chapter.title}</h3>
161+
<p className="text-responsive-small text-on-surface-variant">{chapter.desc}</p>
126162
</div>
127163
</div>
128164
))}
@@ -142,25 +178,25 @@ function SocialProof() {
142178
}))
143179

144180
return (
145-
<section id="about" className="py-24 bg-surface-container">
146-
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
147-
<h2 className="text-3xl sm:text-4xl font-bold text-on-surface text-center mb-16">
181+
<section id="about" className="py-responsive-section bg-surface-container">
182+
<div className="max-w-7xl mx-auto px-[clamp(1rem,3vw,2rem)]">
183+
<h2 className="text-responsive-section font-bold text-on-surface text-center mb-16">
148184
{t('title')}
149185
</h2>
150-
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
186+
<div className="grid grid-cols-1 md:grid-cols-3 gap-[clamp(1rem,2vw,1.5rem)]">
151187
{testimonials.map((item, index) => (
152188
<div
153189
key={index}
154-
className="bg-surface rounded-2xl p-6 border border-outline-variant"
190+
className="bg-surface rounded-2xl p-responsive-card border border-outline-variant"
155191
>
156-
<p className="text-on-surface-variant mb-4 leading-relaxed">&ldquo;{item.quote}&rdquo;</p>
192+
<p className="text-responsive-body text-on-surface-variant mb-4 leading-relaxed">&ldquo;{item.quote}&rdquo;</p>
157193
<div className="flex items-center gap-3">
158194
<div className="w-10 h-10 rounded-full bg-primary/15 flex items-center justify-center text-primary font-medium">
159195
{item.author[0]}
160196
</div>
161197
<div>
162-
<div className="text-on-surface font-medium">{item.author}</div>
163-
<div className="text-on-surface-variant text-sm">{item.role}</div>
198+
<div className="text-responsive-card text-on-surface font-medium">{item.author}</div>
199+
<div className="text-responsive-small text-on-surface-variant">{item.role}</div>
164200
</div>
165201
</div>
166202
</div>
@@ -184,46 +220,46 @@ function Pricing() {
184220
}))
185221

186222
return (
187-
<section id="pricing" className="py-24 bg-surface">
188-
<div className="max-w-lg mx-auto px-4 sm:px-6 lg:px-8">
189-
<h2 className="text-3xl sm:text-4xl font-bold text-on-surface text-center mb-16">
223+
<section id="pricing" className="py-responsive-section bg-surface">
224+
<div className="max-w-lg mx-auto px-[clamp(1rem,3vw,2rem)]">
225+
<h2 className="text-responsive-section font-bold text-on-surface text-center mb-16">
190226
{t('title')}
191227
</h2>
192-
<div className="bg-surface-container rounded-3xl p-8 border border-outline-variant shadow-2xl shadow-primary/10">
228+
<div className="bg-surface-container rounded-3xl p-responsive-card border border-outline-variant shadow-2xl shadow-primary/10">
193229
<div className="text-center mb-8">
194230
<div className="flex items-baseline justify-center gap-2">
195-
<span className="text-5xl font-bold text-on-surface">{t('price')}</span>
196-
<span className="text-xl text-on-surface-variant line-through">{t('originalPrice')}</span>
231+
<span className="text-responsive-hero font-bold text-on-surface">{t('price')}</span>
232+
<span className="text-responsive-card text-on-surface-variant line-through">{t('originalPrice')}</span>
197233
</div>
198-
<p className="text-on-surface-variant mt-2">{t('lifetime')}</p>
234+
<p className="text-responsive-small text-on-surface-variant mt-2">{t('lifetime')}</p>
199235
</div>
200236
<ul className="space-y-4 mb-6">
201237
{features.map((feature, index) => (
202238
<li key={index} className="flex items-center gap-3">
203239
<span className="text-primary text-lg">✅</span>
204-
<span className="text-on-surface">{feature}</span>
240+
<span className="text-responsive-body text-on-surface">{feature}</span>
205241
</li>
206242
))}
207243
</ul>
208244
<div className="border-t border-outline-variant pt-4 mb-6">
209245
<button
210246
onClick={() => setShowOutline(!showOutline)}
211-
className="w-full text-center text-on-surface-variant hover:text-on-surface transition-colors text-sm cursor-pointer"
247+
className="w-full text-center text-responsive-small text-on-surface-variant hover:text-on-surface transition-colors cursor-pointer"
212248
>
213249
📖 {showOutline ? t('hideOutline') : t('seeOutline')}
214250
</button>
215251
{showOutline && (
216252
<div className="mt-3 space-y-2">
217253
{chapters.map((chapter) => (
218-
<div key={chapter.num} className="flex items-center gap-2 text-sm text-on-surface-variant">
254+
<div key={chapter.num} className="flex items-center gap-2 text-responsive-small text-on-surface-variant">
219255
<span className="text-primary font-medium w-6">{chapter.num}.</span>
220256
<span>{chapter.title}</span>
221257
</div>
222258
))}
223259
</div>
224260
)}
225261
</div>
226-
<button className="w-full bg-primary-container hover:bg-primary-container-high text-on-surface py-4 rounded-xl font-semibold text-lg transition-all transform hover:scale-[1.02] shadow-lg shadow-primary/20">
262+
<button className="w-full bg-primary-container hover:bg-primary-container-high text-on-surface py-responsive-button rounded-xl font-semibold text-responsive-button transition-all transform hover:scale-[1.02] shadow-lg shadow-primary/20">
227263
{t('cta')}
228264
</button>
229265
</div>
@@ -242,26 +278,26 @@ function FAQ() {
242278
}))
243279

244280
return (
245-
<section className="py-24 bg-surface-container">
246-
<div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
247-
<h2 className="text-3xl sm:text-4xl font-bold text-on-surface text-center mb-16">
281+
<section className="py-responsive-section bg-surface-container">
282+
<div className="max-w-3xl mx-auto px-[clamp(1rem,3vw,2rem)]">
283+
<h2 className="text-responsive-section font-bold text-on-surface text-center mb-16">
248284
{t('title')}
249285
</h2>
250286
<div className="space-y-4">
251287
{faqs.map((faq, index) => (
252288
<div key={index} className="bg-surface rounded-xl border border-outline-variant overflow-hidden">
253289
<button
254290
onClick={() => setOpenIndex(openIndex === index ? null : index)}
255-
className="w-full px-6 py-4 text-left flex items-center justify-between hover:bg-surface-container-high transition-colors"
291+
className="w-full px-responsive-button py-4 text-left flex items-center justify-between hover:bg-surface-container-high transition-colors"
256292
>
257-
<span className="text-on-surface font-medium">{faq.q}</span>
293+
<span className="text-responsive-card text-on-surface font-medium">{faq.q}</span>
258294
<span className={`text-primary transition-transform ${openIndex === index ? 'rotate-180' : ''}`}>
259295
▼
260296
</span>
261297
</button>
262298
{openIndex === index && (
263-
<div className="px-6 pb-4">
264-
<p className="text-on-surface-variant">{faq.a}</p>
299+
<div className="px-responsive-button pb-4">
300+
<p className="text-responsive-body text-on-surface-variant">{faq.a}</p>
265301
</div>
266302
)}
267303
</div>
@@ -277,25 +313,25 @@ function Footer() {
277313

278314
return (
279315
<footer className="py-12 bg-surface border-t border-outline-variant">
280-
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
316+
<div className="max-w-7xl mx-auto px-[clamp(1rem,3vw,2rem)]">
281317
<div className="flex flex-col md:flex-row items-center justify-between gap-4">
282-
<div className="text-on-surface-variant">
318+
<div className="text-responsive-small text-on-surface-variant">
283319
{t('copyright')}
284320
</div>
285321
<div className="flex items-center gap-4">
286322
<a
287323
href="https://github.com/AIwork4me/ceo-of-one"
288324
target="_blank"
289325
rel="noopener noreferrer"
290-
className="text-on-surface-variant hover:text-on-surface transition-colors"
326+
className="text-responsive-small text-on-surface-variant hover:text-on-surface transition-colors"
291327
>
292328
GitHub
293329
</a>
294330
</div>
295-
<div className="text-on-surface-variant text-sm">
331+
<div className="text-responsive-small text-on-surface-variant">
296332
{t('madeWith')}
297333
</div>
298-
<div className="text-on-surface-variant text-sm">
334+
<div className="text-responsive-small text-on-surface-variant">
299335
{t('lastUpdated')}
300336
</div>
301337
</div>

0 commit comments

Comments
 (0)