feat(website): styling
This commit is contained in:
Simon
@@ -85,7 +85,7 @@ export function MagicCard({
|
||||
`,
|
||||
}}
|
||||
/>
|
||||
<div className="bg-background absolute inset-px rounded-[inherit]" />
|
||||
<div className="absolute inset-px rounded-[inherit] bg-white dark:bg-neutral-900" />
|
||||
<motion.div
|
||||
className="pointer-events-none absolute inset-px rounded-[inherit] opacity-0 transition-opacity duration-300 group-hover:opacity-100"
|
||||
style={{
|
||||
|
||||
@@ -1,163 +1,229 @@
|
||||
import { Bot, Box, MessageSquare, Shield, Sparkles, Users } from 'lucide-react'
|
||||
|
||||
import { BlurFade } from '../../components/ui/blur-fade'
|
||||
import { Marquee } from '../../components/ui/marquee'
|
||||
import { Highlighter } from '../../components/ui/highlighter'
|
||||
import { MagicCard } from '../../components/ui/magic-card'
|
||||
import { Particles } from '../../components/ui/particles'
|
||||
import { useLanguage } from '../../i18n/context'
|
||||
|
||||
// Word-cloud style: each item has a position (%), size, opacity, and color for a scattered look
|
||||
const LLM_CLOUD: {
|
||||
name: string
|
||||
color: string
|
||||
x: number
|
||||
y: number
|
||||
size: number
|
||||
opacity: number
|
||||
}[] = [
|
||||
{ name: 'OpenAI', color: '#10b981', x: 18, y: 22, size: 1.5, opacity: 1 },
|
||||
{ name: 'Claude', color: '#f97316', x: 62, y: 15, size: 1.35, opacity: 0.95 },
|
||||
{ name: 'Qwen', color: '#8b5cf6', x: 38, y: 50, size: 1.8, opacity: 0.9 },
|
||||
{ name: 'Gemini', color: '#3b82f6', x: 68, y: 48, size: 1.2, opacity: 0.85 },
|
||||
{ name: 'DeepSeek', color: '#06b6d4', x: 10, y: 65, size: 1.1, opacity: 0.8 },
|
||||
{ name: 'Grok', color: '#f43f5e', x: 52, y: 78, size: 1.0, opacity: 0.75 },
|
||||
{ name: 'Ollama', color: '#9ca3af', x: 82, y: 25, size: 1.1, opacity: 0.8 },
|
||||
{ name: 'Kimi', color: '#14b8a6', x: 30, y: 82, size: 0.85, opacity: 0.6 },
|
||||
{ name: 'GLM', color: '#f59e0b', x: 70, y: 72, size: 0.85, opacity: 0.55 },
|
||||
{ name: 'LLaMA', color: '#60a5fa', x: 88, y: 70, size: 0.8, opacity: 0.45 },
|
||||
]
|
||||
|
||||
const CARD_HEIGHT = 'h-72'
|
||||
|
||||
export default function FeaturesSection() {
|
||||
const { isZh } = useLanguage()
|
||||
|
||||
return (
|
||||
<section className="px-6 py-14" aria-labelledby="features-heading">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 auto-rows-[22rem]">
|
||||
{/* Zero Infrastructure (2-col) */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 auto-rows-[18rem]">
|
||||
{/* Row 1: Zero Infrastructure (2col) + Privacy (1col) */}
|
||||
<BlurFade inView className="col-span-1 md:col-span-2">
|
||||
<div className="group relative h-full overflow-hidden rounded-2xl bg-white/80 dark:bg-gray-900/80 backdrop-blur-xl border border-gray-200/60 dark:border-white/8 [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset] hover:shadow-xl transition-all duration-500 flex flex-col">
|
||||
<div className="flex-1 p-8 flex flex-col justify-center">
|
||||
<div className="space-y-3 mb-6">
|
||||
{[
|
||||
'pip install browser-use playwright',
|
||||
'docker run -p 3000:3000 playwright-mcp',
|
||||
'const browser = await chromium.launch()',
|
||||
].map((cmd) => (
|
||||
<div
|
||||
key={cmd}
|
||||
className="flex items-center gap-2.5 font-mono text-sm text-gray-400 dark:text-gray-600 line-through decoration-red-400/40 truncate"
|
||||
>
|
||||
<span className="text-red-400/60 text-xs shrink-0">✗</span>
|
||||
{cmd}
|
||||
<MagicCard
|
||||
className="h-full rounded-2xl"
|
||||
gradientFrom="#3b82f6"
|
||||
gradientTo="#06b6d4"
|
||||
gradientColor="#3b82f6"
|
||||
gradientOpacity={0.15}
|
||||
>
|
||||
<div className={`flex ${CARD_HEIGHT} flex-col`}>
|
||||
<div className="flex-1 p-7 flex flex-col justify-center">
|
||||
<div className="space-y-2.5 mb-5">
|
||||
{[
|
||||
'pip install browser-use playwright',
|
||||
'docker run -p 3000:3000 playwright-mcp',
|
||||
'const browser = await chromium.launch()',
|
||||
].map((cmd) => (
|
||||
<div
|
||||
key={cmd}
|
||||
className="font-mono text-sm text-white-400 dark:text-gray-300 truncate"
|
||||
>
|
||||
<Highlighter
|
||||
action="strike-through"
|
||||
color="#ef4444aa"
|
||||
strokeWidth={1.5}
|
||||
// multiline={false}
|
||||
isView
|
||||
>
|
||||
{cmd}
|
||||
</Highlighter>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="bg-emerald-50 dark:bg-emerald-950/30 border border-emerald-200/60 dark:border-emerald-700/40 rounded-xl px-5 py-3 font-mono text-sm text-emerald-700 dark:text-emerald-400 flex items-center gap-2.5">
|
||||
<span className="text-emerald-500 text-xs shrink-0">✓</span>
|
||||
{'<script src="page-agent.js"></script>'}
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-7 pb-5">
|
||||
<div className="flex items-center gap-2.5 mb-1">
|
||||
<Box className="w-5 h-5 text-blue-500" />
|
||||
<h3 className="font-semibold text-lg text-gray-900 dark:text-white">
|
||||
{isZh ? '零基建集成' : 'Zero Infrastructure'}
|
||||
</h3>
|
||||
</div>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-300 leading-relaxed">
|
||||
{isZh
|
||||
? '无需 Python、无头浏览器、服务端部署。一行 script 标签搞定。'
|
||||
: "No Python. No headless browser. No server. One script tag — that's it."}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</MagicCard>
|
||||
</BlurFade>
|
||||
|
||||
<BlurFade inView delay={0.1} className="col-span-1">
|
||||
<MagicCard
|
||||
className="h-full rounded-2xl"
|
||||
gradientFrom="#8b5cf6"
|
||||
gradientTo="#a855f7"
|
||||
gradientColor="#8b5cf6"
|
||||
gradientOpacity={0.12}
|
||||
>
|
||||
<div className={`flex ${CARD_HEIGHT} flex-col`}>
|
||||
<div className="flex-1 relative overflow-hidden">
|
||||
<Particles
|
||||
className="absolute inset-0"
|
||||
quantity={40}
|
||||
staticity={50}
|
||||
ease={80}
|
||||
color="#8b5cf6"
|
||||
/>
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<div className="w-16 h-16 rounded-2xl bg-purple-500/10 dark:bg-purple-500/20 backdrop-blur-sm flex items-center justify-center ring-1 ring-purple-500/20">
|
||||
<Shield className="w-8 h-8 text-purple-500" strokeWidth={1.5} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-6 pb-5">
|
||||
<h3 className="font-semibold text-lg text-gray-900 dark:text-white mb-1">
|
||||
{isZh ? '隐私优先' : 'Privacy by Default'}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-300 leading-relaxed">
|
||||
{isZh
|
||||
? '浏览器内运行，数据完全由你掌控。'
|
||||
: 'Runs in the browser. You control your data, always.'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</MagicCard>
|
||||
</BlurFade>
|
||||
|
||||
{/* Row 2: Human-in-the-Loop (1col) + LLM (2col) */}
|
||||
<BlurFade inView delay={0.15} className="col-span-1">
|
||||
<MagicCard
|
||||
className="h-full rounded-2xl"
|
||||
gradientFrom="#3b82f6"
|
||||
gradientTo="#8b5cf6"
|
||||
gradientColor="#6366f1"
|
||||
gradientOpacity={0.12}
|
||||
>
|
||||
<div className={`flex ${CARD_HEIGHT} flex-col`}>
|
||||
<div className="flex-1 p-5 flex flex-col justify-center max-w-xs mx-auto w-full">
|
||||
<div className="flex gap-2 mb-2.5">
|
||||
<div className="shrink-0 w-6 h-6 rounded-full bg-purple-100 dark:bg-purple-900/50 flex items-center justify-center">
|
||||
<Bot className="w-3.5 h-3.5 text-purple-600 dark:text-purple-400" />
|
||||
</div>
|
||||
<div className="bg-gray-100 dark:bg-white/10 rounded-2xl rounded-tl-md px-3.5 py-2 text-sm text-gray-700 dark:text-gray-200">
|
||||
{isZh ? '找到 3 条匹配记录。选择哪一条？' : 'Found 3 matches. Which one?'}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2 justify-end mb-2.5">
|
||||
<div className="bg-blue-500 rounded-2xl rounded-tr-md px-3.5 py-2 text-sm text-white">
|
||||
{isZh ? '第二条' : 'The second one.'}
|
||||
</div>
|
||||
<div className="shrink-0 w-6 h-6 rounded-full bg-blue-100 dark:bg-blue-900/50 flex items-center justify-center">
|
||||
<Users className="w-3.5 h-3.5 text-blue-600 dark:text-blue-400" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<div className="shrink-0 w-6 h-6 rounded-full bg-emerald-100 dark:bg-emerald-900/50 flex items-center justify-center text-emerald-600 dark:text-emerald-400 text-xs font-bold">
|
||||
✓
|
||||
</div>
|
||||
<div className="bg-gray-100 dark:bg-white/10 rounded-2xl rounded-tl-md px-3.5 py-2 text-sm text-gray-700 dark:text-gray-200">
|
||||
{isZh ? '已选择并提交！' : 'Done! Selected and submitted.'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-5 pb-5">
|
||||
<div className="flex items-center gap-2.5 mb-1">
|
||||
<MessageSquare className="w-5 h-5 text-blue-500" />
|
||||
<h3 className="font-semibold text-lg text-gray-900 dark:text-white">
|
||||
{isZh ? '人机协同' : 'Human-in-the-Loop'}
|
||||
</h3>
|
||||
</div>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-300 leading-relaxed">
|
||||
{isZh
|
||||
? '内置协作面板，AI 操作前先确认——不是盲目自动化。'
|
||||
: 'Built-in collaborative panel. Agent asks before acting — not blind automation.'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</MagicCard>
|
||||
</BlurFade>
|
||||
|
||||
<BlurFade inView delay={0.2} className="col-span-1 md:col-span-2">
|
||||
<MagicCard
|
||||
className="h-full rounded-2xl"
|
||||
gradientFrom="#f59e0b"
|
||||
gradientTo="#f97316"
|
||||
gradientColor="#f59e0b"
|
||||
gradientOpacity={0.12}
|
||||
>
|
||||
<div className={`flex ${CARD_HEIGHT} flex-col`}>
|
||||
<div className="flex-1 overflow-hidden relative">
|
||||
{LLM_CLOUD.map((item) => (
|
||||
<span
|
||||
key={item.name}
|
||||
className="absolute font-semibold whitespace-nowrap select-none"
|
||||
style={{
|
||||
left: `${item.x}%`,
|
||||
top: `${item.y}%`,
|
||||
fontSize: `${item.size}rem`,
|
||||
color: item.color,
|
||||
opacity: item.opacity,
|
||||
transform: 'translate(-50%, -50%)',
|
||||
textShadow: `0 0 80px ${item.color}99`,
|
||||
}}
|
||||
>
|
||||
{item.name}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
<div className="bg-emerald-50 dark:bg-emerald-950/20 border border-emerald-200/60 dark:border-emerald-800/30 rounded-xl px-5 py-3.5 font-mono text-sm text-emerald-700 dark:text-emerald-400 flex items-center gap-2.5">
|
||||
<span className="text-emerald-500 text-xs shrink-0">✓</span>
|
||||
{'<script src="page-agent.js"></script>'}
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-8 pb-6">
|
||||
<div className="flex items-center gap-2.5 mb-1.5">
|
||||
<Box className="w-5 h-5 text-blue-500" />
|
||||
<h3 className="font-semibold text-lg text-gray-900 dark:text-white">
|
||||
{isZh ? '零基建集成' : 'Zero Infrastructure'}
|
||||
</h3>
|
||||
</div>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400 leading-relaxed">
|
||||
{isZh
|
||||
? '无需 Python、无头浏览器、服务端部署。一行 script 标签搞定。'
|
||||
: "No Python. No headless browser. No server. One script tag — that's it."}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</BlurFade>
|
||||
|
||||
{/* Privacy by Default (1-col) */}
|
||||
<BlurFade inView delay={0.1} className="col-span-1">
|
||||
<div className="group relative h-full overflow-hidden rounded-2xl bg-white/80 dark:bg-gray-900/80 backdrop-blur-xl border border-gray-200/60 dark:border-white/8 [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset] hover:shadow-xl transition-all duration-500 flex flex-col">
|
||||
<div className="flex-1 relative overflow-hidden">
|
||||
<Particles
|
||||
className="absolute inset-0"
|
||||
quantity={40}
|
||||
staticity={50}
|
||||
ease={80}
|
||||
color="#8b5cf6"
|
||||
/>
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<div className="w-20 h-20 rounded-2xl bg-purple-500/10 dark:bg-purple-500/20 backdrop-blur-sm flex items-center justify-center ring-1 ring-purple-500/20">
|
||||
<Shield className="w-10 h-10 text-purple-500" strokeWidth={1.5} />
|
||||
<div className="px-7 pb-5">
|
||||
<div className="flex items-center gap-2.5 mb-1">
|
||||
<Sparkles className="w-5 h-5 text-amber-500" />
|
||||
<h3 className="font-semibold text-lg text-gray-900 dark:text-white">
|
||||
{isZh ? '兼容多种 LLM' : 'Bring Your Own LLMs'}
|
||||
</h3>
|
||||
</div>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-300 leading-relaxed">
|
||||
{isZh
|
||||
? 'OpenAI、Claude、DeepSeek、Qwen 等，或通过 Ollama 完全离线。'
|
||||
: 'OpenAI, Claude, DeepSeek, Qwen, and more — or fully offline via Ollama.'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-6 pb-6">
|
||||
<h3 className="font-semibold text-lg text-gray-900 dark:text-white mb-1.5">
|
||||
{isZh ? '隐私优先' : 'Privacy by Default'}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400 leading-relaxed">
|
||||
{isZh
|
||||
? '浏览器内运行，数据完全由你掌控。'
|
||||
: 'Runs in the browser. You control your data, always.'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</BlurFade>
|
||||
|
||||
{/* Any LLM (1-col) */}
|
||||
<BlurFade inView delay={0.15} className="col-span-1">
|
||||
<div className="group relative h-full overflow-hidden rounded-2xl bg-white/80 dark:bg-gray-900/80 backdrop-blur-xl border border-gray-200/60 dark:border-white/8 [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset] hover:shadow-xl transition-all duration-500 flex flex-col">
|
||||
<div className="flex-1 relative overflow-hidden">
|
||||
<Marquee vertical pauseOnHover className="h-full [--duration:25s] [--gap:0.75rem]">
|
||||
{['OpenAI', 'Claude', 'DeepSeek', 'Qwen', 'Gemini', 'GLM', 'Ollama', 'Groq'].map(
|
||||
(name) => (
|
||||
<div
|
||||
key={name}
|
||||
className="mx-auto rounded-full bg-gray-100 dark:bg-gray-800 px-4 py-2 text-sm font-medium text-gray-600 dark:text-gray-300 ring-1 ring-gray-200/50 dark:ring-white/5"
|
||||
>
|
||||
{name}
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</Marquee>
|
||||
</div>
|
||||
<div className="px-6 pb-6">
|
||||
<div className="flex items-center gap-2.5 mb-1.5">
|
||||
<Sparkles className="w-5 h-5 text-amber-500" />
|
||||
<h3 className="font-semibold text-lg text-gray-900 dark:text-white">
|
||||
{isZh ? '兼容多种 LLM' : 'Bring Your Own LLMs'}
|
||||
</h3>
|
||||
</div>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400 leading-relaxed">
|
||||
{isZh
|
||||
? 'OpenAI、Claude、DeepSeek、Qwen 等，或通过 Ollama 完全离线。'
|
||||
: 'OpenAI, Claude, DeepSeek, Qwen, and more — or fully offline via Ollama.'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</BlurFade>
|
||||
|
||||
{/* Human-in-the-Loop (2-col) */}
|
||||
<BlurFade inView delay={0.2} className="col-span-1 md:col-span-2">
|
||||
<div className="group relative h-full overflow-hidden rounded-2xl bg-white/80 dark:bg-gray-900/80 backdrop-blur-xl border border-gray-200/60 dark:border-white/8 [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset] hover:shadow-xl transition-all duration-500 flex flex-col">
|
||||
<div className="flex-1 p-8 flex flex-col justify-center max-w-md mx-auto w-full">
|
||||
<div className="flex gap-2.5 mb-3">
|
||||
<div className="shrink-0 w-7 h-7 rounded-full bg-purple-100 dark:bg-purple-900/50 flex items-center justify-center">
|
||||
<Bot className="w-4 h-4 text-purple-600 dark:text-purple-400" />
|
||||
</div>
|
||||
<div className="bg-gray-100 dark:bg-gray-800 rounded-2xl rounded-tl-md px-4 py-2.5 text-sm text-gray-700 dark:text-gray-300">
|
||||
{isZh ? '找到 3 条匹配记录。选择哪一条？' : 'Found 3 matches. Which one?'}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2.5 justify-end mb-3">
|
||||
<div className="bg-blue-500 rounded-2xl rounded-tr-md px-4 py-2.5 text-sm text-white">
|
||||
{isZh ? '第二条' : 'The second one.'}
|
||||
</div>
|
||||
<div className="shrink-0 w-7 h-7 rounded-full bg-blue-100 dark:bg-blue-900/50 flex items-center justify-center">
|
||||
<Users className="w-4 h-4 text-blue-600 dark:text-blue-400" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2.5">
|
||||
<div className="shrink-0 w-7 h-7 rounded-full bg-emerald-100 dark:bg-emerald-900/50 flex items-center justify-center text-emerald-600 dark:text-emerald-400 text-xs font-bold">
|
||||
✓
|
||||
</div>
|
||||
<div className="bg-gray-100 dark:bg-gray-800 rounded-2xl rounded-tl-md px-4 py-2.5 text-sm text-gray-700 dark:text-gray-300">
|
||||
{isZh ? '已选择并提交！' : 'Done! Selected and submitted.'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-8 pb-6">
|
||||
<div className="flex items-center gap-2.5 mb-1.5">
|
||||
<MessageSquare className="w-5 h-5 text-blue-500" />
|
||||
<h3 className="font-semibold text-lg text-gray-900 dark:text-white">
|
||||
{isZh ? '人机协同' : 'Human-in-the-Loop'}
|
||||
</h3>
|
||||
</div>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400 leading-relaxed">
|
||||
{isZh
|
||||
? '内置协作面板，AI 操作前先确认——不是盲目自动化。'
|
||||
: 'Built-in collaborative panel. Agent asks before acting — not blind automation.'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</MagicCard>
|
||||
</BlurFade>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -170,7 +170,7 @@ export default function HeroSection() {
|
||||
<div className="flex border-b border-gray-200 dark:border-gray-700">
|
||||
<button
|
||||
onClick={() => setActiveTab('try')}
|
||||
className={`flex-1 px-4 py-4 text-lg font-medium transition-colors duration-200 rounded-tl-2xl ${
|
||||
className={`cursor-pointer 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'
|
||||
@@ -180,7 +180,7 @@ export default function HeroSection() {
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('other')}
|
||||
className={`flex-1 px-4 py-4 text-lg font-medium transition-colors duration-200 rounded-tr-2xl ${
|
||||
className={`cursor-pointer 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'
|
||||
|
||||
@@ -8,10 +8,7 @@ export default function ScenariosSection() {
|
||||
const { isZh } = useLanguage()
|
||||
|
||||
return (
|
||||
<section
|
||||
className="px-6 py-16 bg-white/50 dark:bg-gray-800/50 backdrop-blur-sm"
|
||||
aria-labelledby="scenarios-heading"
|
||||
>
|
||||
<section className="px-6 py-16" aria-labelledby="scenarios-heading">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<BlurFade inView>
|
||||
<div className="text-center mb-12">
|
||||
@@ -25,9 +22,9 @@ export default function ScenariosSection() {
|
||||
</BlurFade>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
{/* Scenario 1: SaaS AI Copilot */}
|
||||
{/* SaaS AI Copilot */}
|
||||
<BlurFade inView delay={0.05}>
|
||||
<div className="group relative overflow-hidden rounded-2xl bg-linear-to-b from-blue-50 to-white dark:from-blue-950/20 dark:to-gray-900 border border-blue-100/80 dark:border-blue-900/30 hover:shadow-xl hover:-translate-y-1 transition-all duration-500">
|
||||
<div className="group relative overflow-hidden rounded-2xl bg-linear-to-b from-blue-50 to-white dark:from-blue-950/40 dark:to-gray-800 border border-blue-200/80 dark:border-blue-800/50 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-500">
|
||||
<div className="p-6 pb-4">
|
||||
<div className="rounded-xl bg-gray-950 p-4 font-mono text-xs leading-6 text-gray-300 overflow-hidden shadow-inner">
|
||||
<div>
|
||||
@@ -60,7 +57,7 @@ export default function ScenariosSection() {
|
||||
{isZh ? 'SaaS AI 副驾驶' : 'SaaS AI Copilot'}
|
||||
</h3>
|
||||
</div>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400 leading-relaxed">
|
||||
<p className="text-sm text-gray-600 dark:text-gray-300 leading-relaxed">
|
||||
{isZh
|
||||
? '几小时内为你的产品加上 AI 副驾驶，不需要重写后端。'
|
||||
: 'Ship an AI copilot in your product in hours, not months. No backend rewrite needed.'}
|
||||
@@ -69,12 +66,12 @@ export default function ScenariosSection() {
|
||||
</div>
|
||||
</BlurFade>
|
||||
|
||||
{/* Scenario 2: Smart Form Filling */}
|
||||
{/* Smart Form Filling */}
|
||||
<BlurFade inView delay={0.1}>
|
||||
<div className="group relative overflow-hidden rounded-2xl bg-linear-to-b from-amber-50 to-white dark:from-amber-950/20 dark:to-gray-900 border border-amber-100/80 dark:border-amber-900/30 hover:shadow-xl hover:-translate-y-1 transition-all duration-500">
|
||||
<div className="group relative overflow-hidden rounded-2xl bg-linear-to-b from-amber-50 to-white dark:from-amber-950/40 dark:to-gray-800 border border-amber-200/80 dark:border-amber-800/50 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-500">
|
||||
<div className="p-6 pb-4">
|
||||
<div className="rounded-xl bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 p-4 shadow-inner space-y-2.5">
|
||||
<div className="flex items-center gap-2 text-xs text-gray-500 bg-amber-50 dark:bg-amber-900/20 rounded-lg px-3 py-2 border border-amber-200/50 dark:border-amber-800/30">
|
||||
<div className="rounded-xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 p-4 shadow-inner space-y-2.5">
|
||||
<div className="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400 bg-amber-50 dark:bg-amber-900/30 rounded-lg px-3 py-2 border border-amber-200/50 dark:border-amber-700/40">
|
||||
<span>🪄</span>
|
||||
<span className="italic">
|
||||
{isZh
|
||||
@@ -83,22 +80,15 @@ export default function ScenariosSection() {
|
||||
</span>
|
||||
</div>
|
||||
{[
|
||||
{
|
||||
label: isZh ? '姓名' : 'Name',
|
||||
value: 'John Smith',
|
||||
},
|
||||
{
|
||||
label: isZh ? '金额' : 'Amount',
|
||||
value: '$342.50',
|
||||
},
|
||||
{
|
||||
label: isZh ? '类目' : 'Category',
|
||||
value: 'Travel',
|
||||
},
|
||||
{ label: isZh ? '姓名' : 'Name', value: 'John Smith' },
|
||||
{ label: isZh ? '金额' : 'Amount', value: '$342.50' },
|
||||
{ label: isZh ? '类目' : 'Category', value: 'Travel' },
|
||||
].map((field) => (
|
||||
<div key={field.label} className="flex items-center gap-2">
|
||||
<span className="text-xs text-gray-400 w-12 shrink-0">{field.label}</span>
|
||||
<div className="flex-1 h-7 bg-gray-50 dark:bg-gray-700 rounded border border-gray-200 dark:border-gray-600 px-2 flex items-center text-xs text-gray-600 dark:text-gray-300">
|
||||
<span className="text-xs text-gray-400 dark:text-gray-500 w-12 shrink-0">
|
||||
{field.label}
|
||||
</span>
|
||||
<div className="flex-1 h-7 bg-gray-50 dark:bg-gray-800 rounded border border-gray-200 dark:border-gray-600 px-2 flex items-center text-xs text-gray-600 dark:text-gray-300">
|
||||
{field.value}
|
||||
</div>
|
||||
<span className="text-emerald-500 text-xs">✓</span>
|
||||
@@ -113,7 +103,7 @@ export default function ScenariosSection() {
|
||||
{isZh ? '智能表单填写' : 'Smart Form Filling'}
|
||||
</h3>
|
||||
</div>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400 leading-relaxed">
|
||||
<p className="text-sm text-gray-600 dark:text-gray-300 leading-relaxed">
|
||||
{isZh
|
||||
? '把 20 次点击变成一句话。ERP、CRM、管理后台的最佳拍档。'
|
||||
: 'Turn 20-click workflows into one sentence. Perfect for ERP, CRM, and admin systems.'}
|
||||
@@ -122,13 +112,13 @@ export default function ScenariosSection() {
|
||||
</div>
|
||||
</BlurFade>
|
||||
|
||||
{/* Scenario 3: Accessibility */}
|
||||
{/* Accessibility */}
|
||||
<BlurFade inView delay={0.15}>
|
||||
<div className="group relative overflow-hidden rounded-2xl bg-linear-to-b from-purple-50 to-white dark:from-purple-950/20 dark:to-gray-900 border border-purple-100/80 dark:border-purple-900/30 hover:shadow-xl hover:-translate-y-1 transition-all duration-500">
|
||||
<div className="group relative overflow-hidden rounded-2xl bg-linear-to-b from-purple-50 to-white dark:from-purple-950/40 dark:to-gray-800 border border-purple-200/80 dark:border-purple-800/50 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-500">
|
||||
<div className="p-6 pb-4 flex flex-col items-center justify-center">
|
||||
<div className="w-full rounded-xl bg-purple-50 dark:bg-purple-900/20 p-5 space-y-3">
|
||||
<div className="w-full rounded-xl bg-purple-50 dark:bg-purple-900/30 p-5 space-y-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-8 h-8 rounded-full bg-purple-500/10 flex items-center justify-center text-base">
|
||||
<div className="w-8 h-8 rounded-full bg-purple-500/10 dark:bg-purple-500/20 flex items-center justify-center text-base">
|
||||
🎤
|
||||
</div>
|
||||
<div className="text-sm text-purple-700 dark:text-purple-300 italic">
|
||||
@@ -141,7 +131,7 @@ export default function ScenariosSection() {
|
||||
<div className="w-1.5 h-1.5 bg-purple-400 rounded-full animate-pulse [animation-delay:0.2s]"></div>
|
||||
<div className="w-1.5 h-1.5 bg-purple-400 rounded-full animate-pulse [animation-delay:0.4s]"></div>
|
||||
</div>
|
||||
<span className="text-xs text-purple-500">
|
||||
<span className="text-xs text-purple-500 dark:text-purple-400">
|
||||
{isZh ? 'AI 正在执行...' : 'AI executing...'}
|
||||
</span>
|
||||
</div>
|
||||
@@ -157,7 +147,7 @@ export default function ScenariosSection() {
|
||||
{isZh ? '无障碍增强' : 'Accessibility'}
|
||||
</h3>
|
||||
</div>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400 leading-relaxed">
|
||||
<p className="text-sm text-gray-600 dark:text-gray-300 leading-relaxed">
|
||||
{isZh
|
||||
? '用自然语言让任何网页无障碍。语音指令、屏幕阅读器，零门槛。'
|
||||
: 'Make any web app accessible through natural language. Voice, screen readers, zero barrier.'}
|
||||
|
||||
Reference in New Issue
Block a user