mirror of
https://github.com/musistudio/claude-code-router.git
synced 2026-02-02 23:00:50 +08:00
671 lines
29 KiB
TypeScript
671 lines
29 KiB
TypeScript
import Link from '@docusaurus/Link';
|
||
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
|
||
import Layout from '@theme/Layout';
|
||
import Heading from '@theme/Heading';
|
||
|
||
function HomepageHeader() {
|
||
const {siteConfig, i18n} = useDocusaurusContext();
|
||
const currentLocale = i18n.currentLocale;
|
||
|
||
const content = {
|
||
en: {
|
||
title: 'Route Claude Code',
|
||
highlight: 'to Any LLM',
|
||
subtitle: 'Use Claude Code without an Anthropic account. Connect to DeepSeek, Gemini, Groq, and more.',
|
||
getStarted: 'Get Started',
|
||
github: 'View on GitHub',
|
||
},
|
||
'zh-CN': {
|
||
title: '将 Claude Code',
|
||
highlight: '路由到任何 LLM',
|
||
subtitle: '无需 Anthropic 账户即可使用 Claude Code。支持连接 DeepSeek、Gemini、Groq 等提供商。',
|
||
getStarted: '开始使用',
|
||
github: '查看 GitHub',
|
||
}
|
||
};
|
||
|
||
const t = content[currentLocale as keyof typeof content] || content.en;
|
||
|
||
return (
|
||
<header className="relative min-h-[90vh] flex items-center justify-center overflow-hidden bg-gradient-to-b from-gray-50 to-white">
|
||
{/* Background Elements */}
|
||
<div
|
||
className="absolute inset-0"
|
||
style={{
|
||
backgroundImage: `
|
||
linear-gradient(rgba(204, 124, 94, 0.03) 1px, transparent 1px),
|
||
linear-gradient(90deg, rgba(204, 124, 94, 0.03) 1px, transparent 1px)
|
||
`,
|
||
backgroundSize: '50px 50px'
|
||
}}
|
||
></div>
|
||
|
||
{/* Hero Content */}
|
||
<div className="relative z-10 container mx-auto px-4 py-20">
|
||
<div className="max-w-4xl mx-auto text-center">
|
||
{/* Badge */}
|
||
<div className="animate-fade-in-up inline-flex items-center gap-2 px-4 py-2 bg-primary text-white rounded-full text-sm font-semibold mb-8">
|
||
<span className="animate-pulse">●</span>
|
||
<span>{currentLocale === 'zh-CN' ? '开源免费' : 'Open Source'}</span>
|
||
</div>
|
||
|
||
{/* Title */}
|
||
<Heading
|
||
as="h1"
|
||
className="text-5xl sm:text-6xl md:text-7xl lg:text-8xl font-extrabold mb-6 leading-tight animate-fade-in-up"
|
||
style={{ animationDelay: '0.1s' }}
|
||
>
|
||
<span className="text-gray-900">Route </span>
|
||
<span className="text-primary">Claude Code</span>
|
||
<br />
|
||
<span className="text-gray-900">{t.highlight}</span>
|
||
</Heading>
|
||
|
||
{/* Subtitle */}
|
||
<p
|
||
className="text-lg sm:text-xl md:text-2xl text-gray-600 mb-10 leading-relaxed max-w-3xl mx-auto animate-fade-in-up"
|
||
style={{ animationDelay: '0.2s' }}
|
||
>
|
||
{t.subtitle}
|
||
</p>
|
||
|
||
{/* CTA Buttons */}
|
||
<div
|
||
className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-12 animate-fade-in-up"
|
||
style={{ animationDelay: '0.3s' }}
|
||
>
|
||
<Link
|
||
className="px-6 sm:px-8 py-3 sm:py-4 bg-primary text-white hover:text-white rounded-lg text-base sm:text-lg font-semibold transition-all duration-300 shadow-lg hover:shadow-xl hover:scale-105"
|
||
to={currentLocale === 'zh-CN' ? '/zh-CN/docs/intro' : '/docs/intro'}
|
||
>
|
||
{t.getStarted}
|
||
</Link>
|
||
<Link
|
||
className="px-6 sm:px-8 py-3 sm:py-4 bg-white hover:bg-gray-50 text-gray-900 border border-gray-300 rounded-lg text-base sm:text-lg font-semibold transition-all duration-300 hover:border-primary hover:scale-105"
|
||
to="https://github.com/musistudio/claude-code-router"
|
||
>
|
||
{t.github}
|
||
</Link>
|
||
</div>
|
||
|
||
{/* Install Command */}
|
||
<div
|
||
className="animate-fade-in-up max-w-3xl mx-auto mt-16"
|
||
style={{ animationDelay: '0.4s' }}
|
||
>
|
||
<div
|
||
className="rounded-xl overflow-hidden"
|
||
style={{
|
||
background: 'linear-gradient(145deg, #1e1e1e 0%, #0d0d0d 100%)',
|
||
boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1)',
|
||
}}
|
||
>
|
||
{/* Terminal Header */}
|
||
<div
|
||
className="px-5 py-3 flex items-center justify-between"
|
||
style={{
|
||
background: 'linear-gradient(180deg, #2a2a2a 0%, #1f1f1f 100%)',
|
||
borderBottom: '1px solid rgba(255, 255, 255, 0.1)',
|
||
}}
|
||
>
|
||
<div className="flex items-center gap-2">
|
||
<div className="flex gap-2">
|
||
<div className="w-3 h-3 rounded-full bg-red-500 hover:bg-red-400 transition-colors"></div>
|
||
<div className="w-3 h-3 rounded-full bg-yellow-500 hover:bg-yellow-400 transition-colors"></div>
|
||
<div className="w-3 h-3 rounded-full bg-green-500 hover:bg-green-400 transition-colors"></div>
|
||
</div>
|
||
<span className="ml-4 text-xs text-gray-400 font-mono flex items-center gap-2">
|
||
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
|
||
<path fillRule="evenodd" d="M2 5a2 2 0 012-2h12a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V5zm3.293 1.293a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 01-1.414-1.414L7.586 10 5.293 7.707a1 1 0 010-1.414zM11 12a1 1 0 100 2h3a1 1 0 100-2h-3z" clipRule="evenodd" />
|
||
</svg>
|
||
terminal
|
||
</span>
|
||
</div>
|
||
|
||
{/* Copy Button */}
|
||
<button
|
||
onClick={() => navigator.clipboard.writeText('npm install -g @musistudio/claude-code-router')}
|
||
className="flex items-center gap-2 px-3 py-1.5 rounded-lg text-xs font-mono transition-all duration-200 hover:bg-white/10"
|
||
style={{ color: '#9ca3af' }}
|
||
title="Copy to clipboard"
|
||
>
|
||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
|
||
</svg>
|
||
<span>Copy</span>
|
||
</button>
|
||
</div>
|
||
|
||
{/* Terminal Body */}
|
||
<div className="p-8" style={{ background: '#0d0d0d' }}>
|
||
<div className="font-mono text-base md:text-lg leading-relaxed text-left">
|
||
{/* Prompt */}
|
||
<div className="flex items-start gap-3">
|
||
<span style={{ color: '#22c55e', fontWeight: '600' }}>$</span>
|
||
<span className="flex-1">
|
||
<span style={{ color: '#60a5fa' }}>npm</span>
|
||
<span style={{ color: '#f97583', marginLeft: '0.5rem' }}>install</span>
|
||
<span style={{ color: '#fbbf24', marginLeft: '0.5rem' }}>-g</span>
|
||
<span style={{ color: '#e5e7eb', marginLeft: '0.5rem' }}>
|
||
@musistudio/claude-code-router
|
||
</span>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Scroll Indicator */}
|
||
<div className="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce">
|
||
<svg className="w-6 h-6 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 14l-7 7m0 0l-7-7m7 7V3" />
|
||
</svg>
|
||
</div>
|
||
</header>
|
||
);
|
||
}
|
||
|
||
function FeatureSection() {
|
||
const {i18n} = useDocusaurusContext();
|
||
const currentLocale = i18n.currentLocale;
|
||
|
||
const content = {
|
||
en: {
|
||
title: 'Why Claude Code Router?',
|
||
features: [
|
||
{
|
||
emoji: '⚡',
|
||
title: 'Lightning Fast',
|
||
description: 'Get started in minutes with just one command. No complicated configuration required.'
|
||
},
|
||
{
|
||
emoji: '🎯',
|
||
title: 'Smart Routing',
|
||
description: 'Automatically route requests to the best model based on context length, task type, and custom rules.'
|
||
},
|
||
{
|
||
emoji: '🔌',
|
||
title: 'Multi-Provider',
|
||
description: 'Support for DeepSeek, Gemini, Groq, OpenRouter, and more. Easy to extend with custom transformers.'
|
||
},
|
||
{
|
||
emoji: '💰',
|
||
title: 'Cost Effective',
|
||
description: 'Use more affordable models for routine tasks while reserving Claude for complex scenarios.'
|
||
},
|
||
{
|
||
emoji: '🛠️',
|
||
title: 'Agent System',
|
||
description: 'Extendable agent architecture for custom tools and workflows. Built-in support for image tasks.'
|
||
},
|
||
{
|
||
emoji: '🔧',
|
||
title: 'Highly Customizable',
|
||
description: 'Configure routing per project, set up transformers, and fine-tune every aspect of your workflow.'
|
||
}
|
||
]
|
||
},
|
||
'zh-CN': {
|
||
title: '为什么选择 Claude Code Router？',
|
||
features: [
|
||
{
|
||
emoji: '⚡',
|
||
title: '快速上手',
|
||
description: '只需一条命令即可开始使用，无需复杂配置。'
|
||
},
|
||
{
|
||
emoji: '🎯',
|
||
title: '智能路由',
|
||
description: '基于上下文长度、任务类型和自定义规则，自动将请求路由到最佳模型。'
|
||
},
|
||
{
|
||
emoji: '🔌',
|
||
title: '多提供商支持',
|
||
description: '支持 DeepSeek、Gemini、Groq、OpenRouter 等多个提供商，易于扩展。'
|
||
},
|
||
{
|
||
emoji: '💰',
|
||
title: '节省成本',
|
||
description: '常规任务使用更经济的模型，复杂场景再使用 Claude。'
|
||
},
|
||
{
|
||
emoji: '🛠️',
|
||
title: 'Agent 系统',
|
||
description: '可扩展的 agent 架构，支持自定义工具和工作流。内置图像任务支持。'
|
||
},
|
||
{
|
||
emoji: '🔧',
|
||
title: '高度可定制',
|
||
description: '按项目配置路由、设置转换器，微调工作流的每个细节。'
|
||
}
|
||
]
|
||
}
|
||
};
|
||
|
||
const t = content[currentLocale as keyof typeof content] || content.en;
|
||
|
||
return (
|
||
<section className="py-16 sm:py-24 bg-white">
|
||
<div className="container mx-auto px-4">
|
||
<div className="text-center mb-12 sm:mb-16">
|
||
<Heading as="h2" className="text-3xl sm:text-4xl md:text-5xl font-bold text-gray-900 mb-4">
|
||
{t.title}
|
||
</Heading>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 max-w-7xl mx-auto">
|
||
{t.features.map((feature, idx) => (
|
||
<div
|
||
key={idx}
|
||
className="group p-6 sm:p-8 bg-white rounded-2xl border border-gray-200 hover:border-primary transition-all duration-300 hover:shadow-2xl hover:-translate-y-2"
|
||
style={{ animationDelay: `${idx * 0.1}s` }}
|
||
>
|
||
<div className="text-4xl sm:text-5xl mb-4">{feature.emoji}</div>
|
||
<Heading as="h3" className="text-lg sm:text-xl font-bold text-gray-900 mb-3">
|
||
{feature.title}
|
||
</Heading>
|
||
<p className="text-gray-600 leading-relaxed text-sm sm:text-base">
|
||
{feature.description}
|
||
</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|
||
|
||
function CodeDemo() {
|
||
const {i18n} = useDocusaurusContext();
|
||
const currentLocale = i18n.currentLocale;
|
||
|
||
const content = {
|
||
en: {
|
||
title: 'Simple Configuration',
|
||
subtitle: 'Configure your providers and routing logic with a single JSON file.'
|
||
},
|
||
'zh-CN': {
|
||
title: '简单配置',
|
||
subtitle: '使用单个 JSON 文件配置提供商和路由逻辑。'
|
||
}
|
||
};
|
||
|
||
const t = content[currentLocale as keyof typeof content] || content.en;
|
||
|
||
return (
|
||
<section className="py-16 sm:py-24 bg-gray-50">
|
||
<div className="container mx-auto px-4">
|
||
<div className="text-center mb-12 sm:mb-16">
|
||
<Heading as="h2" className="text-3xl sm:text-4xl md:text-5xl font-bold text-gray-900 mb-4">
|
||
{t.title}
|
||
</Heading>
|
||
<p className="text-lg sm:text-xl text-gray-600 max-w-2xl mx-auto">
|
||
{t.subtitle}
|
||
</p>
|
||
</div>
|
||
|
||
<div className="max-w-4xl mx-auto">
|
||
<div
|
||
className="rounded-2xl overflow-hidden shadow-2xl"
|
||
style={{
|
||
background: '#1a1a1a',
|
||
border: '2px solid #374151'
|
||
}}
|
||
>
|
||
<div
|
||
className="px-6 py-4 flex items-center gap-2"
|
||
style={{ background: '#2d2d2d', borderBottom: '1px solid #374151' }}
|
||
>
|
||
<div className="w-3 h-3 rounded-full bg-red-500"></div>
|
||
<div className="w-3 h-3 rounded-full bg-yellow-500"></div>
|
||
<div className="w-3 h-3 rounded-full bg-green-500"></div>
|
||
<span className="ml-4 text-sm text-gray-300 font-mono">config.json</span>
|
||
</div>
|
||
<pre className="p-8 overflow-x-auto text-sm md:text-base" style={{ background: '#1a1a1a' }}>
|
||
<code className="font-mono" style={{ lineHeight: '1.6' }}>
|
||
<span style={{ color: '#f97583' }}>{'{'}</span>
|
||
<span style={{ color: '#e5e7eb' }}>
|
||
{'\n '}
|
||
<span style={{ color: '#79c0ff' }}>"Providers"</span>
|
||
<span style={{ color: '#f97583' }}>: </span>
|
||
<span style={{ color: '#f97583' }}>[</span>
|
||
{'\n '}
|
||
<span style={{ color: '#f97583' }}>{'{'}</span>
|
||
{'\n '}
|
||
<span style={{ color: '#79c0ff' }}>"NAME"</span>
|
||
<span style={{ color: '#f97583' }}>: </span>
|
||
<span style={{ color: '#a5d6ff' }}>"deepseek"</span>
|
||
<span style={{ color: '#f97583' }}>,</span>
|
||
{'\n '}
|
||
<span style={{ color: '#79c0ff' }}>"HOST"</span>
|
||
<span style={{ color: '#f97583' }}>: </span>
|
||
<span style={{ color: '#a5d6ff' }}>"https://api.deepseek.com"</span>
|
||
<span style={{ color: '#f97583' }}>,</span>
|
||
{'\n '}
|
||
<span style={{ color: '#79c0ff' }}>"APIKEY"</span>
|
||
<span style={{ color: '#f97583' }}>: </span>
|
||
<span style={{ color: '#a5d6ff' }}>"your-api-key"</span>
|
||
<span style={{ color: '#f97583' }}>,</span>
|
||
{'\n '}
|
||
<span style={{ color: '#79c0ff' }}>"MODELS"</span>
|
||
<span style={{ color: '#f97583' }}>: </span>
|
||
<span style={{ color: '#f97583' }}>[</span>
|
||
<span style={{ color: '#a5d6ff' }}>"deepseek-chat"</span>
|
||
<span style={{ color: '#f97583' }}>, </span>
|
||
<span style={{ color: '#a5d6ff' }}>"deepseek-coder"</span>
|
||
<span style={{ color: '#f97583' }}>]</span>
|
||
{'\n '}
|
||
<span style={{ color: '#f97583' }}>{'}'}</span>
|
||
<span style={{ color: '#f97583' }}>,</span>
|
||
{'\n '}
|
||
<span style={{ color: '#f97583' }}>{'{'}</span>
|
||
{'\n '}
|
||
<span style={{ color: '#79c0ff' }}>"NAME"</span>
|
||
<span style={{ color: '#f97583' }}>: </span>
|
||
<span style={{ color: '#a5d6ff' }}>"groq"</span>
|
||
<span style={{ color: '#f97583' }}>,</span>
|
||
{'\n '}
|
||
<span style={{ color: '#79c0ff' }}>"HOST"</span>
|
||
<span style={{ color: '#f97583' }}>: </span>
|
||
<span style={{ color: '#a5d6ff' }}>"https://api.groq.com/openai/v1"</span>
|
||
<span style={{ color: '#f97583' }}>,</span>
|
||
{'\n '}
|
||
<span style={{ color: '#79c0ff' }}>"APIKEY"</span>
|
||
<span style={{ color: '#f97583' }}>: </span>
|
||
<span style={{ color: '#a5d6ff' }}>"your-groq-key"</span>
|
||
<span style={{ color: '#f97583' }}>,</span>
|
||
{'\n '}
|
||
<span style={{ color: '#79c0ff' }}>"MODELS"</span>
|
||
<span style={{ color: '#f97583' }}>: </span>
|
||
<span style={{ color: '#f97583' }}>[</span>
|
||
<span style={{ color: '#a5d6ff' }}>"llama-3.3-70b-versatile"</span>
|
||
<span style={{ color: '#f97583' }}>]</span>
|
||
{'\n '}
|
||
<span style={{ color: '#f97583' }}>{'}'}</span>
|
||
{'\n '}
|
||
<span style={{ color: '#f97583' }}>]</span>
|
||
<span style={{ color: '#f97583' }}>,</span>
|
||
{'\n '}
|
||
<span style={{ color: '#79c0ff' }}>"Router"</span>
|
||
<span style={{ color: '#f97583' }}>: </span>
|
||
<span style={{ color: '#f97583' }}>{'{'}</span>
|
||
{'\n '}
|
||
<span style={{ color: '#79c0ff' }}>"default"</span>
|
||
<span style={{ color: '#f97583' }}>: </span>
|
||
<span style={{ color: '#a5d6ff' }}>"deepseek,deepseek-chat"</span>
|
||
<span style={{ color: '#f97583' }}>,</span>
|
||
{'\n '}
|
||
<span style={{ color: '#79c0ff' }}>"background"</span>
|
||
<span style={{ color: '#f97583' }}>: </span>
|
||
<span style={{ color: '#a5d6ff' }}>"groq,llama-3.3-70b-versatile"</span>
|
||
{'\n '}
|
||
<span style={{ color: '#f97583' }}>{'}'}</span>
|
||
{'\n'}
|
||
<span style={{ color: '#f97583' }}>{'}'}</span>
|
||
</span>
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|
||
|
||
function UseCases() {
|
||
const {i18n} = useDocusaurusContext();
|
||
const currentLocale = i18n.currentLocale;
|
||
|
||
const content = {
|
||
en: {
|
||
title: 'Perfect For',
|
||
subtitle: 'See how Claude Code Router fits your workflow',
|
||
cases: [
|
||
{
|
||
icon: '💰',
|
||
title: 'Cost-Conscious Developers',
|
||
description: 'Reduce API costs by 10x while maintaining quality for most tasks'
|
||
},
|
||
{
|
||
icon: '🔒',
|
||
title: 'Privacy-Focused Teams',
|
||
description: 'Keep code local with self-hosted models while using Claude when needed'
|
||
},
|
||
{
|
||
icon: '🔄',
|
||
title: 'Multi-Model Workflows',
|
||
description: 'Use different models for different tasks without switching tools'
|
||
},
|
||
{
|
||
icon: '⚡',
|
||
title: 'Claude Code Power Users',
|
||
description: 'Extend Claude Code with custom providers and routing strategies'
|
||
}
|
||
]
|
||
},
|
||
'zh-CN': {
|
||
title: '适用场景',
|
||
subtitle: '看看 Claude Code Router 如何融入您的工作流程',
|
||
cases: [
|
||
{
|
||
icon: '💰',
|
||
title: '注重成本的开发者',
|
||
description: '在大多数任务上保持质量的同时，将 API 成本降低 10 倍'
|
||
},
|
||
{
|
||
icon: '🔒',
|
||
title: '注重隐私的团队',
|
||
description: '使用自托管模型保持代码本地化，需要时再使用 Claude'
|
||
},
|
||
{
|
||
icon: '🔄',
|
||
title: '多模型工作流',
|
||
description: '为不同任务使用不同模型，无需切换工具'
|
||
},
|
||
{
|
||
icon: '⚡',
|
||
title: 'Claude Code 高级用户',
|
||
description: '使用自定义提供商和路由策略扩展 Claude Code'
|
||
}
|
||
]
|
||
}
|
||
};
|
||
|
||
const t = content[currentLocale as keyof typeof content] || content.en;
|
||
|
||
return (
|
||
<section className="py-16 sm:py-24 bg-gradient-to-b from-white to-gray-50">
|
||
<div className="container mx-auto px-4">
|
||
<div className="text-center mb-12 sm:mb-16">
|
||
<Heading as="h2" className="text-3xl sm:text-4xl md:text-5xl font-bold text-gray-900 mb-4">
|
||
{t.title}
|
||
</Heading>
|
||
<p className="text-lg sm:text-xl text-gray-600 max-w-2xl mx-auto">
|
||
{t.subtitle}
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 sm:gap-8 max-w-5xl mx-auto">
|
||
{t.cases.map((useCase, idx) => (
|
||
<div
|
||
key={idx}
|
||
className="group relative p-6 sm:p-8 bg-white rounded-2xl border-2 border-gray-100 hover:border-primary transition-all duration-300 hover:shadow-2xl hover:-translate-y-1 overflow-hidden"
|
||
style={{ animationDelay: `${idx * 0.1}s` }}
|
||
>
|
||
{/* Background decoration */}
|
||
<div
|
||
className="absolute top-0 right-0 w-32 h-32 rounded-full opacity-5 group-hover:opacity-10 transition-opacity"
|
||
style={{
|
||
background: 'linear-gradient(135deg, #CC7C5E 0%, transparent 70%)',
|
||
transform: 'translate(30%, -30%)'
|
||
}}
|
||
></div>
|
||
|
||
{/* Number badge */}
|
||
<div className="absolute top-4 sm:top-6 right-4 sm:right-6 w-8 h-8 sm:w-10 sm:h-10 flex items-center justify-center rounded-full text-base sm:text-lg font-bold transition-all duration-300 group-hover:scale-110"
|
||
style={{
|
||
background: 'linear-gradient(135deg, #CC7C5E 0%, #BC5C3E 100%)',
|
||
color: 'white',
|
||
boxShadow: '0 4px 12px rgba(204, 124, 94, 0.3)'
|
||
}}
|
||
>
|
||
{idx + 1}
|
||
</div>
|
||
|
||
{/* Icon */}
|
||
<div className="text-4xl sm:text-5xl mb-4 group-hover:scale-110 transition-transform duration-300">
|
||
{useCase.icon}
|
||
</div>
|
||
|
||
{/* Content */}
|
||
<div>
|
||
<Heading as="h3" className="text-lg sm:text-xl font-bold text-gray-900 mb-3 group-hover:text-primary transition-colors">
|
||
{useCase.title}
|
||
</Heading>
|
||
<p className="text-gray-600 leading-relaxed text-sm sm:text-base">
|
||
{useCase.description}
|
||
</p>
|
||
</div>
|
||
|
||
{/* Hover accent line */}
|
||
<div
|
||
className="absolute bottom-0 left-0 h-1 bg-gradient-to-r from-primary to-primary/70 transition-all duration-300 group-hover:w-full"
|
||
style={{ width: '0%' }}
|
||
></div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|
||
|
||
function CTASection() {
|
||
const {i18n} = useDocusaurusContext();
|
||
const currentLocale = i18n.currentLocale;
|
||
|
||
const content = {
|
||
en: {
|
||
title: 'Ready to Get Started?',
|
||
subtitle: 'Join thousands of developers using Claude Code Router to build better software.',
|
||
getStarted: 'Get Started',
|
||
docs: 'Read the Docs',
|
||
github: 'Star on GitHub',
|
||
community: 'Join Community'
|
||
},
|
||
'zh-CN': {
|
||
title: '准备开始了吗？',
|
||
subtitle: '加入数千名使用 Claude Code Router 的开发者，构建更好的软件。',
|
||
getStarted: '开始使用',
|
||
docs: '阅读文档',
|
||
github: '在 GitHub 上点赞',
|
||
community: '加入社区'
|
||
}
|
||
};
|
||
|
||
const t = content[currentLocale as keyof typeof content] || content.en;
|
||
|
||
return (
|
||
<section className="relative py-20 sm:py-32 overflow-hidden">
|
||
{/* Animated background */}
|
||
<div className="absolute inset-0">
|
||
<div className="absolute inset-0 bg-gradient-to-br from-primary via-primary/90 to-primary/80"></div>
|
||
{/* Pattern overlay */}
|
||
<div
|
||
className="absolute inset-0 opacity-10"
|
||
style={{
|
||
backgroundImage: `
|
||
radial-gradient(circle at 25% 25%, white 1%, transparent 1%),
|
||
radial-gradient(circle at 75% 75%, white 1%, transparent 1%)
|
||
`,
|
||
backgroundSize: '40px 40px'
|
||
}}
|
||
></div>
|
||
{/* Floating orbs */}
|
||
<div className="absolute top-20 left-10 w-64 h-64 bg-white/10 rounded-full blur-3xl animate-pulse"></div>
|
||
<div className="absolute bottom-20 right-10 w-96 h-96 bg-white/5 rounded-full blur-3xl animate-pulse" style={{ animationDelay: '1s' }}></div>
|
||
</div>
|
||
|
||
<div className="relative container mx-auto px-4">
|
||
<div className="max-w-4xl mx-auto text-center">
|
||
{/* Main title */}
|
||
<Heading as="h2" className="text-4xl sm:text-5xl md:text-6xl font-bold text-white mb-6 leading-tight">
|
||
{t.title}
|
||
</Heading>
|
||
|
||
{/* Subtitle */}
|
||
<p className="text-lg sm:text-xl md:text-2xl text-white/95 mb-10 sm:mb-12 max-w-3xl mx-auto leading-relaxed">
|
||
{t.subtitle}
|
||
</p>
|
||
|
||
{/* Primary CTA buttons */}
|
||
<div className="flex flex-col sm:flex-row gap-4 justify-center mb-8 sm:mb-12">
|
||
<Link
|
||
className="group px-8 sm:px-10 py-4 sm:py-5 bg-white text-primary hover:bg-gray-50 rounded-xl text-base sm:text-lg font-bold transition-all duration-300 shadow-2xl hover:shadow-white/20 hover:scale-105 flex items-center justify-center gap-2"
|
||
to={currentLocale === 'zh-CN' ? '/zh-CN/docs/intro' : '/docs/intro'}
|
||
>
|
||
{t.getStarted}
|
||
<svg className="w-5 h-5 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
|
||
</svg>
|
||
</Link>
|
||
<Link
|
||
className="px-8 sm:px-10 py-4 sm:py-5 bg-white/10 backdrop-blur-sm text-white border-2 border-white/30 hover:bg-primary hover:border-primary hover:text-white rounded-xl text-base sm:text-lg font-bold transition-all duration-300 hover:scale-105 flex items-center justify-center gap-2"
|
||
to={currentLocale === 'zh-CN' ? '/zh-CN/docs' : '/docs'}
|
||
>
|
||
{t.docs}
|
||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
|
||
</svg>
|
||
</Link>
|
||
</div>
|
||
|
||
{/* Secondary links */}
|
||
<div className="flex flex-col sm:flex-row gap-6 justify-center items-center text-white/80">
|
||
<a
|
||
href="https://github.com/musistudio/claude-code-router"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="flex items-center gap-2 hover:text-white transition-colors group"
|
||
>
|
||
<svg className="w-5 h-5 group-hover:scale-110 transition-transform" fill="currentColor" viewBox="0 0 24 24">
|
||
<path fillRule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clipRule="evenodd" />
|
||
</svg>
|
||
<span className="text-sm font-medium">{t.github}</span>
|
||
</a>
|
||
|
||
<div className="hidden sm:block w-px h-4 bg-white/30"></div>
|
||
|
||
<Link
|
||
to={currentLocale === 'zh-CN' ? '/zh-CN/docs' : '/docs'}
|
||
className="flex items-center gap-2 hover:text-white transition-colors group"
|
||
>
|
||
<svg className="w-5 h-5 group-hover:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
|
||
</svg>
|
||
<span className="text-sm font-medium">{t.community}</span>
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|
||
|
||
export default function Home() {
|
||
return (
|
||
<Layout>
|
||
<HomepageHeader />
|
||
<main>
|
||
<FeatureSection />
|
||
<CodeDemo />
|
||
<UseCases />
|
||
<CTASection />
|
||
</main>
|
||
</Layout>
|
||
);
|
||
}
|