Skip to content

Commit 1b69ab7

Browse files
22149620832214962083
committed
feat: enhance landing page with improved layout, new translation types, and additional user roles; update footer for better navigation and social link visibility
1 parent de932a3 commit 1b69ab7

4 files changed

Lines changed: 201 additions & 96 deletions

File tree

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Layout, LocaleSwitch, Navbar } from "nextra-theme-docs";
1+
import { Layout, LocaleSwitch, Navbar, ThemeSwitch } from "nextra-theme-docs";
22
import { Banner } from "nextra/components";
33
import { getPageMap } from "nextra/page-map";
44
import { SiteFooter } from "~/components/shared/site-footer";
@@ -49,6 +49,7 @@ export default async function LocaleLayout({ children, params }: LayoutProps) {
4949
projectLink="https://github.com/nicepkg/ai-workflow"
5050
>
5151
<LocaleSwitch className="x:ml-2" />
52+
<ThemeSwitch className="x:ml-2" />
5253
</Navbar>
5354
}
5455
footer={<SiteFooter />}

‎website/src/components/home/landing-page.tsx‎

Lines changed: 136 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -65,18 +65,45 @@ const problems = [
6565
},
6666
{
6767
role: { en: "Marketer", zh: "营销人员" },
68-
pain: { en: "Teaching UTM parameters, AIDA copywriting...", zh: "教 UTM 参数、AIDA 文案法..." },
69-
gain: { en: "AI equipped with GTM strategy, campaign templates", zh: "AI 已配备 GTM 策略、活动模板" }
68+
pain: { en: "Teaching UTM parameters, AIDA copywriting, funnel optimization...", zh: "教 UTM 参数、AIDA 文案法、漏斗优化..." },
69+
gain: { en: "AI equipped with GTM strategy, campaign templates, analytics frameworks", zh: "AI 已配备 GTM 策略、活动模板、分析框架" }
7070
},
71-
{
72-
role: { en: "Developer", zh: "开发者" },
73-
pain: { en: "Copy-pasting context, explaining stack...", zh: "复制粘贴上下文，解释技术栈..." },
74-
gain: { en: "One command adds full project context & skills", zh: "一条命令添加完整项目上下文和技能" }
71+
{
72+
role: { en: "Stock Trader", zh: "股票交易员" },
73+
pain: { en: "MACD means..., RSI indicates..., check the 200-day MA...", zh: "MACD 意味着...、RSI 表示...、看 200 日均线..." },
74+
gain: { en: "AI loaded with technical analysis, fundamentals, multi-market expertise", zh: "AI 已加载技术分析、基本面、多市场专业知识" }
7575
},
7676
]
7777

78+
type Translation = {
79+
hero: {
80+
title: string
81+
subtitle: string
82+
desc: string
83+
getStarted: string
84+
viewGithub: string
85+
}
86+
problem: {
87+
title: string
88+
without: string
89+
with: string
90+
}
91+
workflows: {
92+
title: string
93+
subtitle: string
94+
}
95+
tools: {
96+
title: string
97+
}
98+
cta: {
99+
title: string
100+
desc: string
101+
button: string
102+
}
103+
}
104+
78105
export function LandingPage({ lang }: { lang: 'en' | 'zh' }) {
79-
const t = {
106+
const t: Translation = {
80107
hero: {
81108
title: lang === 'en' ? "Supercharge your AI Workflow" : "AI 工作流的究极形态",
82109
subtitle: lang === 'en'
@@ -86,10 +113,10 @@ export function LandingPage({ lang }: { lang: 'en' | 'zh' }) {
86113
? "Every session starts from zero. One command adds professional skills, best practices, and project context to your AI."
87114
: "每次对话都从零开始？一条命令，为你的 AI 注入专业技能、最佳实践和项目上下文。",
88115
getStarted: lang === 'en' ? "Get Started" : "开始使用",
89-
viewGithub: lang === 'en' ? "View on GitHub" : "GitHub",
116+
viewGithub: lang === 'en' ? "Star on GitHub" : "Star on GitHub",
90117
},
91118
problem: {
92-
title: lang === 'en' ? "The Problem" : "我们解决的痛点",
119+
title: lang === 'en' ? "The Problem We Solve" : "我们解决的痛点",
93120
without: lang === 'en' ? "Without AI Workflow" : "没有 AI Workflow",
94121
with: lang === 'en' ? "With AI Workflow" : "有了 AI Workflow",
95122
},
@@ -110,80 +137,110 @@ export function LandingPage({ lang }: { lang: 'en' | 'zh' }) {
110137
}
111138

112139
return (
113-
<div className="flex flex-col min-h-screen">
140+
<div className="flex flex-col min-h-screen font-sans relative">
114141
{/* Hero Section */}
115-
<section className="relative pt-20 pb-32 overflow-hidden">
142+
<section className="relative pt-24 pb-32 md:pt-32 md:pb-40 overflow-hidden z-10">
116143
<div className="container mx-auto px-4 relative z-10">
117144
<div className="max-w-4xl mx-auto text-center">
118145
<motion.div
119146
initial={{ opacity: 0, y: 20 }}
120147
animate={{ opacity: 1, y: 0 }}
121148
transition={{ duration: 0.5 }}
122149
>
123-
<h1 className="text-5xl md:text-7xl font-bold tracking-tight mb-6 bg-clip-text text-transparent bg-gradient-to-r from-primary to-purple-600 dark:to-purple-400">
124-
{t.hero.title}
150+
<h1 className="text-5xl md:text-7xl font-extrabold tracking-tight mb-8 leading-tight">
151+
<span className="bg-clip-text text-transparent bg-gradient-to-r from-primary via-purple-500 to-blue-500 animate-gradient-x">
152+
{t.hero.title}
153+
</span>
125154
</h1>
126-
<p className="text-2xl md:text-3xl font-medium text-muted-foreground mb-6">
155+
<p className="text-2xl md:text-3xl font-semibold text-foreground mb-6">
127156
{t.hero.subtitle}
128157
</p>
129-
<p className="text-lg text-muted-foreground/80 mb-10 max-w-2xl mx-auto">
158+
<p className="text-lg md:text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed">
130159
{t.hero.desc}
131160
</p>
132-
<div className="flex flex-col sm:flex-row items-center justify-center gap-4">
161+
<div className="flex flex-col sm:flex-row items-center justify-center gap-4 mb-16">
133162
<Link href={`/${lang}/docs/getting-started`}>
134-
<Button size="lg" className="rounded-full px-8 text-lg h-12">
163+
<Button size="lg" className="rounded-full px-8 h-14 text-lg font-semibold shadow-lg shadow-primary/25 hover:shadow-primary/40 transition-shadow">
135164
{t.hero.getStarted} <ArrowRight className="ml-2 w-5 h-5" />
136165
</Button>
137166
</Link>
138167
<Link href="https://github.com/nicepkg/ai-workflow" target="_blank">
139-
<Button variant="outline" size="lg" className="rounded-full px-8 text-lg h-12">
168+
<Button variant="outline" size="lg" className="rounded-full px-8 h-14 text-lg bg-background/50 backdrop-blur-sm hover:bg-muted/50 border-primary/20 hover:border-primary/50">
140169
<Github className="mr-2 w-5 h-5" /> {t.hero.viewGithub}
141170
</Button>
142171
</Link>
143172
</div>
144173

145-
<div className="mt-12 p-4 rounded-xl bg-muted/50 backdrop-blur-sm border inline-block text-left font-mono text-sm md:text-base">
146-
<span className="text-primary mr-2">$</span>
147-
npx add-skill nicepkg/ai-workflow/workflows/content-creator-workflow
148-
</div>
174+
<motion.div
175+
initial={{ opacity: 0, y: 10 }}
176+
animate={{ opacity: 1, y: 0 }}
177+
transition={{ delay: 0.3, duration: 0.5 }}
178+
className="mt-8 mx-auto max-w-3xl"
179+
>
180+
<div className="p-1 rounded-2xl bg-gradient-to-r from-transparent via-primary/20 to-transparent">
181+
<div className="bg-card/80 backdrop-blur-md border border-primary/10 rounded-xl p-6 shadow-2xl">
182+
<div className="font-mono text-sm md:text-base text-left overflow-x-auto whitespace-nowrap flex items-center">
183+
<span className="text-primary mr-3 select-none">$</span>
184+
<span className="text-foreground">npx add-skill nicepkg/ai-workflow/workflows/content-creator-workflow</span>
185+
</div>
186+
</div>
187+
</div>
188+
</motion.div>
149189
</motion.div>
150190
</div>
151191
</div>
152192

153-
{/* Background gradients */}
154-
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-full h-full max-w-7xl -z-10 opacity-30 dark:opacity-20 pointer-events-none">
155-
<div className="absolute top-10 left-10 w-72 h-72 bg-purple-500 rounded-full mix-blend-multiply filter blur-3xl animate-blob" />
156-
<div className="absolute top-10 right-10 w-72 h-72 bg-yellow-500 rounded-full mix-blend-multiply filter blur-3xl animate-blob animation-delay-2000" />
157-
<div className="absolute -bottom-8 left-20 w-72 h-72 bg-pink-500 rounded-full mix-blend-multiply filter blur-3xl animate-blob animation-delay-4000" />
158-
</div>
193+
{/* Background gradients - Removed old static blobs */}
159194
</section>
160195

161196
{/* Comparison Section */}
162-
<section className="py-20 bg-muted/30">
197+
<section className="py-24 relative overflow-hidden">
198+
<div className="absolute inset-0 bg-muted/50 -z-20" />
163199
<div className="container mx-auto px-4">
164-
<h2 className="text-3xl font-bold text-center mb-12">{t.problem.title}</h2>
165-
<div className="grid md:grid-cols-3 gap-6 max-w-6xl mx-auto">
200+
<motion.div
201+
initial={{ opacity: 0, y: 20 }}
202+
whileInView={{ opacity: 1, y: 0 }}
203+
viewport={{ once: true }}
204+
className="text-center mb-16"
205+
>
206+
<h2 className="text-3xl md:text-5xl font-bold mb-6">{t.problem.title}</h2>
207+
</motion.div>
208+
209+
<div className="grid md:grid-cols-3 gap-8 max-w-7xl mx-auto">
166210
{problems.map((item, i) => (
167211
<motion.div
168212
key={i}
169213
initial={{ opacity: 0, y: 20 }}
170214
whileInView={{ opacity: 1, y: 0 }}
171215
transition={{ delay: i * 0.1 }}
172216
viewport={{ once: true }}
173-
className="bg-background rounded-xl border shadow-sm p-6 hover:shadow-md transition-shadow"
217+
whileHover={{ y: -5 }}
218+
className="bg-background rounded-2xl border border-border/50 shadow-sm p-8 hover:shadow-xl hover:shadow-primary/5 transition-all duration-300 relative group"
174219
>
175-
<h3 className="font-bold text-xl mb-4 text-center">{item.role[lang]}</h3>
176-
<div className="space-y-4">
177-
<div className="p-3 bg-red-500/5 rounded-lg border border-red-500/10">
178-
<div className="flex items-start gap-2 text-red-600 dark:text-red-400 text-sm">
179-
<XCircle className="w-5 h-5 shrink-0" />
180-
<span>{item.pain[lang]}</span>
220+
<div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-primary/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
221+
<h3 className="font-bold text-2xl mb-6 text-center">{item.role[lang]}</h3>
222+
<div className="space-y-6">
223+
<div className="space-y-2">
224+
<div className="text-sm font-semibold text-muted-foreground uppercase tracking-wider pl-1">{t.problem.without}</div>
225+
<div className="p-4 bg-red-500/5 rounded-xl border border-red-500/10 group-hover:border-red-500/20 transition-colors">
226+
<div className="flex items-start gap-3 text-red-600 dark:text-red-400">
227+
<XCircle className="w-5 h-5 shrink-0 mt-0.5" />
228+
<span className="leading-relaxed">{item.pain[lang]}</span>
229+
</div>
181230
</div>
182231
</div>
183-
<div className="p-3 bg-green-500/5 rounded-lg border border-green-500/10">
184-
<div className="flex items-start gap-2 text-green-600 dark:text-green-400 text-sm">
185-
<CheckCircle className="w-5 h-5 shrink-0" />
186-
<span>{item.gain[lang]}</span>
232+
233+
<div className="flex justify-center">
234+
<ArrowRight className="w-6 h-6 text-muted-foreground/30 rotate-90 md:rotate-0" />
235+
</div>
236+
237+
<div className="space-y-2">
238+
<div className="text-sm font-semibold text-muted-foreground uppercase tracking-wider pl-1">{t.problem.with}</div>
239+
<div className="p-4 bg-green-500/5 rounded-xl border border-green-500/10 group-hover:border-green-500/20 transition-colors">
240+
<div className="flex items-start gap-3 text-green-600 dark:text-green-400">
241+
<CheckCircle className="w-5 h-5 shrink-0 mt-0.5" />
242+
<span className="leading-relaxed font-medium">{item.gain[lang]}</span>
243+
</div>
187244
</div>
188245
</div>
189246
</div>
@@ -194,25 +251,32 @@ export function LandingPage({ lang }: { lang: 'en' | 'zh' }) {
194251
</section>
195252

196253
{/* Workflows Grid */}
197-
<section className="py-20">
254+
<section className="py-24">
198255
<div className="container mx-auto px-4">
199-
<div className="text-center mb-16">
200-
<h2 className="text-3xl md:text-4xl font-bold mb-4">{t.workflows.title}</h2>
201-
<p className="text-muted-foreground text-lg">{t.workflows.subtitle}</p>
256+
<div className="text-center mb-20">
257+
<h2 className="text-3xl md:text-5xl font-bold mb-6">{t.workflows.title}</h2>
258+
<p className="text-muted-foreground text-xl max-w-2xl mx-auto">{t.workflows.subtitle}</p>
202259
</div>
203260

204-
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto">
261+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-7xl mx-auto">
205262
{workflows.map((wf, i) => (
206-
<Link href={`/${lang}${wf.link}`} key={i}>
263+
<Link href={`/${lang}${wf.link}`} key={i} className="block h-full">
207264
<motion.div
208-
whileHover={{ scale: 1.02 }}
209-
className="group h-full p-6 rounded-2xl border bg-card hover:border-primary/50 transition-colors"
265+
whileHover={{ scale: 1.02, translateY: -4 }}
266+
className="group h-full p-8 rounded-3xl border border-border/50 bg-gradient-to-b from-card to-background hover:shadow-2xl hover:shadow-primary/5 transition-all duration-300 relative overflow-hidden"
210267
>
211-
<div className={cn("w-12 h-12 rounded-lg flex items-center justify-center mb-4", wf.bg, wf.color)}>
212-
<wf.icon className="w-6 h-6" />
268+
<div className={cn("absolute top-0 right-0 w-32 h-32 rounded-bl-full opacity-10 transition-transform group-hover:scale-110", wf.bg, wf.color)} />
269+
270+
<div className={cn("w-14 h-14 rounded-2xl flex items-center justify-center mb-6 shadow-sm", wf.bg, wf.color)}>
271+
<wf.icon className="w-7 h-7" />
272+
</div>
273+
274+
<h3 className="text-2xl font-bold mb-3 group-hover:text-primary transition-colors">{wf.title[lang]}</h3>
275+
<p className="text-muted-foreground leading-relaxed text-lg">{wf.desc[lang]}</p>
276+
277+
<div className="mt-8 flex items-center text-sm font-medium text-primary opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all">
278+
Learn more <ArrowRight className="ml-2 w-4 h-4" />
213279
</div>
214-
<h3 className="text-xl font-bold mb-2 group-hover:text-primary transition-colors">{wf.title[lang]}</h3>
215-
<p className="text-muted-foreground">{wf.desc[lang]}</p>
216280
</motion.div>
217281
</Link>
218282
))}
@@ -221,26 +285,32 @@ export function LandingPage({ lang }: { lang: 'en' | 'zh' }) {
221285
</section>
222286

223287
{/* Tools Section */}
224-
<section className="py-20 bg-muted/30 border-y">
288+
<section className="py-24 border-y bg-muted/20">
225289
<div className="container mx-auto px-4 text-center">
226-
<h2 className="text-2xl font-bold mb-10">{t.tools.title}</h2>
227-
<div className="flex flex-wrap justify-center gap-x-8 gap-y-4 text-muted-foreground font-medium">
228-
{["Claude Code", "Cursor", "GitHub Copilot", "Codex", "OpenCode", "Roo Code", "Windsurf"].map((tool) => (
229-
<span key={tool} className="flex items-center gap-2">
230-
<Terminal className="w-4 h-4" /> {tool}
231-
</span>
290+
<h2 className="text-2xl font-bold mb-12 opacity-80">{t.tools.title}</h2>
291+
<div className="flex flex-wrap justify-center gap-x-12 gap-y-8">
292+
{["Claude Code", "Cursor", "GitHub Copilot", "Codex", "OpenCode", "Roo Code", "Windsurf", "Gemini CLI", "Goose"].map((tool) => (
293+
<div key={tool} className="flex items-center gap-3 text-lg font-semibold text-muted-foreground hover:text-foreground transition-colors cursor-default">
294+
<div className="p-2 bg-background rounded-lg shadow-sm border">
295+
<Terminal className="w-5 h-5" />
296+
</div>
297+
{tool}
298+
</div>
232299
))}
233300
</div>
234301
</div>
235302
</section>
236303

237304
{/* CTA */}
238-
<section className="py-24 text-center">
239-
<div className="container mx-auto px-4">
240-
<h2 className="text-3xl md:text-4xl font-bold mb-6">{t.cta.title}</h2>
241-
<p className="text-xl text-muted-foreground mb-10 max-w-2xl mx-auto">{t.cta.desc}</p>
305+
<section className="py-32 text-center relative overflow-hidden">
306+
<div className="absolute inset-0 bg-gradient-to-b from-transparent to-primary/5 -z-10" />
307+
<div className="container mx-auto px-4 relative">
308+
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-primary/10 rounded-full blur-[120px] -z-10" />
309+
310+
<h2 className="text-4xl md:text-6xl font-bold mb-8 tracking-tight">{t.cta.title}</h2>
311+
<p className="text-xl md:text-2xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed">{t.cta.desc}</p>
242312
<Link href={`/${lang}/docs/getting-started`}>
243-
<Button size="lg" className="rounded-full px-10 h-14 text-lg shadow-lg shadow-primary/20">
313+
<Button size="lg" className="rounded-full px-12 h-16 text-xl shadow-2xl shadow-primary/30 hover:shadow-primary/50 hover:scale-105 transition-all">
244314
{t.cta.button}
245315
</Button>
246316
</Link>

0 commit comments

Comments
 (0)