90 lines
3.2 KiB
TypeScript
Vendored
90 lines
3.2 KiB
TypeScript
Vendored
import { Link } from 'react-router-dom'
|
|
import { useTranslation } from 'react-i18next'
|
|
import {
|
|
Network, Key, BarChart3, Layers, CreditCard, BookOpen,
|
|
ArrowRight, Terminal,
|
|
} from 'lucide-react'
|
|
|
|
const features = [
|
|
{ icon: Network, key: 'apiGateway' },
|
|
{ icon: Key, key: 'keyManagement' },
|
|
{ icon: BarChart3, key: 'usageTracking' },
|
|
{ icon: Layers, key: 'multiChannel' },
|
|
{ icon: CreditCard, key: 'billing' },
|
|
{ icon: BookOpen, key: 'documentation' },
|
|
]
|
|
|
|
export default function Home() {
|
|
const { t } = useTranslation()
|
|
|
|
return (
|
|
<div className="min-h-screen bg-base-200">
|
|
{/* Hero */}
|
|
<div className="hero min-h-[70vh] bg-gradient-to-br from-primary/10 via-base-200 to-secondary/10">
|
|
<div className="hero-content text-center flex-col gap-6 py-20">
|
|
<div className="flex items-center gap-2 text-primary">
|
|
<Terminal size={40} />
|
|
</div>
|
|
<h1 className="text-5xl font-bold tracking-tight">
|
|
{t('common.appName')}
|
|
</h1>
|
|
<p className="text-xl text-base-content/70 max-w-2xl">
|
|
{t('public.heroSubtitle')}
|
|
</p>
|
|
<div className="flex gap-4 mt-4">
|
|
<Link to="/register" className="btn btn-primary btn-lg gap-2">
|
|
{t('public.getStarted')} <ArrowRight size={18} />
|
|
</Link>
|
|
<Link to="/pricing" className="btn btn-outline btn-lg">
|
|
{t('public.viewPricing')}
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Features */}
|
|
<div className="container mx-auto px-4 py-20">
|
|
<h2 className="text-3xl font-bold text-center mb-12">
|
|
{t('public.featuresTitle')}
|
|
</h2>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-5xl mx-auto">
|
|
{features.map(({ icon: Icon, key }) => (
|
|
<div key={key} className="card bg-base-100 shadow-sm hover:shadow-md transition-shadow">
|
|
<div className="card-body items-center text-center">
|
|
<Icon size={32} className="text-primary mb-2" />
|
|
<h3 className="card-title text-lg">{t(`public.feature.${key}`)}</h3>
|
|
<p className="text-base-content/60 text-sm">{t(`public.feature.${key}Desc`)}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Quick Start */}
|
|
<div className="bg-base-100 py-20">
|
|
<div className="container mx-auto px-4 max-w-3xl">
|
|
<h2 className="text-3xl font-bold text-center mb-8">
|
|
{t('public.quickStartTitle')}
|
|
</h2>
|
|
<div className="mockup-code bg-neutral text-neutral-content">
|
|
<pre><code>{`curl ${window.location.origin}/v1/chat/completions \\
|
|
-H "Authorization: Bearer YOUR_API_KEY" \\
|
|
-H "Content-Type: application/json" \\
|
|
-d '{
|
|
"model": "gpt-4",
|
|
"messages": [
|
|
{"role": "user", "content": "Hello!"}
|
|
]
|
|
}'`}</code></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<footer className="footer footer-center p-8 bg-base-200 text-base-content/60">
|
|
<p>© {new Date().getFullYear()} ModelsToken. {t('public.allRightsReserved')}</p>
|
|
</footer>
|
|
</div>
|
|
)
|
|
}
|