Skip to content

Commit 8330a50

Browse files
safe1inesafe1ine
committed
feat(frontend): redesign welcome and pricing pages
1 parent 92a3cb9 commit 8330a50

File tree

16 files changed

+931
-379
lines changed

16 files changed

+931
-379
lines changed

‎frontend/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@
1515
"dependencies": {
1616
"@base-ui/react": "^1.3.0",
1717
"@cap.js/widget": "^0.1.32",
18+
"@fontsource/press-start-2p": "^5.2.7",
19+
"@fontsource/vt323": "^5.2.7",
1820
"@tabler/icons-react": "^3.41.1",
1921
"@tailwindcss/vite": "^4.2.1",
2022
"@tanstack/react-table": "^8.21.3",

‎frontend/pnpm-lock.yaml‎

Lines changed: 16 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frontend/src/App.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ import ProjectOverviewPage from "./pages/console/user/project/overview"
2929
import TaskDetailPage from "./pages/console/user/task/task-detail"
3030
import PrivacyPolicyPage from "./pages/privacy-policy"
3131
import UserAgreementPage from "./pages/user-agreement"
32+
import PricingPage from "./pages/pricing"
3233
import { TooltipProvider } from "@/components/ui/tooltip"
3334

3435
function TaskDetailRoute() {
@@ -44,6 +45,7 @@ function App() {
4445
<ThemePathListener />
4546
<Routes>
4647
<Route path="/" element={<WelcomePage />} />
48+
<Route path="/pricing" element={<PricingPage />} />
4749
<Route path="/playground" element={<PlaygroundPage />} />
4850
<Route path="/playground/create" element={<PostCreatePage />} />
4951
<Route path="/playground/detail" element={<PlaygroundDetailPage />} />

‎frontend/src/components/welcome/banner.tsx‎

Lines changed: 113 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,121 @@
11
import { Button } from "@/components/ui/button";
2+
import {
3+
IconArrowRight,
4+
IconBrandGithub,
5+
IconCloudCode,
6+
IconPlayerPlayFilled,
7+
IconSparkles,
8+
} from "@tabler/icons-react";
29
import { Link } from "react-router-dom";
310

11+
const stats = [
12+
{ value: "3", label: "任务模式" },
13+
{ value: "4", label: "研发环节覆盖" },
14+
{ value: "Git", label: "协作链路接入" },
15+
];
16+
417
const Banner = () => {
518
return (
6-
<div className="w-full px-6 sm:px-10 mt-48 sm:mt-56">
7-
<div className="w-full max-w-[1200px] mx-auto flex flex-col gap-4">
8-
<h1 className="text-balance text-5xl font-bold tracking-tight leading-tight">
9-
MonkeyCode — 免费的 AI 编程平台
10-
</h1>
11-
<p className="text-base text-muted-foreground sm:text-lg leading-relaxed">
12-
说需求，AI 写代码、做设计、做 Review。云开发环境开箱即用，基础版免费起步，专业版支持多模型自选与多任务并行。
13-
</p>
14-
<div className="flex flex-row gap-4">
15-
<Button size="lg" asChild><Link to="/console/">开始使用</Link></Button>
16-
<Button size="lg" variant="secondary" asChild><a href="https://monkeycode.docs.baizhi.cloud/" target="_blank">上手指南</a></Button>
19+
<section className="w-full px-6 pt-32 pb-14 sm:px-10 sm:pt-36 sm:pb-20">
20+
<div className="mx-auto grid w-full max-w-[1200px] gap-12 lg:grid-cols-[1.02fr_0.98fr] lg:items-center">
21+
<div className="flex flex-col gap-7">
22+
<div className="pixel-badge font-pixel inline-flex w-fit items-center gap-2 border-slate-900 bg-amber-100 px-3 py-2 text-[10px] text-slate-900">
23+
<IconSparkles className="size-3.5" />
24+
LEVEL 01
25+
</div>
26+
27+
<div className="flex flex-col gap-4">
28+
<h1 className="max-w-3xl text-balance text-4xl font-bold leading-tight tracking-tight text-slate-950 sm:text-5xl lg:text-6xl">
29+
让 AI 真正进入
30+
<span className="block text-primary">研发交付流程</span>
31+
</h1>
32+
<p className="max-w-2xl text-base leading-8 text-slate-600 sm:text-lg">
33+
MonkeyCode 不是只会补全代码的助手，而是一个能从需求理解、技术设计、编码实现到代码审查持续推进的 AI 工程师工作台。
34+
</p>
35+
</div>
36+
37+
<div className="flex flex-col gap-3 sm:flex-row">
38+
<Button size="lg" className="pixel-button h-12 border-slate-900 px-6" asChild>
39+
<Link to="/console/">
40+
立即开始
41+
<IconArrowRight className="size-4" />
42+
</Link>
43+
</Button>
44+
<Button size="lg" variant="secondary" className="pixel-button h-12 border-slate-900 bg-white px-6 text-slate-900 hover:bg-slate-50" asChild>
45+
<a href="https://monkeycode.docs.baizhi.cloud/" target="_blank" rel="noreferrer">
46+
<IconPlayerPlayFilled className="size-4" />
47+
查看文档
48+
</a>
49+
</Button>
50+
</div>
51+
52+
<div className="grid gap-3 sm:grid-cols-3">
53+
{stats.map((item) => (
54+
<div
55+
key={item.label}
56+
className="pixel-panel border-slate-900 bg-white px-5 py-4"
57+
>
58+
<div className="font-terminal text-3xl leading-none text-slate-950">{item.value}</div>
59+
<div className="mt-2 text-sm text-slate-500">{item.label}</div>
60+
</div>
61+
))}
62+
</div>
63+
64+
<div className="flex flex-wrap gap-3 text-sm text-slate-600">
65+
<div className="pixel-badge inline-flex items-center gap-2 border-slate-900 bg-white px-3 py-2">
66+
<IconCloudCode className="size-4 text-primary" />
67+
独立云开发环境
68+
</div>
69+
<div className="pixel-badge inline-flex items-center gap-2 border-slate-900 bg-white px-3 py-2">
70+
<IconBrandGithub className="size-4 text-primary" />
71+
Git 协作可接入
72+
</div>
73+
</div>
74+
</div>
75+
76+
<div className="relative">
77+
<div className="absolute -left-6 top-10 hidden h-28 w-28 border-2 border-primary/25 bg-primary/8 lg:block" />
78+
<div className="absolute right-2 bottom-6 hidden h-20 w-20 border-2 border-amber-300 bg-amber-100/70 lg:block" />
79+
80+
<div className="pixel-panel pixel-grid border-slate-900 bg-[#fffdf8] p-3 sm:p-4">
81+
<div className="flex items-center justify-between border-2 border-slate-900 bg-slate-950 px-4 py-3 text-white">
82+
<div className="flex items-center gap-3">
83+
<img src="/logo-colored.png" className="size-8 border border-white/15 bg-white p-1" alt="MonkeyCode Logo" />
84+
<div>
85+
<div className="font-pixel text-[10px] text-amber-200">TASK RUNNING</div>
86+
<div className="mt-2 text-xs text-slate-300">MonkeyCode Workspace</div>
87+
</div>
88+
</div>
89+
<div className="font-terminal text-2xl leading-none text-emerald-300">ONLINE</div>
90+
</div>
91+
92+
<div className="mt-4 border-2 border-slate-900 bg-slate-950 p-2">
93+
<img
94+
src="/task-1.png"
95+
alt="MonkeyCode 任务执行界面"
96+
className="w-full border border-white/10 object-cover"
97+
/>
98+
</div>
99+
100+
<div className="mt-4 grid gap-3 sm:grid-cols-2">
101+
<div className="border-2 border-slate-900 bg-white px-4 py-4">
102+
<div className="font-pixel text-[10px] text-primary">INPUT</div>
103+
<p className="mt-3 text-sm leading-7 text-slate-600">
104+
说需求，系统自动拆出执行上下文，不需要先把命令、环境和流程都自己接好。
105+
</p>
106+
</div>
107+
<div className="border-2 border-slate-900 bg-amber-50 px-4 py-4">
108+
<div className="font-pixel text-[10px] text-primary">OUTPUT</div>
109+
<p className="mt-3 text-sm leading-7 text-slate-600">
110+
代码、设计、Review 和 Git 协作回到同一个工作台，而不是散落在多个工具之间。
111+
</p>
112+
</div>
113+
</div>
114+
</div>
17115
</div>
18116
</div>
19-
</div>
20-
)
21-
}
117+
</section>
118+
);
119+
};
22120

23-
export default Banner;
121+
export default Banner;

‎frontend/src/components/welcome/downloads.tsx‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -33,12 +33,18 @@ const clients = [
3333

3434
const Downloads = () => {
3535
return (
36-
<section className="w-full py-16 md:py-24 px-6 sm:px-10 bg-primary text-background" id="downloads">
37-
<div className="w-full max-w-[1200px] mx-auto flex flex-col gap-6">
38-
<div className="max-w-2xl mx-auto text-center">
39-
<h1 className="text-balance text-2xl md:text-4xl font-bold text-center">
36+
<section className="w-full px-6 py-16 sm:px-10 md:py-24" id="downloads">
37+
<div className="mx-auto flex w-full max-w-[1200px] flex-col gap-6 rounded-[32px] border border-border/70 bg-primary px-6 py-10 text-background shadow-[0_24px_80px_rgba(249,115,22,0.2)] sm:px-10">
38+
<div className="mx-auto max-w-2xl text-center">
39+
<p className="mb-3 text-sm font-medium uppercase tracking-[0.2em] text-background/70">
40+
Client Apps
41+
</p>
42+
<h2 className="text-balance text-2xl font-bold text-center md:text-4xl">
4043
全平台客户端
41-
</h1>
44+
</h2>
45+
<p className="mt-4 text-sm leading-7 text-background/75 sm:text-base">
46+
Web、桌面端和移动端统一接入同一套 AI 研发能力。需要切换设备时，不用重新适配工作流。
47+
</p>
4248
</div>
4349
<div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4 mt-6 md:mt-10">
4450
{clients.map((client) => (
@@ -47,7 +53,7 @@ const Downloads = () => {
4753
href={RELEASE_URL}
4854
target="_blank"
4955
rel="noreferrer"
50-
className="group flex h-full flex-col justify-between rounded-xl border border-background/20 bg-background/5 p-4 hover:border-background/40 hover:bg-background/10 hover:-translate-y-0.5 transition-all"
56+
className="group flex h-full flex-col justify-between rounded-2xl border border-background/20 bg-background/8 p-5 transition-all duration-200 hover:-translate-y-1 hover:border-background/40 hover:bg-background/12"
5157
>
5258
<div className="flex items-center gap-3">
5359
<div className="size-12 rounded-lg bg-background/10 text-background flex items-center justify-center shrink-0">

‎frontend/src/components/welcome/final-cta.tsx‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import { Button } from "@/components/ui/button";
2+
import { IconArrowRight, IconBook2, IconStack2 } from "@tabler/icons-react";
3+
import { Link } from "react-router-dom";
4+
5+
const FinalCTA = () => {
6+
return (
7+
<section className="w-full px-6 pt-6 pb-16 sm:px-10 sm:pt-10 sm:pb-24">
8+
<div className="pixel-grid mx-auto max-w-[1200px] border-2 border-slate-900 bg-[linear-gradient(180deg,#fffaf0_0%,#fff3e0_100%)] px-6 py-10 shadow-[10px_10px_0_rgba(249,115,22,0.22)] sm:px-10 sm:py-14">
9+
<div className="mx-auto max-w-3xl text-center">
10+
<div className="pixel-badge font-pixel inline-flex items-center border-slate-900 bg-primary px-3 py-2 text-[10px] text-primary-foreground">
11+
START
12+
</div>
13+
<h2 className="mt-6 text-balance text-3xl font-bold tracking-tight text-slate-950 sm:text-4xl">
14+
先让 MonkeyCode 跑一遍，再判断它是否适合你的研发方式
15+
</h2>
16+
<p className="mx-auto mt-4 max-w-2xl text-sm leading-7 text-slate-600 sm:text-base">
17+
从一次真实任务开始，比反复比较概念和口号更快。先跑一遍，再决定它是否该进入你的日常研发流程。
18+
</p>
19+
<div className="mt-8 flex flex-col justify-center gap-3 sm:flex-row">
20+
<Button size="lg" className="pixel-button h-12 border-slate-950 px-6" asChild>
21+
<Link to="/console">
22+
立即开始
23+
<IconArrowRight className="size-4" />
24+
</Link>
25+
</Button>
26+
<Button size="lg" variant="secondary" className="pixel-button h-12 border-slate-950 px-6 bg-white text-slate-900 hover:bg-slate-50" asChild>
27+
<a href="https://monkeycode.docs.baizhi.cloud/" target="_blank" rel="noreferrer">
28+
<IconBook2 className="size-4" />
29+
查看文档
30+
</a>
31+
</Button>
32+
<Button size="lg" variant="ghost" className="pixel-button h-12 border-slate-950 bg-amber-100 px-6 text-slate-900 hover:bg-amber-200" asChild>
33+
<Link to="/pricing">
34+
<IconStack2 className="size-4" />
35+
查看型号
36+
</Link>
37+
</Button>
38+
</div>
39+
</div>
40+
</div>
41+
</section>
42+
);
43+
};
44+
45+
export default FinalCTA;

0 commit comments

Comments
 (0)