Skip to content

Commit 2ccb076

Browse files
SteveLin100132SteveLin100132
committed
feat(website): update UI components for improved aesthetics and functionality
1 parent a6db18b commit 2ccb076

File tree

4 files changed

+192
-156
lines changed

4 files changed

+192
-156
lines changed

‎website/src/components/FeaturesSection.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -939,7 +939,7 @@ const FeaturesSection: React.FC = () => {
939939
href="https://github.com/SteveLin100132/notion-chart-generator"
940940
target="_blank"
941941
rel="noopener noreferrer"
942-
className="inline-flex items-center gap-2 px-6 py-3 bg-white text-black font-semibold rounded-lg hover:bg-gray-100 transition-all duration-300 group"
942+
className="inline-flex items-center gap-2 px-6 py-3 bg-white text-black font-semibold rounded-full hover:bg-gray-100 transition-all duration-300 group"
943943
>
944944
<svg
945945
className="w-5 h-5 group-hover:scale-110 transition-transform duration-300"

‎website/src/components/HeroSection.tsx‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,7 @@ const HeroSection: React.FC = () => {
1212
};
1313

1414
return (
15-
<section className="relative min-h-[75vh] overflow-hidden pt-16">
16-
{/* Enhanced Local Grid Background for Hero */}
17-
{/* <div className="absolute inset-0 opacity-20">
18-
<div className="h-full w-full bg-grid-pattern-hero bg-grid-size animate-pulse-slow"></div>
19-
</div> */}
20-
15+
<section id="hero" className="relative min-h-[75vh] overflow-hidden pt-16">
2116
{/* Gradient Overlay */}
2217
<div className="absolute inset-0 bg-gradient-to-br from-background via-transparent to-gray-50/80"></div>
2318

@@ -77,7 +72,7 @@ const HeroSection: React.FC = () => {
7772
<Button
7873
size="lg"
7974
onClick={scrollToFeatures}
80-
className="group shadow-lg hover:shadow-xl transition-all duration-300"
75+
className="group rounded-full shadow-lg hover:shadow-xl transition-all duration-300"
8176
>
8277
開始探索
8378
<ArrowRight className="ml-2 w-4 h-4 group-hover:translate-x-1 transition-transform" />
@@ -92,7 +87,7 @@ const HeroSection: React.FC = () => {
9287
"_blank"
9388
)
9489
}
95-
className="backdrop-blur-sm bg-white/10 border-white/20 text-gray-700 hover:bg-gray-100 hover:text-gray-900 hover:border-gray-300 transition-all duration-300"
90+
className="backdrop-blur-sm rounded-full bg-white/10 border-white/20 text-gray-700 hover:bg-gray-100 hover:text-gray-900 hover:border-gray-300 transition-all duration-300"
9691
>
9792
查看原始碼
9893
</Button>

‎website/src/components/HowToUseSection.tsx‎

Lines changed: 93 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,21 @@
1-
import React, { useState } from 'react';
2-
import { motion } from 'framer-motion';
3-
import { Copy, CheckCircle, Play, Download, Settings, Share2 } from 'lucide-react';
4-
import { Button } from './ui/Button';
5-
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './ui/Card';
1+
import React, { useState } from "react";
2+
import { motion } from "framer-motion";
3+
import {
4+
Copy,
5+
CheckCircle,
6+
Play,
7+
Download,
8+
Settings,
9+
Share2,
10+
} from "lucide-react";
11+
import { Button } from "./ui/Button";
12+
import {
13+
Card,
14+
CardContent,
15+
CardDescription,
16+
CardHeader,
17+
CardTitle,
18+
} from "./ui/Card";
619

720
const HowToUseSection: React.FC = () => {
821
const [copiedCommand, setCopiedCommand] = useState<string | null>(null);
@@ -16,77 +29,84 @@ const HowToUseSection: React.FC = () => {
1629
const steps = [
1730
{
1831
number: 1,
19-
title: '安裝與設定',
20-
description: '使用 Docker 快速部署，或者從源碼編譯安裝',
32+
title: "安裝與設定",
33+
description: "使用 Docker 快速部署，或者從源碼編譯安裝",
2134
icon: Download,
2235
content: {
23-
docker: 'docker run -p 3000:3000 stevelin100132/notion-chart-generator',
24-
git: 'git clone https://github.com/SteveLin100132/notion-chart-generator.git'
25-
}
36+
docker: "docker run -p 3000:3000 stevelin100132/notion-chart-generator",
37+
git: "git clone https://github.com/SteveLin100132/notion-chart-generator.git",
38+
},
2639
},
2740
{
2841
number: 2,
29-
title: '配置 Notion 整合',
30-
description: '設定 Notion API 金鑰，並選擇要連接的資料庫',
42+
title: "配置 Notion 整合",
43+
description: "設定 Notion API 金鑰，並選擇要連接的資料庫",
3144
icon: Settings,
3245
content: {
33-
env: 'NOTION_API_KEY=your_notion_api_key\nNOTION_DATABASE_ID=your_database_id'
34-
}
46+
env: "NOTION_API_KEY=your_notion_api_key\nNOTION_DATABASE_ID=your_database_id",
47+
},
3548
},
3649
{
3750
number: 3,
38-
title: '選擇圖表類型',
39-
description: '根據你的資料特性，選擇最適合的圖表類型',
51+
title: "選擇圖表類型",
52+
description: "根據你的資料特性，選擇最適合的圖表類型",
4053
icon: Play,
41-
features: ['長條圖', '圓餅圖', '折線圖', '散佈圖', '熱力圖']
54+
features: ["長條圖", "圓餅圖", "折線圖", "散佈圖", "熱力圖"],
4255
},
4356
{
4457
number: 4,
45-
title: '分享與嵌入',
46-
description: '生成分享連結或 iframe 代碼，輕鬆整合到其他平台',
58+
title: "分享與嵌入",
59+
description: "生成分享連結或 iframe 代碼，輕鬆整合到其他平台",
4760
icon: Share2,
4861
content: {
49-
iframe: '<iframe src="https://your-domain.com/chart/123" width="600" height="400"></iframe>'
50-
}
51-
}
62+
iframe:
63+
'<iframe src="https://your-domain.com/chart/123" width="600" height="400"></iframe>',
64+
},
65+
},
5266
];
5367

5468
const deploymentMethods = [
5569
{
56-
title: 'Docker 部署',
57-
description: '最簡單的部署方式，適合快速體驗',
70+
title: "Docker 部署",
71+
description: "最簡單的部署方式，適合快速體驗",
5872
commands: [
59-
'docker pull stevelin100132/notion-chart-generator',
60-
'docker run -d -p 3000:3000 --name notion-chart stevelin100132/notion-chart-generator'
73+
"docker pull stevelin100132/notion-chart-generator",
74+
"docker run -d -p 3000:3000 --name notion-chart stevelin100132/notion-chart-generator",
6175
],
62-
icon: '🐳'
76+
icon: "🐳",
6377
},
6478
{
65-
title: '原始碼部署',
66-
description: '適合開發者進行自定義修改',
79+
title: "原始碼部署",
80+
description: "適合開發者進行自定義修改",
6781
commands: [
68-
'git clone https://github.com/SteveLin100132/notion-chart-generator.git',
69-
'cd notion-chart-generator',
70-
'npm install',
71-
'npm run build',
72-
'npm start'
82+
"git clone https://github.com/SteveLin100132/notion-chart-generator.git",
83+
"cd notion-chart-generator",
84+
"npm install",
85+
"npm run build",
86+
"npm start",
7387
],
74-
icon: '⚡'
88+
icon: "⚡",
7589
},
7690
{
77-
title: 'Kubernetes 部署',
78-
description: '適合生產環境的大規模部署',
91+
title: "Kubernetes 部署",
92+
description: "適合生產環境的大規模部署",
7993
commands: [
80-
'kubectl apply -f k8s/',
81-
'kubectl get pods',
82-
'kubectl port-forward svc/notion-chart-generator 3000:3000'
94+
"kubectl apply -f k8s/",
95+
"kubectl get pods",
96+
"kubectl port-forward svc/notion-chart-generator 3000:3000",
8397
],
84-
icon: '☸️'
85-
}
98+
icon: "☸️",
99+
},
86100
];
87101

88102
return (
89103
<section id="how-to-use" className="section-padding bg-white">
104+
{/* Section Divider - 流星線條 */}
105+
<div className="relative mb-20 flex flex-col items-center">
106+
{/* 主分界線 */}
107+
<div className="w-full max-w-6xl h-px bg-gradient-to-r from-transparent via-gray-500 to-transparent opacity-40"></div>
108+
</div>
109+
90110
<div className="container">
91111
<motion.div
92112
initial={{ opacity: 0, y: 30 }}
@@ -96,7 +116,13 @@ const HowToUseSection: React.FC = () => {
96116
className="text-center max-w-3xl mx-auto mb-16"
97117
>
98118
<h2 className="text-3xl md:text-4xl font-bold text-primary mb-6">
99-
如何使用
119+
如何
120+
<span className="relative inline-block px-3 py-1 mx-1">
121+
<span className="absolute inset-0 bg-black transform -rotate-2 rounded-md"></span>
122+
<span className="relative inline-block text-white font-bold transform -rotate-2">
123+
使用
124+
</span>
125+
</span>
100126
</h2>
101127
<p className="text-xl text-secondary leading-relaxed">
102128
簡單四個步驟，讓你快速上手 Notion Chart Generator。
@@ -141,7 +167,9 @@ const HowToUseSection: React.FC = () => {
141167
size="sm"
142168
variant="ghost"
143169
className="absolute top-2 right-2"
144-
onClick={() => copyToClipboard(value, `${step.number}-${key}`)}
170+
onClick={() =>
171+
copyToClipboard(value, `${step.number}-${key}`)
172+
}
145173
>
146174
{copiedCommand === `${step.number}-${key}` ? (
147175
<CheckCircle className="w-4 h-4 text-green-500" />
@@ -212,7 +240,12 @@ const HowToUseSection: React.FC = () => {
212240
size="sm"
213241
variant="ghost"
214242
className="absolute top-1 right-1 opacity-0 group-hover:opacity-100 transition-opacity"
215-
onClick={() => copyToClipboard(command, `deploy-${index}-${cmdIndex}`)}
243+
onClick={() =>
244+
copyToClipboard(
245+
command,
246+
`deploy-${index}-${cmdIndex}`
247+
)
248+
}
216249
>
217250
{copiedCommand === `deploy-${index}-${cmdIndex}` ? (
218251
<CheckCircle className="w-3 h-3 text-green-500" />
@@ -242,22 +275,32 @@ const HowToUseSection: React.FC = () => {
242275
準備開始了嗎？
243276
</h3>
244277
<p className="text-secondary text-lg mb-6 max-w-2xl mx-auto">
245-
立即體驗 Notion Chart Generator，將你的 Notion 資料轉換成精美的圖表。
246-
開源免費，支援多種部署方式。
278+
立即體驗 Notion Chart Generator，將你的 Notion
279+
資料轉換成精美的圖表。 開源免費，支援多種部署方式。
247280
</p>
248281
<div className="flex flex-col sm:flex-row gap-4 justify-center">
249282
<Button
250283
size="lg"
251-
onClick={() => window.open('https://github.com/SteveLin100132/notion-chart-generator', '_blank')}
284+
onClick={() =>
285+
window.open(
286+
"https://github.com/SteveLin100132/notion-chart-generator",
287+
"_blank"
288+
)
289+
}
252290
>
253291
查看 GitHub 專案
254292
</Button>
255293
<Button
256294
variant="outline"
257295
size="lg"
258-
onClick={() => copyToClipboard('docker run -p 3000:3000 stevelin100132/notion-chart-generator', 'cta-docker')}
296+
onClick={() =>
297+
copyToClipboard(
298+
"docker run -p 3000:3000 stevelin100132/notion-chart-generator",
299+
"cta-docker"
300+
)
301+
}
259302
>
260-
{copiedCommand === 'cta-docker' ? '已複製！' : '複製 Docker 指令'}
303+
{copiedCommand === "cta-docker" ? "已複製！" : "複製 Docker 指令"}
261304
</Button>
262305
</div>
263306
</motion.div>

0 commit comments

Comments
 (0)