feat(website): add "One More Thing" section; auto scroll

This commit is contained in:
Simon
2026-02-14 17:30:00 +08:00
parent 6abe75f199
commit 58a3d5fbc6
2 changed files with 108 additions and 3 deletions

View File

@@ -1,6 +1,17 @@
/* eslint-disable react-dom/no-dangerously-set-innerhtml */
import { Bot, Box, MessageSquare, PlayCircle, Shield, Sparkles, Users, Zap } from 'lucide-react'
import {
Bot,
Box,
ExternalLink,
MessageSquare,
PlayCircle,
Shield,
Sparkles,
Users,
Zap,
} from 'lucide-react'
import { useEffect, useState } from 'react'
import { siGooglechrome } from 'simple-icons'
import { Link, useSearchParams } from 'wouter'
import Footer from '../components/Footer'
@@ -578,6 +589,91 @@ export default function HomePage() {
</div>
</div>
</section>
{/* One More Thing */}
<section
className="px-6 py-20 bg-white/50 dark:bg-gray-800/50 backdrop-blur-sm"
aria-labelledby="one-more-thing-heading"
>
<div className="max-w-4xl mx-auto text-center">
<h2
id="one-more-thing-heading"
className="text-4xl lg:text-5xl font-bold mb-6 bg-linear-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent"
>
One More Thing
</h2>
<p className="text-xl text-gray-600 dark:text-gray-300 mb-4 max-w-2xl mx-auto">
{isZh
? '想要多页面控制?试试可选的浏览器扩展。'
: 'Need multi-page control? Try the optional browser extension.'}
</p>
<p className="text-sm text-gray-500 dark:text-gray-400 mb-12 max-w-2xl mx-auto">
{'* '}
{isZh
? 'PageAgent.js 本身无需任何扩展即可工作,扩展是额外的能力增强。'
: 'PageAgent.js works without any extension — this is a power-up, not a dependency.'}
</p>
<div className="flex flex-col sm:flex-row items-center justify-center gap-4 mb-10">
<a
href="https://chromewebstore.google.com/detail/page-agent-ext/akldabonmimlicnjlflnapfeklbfemhj"
target="_blank"
rel="noopener noreferrer"
className="group inline-flex items-center gap-3 px-8 py-4 bg-linear-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white font-medium rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-105"
>
<img
src="https://img.alicdn.com/imgextra/i3/O1CN01JpW0Vo1sR3FpiZKFM_!!6000000005762-55-tps-192-192.svg"
alt="Chrome Web Store"
className="w-7 h-7"
/>
<span>{isZh ? '从 Chrome 应用商店安装' : 'Install from Chrome Web Store'}</span>
<ExternalLink className="w-4 h-4 opacity-50 group-hover:opacity-100 transition-opacity" />
</a>
<Link
href="/docs/features/chrome-extension"
className="inline-flex items-center gap-3 px-8 py-4 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-900 dark:text-white font-medium rounded-2xl transition-all duration-300 hover:scale-105"
>
<svg className="w-5 h-5" viewBox="0 0 24 24" aria-hidden="true">
<path d={siGooglechrome.path} fill="currentColor" />
</svg>
<span>{isZh ? '查看文档' : 'Read the Docs'}</span>
</Link>
</div>
<div className="grid sm:grid-cols-3 gap-6 text-left max-w-3xl mx-auto">
<div className="p-5 bg-linear-to-br from-blue-50 to-purple-50 dark:from-gray-700 dark:to-gray-800 rounded-xl">
<h3 className="font-semibold text-gray-900 dark:text-white mb-1">
{isZh ? '多页面任务' : 'Multi-Page Tasks'}
</h3>
<p className="text-sm text-gray-600 dark:text-gray-300">
{isZh
? '跨多个页面和标签页连续执行任务,不再受限于单页上下文'
: 'Run tasks across multiple pages and tabs without being limited to a single page context'}
</p>
</div>
<div className="p-5 bg-linear-to-br from-green-50 to-blue-50 dark:from-gray-700 dark:to-gray-800 rounded-xl">
<h3 className="font-semibold text-gray-900 dark:text-white mb-1">
{isZh ? '页面内发起控制' : 'Control from Your Page'}
</h3>
<p className="text-sm text-gray-600 dark:text-gray-300">
{isZh
? '在页面 JS 中发起任务,驱动整个浏览器完成跨标签操作'
: 'Trigger tasks from page JS to drive the entire browser across tabs'}
</p>
</div>
<div className="p-5 bg-linear-to-br from-purple-50 to-pink-50 dark:from-gray-700 dark:to-gray-800 rounded-xl">
<h3 className="font-semibold text-gray-900 dark:text-white mb-1">
{isZh ? '外部发起任务' : 'External Triggers'}
</h3>
<p className="text-sm text-gray-600 dark:text-gray-300">
{isZh
? '页面 JS、本地 Agent 或云端 Agent 均可通过扩展发起任务'
: 'Page JS, local agents, or cloud agents can trigger tasks through the extension'}
</p>
</div>
</div>
</div>
</section>
</main>
<Footer />

View File

@@ -1,14 +1,23 @@
import { Suspense, lazy } from 'react'
import { Route, Switch } from 'wouter'
import { Suspense, lazy, useLayoutEffect } from 'react'
import { Route, Switch, useLocation } from 'wouter'
import HomePage from './pages/Home'
import DocsPages from './pages/docs/index'
// const DocsPages = lazy(() => import('./pages/docs/index'))
function ScrollToTop() {
const [pathname] = useLocation()
useLayoutEffect(() => {
window.scrollTo(0, 0)
}, [pathname])
return null
}
export default function Router() {
return (
<Suspense>
<ScrollToTop />
<Switch>
{/* Home page */}
<Route path="/">