import React, { useState, useEffect, useRef } from 'react'; import { Monitor, BookOpen, Briefcase, User, MessageSquare, ArrowLeft, ArrowRight, CreditCard, Menu, X, ExternalLink, ChevronRight, ChevronLeft, Zap, Layout, Globe, Plus, Minus, Clock, Calendar, Facebook, Twitter, Link as LinkIcon, Send, CheckCircle, Sparkles, MousePointer2, Search, Hash, Database, Layers, ChevronDown } from 'lucide-react'; const App = () => { const [currentPage, setCurrentPage] = useState('home'); const [selectedPost, setSelectedPost] = useState(null); const [isMenuOpen, setIsMenuOpen] = useState(false); const [scrolled, setScrolled] = useState(false); const [formSubmitted, setFormSubmitted] = useState(false); const [activeBlogTag, setActiveBlogTag] = useState('全部'); const [openFaqIndex, setOpenFaqIndex] = useState(null); const siteConfig = { title: "Superbiz", primaryColor: "#00FF85", logo: "Superbiz", }; const allPosts = [ { id: 1, title: "為什麼 2024 年你該放棄 Super.so 改用自定義渲染？", date: "2024-05-20", tag: "策略", readTime: "5 min", author: "Superbiz Team", image: "[文章封面1]" }, { id: 2, title: "如何將綠界支付完美整合進你的 Notion 網站？", date: "2024-05-15", tag: "技術", readTime: "8 min", author: "Superbiz Team", image: "[文章封面2]" }, { id: 3, title: "接案心法：如何幫客戶規劃最易維護的 Notion 後端？", date: "2024-05-10", tag: "心得", readTime: "6 min", author: "Superbiz Team", image: "[文章封面3]" }, { id: 'case1', title: "Design Studio Portfolio: 從 Notion 到極速作品集", date: "2024-06-01", tag: "案例解析", readTime: "12 min", author: "Superbiz Team", image: "[案例 1 展示]" }, ]; const caseStudies = [ { id: 'case1', title: "Design Studio Portfolio", category: "設計組合", image: "[案例 1]", description: "將 50+ 個專案作品集完美轉化為極速加載的品牌展示牆。" }, { id: 'case2', title: "SaaS Product Docs", category: "軟體文檔", image: "[案例 2]", description: "結構化的技術文件，支持全站搜索與多級目錄導航。" }, { id: 'case3', title: "E-learning Platform", category: "線上課程", image: "[案例 3]", description: "串接付費牆與 Notion 數據庫，自動管理學員權限。" } ]; const blogTags = ['全部', '策略', '技術', '心得', '案例解析', '工具推薦']; useEffect(() => { const handleScroll = () => setScrolled(window.scrollY > 50); window.addEventListener('scroll', handleScroll); return () => window.removeEventListener('scroll', handleScroll); }, []); const useScrollReveal = () => { const [isVisible, setIsVisible] = useState(false); const domRef = useRef(); useEffect(() => { const observer = new IntersectionObserver(entries => { entries.forEach(entry => setIsVisible(entry.isIntersecting)); }, { threshold: 0.1 }); const current = domRef.current; if (current) observer.observe(current); return () => current && observer.unobserve(current); }, []); return [domRef, isVisible]; }; const Typewriter = ({ words }) => { const [index, setIndex] = useState(0); const [subIndex, setSubIndex] = useState(0); const [reverse, setReverse] = useState(false); useEffect(() => { if (subIndex === words[index].length + 1 && !reverse) { setTimeout(() => setReverse(true), 2000); return; } if (subIndex === 0 && reverse) { setReverse(false); setIndex((prev) => (prev + 1) % words.length); return; } const timeout = setTimeout(() => { setSubIndex((prev) => prev + (reverse ? -1 : 1)); }, reverse ? 75 : 150); return () => clearTimeout(timeout); }, [subIndex, index, reverse, words]); return ( {words[index].substring(0, subIndex)} | ); }; const Navbar = () => { const [isResourceOpen, setIsResourceOpen] = useState(false); return ( ); }; const Hero = () => { const [revealRef, isVisible] = useScrollReveal(); return ( ); }; const FaqSection = () => { const faqs = [ { q: "為什麼選擇 Notion 建站而非 WordPress？", a: "因為我們致力於「低成本、高效率」。Notion 讓你可以像編輯文件一樣更新網站，且不需負擔昂貴的伺服器維護費與安全性外掛。" }, { q: "我需要具備寫代碼的能力嗎？", a: "完全不需要。所有的代碼渲染與技術配置都由我處理，你只需要專注於在 Notion 裡輸入內容。" }, { q: "關於退款政策？", a: "付款後 48 小時內可全額退款。一旦超過 48 小時或服務已交付（提供預覽網址），視同勞務完成，恕不接受退款。" } ]; return ( ); }; const ServiceSection = () => { const [ref, isVisible] = useScrollReveal(); return ( ); }; const HelpCenterPage = () => ( ); return ( ); }; // 輔助組件 (從 1.2 代碼中移植並微調) const CasesSection = ({ handleCaseClick }) => { const caseStudies = [ { id: 'case1', title: "Design Studio Portfolio", category: "設計組合", image: "[案例 1]", description: "將 50+ 個專案作品集完美轉化為極速加載的品牌展示牆。" }, { id: 'case2', title: "SaaS Product Docs", category: "軟體文檔", image: "[案例 2]", description: "結構化的技術文件，支持全站搜索與多級目錄導航。" }, { id: 'case3', title: "E-learning Platform", category: "線上課程", image: "[案例 3]", description: "串接付費牆與 Notion 數據庫，自動管理學員權限。" } ]; return ( ); }; const BlogList = ({ allPosts, setSelectedPost, blogTags, activeBlogTag, setActiveBlogTag }) => ( ); const BlogDetail = ({ post, setSelectedPost, allPosts, setCurrentPage }) => ( ); const ContactPage = ({ setFormSubmitted, formSubmitted, setCurrentPage }) => { if (formSubmitted) return ( ); return ( ); }; export default App;