115 lines
4.8 KiB
TypeScript
115 lines
4.8 KiB
TypeScript
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 (
|
|
<section className="px-6 py-14" aria-labelledby="one-more-thing-heading">
|
|
<div className="max-w-4xl mx-auto text-center">
|
|
<BlurFade inView>
|
|
<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>
|
|
</BlurFade>
|
|
|
|
<div className="flex flex-col sm:flex-row items-center justify-center gap-4 mb-12">
|
|
<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="mb-10 rounded-2xl border border-blue-200/70 dark:border-blue-800/70 bg-linear-to-r from-blue-50 to-white dark:from-blue-950/30 dark:to-gray-900 px-5 py-4 max-w-3xl mx-auto text-left sm:text-center">
|
|
<p className="text-sm text-gray-700 dark:text-gray-300 leading-7">
|
|
{isZh
|
|
? '从 Claude Desktop、Copilot 或其他本地 Agent 直接发起浏览器任务？'
|
|
: 'Using Claude Desktop, Copilot, or another local agent? Connect it to the extension with the MCP server.'}
|
|
</p>
|
|
<p>
|
|
<Link
|
|
href="/docs/features/mcp-server"
|
|
className="font-medium text-blue-700 dark:text-blue-300 underline underline-offset-4"
|
|
>
|
|
{isZh ? '查看 MCP 文档' : 'Read the MCP docs'}
|
|
</Link>
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid sm:grid-cols-3 gap-5 text-left max-w-3xl mx-auto">
|
|
{[
|
|
{
|
|
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 a WebPage',
|
|
desc: isZh
|
|
? '在页面 JS 中发起任务，驱动整个浏览器完成跨标签操作'
|
|
: 'Trigger tasks from in-page JS to drive the entire browser across tabs',
|
|
},
|
|
{
|
|
title: isZh ? '外部发起任务' : 'External Caller',
|
|
desc: isZh
|
|
? '页面 JS、本地 Agent 或云端 Agent 均可通过扩展发起任务'
|
|
: 'Local agents and cloud agents can control user browser through the extension',
|
|
},
|
|
].map((item) => (
|
|
<MagicCard
|
|
key={item.title}
|
|
className="rounded-xl"
|
|
gradientColor="#8b5cf620"
|
|
gradientOpacity={0.15}
|
|
>
|
|
<div className="p-5">
|
|
<h3 className="font-semibold text-gray-900 dark:text-white mb-1">{item.title}</h3>
|
|
<p className="text-sm text-gray-600 dark:text-gray-300">{item.desc}</p>
|
|
</div>
|
|
</MagicCard>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|