- {/* Hero Section */}
-
-
- {/* Background Pattern + Particles */}
-
-
-
-
-
-
-
- GUI Agent in your webpage
-
-
-
-
- {isZh ? '让你的 Web 应用' : 'The AI Operator'}
-
-
-
-
-
- {isZh ? '🪄一行代码' : '🪄One line of code'}
-
-
- {isZh
- ? '，为你的网站添加 GUI Agent。'
- : ' adds intelligent GUI Agents to your website.'}
-
-
- {/* Try It Now Section - Tab Card */}
-
-
-
- {/* Tab Headers */}
-
- setActiveTab('try')}
- className={`flex-1 px-4 py-4 text-lg font-medium transition-colors duration-200 rounded-tl-2xl ${
- activeTab === 'try'
- ? 'bg-linear-to-r from-blue-50 to-purple-50 dark:from-blue-900/30 dark:to-purple-900/30 text-blue-700 dark:text-blue-300 border-b-2 border-blue-500'
- : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-700'
- }`}
- >
- {isZh ? '🚀 立即尝试' : '🚀 Try It Now'}
-
- setActiveTab('other')}
- className={`flex-1 px-4 py-4 text-lg font-medium transition-colors duration-200 rounded-tr-2xl ${
- activeTab === 'other'
- ? 'bg-linear-to-r from-green-50 to-blue-50 dark:from-green-900/30 dark:to-blue-900/30 text-green-700 dark:text-green-300 border-b-2 border-green-500'
- : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-700'
- }`}
- >
- {isZh ? '🌐 其他网页尝试' : '🌐 Try on Other Sites'}
-
-
-
- {/* Tab Content */}
-
- {activeTab === 'try' && (
-
-
-
- {isZh ? '执行' : 'Run'}
-
-
-
- )}
-
- {activeTab === 'other' && (
-
- {/* 左侧：操作步骤 */}
-
- {/* Keyboard Shortcut Hint */}
-
-
-
- {isZh ? '步骤 1:' : 'Step 1:'}
- {' '}
- {isZh ? '显示收藏夹栏' : 'Show your bookmarks bar'}
-
-
-
- Ctrl + Shift + B
-
-
- {isZh ? '或' : 'or'}
-
-
- ⌘ + Shift + B
-
-
-
-
- {/* Draggable Bookmarklet */}
-
-
-
- {isZh ? '步骤 2:' : 'Step 2:'}
- {' '}
- {isZh
- ? '拖拽下面按钮到收藏夹栏'
- : 'Drag this button to your bookmarks'}
-
-
-
- setCdnSource(e.target.value as 'international' | 'china')
- }
- className="px-2 py-1.5 text-xs border border-gray-300 dark:border-gray-500 rounded bg-white dark:bg-gray-600 text-gray-700 dark:text-gray-200"
- >
-
- {isZh ? '国际' : 'International'}
-
-
- {isZh ? '国内镜像' : 'China Mirror'}
-
-
-
-
-
-
- {/* Usage Instructions */}
-
-
-
- {isZh ? '步骤 3:' : 'Step 3:'}
- {' '}
- {isZh
- ? '在其他网站点击收藏夹中的按钮即可使用'
- : 'Click the bookmark on any site to activate'}
-
-
-
-
- {/* 右侧：注意事项 */}
-
-
- {isZh ? '⚠️ 注意' : '⚠️ Heads Up'}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {/* Features Section */}
-
-
-
- {/* Feature 1 */}
-
-
-
-
- {isZh ? '纯页面内方案' : 'In-page Solution'}
-
-
- {isZh
- ? '完全运行在你的页面内。不需要浏览器插件、不需要无头浏览器，不需要后端。'
- : 'Runs entirely within your page. No browser extensions, no headless browsers, and no backend required.'}
-
-
-
- {/* Feature 2 */}
-
-
-
-
- {isZh ? '零后端部署' : 'Zero Backend Setup'}
-
-
- {isZh
- ? '前端脚本引入，自定义 LLM 接入点。从 OpenAI 到 qwen3，完全由你掌控。'
- : 'Just drop in a script. Works with any LLM provider—OpenAI, Anthropic, or your own models.'}
-
-
-
- {/* Feature 3 */}
-
-
-
-
- {isZh ? '普惠智能交互' : 'Natural Language UI'}
-
-
- {isZh
- ? '为复杂 B端系统、管理后台提供自然语言入口。让每个用户都能轻松上手。'
- : 'Transform complex admin panels into chat interfaces. Make powerful tools accessible to everyone, not just experts.'}
-
-
-
- {/* Feature 4 */}
-
-
-
-
- {isZh ? '安全可控集成' : 'Secure by Design'}
-
-
- {isZh
- ? '支持操作黑白名单、数据脱敏保护。注入自定义知识库，让 AI 按你的规则工作。'
- : 'Control what AI can access with allowlists, data masking, and custom knowledge injection. Your rules, your data.'}
-
-
-
-
-
- {/* Use Cases Section */}
-
-
-
-
- {isZh ? '应用场景' : 'Where It Shines'}
-
-
- {isZh
- ? '从简单的表单填写到复杂的业务流程，AI 都能理解并执行'
- : 'From simple forms to complex workflows, AI understands and executes'}
-
-
-
-
- {/* Use Case 1 */}
-
-
-
-
-
-
-
- {isZh ? '对接答疑机器人' : 'Supercharge Support Bots'}
-
-
- {isZh
- ? '把你的答疑助手变成全能Agent。客服机器人不再只说「请先点击设置按钮然后点击...」，而是直接帮用户现场操作。'
- : 'Stop telling users where to click—let AI do it for them. Turn your chatbot from a guide into an operator that actually completes tasks.'}
-
-
-
-
-
- {/* Use Case 2 */}
-
-
-
-
-
-
- {isZh ? '交互升级/智能化改造' : 'Modernize Legacy Apps'}
-
-
- {isZh
- ? '一行代码，老应用变身Agent，产品专家帮用户操作复杂 B 端软件。降低人工支持成本，提高用户满意度。'
- : 'Add AI superpowers to old software without rebuilding. One script tag transforms complex enterprise tools into chat-driven interfaces.'}
-
-
-
-
-
- {/* Use Case 3 */}
-
-
-
-
-
- {isZh ? '产品教学' : 'Interactive Walkthroughs'}
-
-
- {isZh
- ? '向用户演示交互过程，边做边教。例如让AI演示「如何提交报销申请」的完整操作流程。'
- : "Show, don't tell. Let AI demonstrate workflows in real-time—perfect for onboarding or training new users on complex systems."}
-
-
-
-
-
- {/* Use Case 4 */}
-
-
-
-
-
-
- {isZh ? '无障碍支持' : 'Accessibility First'}
-
-
- {isZh
- ? '为视障用户、老年用户提供自然语言交互，对接屏幕阅读器或语音助理，让软件人人可用。'
- : 'Make web apps accessible through natural language. Perfect for screen readers, voice control, or users who find traditional interfaces challenging.'}
-
-
-
-
-
-
-
- {/* One More Thing */}
-
-
-
- One More Thing
-
-
- {isZh
- ? '想要多页面控制？试试可选的浏览器扩展。'
- : 'Need multi-page control? Try the optional browser extension.'}
-
-
- {'* '}
- {isZh
- ? 'PageAgent.js 本身无需任何扩展即可工作，扩展是额外的能力增强。'
- : 'PageAgent.js works without any extension — this is a power-up, not a dependency.'}
-
-
-
-
-
-
-
- {isZh ? '多页面任务' : 'Multi-Page Tasks'}
-
-
- {isZh
- ? '跨多个页面和标签页连续执行任务，不再受限于单页上下文'
- : 'Run tasks across multiple pages and tabs without being limited to a single page context'}
-
-
-
-
- {isZh ? '页面内发起控制' : 'Control from Your Page'}
-
-
- {isZh
- ? '在页面 JS 中发起任务，驱动整个浏览器完成跨标签操作'
- : 'Trigger tasks from page JS to drive the entire browser across tabs'}
-
-
-
-
- {isZh ? '外部发起任务' : 'External Triggers'}
-
-
- {isZh
- ? '页面 JS、本地 Agent 或云端 Agent 均可通过扩展发起任务'
- : 'Page JS, local agents, or cloud agents can trigger tasks through the extension'}
-
-
-
-
+
diff --git a/packages/website/src/pages/home/FeaturesSection.tsx b/packages/website/src/pages/home/FeaturesSection.tsx
new file mode 100644
index 0000000..58cf94f
--- /dev/null
+++ b/packages/website/src/pages/home/FeaturesSection.tsx
@@ -0,0 +1,166 @@
+import { Bot, Box, MessageSquare, Shield, Sparkles, Users } from 'lucide-react'
+
+import { BlurFade } from '../../components/ui/blur-fade'
+import { Marquee } from '../../components/ui/marquee'
+import { Particles } from '../../components/ui/particles'
+import { useLanguage } from '../../i18n/context'
+
+export default function FeaturesSection() {
+ const { isZh } = useLanguage()
+
+ return (
+
+
+
+ {/* Zero Infrastructure (2-col) */}
+
+
+
+
+ {[
+ 'pip install browser-use playwright',
+ 'docker run -p 3000:3000 playwright-mcp',
+ 'const browser = await chromium.launch()',
+ ].map((cmd) => (
+
+ ✗
+ {cmd}
+
+ ))}
+
+
+ ✓
+ {''}
+
+
+
+
+
+ {isZh ? '零基建集成' : 'Zero Infrastructure'}
+
+
+
+ {isZh
+ ? '无需 Python、无头浏览器、服务端部署。一行 script 标签搞定。'
+ : "No Python. No headless browser. No server. One script tag — that's it."}
+
+
+
+
+ {/* Privacy by Default (1-col) */}
+
+
+
+
+
+ {isZh ? '隐私优先' : 'Privacy by Default'}
+
+
+ {isZh
+ ? '浏览器内运行，数据完全由你掌控。'
+ : 'Runs in the browser. You control your data, always.'}
+
+
+
+
+ {/* Any LLM (1-col) */}
+
+
+
+
+ {['OpenAI', 'Claude', 'DeepSeek', 'Qwen', 'Gemini', 'GLM', 'Ollama', 'Groq'].map(
+ (name) => (
+
+ {name}
+
+ )
+ )}
+
+
+
+
+
+ {isZh ? '兼容多种 LLM' : 'Bring Your Own LLMs'}
+
+
+
+ {isZh
+ ? 'OpenAI、Claude、DeepSeek、Qwen 等，或通过 Ollama 完全离线。'
+ : 'OpenAI, Claude, DeepSeek, Qwen, and more — or fully offline via Ollama.'}
+
+
+
+
+ {/* Human-in-the-Loop (2-col) */}
+
+
+
+
+
+
+
+ {isZh ? '找到 3 条匹配记录。选择哪一条？' : 'Found 3 matches. Which one?'}
+
+
+
+
+ {isZh ? '第二条' : 'The second one.'}
+
+
+
+
+
+
+ ✓
+
+
+ {isZh ? '已选择并提交！' : 'Done! Selected and submitted.'}
+
+
+
+
+
+
+ {isZh ? '人机协同' : 'Human-in-the-Loop'}
+
+
+
+ {isZh
+ ? '内置协作面板，AI 操作前先确认——不是盲目自动化。'
+ : 'Built-in collaborative panel. Agent asks before acting — not blind automation.'}
+
+
+
+
+
+ )
+}
diff --git a/packages/website/src/pages/home/HeroSection.tsx b/packages/website/src/pages/home/HeroSection.tsx
new file mode 100644
index 0000000..78721c3
--- /dev/null
+++ b/packages/website/src/pages/home/HeroSection.tsx
@@ -0,0 +1,358 @@
+/* eslint-disable react-dom/no-dangerously-set-innerhtml */
+import { PageAgent } from 'page-agent'
+import { useEffect, useState } from 'react'
+import { Link, useSearchParams } from 'wouter'
+
+import { AnimatedGradientText } from '../../components/ui/animated-gradient-text'
+import { Highlighter } from '../../components/ui/highlighter'
+import { NeonGradientCard } from '../../components/ui/neon-gradient-card'
+import { Particles } from '../../components/ui/particles'
+import {
+ CDN_DEMO_CN_URL,
+ CDN_DEMO_URL,
+ DEMO_API_KEY,
+ DEMO_BASE_URL,
+ DEMO_MODEL,
+} from '../../constants'
+import { useLanguage } from '../../i18n/context'
+
+function getInjection(useCN?: boolean) {
+ const cdn = useCN ? CDN_DEMO_CN_URL : CDN_DEMO_URL
+
+ const injection = encodeURI(
+ `javascript:(function(){var s=document.createElement('script');s.src=\`${cdn}?t=\${Math.random()}\`;s.setAttribute('crossorigin', true);s.type="text/javascript";s.onload=()=>console.log('PageAgent script loaded!');document.body.appendChild(s);})();`
+ )
+
+ return `
+
+ ✨PageAgent
+
+ `
+}
+
+export default function HeroSection() {
+ const { language, isZh } = useLanguage()
+
+ const defaultTask = isZh
+ ? '从导航栏中进入文档页，打开"快速开始"相关的文档，帮我总结成 markdown'
+ : 'Goto docs in navigation bar, find Quick-Start section, and summarize in markdown'
+
+ const [task, setTask] = useState(() => defaultTask)
+
+ useEffect(() => {
+ setTask(defaultTask)
+ }, [defaultTask])
+
+ const [params] = useSearchParams()
+ const isOther = params.has('try_other')
+
+ const [activeTab, setActiveTab] = useState<'try' | 'other'>(isOther ? 'other' : 'try')
+ const [cdnSource, setCdnSource] = useState<'international' | 'china'>('international')
+
+ const handleExecute = async () => {
+ if (!task.trim()) return
+
+ const win = window as any
+
+ if (!win.pageAgent || win.pageAgent.disposed) {
+ win.pageAgent = new PageAgent({
+ interactiveBlacklist: [document.getElementById('root')!],
+ language: language,
+
+ instructions: {
+ system: 'You are a helpful assistant on PageAgent website.',
+ getPageInstructions: (url: string) => {
+ const hint = url.includes('page-agent') ? 'This is PageAgent demo page.' : undefined
+ console.log('[instructions] getPageInstructions:', url, '->', hint)
+ return hint
+ },
+ },
+
+ model:
+ import.meta.env.DEV && import.meta.env.LLM_MODEL_NAME
+ ? import.meta.env.LLM_MODEL_NAME
+ : DEMO_MODEL,
+ baseURL:
+ import.meta.env.DEV && import.meta.env.LLM_BASE_URL
+ ? import.meta.env.LLM_BASE_URL
+ : DEMO_BASE_URL,
+ apiKey:
+ import.meta.env.DEV && import.meta.env.LLM_API_KEY
+ ? import.meta.env.LLM_API_KEY
+ : DEMO_API_KEY,
+ })
+ }
+
+ const result = await win.pageAgent.execute(task)
+ console.log(result)
+ }
+
+ return (
+
+
+ {/* Background Pattern + Particles */}
+
+
+
+
+
+
+
+ AI Agent In Your Webpage
+
+
+
+
+ {isZh ? (
+ <>
+ 你网站里的 AI 操作员
+
+ The AI Operator Living in Your Web Page
+
+
+ ) : (
+ <>
+ The AI Operator
+
+
+
+
+
+ {isZh ? '🪄一行代码' : '🪄One line of code'}
+
+
+ {isZh
+ ? '，让你的网站变身 AI 原生应用。'
+ : ', turns your website into an AI-native app.'}
+
+
+ {/* Try It Now Section - Tab Card */}
+
+
+
+ {/* Tab Headers */}
+
+ setActiveTab('try')}
+ className={`flex-1 px-4 py-4 text-lg font-medium transition-colors duration-200 rounded-tl-2xl ${
+ activeTab === 'try'
+ ? 'bg-linear-to-r from-blue-50 to-purple-50 dark:from-blue-900/30 dark:to-purple-900/30 text-blue-700 dark:text-blue-300 border-b-2 border-blue-500'
+ : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-700'
+ }`}
+ >
+ {isZh ? '🚀 立即尝试' : '🚀 Try It Now'}
+
+ setActiveTab('other')}
+ className={`flex-1 px-4 py-4 text-lg font-medium transition-colors duration-200 rounded-tr-2xl ${
+ activeTab === 'other'
+ ? 'bg-linear-to-r from-green-50 to-blue-50 dark:from-green-900/30 dark:to-blue-900/30 text-green-700 dark:text-green-300 border-b-2 border-green-500'
+ : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-700'
+ }`}
+ >
+ {isZh ? '🌐 其他网页尝试' : '🌐 Try on Other Sites'}
+
+
+
+ {/* Tab Content */}
+
+ {activeTab === 'try' && (
+
+
+
+ {isZh ? '执行' : 'Run'}
+
+
+
+ )}
+
+ {activeTab === 'other' && (
+
+ {/* 左侧：操作步骤 */}
+
+
+
+ {isZh ? '步骤 1:' : 'Step 1:'} {' '}
+ {isZh ? '显示收藏夹栏' : 'Show your bookmarks bar'}
+
+
+
+ Ctrl + Shift + B
+
+
+ {isZh ? '或' : 'or'}
+
+
+ ⌘ + Shift + B
+
+
+
+
+
+
+ {isZh ? '步骤 2:' : 'Step 2:'} {' '}
+ {isZh ? '拖拽下面按钮到收藏夹栏' : 'Drag this button to your bookmarks'}
+
+
+
+ setCdnSource(e.target.value as 'international' | 'china')
+ }
+ className="px-2 py-1.5 text-xs border border-gray-300 dark:border-gray-500 rounded bg-white dark:bg-gray-600 text-gray-700 dark:text-gray-200"
+ >
+
+ {isZh ? '国际' : 'International'}
+
+ {isZh ? '国内镜像' : 'China Mirror'}
+
+
+
+
+
+
+
+ {isZh ? '步骤 3:' : 'Step 3:'} {' '}
+ {isZh
+ ? '在其他网站点击收藏夹中的按钮即可使用'
+ : 'Click the bookmark on any site to activate'}
+
+
+
+
+ {/* 右侧：注意事项 */}
+
+
+ {isZh ? '⚠️ 注意' : '⚠️ Heads Up'}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/packages/website/src/pages/home/OneMoreThingSection.tsx b/packages/website/src/pages/home/OneMoreThingSection.tsx
new file mode 100644
index 0000000..10e338b
--- /dev/null
+++ b/packages/website/src/pages/home/OneMoreThingSection.tsx
@@ -0,0 +1,98 @@
+import { ExternalLink } from 'lucide-react'
+import { siGooglechrome } from 'simple-icons'
+import { Link } from 'wouter'
+
+import { BlurFade } from '../../components/ui/blur-fade'
+import { MagicCard } from '../../components/ui/magic-card'
+import { useLanguage } from '../../i18n/context'
+
+export default function OneMoreThingSection() {
+ const { isZh } = useLanguage()
+
+ return (
+
+
+
+
+ One More Thing
+
+
+ {isZh
+ ? '想要多页面控制？试试可选的浏览器扩展。'
+ : 'Need multi-page control? Try the optional browser extension.'}
+
+
+ {'* '}
+ {isZh
+ ? 'PageAgent.js 本身无需任何扩展即可工作，扩展是额外的能力增强。'
+ : 'PageAgent.js works without any extension — this is a power-up, not a dependency.'}
+
+
+
+
+
+
+ {[
+ {
+ title: isZh ? '多页面任务' : 'Multi-Page Tasks',
+ desc: isZh
+ ? '跨多个页面和标签页连续执行任务，不再受限于单页上下文'
+ : 'Run tasks across multiple pages and tabs without being limited to a single page context',
+ },
+ {
+ title: isZh ? '页面内发起控制' : 'Control from Your Page',
+ desc: isZh
+ ? '在页面 JS 中发起任务，驱动整个浏览器完成跨标签操作'
+ : 'Trigger tasks from page JS to drive the entire browser across tabs',
+ },
+ {
+ title: isZh ? '外部发起任务' : 'External Triggers',
+ desc: isZh
+ ? '页面 JS、本地 Agent 或云端 Agent 均可通过扩展发起任务'
+ : 'Page JS, local agents, or cloud agents can trigger tasks through the extension',
+ },
+ ].map((item) => (
+
+
+
{item.title}
+
{item.desc}
+
+ ))}
+
+
+ )
+}
diff --git a/packages/website/src/pages/home/ScenariosSection.tsx b/packages/website/src/pages/home/ScenariosSection.tsx
new file mode 100644
index 0000000..2555722
--- /dev/null
+++ b/packages/website/src/pages/home/ScenariosSection.tsx
@@ -0,0 +1,172 @@
+import { Bot, Users, Zap } from 'lucide-react'
+
+import { BlurFade } from '../../components/ui/blur-fade'
+import { SparklesText } from '../../components/ui/sparkles-text'
+import { useLanguage } from '../../i18n/context'
+
+export default function ScenariosSection() {
+ const { isZh } = useLanguage()
+
+ return (
+
+
+
+
+
+ {isZh ? '应用场景' : 'Built For'}
+
+
+
+
+
+ {/* Scenario 1: SaaS AI Copilot */}
+
+
+
+
+
+ import {'{ PageAgent }'}{' '}
+ from {' '}
+ 'page-agent'
+
+
+ const {' '}
+ copilot ={' '}
+ new {' '}
+ PageAgent
+ {'({'}
+
+
+ model :{' '}
+ 'gpt-5.1' ,
+
+
+ apiKey :{' '}
+ process.env.KEY ,
+
+
{'})'}
+
+
+
+
+
+ {isZh ? 'SaaS AI 副驾驶' : 'SaaS AI Copilot'}
+
+
+
+ {isZh
+ ? '几小时内为你的产品加上 AI 副驾驶，不需要重写后端。'
+ : 'Ship an AI copilot in your product in hours, not months. No backend rewrite needed.'}
+
+
+
+
+ {/* Scenario 2: Smart Form Filling */}
+
+
+
+
+
+ 🪄
+
+ {isZh
+ ? '"填写上周五出差的报销单"'
+ : '"Fill the expense report for Friday\'s trip"'}
+
+
+ {[
+ {
+ label: isZh ? '姓名' : 'Name',
+ value: 'John Smith',
+ },
+ {
+ label: isZh ? '金额' : 'Amount',
+ value: '$342.50',
+ },
+ {
+ label: isZh ? '类目' : 'Category',
+ value: 'Travel',
+ },
+ ].map((field) => (
+
+
{field.label}
+
+ {field.value}
+
+
✓
+
+ ))}
+
+
+
+
+
+ {isZh ? '智能表单填写' : 'Smart Form Filling'}
+
+
+
+ {isZh
+ ? '把 20 次点击变成一句话。ERP、CRM、管理后台的最佳拍档。'
+ : 'Turn 20-click workflows into one sentence. Perfect for ERP, CRM, and admin systems.'}
+
+
+
+
+ {/* Scenario 3: Accessibility */}
+
+
+
+
+
+
+ 🎤
+
+
+ {isZh ? '"点击提交按钮"' : '"Click the submit button"'}
+
+
+
+
+
+ {isZh ? 'AI 正在执行...' : 'AI executing...'}
+
+
+
+ ✓ {isZh ? '按钮已点击' : 'Button clicked'}
+
+
+
+
+
+
+ {isZh ? '无障碍增强' : 'Accessibility'}
+
+
+
+ {isZh
+ ? '用自然语言让任何网页无障碍。语音指令、屏幕阅读器，零门槛。'
+ : 'Make any web app accessible through natural language. Voice, screen readers, zero barrier.'}
+
+
+
+
+
+ )
+}
- {isZh ? '从 Chrome 应用商店安装' : 'Install from Chrome Web Store'}
-