diff --git a/website/src/components/FeaturesSection.tsx b/website/src/components/FeaturesSection.tsx index 8a52379..2b832c0 100644 --- a/website/src/components/FeaturesSection.tsx +++ b/website/src/components/FeaturesSection.tsx @@ -939,7 +939,7 @@ const FeaturesSection: React.FC = () => { href="https://github.com/SteveLin100132/notion-chart-generator" target="_blank" rel="noopener noreferrer" - 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" + 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" > { }; return ( -
- {/* Enhanced Local Grid Background for Hero */} - {/*
-
-
*/} - +
{/* Gradient Overlay */}
@@ -77,7 +72,7 @@ const HeroSection: React.FC = () => { diff --git a/website/src/components/HowToUseSection.tsx b/website/src/components/HowToUseSection.tsx index d152eed..3a4a1ea 100644 --- a/website/src/components/HowToUseSection.tsx +++ b/website/src/components/HowToUseSection.tsx @@ -1,8 +1,21 @@ -import React, { useState } from 'react'; -import { motion } from 'framer-motion'; -import { Copy, CheckCircle, Play, Download, Settings, Share2 } from 'lucide-react'; -import { Button } from './ui/Button'; -import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './ui/Card'; +import React, { useState } from "react"; +import { motion } from "framer-motion"; +import { + Copy, + CheckCircle, + Play, + Download, + Settings, + Share2, +} from "lucide-react"; +import { Button } from "./ui/Button"; +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "./ui/Card"; const HowToUseSection: React.FC = () => { const [copiedCommand, setCopiedCommand] = useState(null); @@ -16,77 +29,84 @@ const HowToUseSection: React.FC = () => { const steps = [ { number: 1, - title: '安裝與設定', - description: '使用 Docker 快速部署，或者從源碼編譯安裝', + title: "安裝與設定", + description: "使用 Docker 快速部署，或者從源碼編譯安裝", icon: Download, content: { - docker: 'docker run -p 3000:3000 stevelin100132/notion-chart-generator', - git: 'git clone https://github.com/SteveLin100132/notion-chart-generator.git' - } + docker: "docker run -p 3000:3000 stevelin100132/notion-chart-generator", + git: "git clone https://github.com/SteveLin100132/notion-chart-generator.git", + }, }, { number: 2, - title: '配置 Notion 整合', - description: '設定 Notion API 金鑰，並選擇要連接的資料庫', + title: "配置 Notion 整合", + description: "設定 Notion API 金鑰，並選擇要連接的資料庫", icon: Settings, content: { - env: 'NOTION_API_KEY=your_notion_api_key\nNOTION_DATABASE_ID=your_database_id' - } + env: "NOTION_API_KEY=your_notion_api_key\nNOTION_DATABASE_ID=your_database_id", + }, }, { number: 3, - title: '選擇圖表類型', - description: '根據你的資料特性，選擇最適合的圖表類型', + title: "選擇圖表類型", + description: "根據你的資料特性，選擇最適合的圖表類型", icon: Play, - features: ['長條圖', '圓餅圖', '折線圖', '散佈圖', '熱力圖'] + features: ["長條圖", "圓餅圖", "折線圖", "散佈圖", "熱力圖"], }, { number: 4, - title: '分享與嵌入', - description: '生成分享連結或 iframe 代碼，輕鬆整合到其他平台', + title: "分享與嵌入", + description: "生成分享連結或 iframe 代碼，輕鬆整合到其他平台", icon: Share2, content: { - iframe: '' - } - } + iframe: + '', + }, + }, ]; const deploymentMethods = [ { - title: 'Docker 部署', - description: '最簡單的部署方式，適合快速體驗', + title: "Docker 部署", + description: "最簡單的部署方式，適合快速體驗", commands: [ - 'docker pull stevelin100132/notion-chart-generator', - 'docker run -d -p 3000:3000 --name notion-chart stevelin100132/notion-chart-generator' + "docker pull stevelin100132/notion-chart-generator", + "docker run -d -p 3000:3000 --name notion-chart stevelin100132/notion-chart-generator", ], - icon: '🐳' + icon: "🐳", }, { - title: '原始碼部署', - description: '適合開發者進行自定義修改', + title: "原始碼部署", + description: "適合開發者進行自定義修改", commands: [ - 'git clone https://github.com/SteveLin100132/notion-chart-generator.git', - 'cd notion-chart-generator', - 'npm install', - 'npm run build', - 'npm start' + "git clone https://github.com/SteveLin100132/notion-chart-generator.git", + "cd notion-chart-generator", + "npm install", + "npm run build", + "npm start", ], - icon: '⚡' + icon: "⚡", }, { - title: 'Kubernetes 部署', - description: '適合生產環境的大規模部署', + title: "Kubernetes 部署", + description: "適合生產環境的大規模部署", commands: [ - 'kubectl apply -f k8s/', - 'kubectl get pods', - 'kubectl port-forward svc/notion-chart-generator 3000:3000' + "kubectl apply -f k8s/", + "kubectl get pods", + "kubectl port-forward svc/notion-chart-generator 3000:3000", ], - icon: '☸️' - } + icon: "☸️", + }, ]; return (
+ {/* Section Divider - 流星線條 */} +
+ {/* 主分界線 */} +
+
+
{ className="text-center max-w-3xl mx-auto mb-16" >

- 如何使用 + 如何 + + + + 使用 + +

簡單四個步驟，讓你快速上手 Notion Chart Generator。 @@ -141,7 +167,9 @@ const HowToUseSection: React.FC = () => { size="sm" variant="ghost" className="absolute top-2 right-2" - onClick={() => copyToClipboard(value, `${step.number}-${key}`)} + onClick={() => + copyToClipboard(value, `${step.number}-${key}`) + } > {copiedCommand === `${step.number}-${key}` ? ( @@ -212,7 +240,12 @@ const HowToUseSection: React.FC = () => { size="sm" variant="ghost" className="absolute top-1 right-1 opacity-0 group-hover:opacity-100 transition-opacity" - onClick={() => copyToClipboard(command, `deploy-${index}-${cmdIndex}`)} + onClick={() => + copyToClipboard( + command, + `deploy-${index}-${cmdIndex}` + ) + } > {copiedCommand === `deploy-${index}-${cmdIndex}` ? ( @@ -242,22 +275,32 @@ const HowToUseSection: React.FC = () => { 準備開始了嗎？

- 立即體驗 Notion Chart Generator，將你的 Notion 資料轉換成精美的圖表。 - 開源免費，支援多種部署方式。 + 立即體驗 Notion Chart Generator，將你的 Notion + 資料轉換成精美的圖表。 開源免費，支援多種部署方式。

diff --git a/website/src/components/Navbar.tsx b/website/src/components/Navbar.tsx index 394edb4..03c7701 100644 --- a/website/src/components/Navbar.tsx +++ b/website/src/components/Navbar.tsx @@ -1,133 +1,131 @@ -import React, { useState, useEffect } from "react"; +import React, { useState } from "react"; import { motion } from "framer-motion"; -import { Menu, X } from "lucide-react"; const Navbar: React.FC = () => { - const [isScrolled, setIsScrolled] = useState(false); - const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); - - useEffect(() => { - const handleScroll = () => { - setIsScrolled(window.scrollY > 50); - }; - - window.addEventListener("scroll", handleScroll); - return () => window.removeEventListener("scroll", handleScroll); - }, []); - - const scrollToSection = (sectionId: string) => { - const element = document.getElementById(sectionId); - if (element) { - element.scrollIntoView({ behavior: "smooth" }); - } - setIsMobileMenuOpen(false); - }; + const [menuOpen, setMenuOpen] = useState(false); return ( -
-
- {/* Logo */} - +
+ {/* Left: Logo (mobile 只顯示 image) */} +
{ + const el = document.getElementById("hero"); + if (el) el.scrollIntoView({ behavior: "smooth" }); + }} > Notion Chart Generator - + Notion Chart Generator - +
- {/* Desktop Menu */} -
- - - - + {[ + { label: "特色功能", id: "features" }, + { label: "技術棧", id: "tech-stack" }, + { label: "使用說明", id: "how-to-use" }, + ].map((item) => ( + + ))} +
+ + {/* Right: GitHub only (僅桌機顯示) */} +
+ + + + + GitHub + + {/* Hamburger button (mobile only) */} +
- - {/* Mobile Menu Button */} -
- - {/* Mobile Menu */} - {isMobileMenuOpen && ( - + {/* Mobile menu dropdown */} + {menuOpen && ( +
- - GitHub - - +
)}