refactor: 重新设计全部 6 个分站主题，参照 minimal 风格
设计原则： - 每个主题只用 2 个 react-bits 组件（CountUp + FadeContent） - 去掉 Aurora/Particles/DecryptedText/SplitText/RotatingText 等重动画 - 去掉 SpotlightCard/StarBorder/ShinyText/GradientText/BlurText 堆叠 - 用排版层级和留白代替动画效果 - 每个主题保持独特个性和配色 各主题定位： - starter: indigo 品牌色，居中 hero，克制的渐变光晕 - default: 紫/蓝色调，居中大标题，白色按钮 - dark: 翡翠绿点缀，左对齐，编号列表功能区 - clean: 蓝色主题白底，清爽留白 - corporate: slate 正式风，分栏统计，深色 CTA 区 - claude: 暖色奶油底/陶土色，编号列表，pill 按钮 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
abingyydsandClaude Sonnet 4.6 committed
1 parent
31dfed1a2e
commit
983c2e7d5f
6 files changed
+850
-1134
No files matched your search
+130
-222
@@ -6,11 +6,6 @@ import { useSite } from '../../context/SiteContext';
|
||||
import { getSiteModels, getSitePackages } from '../../api';
|
||||
import CountUp from '../../components/bits/CountUp';
|
||||
import FadeContent from '../../components/bits/FadeContent';
|
||||
import GradientText from '../../components/bits/GradientText';
|
||||
import BlurText from '../../components/bits/BlurText';
|
||||
import ShinyText from '../../components/bits/ShinyText';
|
||||
import SpotlightCard from '../../components/bits/SpotlightCard';
|
||||
import StarBorder from '../../components/bits/StarBorder';
|
||||
|
||||
export default function ClaudeHome() {
|
||||
const { t } = useTranslation();
|
||||
@@ -27,143 +22,83 @@ export default function ClaudeHome() {
|
||||
const enabledModels = models.filter(m => m.enabled !== false);
|
||||
|
||||
return (
|
||||
<div className="bg-[#FAF6F1]">
|
||||
{/* Hero */}
|
||||
<section className="relative overflow-hidden">
|
||||
{/* Warm gradient background */}
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-[#F5EEE6] via-[#FAF6F1] to-[#FAF6F1]" />
|
||||
<div className="absolute top-0 right-0 w-[600px] h-[600px] bg-[radial-gradient(circle_at_70%_30%,rgba(217,119,87,0.08),transparent_70%)]" />
|
||||
<div className="absolute bottom-0 left-0 w-[400px] h-[400px] bg-[radial-gradient(circle_at_30%_70%,rgba(196,97,63,0.05),transparent_60%)]" />
|
||||
<div>
|
||||
{/* Hero — warm, editorial */}
|
||||
<section className="max-w-5xl mx-auto px-6 pt-32 pb-20">
|
||||
<FadeContent blur duration={800} delay={100}>
|
||||
<div className="max-w-3xl">
|
||||
<h1 className="text-5xl md:text-6xl font-heading font-bold text-[#3D3024] leading-[1.1] tracking-tight">
|
||||
{site?.name || t('home.defaultHeroTitle')}
|
||||
</h1>
|
||||
<p className="text-lg text-[#6B5D4F] mt-6 leading-relaxed max-w-xl">
|
||||
{t('home.heroSubtitle')}
|
||||
</p>
|
||||
|
||||
<div className="relative max-w-6xl mx-auto px-6 pt-24 pb-20">
|
||||
<FadeContent blur duration={600} delay={100}>
|
||||
<div className="text-center max-w-3xl mx-auto">
|
||||
{/* Badge */}
|
||||
<div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-[#D97757]/8 border border-[#D97757]/15 mb-8">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-[#D97757] animate-pulse" />
|
||||
<ShinyText
|
||||
text={t('home.lightningFast')}
|
||||
speed={4}
|
||||
color="#D97757"
|
||||
shineColor="rgba(217,119,87,0.4)"
|
||||
className="text-sm font-medium"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Title */}
|
||||
<h1 className="text-4xl md:text-6xl font-bold leading-tight tracking-tight mb-6">
|
||||
<GradientText
|
||||
colors={['#D97757', '#C4613F', '#A85232', '#C4613F', '#D97757']}
|
||||
animationSpeed={6}
|
||||
className="text-4xl md:text-6xl font-bold leading-tight tracking-tight"
|
||||
>
|
||||
{site?.name || t('home.defaultHeroTitle')}
|
||||
</GradientText>
|
||||
</h1>
|
||||
|
||||
{/* Subtitle */}
|
||||
<div className="mb-10">
|
||||
<BlurText
|
||||
text={t('home.heroSubtitle')}
|
||||
className="text-lg text-[#6B5D4F] max-w-xl mx-auto leading-relaxed"
|
||||
delay={50}
|
||||
animateBy="words"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* CTA Buttons */}
|
||||
<div className="flex items-center justify-center gap-3">
|
||||
{user ? (
|
||||
<Link to="/dashboard">
|
||||
<StarBorder as="div" color="#D97757" speed="6s" className="!rounded-full !px-8 !py-3 text-sm font-medium text-[#D97757]">
|
||||
{t('home.goToDashboard')} →
|
||||
</StarBorder>
|
||||
<div className="flex items-center gap-4 mt-10">
|
||||
{user ? (
|
||||
<Link to="/dashboard" className="px-7 py-3 rounded-full bg-[#D97757] text-white font-medium text-sm hover:bg-[#C4613F] transition-colors">
|
||||
{t('home.goToDashboard')} →
|
||||
</Link>
|
||||
) : (
|
||||
<>
|
||||
<Link to="/register" className="px-7 py-3 rounded-full bg-[#D97757] text-white font-medium text-sm hover:bg-[#C4613F] transition-colors">
|
||||
{t('home.getStarted')}
|
||||
</Link>
|
||||
) : (
|
||||
<>
|
||||
<Link to="/register" className="px-8 py-3 rounded-full bg-[#D97757] text-white font-medium text-sm hover:bg-[#C4613F] transition-colors shadow-sm shadow-[#D97757]/20">
|
||||
{t('home.getStarted')} →
|
||||
</Link>
|
||||
<Link to="/pricing" className="px-8 py-3 rounded-full border border-[#D9C5B2] text-[#6B5D4F] font-medium text-sm hover:border-[#D97757]/30 hover:bg-[#D97757]/5 transition-colors">
|
||||
{t('home.viewPricing')}
|
||||
</Link>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<Link to="/pricing" className="px-7 py-3 text-[#8B7D6E] font-medium text-sm hover:text-[#3D3024] transition-colors">
|
||||
{t('home.viewPricing')} →
|
||||
</Link>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</FadeContent>
|
||||
</div>
|
||||
</FadeContent>
|
||||
|
||||
{/* Stats */}
|
||||
<FadeContent blur duration={600} delay={300}>
|
||||
<div className="grid grid-cols-3 gap-6 max-w-lg mx-auto mt-20">
|
||||
<div className="text-center p-5 rounded-2xl bg-white/60 border border-[#E8DDD0] backdrop-blur-sm">
|
||||
<div className="text-3xl font-bold text-[#3D3024]">
|
||||
<CountUp from={0} to={enabledModels.length || 50} duration={2} />+
|
||||
</div>
|
||||
<p className="text-sm text-[#8B7D6E] mt-1">{t('home.aiModels')}</p>
|
||||
</div>
|
||||
<div className="text-center p-5 rounded-2xl bg-white/60 border border-[#E8DDD0] backdrop-blur-sm">
|
||||
<div className="text-3xl font-bold text-[#3D3024]">
|
||||
<CountUp from={0} to={99.9} duration={2.5} />%
|
||||
</div>
|
||||
<p className="text-sm text-[#8B7D6E] mt-1">{t('home.uptime')}</p>
|
||||
</div>
|
||||
<div className="text-center p-5 rounded-2xl bg-white/60 border border-[#E8DDD0] backdrop-blur-sm">
|
||||
<div className="text-3xl font-bold text-[#3D3024]">
|
||||
<<CountUp from={200} to={50} duration={2} direction="down" />ms
|
||||
</div>
|
||||
<p className="text-sm text-[#8B7D6E] mt-1">{t('home.latency')}</p>
|
||||
{/* Stats */}
|
||||
<FadeContent blur duration={800} delay={400}>
|
||||
<div className="flex items-center gap-12 mt-20 pt-10 border-t border-[#E8DDD0]">
|
||||
<div>
|
||||
<div className="text-2xl font-bold text-[#3D3024]">
|
||||
<CountUp from={0} to={enabledModels.length || 50} duration={2} />+
|
||||
</div>
|
||||
<p className="text-sm text-[#8B7D6E] mt-0.5">{t('home.aiModels')}</p>
|
||||
</div>
|
||||
</FadeContent>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-2xl font-bold text-[#3D3024]">
|
||||
<CountUp from={0} to={99.9} duration={2.5} />%
|
||||
</div>
|
||||
<p className="text-sm text-[#8B7D6E] mt-0.5">{t('home.uptime')}</p>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-2xl font-bold text-[#3D3024]">
|
||||
<<CountUp from={200} to={50} duration={2} direction="down" />ms
|
||||
</div>
|
||||
<p className="text-sm text-[#8B7D6E] mt-0.5">{t('home.latency')}</p>
|
||||
</div>
|
||||
</div>
|
||||
</FadeContent>
|
||||
</section>
|
||||
|
||||
{/* Features */}
|
||||
<section className="bg-[#F5EEE6] border-y border-[#E8DDD0]">
|
||||
<div className="max-w-6xl mx-auto px-6 py-20">
|
||||
<FadeContent blur duration={600} delay={100}>
|
||||
<div className="text-center mb-14">
|
||||
<h2 className="text-3xl font-bold text-[#3D3024] mb-3">{t('home.whyChooseUs')}</h2>
|
||||
<p className="text-[#6B5D4F]">{t('home.whyChooseUsDesc')}</p>
|
||||
</div>
|
||||
<section className="bg-[#F5EEE6]">
|
||||
<div className="max-w-5xl mx-auto px-6 py-20">
|
||||
<FadeContent blur duration={800} delay={100}>
|
||||
<h2 className="text-2xl font-heading font-bold text-[#3D3024] mb-2">{t('home.whyChooseUs')}</h2>
|
||||
<p className="text-[#8B7D6E] mb-10">{t('home.whyChooseUsDesc')}</p>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-6">
|
||||
<SpotlightCard className="!bg-white !rounded-2xl !p-0 !border-[#E8DDD0]" spotlightColor="rgba(217,119,87,0.08)">
|
||||
<div className="p-7">
|
||||
<div className="w-12 h-12 rounded-xl bg-[#D97757]/10 flex items-center justify-center mb-5">
|
||||
<svg className="w-6 h-6 text-[#D97757]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M13 10V3L4 14h7v7l9-11h-7z" />
|
||||
</svg>
|
||||
<div className="space-y-0">
|
||||
{[
|
||||
{ title: t('home.lightningFast'), desc: t('home.lightningFastDesc') },
|
||||
{ title: t('home.securePrivate'), desc: t('home.securePrivateDesc') },
|
||||
{ title: t('home.payAsYouGo'), desc: t('home.payAsYouGoDesc') },
|
||||
].map((f, i) => (
|
||||
<div key={i} className="flex gap-6 items-start py-6 border-b border-[#E8DDD0] last:border-0 group">
|
||||
<span className="text-sm font-mono text-[#D97757]/50 mt-0.5">0{i + 1}</span>
|
||||
<div>
|
||||
<h3 className="text-base font-semibold text-[#3D3024] mb-1 group-hover:text-[#D97757] transition-colors">{f.title}</h3>
|
||||
<p className="text-sm text-[#6B5D4F] leading-relaxed max-w-lg">{f.desc}</p>
|
||||
</div>
|
||||
<h3 className="text-base font-semibold text-[#3D3024] mb-2">{t('home.lightningFast')}</h3>
|
||||
<p className="text-sm text-[#6B5D4F] leading-relaxed">{t('home.lightningFastDesc')}</p>
|
||||
</div>
|
||||
</SpotlightCard>
|
||||
|
||||
<SpotlightCard className="!bg-white !rounded-2xl !p-0 !border-[#E8DDD0]" spotlightColor="rgba(168,82,50,0.06)">
|
||||
<div className="p-7">
|
||||
<div className="w-12 h-12 rounded-xl bg-[#A85232]/10 flex items-center justify-center mb-5">
|
||||
<svg className="w-6 h-6 text-[#A85232]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-base font-semibold text-[#3D3024] mb-2">{t('home.securePrivate')}</h3>
|
||||
<p className="text-sm text-[#6B5D4F] leading-relaxed">{t('home.securePrivateDesc')}</p>
|
||||
</div>
|
||||
</SpotlightCard>
|
||||
|
||||
<SpotlightCard className="!bg-white !rounded-2xl !p-0 !border-[#E8DDD0]" spotlightColor="rgba(196,97,63,0.06)">
|
||||
<div className="p-7">
|
||||
<div className="w-12 h-12 rounded-xl bg-[#C4613F]/10 flex items-center justify-center mb-5">
|
||||
<svg className="w-6 h-6 text-[#C4613F]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-base font-semibold text-[#3D3024] mb-2">{t('home.payAsYouGo')}</h3>
|
||||
<p className="text-sm text-[#6B5D4F] leading-relaxed">{t('home.payAsYouGoDesc')}</p>
|
||||
</div>
|
||||
</SpotlightCard>
|
||||
))}
|
||||
</div>
|
||||
</FadeContent>
|
||||
</div>
|
||||
@@ -171,115 +106,88 @@ export default function ClaudeHome() {
|
||||
|
||||
{/* Models */}
|
||||
{enabledModels.length > 0 && (
|
||||
<section className="max-w-6xl mx-auto px-6 py-20">
|
||||
<FadeContent blur duration={600} delay={100}>
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-3xl font-bold text-[#3D3024] mb-3">{t('home.availableModels')}</h2>
|
||||
<p className="text-[#6B5D4F]">{t('home.availableModelsDesc', { count: enabledModels.length })}</p>
|
||||
<section className="max-w-5xl mx-auto px-6 py-20">
|
||||
<FadeContent blur duration={800} delay={100}>
|
||||
<div className="flex items-end justify-between mb-8">
|
||||
<div>
|
||||
<h2 className="text-2xl font-heading font-bold text-[#3D3024] mb-2">{t('home.availableModels')}</h2>
|
||||
<p className="text-[#8B7D6E]">{t('home.availableModelsDesc', { count: enabledModels.length })}</p>
|
||||
</div>
|
||||
{enabledModels.length > 8 && (
|
||||
<Link to="/pricing" className="text-sm text-[#D97757] hover:text-[#C4613F] transition-colors">
|
||||
{t('home.viewAllModels', { count: enabledModels.length })} →
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-3">
|
||||
{enabledModels.slice(0, 12).map((m, i) => (
|
||||
<div key={m.id || i} className="px-4 py-3 rounded-xl border border-[#E8DDD0] bg-white/60 flex items-center gap-3 hover:bg-[#D97757]/5 hover:border-[#D97757]/20 transition-colors group backdrop-blur-sm">
|
||||
<div className="w-2 h-2 rounded-full bg-[#D97757] flex-shrink-0" />
|
||||
<span className="text-sm font-mono text-[#6B5D4F] group-hover:text-[#D97757] transition-colors truncate">
|
||||
{m.display_name || m.model_name}
|
||||
</span>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-2">
|
||||
{enabledModels.slice(0, 8).map((m, i) => (
|
||||
<div key={m.id || i} className="px-4 py-3 rounded-lg border border-[#E8DDD0] hover:border-[#D9C5B2] transition-colors">
|
||||
<span className="text-sm text-[#6B5D4F] font-mono">{m.display_name || m.model_name}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{enabledModels.length > 12 && (
|
||||
<div className="text-center mt-6">
|
||||
<Link to="/pricing" className="text-sm text-[#D97757] hover:text-[#C4613F] transition-colors font-medium">
|
||||
{t('home.viewAllModels', { count: enabledModels.length })} →
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
</FadeContent>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* Packages */}
|
||||
{packages.length > 0 && (
|
||||
<section className="bg-[#F5EEE6] border-y border-[#E8DDD0]">
|
||||
<div className="max-w-6xl mx-auto px-6 py-20">
|
||||
<FadeContent blur duration={600} delay={100}>
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-3xl font-bold text-[#3D3024] mb-3">{t('home.plansPackages')}</h2>
|
||||
<p className="text-[#6B5D4F]">{t('home.choosePlan')}</p>
|
||||
</div>
|
||||
<section className="max-w-5xl mx-auto px-6 py-20">
|
||||
<FadeContent blur duration={800} delay={100}>
|
||||
<h2 className="text-2xl font-heading font-bold text-[#3D3024] mb-2">{t('home.plansPackages')}</h2>
|
||||
<p className="text-[#8B7D6E] mb-10">{t('home.choosePlan')}</p>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-6 max-w-4xl mx-auto">
|
||||
{packages.filter(p => p.enabled).slice(0, 3).map((pkg, i) => (
|
||||
<SpotlightCard
|
||||
key={pkg.id}
|
||||
className={`!bg-white !rounded-2xl !p-0 !flex !flex-col ${
|
||||
i === 1 ? '!border-[#D97757] !shadow-md !shadow-[#D97757]/10' : '!border-[#E8DDD0]'
|
||||
}`}
|
||||
spotlightColor={i === 1 ? 'rgba(217,119,87,0.1)' : 'rgba(217,119,87,0.04)'}
|
||||
>
|
||||
<div className="p-6 flex-1 flex flex-col">
|
||||
{i === 1 && (
|
||||
<span className="inline-flex items-center gap-1 text-xs text-[#D97757] font-semibold uppercase tracking-wider mb-2">
|
||||
<svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" /></svg>
|
||||
Popular
|
||||
</span>
|
||||
)}
|
||||
<h3 className="text-lg font-semibold text-[#3D3024] mb-1">{pkg.name}</h3>
|
||||
{pkg.description && <p className="text-sm text-[#6B5D4F] mb-4">{pkg.description}</p>}
|
||||
<div className="mt-auto pt-4">
|
||||
<div className="flex items-baseline gap-1">
|
||||
<span className="text-3xl font-bold text-[#3D3024]">${pkg.price}</span>
|
||||
{pkg.original_price > pkg.price && (
|
||||
<span className="text-sm text-[#8B7D6E] line-through">${pkg.original_price}</span>
|
||||
)}
|
||||
</div>
|
||||
{pkg.duration > 0 && <p className="text-xs text-[#8B7D6E] mt-1">{t('home.days', { count: pkg.duration })}</p>}
|
||||
</div>
|
||||
<Link to={user ? '/packages' : '/register'} className={`mt-4 py-2.5 rounded-full font-medium text-sm text-center transition-colors ${
|
||||
i === 1
|
||||
? 'bg-[#D97757] text-white hover:bg-[#C4613F]'
|
||||
: 'bg-[#F5EEE6] text-[#6B5D4F] hover:bg-[#E8DDD0]'
|
||||
}`}>
|
||||
{user ? t('home.subscribe') : t('home.getStarted')}
|
||||
</Link>
|
||||
</div>
|
||||
</SpotlightCard>
|
||||
))}
|
||||
</div>
|
||||
</FadeContent>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-3 gap-4 max-w-4xl">
|
||||
{packages.filter(p => p.enabled).slice(0, 3).map((pkg, i) => (
|
||||
<div key={pkg.id} className={`rounded-xl p-6 flex flex-col border transition-all ${
|
||||
i === 1 ? 'border-[#D97757]/30 bg-[#D97757]/[0.04]' : 'border-[#E8DDD0] hover:border-[#D9C5B2]'
|
||||
}`}>
|
||||
{i === 1 && <span className="text-xs text-[#D97757] font-medium mb-2 uppercase tracking-wider">{t('home.popular') || 'Popular'}</span>}
|
||||
<h3 className="text-base font-semibold text-[#3D3024]">{pkg.name}</h3>
|
||||
{pkg.description && <p className="text-sm text-[#8B7D6E] mt-1">{pkg.description}</p>}
|
||||
<div className="mt-auto pt-6">
|
||||
<span className="text-3xl font-bold text-[#3D3024]">${pkg.price}</span>
|
||||
{pkg.original_price > pkg.price && (
|
||||
<span className="text-sm text-[#8B7D6E] line-through ml-2">${pkg.original_price}</span>
|
||||
)}
|
||||
{pkg.duration > 0 && <p className="text-xs text-[#8B7D6E] mt-1">{t('home.days', { count: pkg.duration })}</p>}
|
||||
</div>
|
||||
<Link to={user ? '/packages' : '/register'} className={`mt-4 py-2.5 rounded-full font-medium text-sm text-center transition-colors ${
|
||||
i === 1
|
||||
? 'bg-[#D97757] text-white hover:bg-[#C4613F]'
|
||||
: 'bg-[#E8DDD0] text-[#3D3024] hover:bg-[#D9C5B2]'
|
||||
}`}>
|
||||
{user ? t('home.subscribe') : t('home.getStarted')}
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</FadeContent>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* CTA */}
|
||||
<section className="max-w-6xl mx-auto px-6 py-24">
|
||||
<FadeContent blur duration={600} delay={100}>
|
||||
<div className="bg-gradient-to-br from-[#D97757] to-[#A85232] rounded-3xl p-12 text-center relative overflow-hidden">
|
||||
{/* Decorative elements */}
|
||||
<div className="absolute top-0 right-0 w-64 h-64 bg-[radial-gradient(circle_at_center,rgba(255,255,255,0.08),transparent_70%)]" />
|
||||
<div className="absolute bottom-0 left-0 w-48 h-48 bg-[radial-gradient(circle_at_center,rgba(255,255,255,0.05),transparent_60%)]" />
|
||||
|
||||
<div className="relative">
|
||||
<h2 className="text-3xl font-bold text-white mb-4">{t('home.readyToStart')}</h2>
|
||||
<p className="text-white/70 mb-8 max-w-md mx-auto">{t('home.readyToStartDesc')}</p>
|
||||
<div className="flex items-center justify-center gap-4">
|
||||
{user ? (
|
||||
<Link to="/dashboard" className="px-8 py-3 rounded-full bg-white text-[#D97757] font-semibold text-sm hover:bg-[#FAF6F1] transition-colors shadow-sm">
|
||||
{t('home.goToDashboard')}
|
||||
<section className="max-w-5xl mx-auto px-6 py-24">
|
||||
<FadeContent blur duration={800} delay={100}>
|
||||
<div className="border-t border-[#E8DDD0] pt-16 text-center">
|
||||
<h2 className="text-2xl font-heading font-bold text-[#3D3024] mb-3">{t('home.readyToStart')}</h2>
|
||||
<p className="text-[#8B7D6E] mb-8 max-w-md mx-auto">{t('home.readyToStartDesc')}</p>
|
||||
<div className="flex items-center justify-center gap-4">
|
||||
{user ? (
|
||||
<Link to="/dashboard" className="px-7 py-3 rounded-full bg-[#D97757] text-white font-medium text-sm hover:bg-[#C4613F] transition-colors">
|
||||
{t('home.goToDashboard')} →
|
||||
</Link>
|
||||
) : (
|
||||
<>
|
||||
<Link to="/register" className="px-7 py-3 rounded-full bg-[#D97757] text-white font-medium text-sm hover:bg-[#C4613F] transition-colors">
|
||||
{t('home.createFreeAccount')} →
|
||||
</Link>
|
||||
) : (
|
||||
<>
|
||||
<Link to="/register" className="px-8 py-3 rounded-full bg-white text-[#D97757] font-semibold text-sm hover:bg-[#FAF6F1] transition-colors shadow-sm">
|
||||
{t('home.createFreeAccount')}
|
||||
</Link>
|
||||
<Link to="/login" className="px-8 py-3 rounded-full border border-white/30 text-white font-medium text-sm hover:bg-white/10 transition-colors">
|
||||
{t('home.signIn')}
|
||||
</Link>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<Link to="/login" className="px-7 py-3 text-[#8B7D6E] font-medium text-sm hover:text-[#3D3024] transition-colors">
|
||||
{t('home.signIn')}
|
||||
</Link>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</FadeContent>
|
||||
|
||||
+110
-160
@@ -6,10 +6,6 @@ import { useSite } from '../../context/SiteContext';
|
||||
import { getSiteModels, getSitePackages } from '../../api';
|
||||
import CountUp from '../../components/bits/CountUp';
|
||||
import FadeContent from '../../components/bits/FadeContent';
|
||||
import ShinyText from '../../components/bits/ShinyText';
|
||||
import BlurText from '../../components/bits/BlurText';
|
||||
import SpotlightCard from '../../components/bits/SpotlightCard';
|
||||
import StarBorder from '../../components/bits/StarBorder';
|
||||
|
||||
export default function CleanHome() {
|
||||
const { t } = useTranslation();
|
||||
@@ -26,49 +22,31 @@ export default function CleanHome() {
|
||||
const enabledModels = models.filter(m => m.enabled !== false);
|
||||
|
||||
return (
|
||||
<div className="bg-white">
|
||||
<div>
|
||||
{/* Hero */}
|
||||
<section className="max-w-6xl mx-auto px-6 pt-20 pb-16">
|
||||
<FadeContent blur duration={600} delay={100}>
|
||||
<section className="max-w-5xl mx-auto px-6 pt-32 pb-20">
|
||||
<FadeContent blur duration={800} delay={100}>
|
||||
<div className="text-center max-w-3xl mx-auto">
|
||||
<div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-blue-50 text-blue-600 text-sm font-medium mb-8">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-blue-500 animate-pulse" />
|
||||
<ShinyText
|
||||
text={t('home.lightningFast')}
|
||||
speed={4}
|
||||
color="#2563eb"
|
||||
shineColor="rgba(59,130,246,0.3)"
|
||||
className="text-sm font-medium"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<h1 className="text-4xl md:text-6xl font-bold text-gray-900 leading-tight tracking-tight mb-6">
|
||||
<BlurText
|
||||
text={site?.name || t('home.defaultHeroTitle')}
|
||||
delay={60}
|
||||
animateBy="words"
|
||||
className="text-gray-900"
|
||||
/>
|
||||
<p className="text-sm font-medium text-blue-600 mb-4 tracking-wide">{t('home.heroTagline') || 'AI API Platform'}</p>
|
||||
<h1 className="text-5xl md:text-6xl font-heading font-bold text-gray-900 leading-[1.1] tracking-tight">
|
||||
{site?.name || t('home.defaultHeroTitle')}
|
||||
</h1>
|
||||
|
||||
<p className="text-lg text-gray-500 max-w-xl mx-auto mb-10 leading-relaxed">
|
||||
<p className="text-lg text-gray-500 mt-6 leading-relaxed max-w-xl mx-auto">
|
||||
{t('home.heroSubtitle')}
|
||||
</p>
|
||||
|
||||
<div className="flex items-center justify-center gap-3">
|
||||
<div className="flex items-center justify-center gap-4 mt-10">
|
||||
{user ? (
|
||||
<Link to="/dashboard">
|
||||
<StarBorder as="div" color="#3b82f6" speed="5s" className="!rounded-xl !px-7 !py-3 text-sm font-medium text-blue-700">
|
||||
{t('home.goToDashboard')} →
|
||||
</StarBorder>
|
||||
<Link to="/dashboard" className="px-7 py-3 rounded-xl bg-blue-600 text-white font-medium text-sm hover:bg-blue-700 transition-colors shadow-sm">
|
||||
{t('home.goToDashboard')} →
|
||||
</Link>
|
||||
) : (
|
||||
<>
|
||||
<Link to="/register" className="px-7 py-3 rounded-xl bg-blue-600 text-white font-medium text-sm hover:bg-blue-700 transition-colors shadow-sm">
|
||||
{t('home.getStarted')} →
|
||||
{t('home.getStarted')}
|
||||
</Link>
|
||||
<Link to="/pricing" className="px-7 py-3 rounded-xl border border-gray-200 text-gray-600 font-medium text-sm hover:border-gray-300 hover:bg-gray-50 transition-colors">
|
||||
{t('home.viewPricing')}
|
||||
<Link to="/pricing" className="px-7 py-3 text-gray-500 font-medium text-sm hover:text-gray-900 transition-colors">
|
||||
{t('home.viewPricing')} →
|
||||
</Link>
|
||||
</>
|
||||
)}
|
||||
@@ -77,176 +55,148 @@ export default function CleanHome() {
|
||||
</FadeContent>
|
||||
|
||||
{/* Stats */}
|
||||
<FadeContent blur duration={600} delay={300}>
|
||||
<div className="grid grid-cols-3 gap-8 max-w-lg mx-auto mt-16 pt-10 border-t border-gray-100">
|
||||
<FadeContent blur duration={800} delay={400}>
|
||||
<div className="grid grid-cols-3 gap-8 max-w-lg mx-auto mt-20 pt-10 border-t border-gray-100">
|
||||
<div className="text-center">
|
||||
<div className="text-3xl font-bold text-gray-900">
|
||||
<div className="text-2xl font-bold text-gray-900">
|
||||
<CountUp from={0} to={enabledModels.length || 50} duration={2} />+
|
||||
</div>
|
||||
<p className="text-sm text-gray-500 mt-1">{t('home.aiModels')}</p>
|
||||
<p className="text-sm text-gray-500 mt-0.5">{t('home.aiModels')}</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-3xl font-bold text-gray-900">
|
||||
<div className="text-2xl font-bold text-gray-900">
|
||||
<CountUp from={0} to={99.9} duration={2.5} />%
|
||||
</div>
|
||||
<p className="text-sm text-gray-500 mt-1">{t('home.uptime')}</p>
|
||||
<p className="text-sm text-gray-500 mt-0.5">{t('home.uptime')}</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-3xl font-bold text-gray-900">
|
||||
<div className="text-2xl font-bold text-gray-900">
|
||||
<<CountUp from={200} to={50} duration={2} direction="down" />ms
|
||||
</div>
|
||||
<p className="text-sm text-gray-500 mt-1">{t('home.latency')}</p>
|
||||
<p className="text-sm text-gray-500 mt-0.5">{t('home.latency')}</p>
|
||||
</div>
|
||||
</div>
|
||||
</FadeContent>
|
||||
</section>
|
||||
|
||||
{/* Features */}
|
||||
<section className="bg-gray-50/70 border-y border-gray-100">
|
||||
<div className="max-w-6xl mx-auto px-6 py-20">
|
||||
<FadeContent blur duration={600} delay={100}>
|
||||
<div className="text-center mb-14">
|
||||
<h2 className="text-3xl font-bold text-gray-900 mb-3">{t('home.whyChooseUs')}</h2>
|
||||
<p className="text-gray-500">{t('home.whyChooseUsDesc')}</p>
|
||||
</div>
|
||||
<section className="max-w-5xl mx-auto px-6 py-20">
|
||||
<FadeContent blur duration={800} delay={100}>
|
||||
<div className="text-center mb-14">
|
||||
<h2 className="text-2xl font-heading font-bold text-gray-900 mb-3">{t('home.whyChooseUs')}</h2>
|
||||
<p className="text-gray-500">{t('home.whyChooseUsDesc')}</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-6">
|
||||
<SpotlightCard className="!bg-white !rounded-2xl !p-0 !border-gray-100" spotlightColor="rgba(59,130,246,0.08)">
|
||||
<div className="p-7">
|
||||
<div className="w-12 h-12 rounded-xl bg-blue-50 flex items-center justify-center mb-5">
|
||||
<svg className="w-6 h-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M13 10V3L4 14h7v7l9-11h-7z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-base font-semibold text-gray-900 mb-2">{t('home.lightningFast')}</h3>
|
||||
<p className="text-sm text-gray-500 leading-relaxed">{t('home.lightningFastDesc')}</p>
|
||||
<div className="grid md:grid-cols-3 gap-5">
|
||||
{[
|
||||
{ title: t('home.lightningFast'), desc: t('home.lightningFastDesc'), color: 'blue', icon: (
|
||||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M13 10V3L4 14h7v7l9-11h-7z" />
|
||||
</svg>
|
||||
)},
|
||||
{ title: t('home.securePrivate'), desc: t('home.securePrivateDesc'), color: 'indigo', icon: (
|
||||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
|
||||
</svg>
|
||||
)},
|
||||
{ title: t('home.payAsYouGo'), desc: t('home.payAsYouGoDesc'), color: 'emerald', icon: (
|
||||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
)},
|
||||
].map((f, i) => (
|
||||
<div key={i} className="p-6 rounded-xl border border-gray-100 hover:border-gray-200 hover:shadow-sm transition-all">
|
||||
<div className={`w-10 h-10 rounded-lg bg-${f.color}-50 text-${f.color}-600 flex items-center justify-center mb-4`}>
|
||||
{f.icon}
|
||||
</div>
|
||||
</SpotlightCard>
|
||||
|
||||
<SpotlightCard className="!bg-white !rounded-2xl !p-0 !border-gray-100" spotlightColor="rgba(99,102,241,0.08)">
|
||||
<div className="p-7">
|
||||
<div className="w-12 h-12 rounded-xl bg-indigo-50 flex items-center justify-center mb-5">
|
||||
<svg className="w-6 h-6 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-base font-semibold text-gray-900 mb-2">{t('home.securePrivate')}</h3>
|
||||
<p className="text-sm text-gray-500 leading-relaxed">{t('home.securePrivateDesc')}</p>
|
||||
</div>
|
||||
</SpotlightCard>
|
||||
|
||||
<SpotlightCard className="!bg-white !rounded-2xl !p-0 !border-gray-100" spotlightColor="rgba(16,185,129,0.08)">
|
||||
<div className="p-7">
|
||||
<div className="w-12 h-12 rounded-xl bg-emerald-50 flex items-center justify-center mb-5">
|
||||
<svg className="w-6 h-6 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-base font-semibold text-gray-900 mb-2">{t('home.payAsYouGo')}</h3>
|
||||
<p className="text-sm text-gray-500 leading-relaxed">{t('home.payAsYouGoDesc')}</p>
|
||||
</div>
|
||||
</SpotlightCard>
|
||||
</div>
|
||||
</FadeContent>
|
||||
</div>
|
||||
<h3 className="text-base font-semibold text-gray-900 mb-2">{f.title}</h3>
|
||||
<p className="text-sm text-gray-500 leading-relaxed">{f.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</FadeContent>
|
||||
</section>
|
||||
|
||||
{/* Models */}
|
||||
{enabledModels.length > 0 && (
|
||||
<section className="max-w-6xl mx-auto px-6 py-20">
|
||||
<FadeContent blur duration={600} delay={100}>
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-3xl font-bold text-gray-900 mb-3">{t('home.availableModels')}</h2>
|
||||
<p className="text-gray-500">{t('home.availableModelsDesc', { count: enabledModels.length })}</p>
|
||||
<section className="max-w-5xl mx-auto px-6 py-20">
|
||||
<FadeContent blur duration={800} delay={100}>
|
||||
<div className="flex items-end justify-between mb-8">
|
||||
<div>
|
||||
<h2 className="text-2xl font-heading font-bold text-gray-900 mb-2">{t('home.availableModels')}</h2>
|
||||
<p className="text-gray-500">{t('home.availableModelsDesc', { count: enabledModels.length })}</p>
|
||||
</div>
|
||||
{enabledModels.length > 8 && (
|
||||
<Link to="/pricing" className="text-sm text-blue-600 hover:text-blue-700 transition-colors">
|
||||
{t('home.viewAllModels', { count: enabledModels.length })} →
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-3">
|
||||
{enabledModels.slice(0, 12).map((m, i) => (
|
||||
<div key={m.id || i} className="px-4 py-3 rounded-xl border border-gray-100 bg-gray-50/50 flex items-center gap-3 hover:bg-blue-50/50 hover:border-blue-100 transition-colors group">
|
||||
<div className="w-2 h-2 rounded-full bg-green-500 flex-shrink-0" />
|
||||
<span className="text-sm font-mono text-gray-600 group-hover:text-blue-700 transition-colors truncate">
|
||||
{m.display_name || m.model_name}
|
||||
</span>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-2">
|
||||
{enabledModels.slice(0, 8).map((m, i) => (
|
||||
<div key={m.id || i} className="px-4 py-3 rounded-lg border border-gray-100 hover:border-gray-200 transition-colors">
|
||||
<span className="text-sm text-gray-600 font-mono">{m.display_name || m.model_name}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{enabledModels.length > 12 && (
|
||||
<div className="text-center mt-6">
|
||||
<Link to="/pricing" className="text-sm text-blue-600 hover:text-blue-700 transition-colors font-medium">
|
||||
{t('home.viewAllModels', { count: enabledModels.length })} →
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
</FadeContent>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* Packages */}
|
||||
{packages.length > 0 && (
|
||||
<section className="bg-gray-50/70 border-y border-gray-100">
|
||||
<div className="max-w-6xl mx-auto px-6 py-20">
|
||||
<FadeContent blur duration={600} delay={100}>
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-3xl font-bold text-gray-900 mb-3">{t('home.plansPackages')}</h2>
|
||||
<p className="text-gray-500">{t('home.choosePlan')}</p>
|
||||
</div>
|
||||
<section className="max-w-5xl mx-auto px-6 py-20">
|
||||
<FadeContent blur duration={800} delay={100}>
|
||||
<h2 className="text-2xl font-heading font-bold text-gray-900 mb-2">{t('home.plansPackages')}</h2>
|
||||
<p className="text-gray-500 mb-10">{t('home.choosePlan')}</p>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-6 max-w-4xl mx-auto">
|
||||
{packages.filter(p => p.enabled).slice(0, 3).map((pkg, i) => (
|
||||
<SpotlightCard
|
||||
key={pkg.id}
|
||||
className={`!bg-white !rounded-2xl !p-0 !flex !flex-col ${
|
||||
i === 1 ? '!border-blue-200 !shadow-md !shadow-blue-50' : '!border-gray-100'
|
||||
}`}
|
||||
spotlightColor={i === 1 ? 'rgba(59,130,246,0.1)' : 'rgba(0,0,0,0.03)'}
|
||||
>
|
||||
<div className="p-6 flex-1 flex flex-col">
|
||||
{i === 1 && <span className="text-xs text-blue-600 font-semibold uppercase tracking-wider mb-2">Popular</span>}
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-1">{pkg.name}</h3>
|
||||
{pkg.description && <p className="text-sm text-gray-500 mb-4">{pkg.description}</p>}
|
||||
<div className="mt-auto pt-4">
|
||||
<div className="flex items-baseline gap-1">
|
||||
<span className="text-3xl font-bold text-gray-900">${pkg.price}</span>
|
||||
{pkg.original_price > pkg.price && (
|
||||
<span className="text-sm text-gray-500 line-through">${pkg.original_price}</span>
|
||||
)}
|
||||
</div>
|
||||
{pkg.duration > 0 && <p className="text-xs text-gray-500 mt-1">{t('home.days', { count: pkg.duration })}</p>}
|
||||
</div>
|
||||
<Link to={user ? '/packages' : '/register'} className={`mt-4 py-2.5 rounded-xl font-medium text-sm text-center transition-colors ${
|
||||
i === 1
|
||||
? 'bg-blue-600 text-white hover:bg-blue-700'
|
||||
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
|
||||
}`}>
|
||||
{user ? t('home.subscribe') : t('home.getStarted')}
|
||||
</Link>
|
||||
</div>
|
||||
</SpotlightCard>
|
||||
))}
|
||||
</div>
|
||||
</FadeContent>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-3 gap-4 max-w-4xl">
|
||||
{packages.filter(p => p.enabled).slice(0, 3).map((pkg, i) => (
|
||||
<div key={pkg.id} className={`rounded-xl p-6 flex flex-col border transition-all ${
|
||||
i === 1 ? 'border-blue-200 bg-blue-50/50 shadow-sm' : 'border-gray-100 hover:border-gray-200'
|
||||
}`}>
|
||||
{i === 1 && <span className="text-xs text-blue-600 font-semibold mb-2 uppercase tracking-wider">{t('home.popular') || 'Popular'}</span>}
|
||||
<h3 className="text-base font-semibold text-gray-900">{pkg.name}</h3>
|
||||
{pkg.description && <p className="text-sm text-gray-500 mt-1">{pkg.description}</p>}
|
||||
<div className="mt-auto pt-6">
|
||||
<span className="text-3xl font-bold text-gray-900">${pkg.price}</span>
|
||||
{pkg.original_price > pkg.price && (
|
||||
<span className="text-sm text-gray-500 line-through ml-2">${pkg.original_price}</span>
|
||||
)}
|
||||
{pkg.duration > 0 && <p className="text-xs text-gray-500 mt-1">{t('home.days', { count: pkg.duration })}</p>}
|
||||
</div>
|
||||
<Link to={user ? '/packages' : '/register'} className={`mt-4 py-2.5 rounded-lg font-medium text-sm text-center transition-colors ${
|
||||
i === 1
|
||||
? 'bg-blue-600 text-white hover:bg-blue-700'
|
||||
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
|
||||
}`}>
|
||||
{user ? t('home.subscribe') : t('home.getStarted')}
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</FadeContent>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* CTA */}
|
||||
<section className="max-w-6xl mx-auto px-6 py-24">
|
||||
<FadeContent blur duration={600} delay={100}>
|
||||
<div className="bg-gradient-to-br from-blue-600 to-indigo-700 rounded-3xl p-12 text-center">
|
||||
<h2 className="text-3xl font-bold text-white mb-4">{t('home.readyToStart')}</h2>
|
||||
<p className="text-blue-100 mb-8 max-w-md mx-auto">{t('home.readyToStartDesc')}</p>
|
||||
<section className="max-w-5xl mx-auto px-6 py-24">
|
||||
<FadeContent blur duration={800} delay={100}>
|
||||
<div className="border-t border-gray-100 pt-16 text-center">
|
||||
<h2 className="text-2xl font-heading font-bold text-gray-900 mb-3">{t('home.readyToStart')}</h2>
|
||||
<p className="text-gray-500 mb-8 max-w-md mx-auto">{t('home.readyToStartDesc')}</p>
|
||||
<div className="flex items-center justify-center gap-4">
|
||||
{user ? (
|
||||
<Link to="/dashboard" className="px-8 py-3 rounded-xl bg-white text-blue-700 font-semibold text-sm hover:bg-blue-50 transition-colors">
|
||||
{t('home.goToDashboard')}
|
||||
<Link to="/dashboard" className="px-7 py-3 rounded-xl bg-blue-600 text-white font-medium text-sm hover:bg-blue-700 transition-colors shadow-sm">
|
||||
{t('home.goToDashboard')} →
|
||||
</Link>
|
||||
) : (
|
||||
<>
|
||||
<Link to="/register" className="px-8 py-3 rounded-xl bg-white text-blue-700 font-semibold text-sm hover:bg-blue-50 transition-colors">
|
||||
{t('home.createFreeAccount')}
|
||||
<Link to="/register" className="px-7 py-3 rounded-xl bg-blue-600 text-white font-medium text-sm hover:bg-blue-700 transition-colors shadow-sm">
|
||||
{t('home.createFreeAccount')} →
|
||||
</Link>
|
||||
<Link to="/login" className="px-8 py-3 rounded-xl border border-white/30 text-white font-medium text-sm hover:bg-white/10 transition-colors">
|
||||
<Link to="/login" className="px-7 py-3 text-gray-500 font-medium text-sm hover:text-gray-900 transition-colors">
|
||||
{t('home.signIn')}
|
||||
</Link>
|
||||
</>
|
||||
|
||||
+144
-213
@@ -6,9 +6,6 @@ import { useSite } from '../../context/SiteContext';
|
||||
import { getSiteModels, getSitePackages } from '../../api';
|
||||
import CountUp from '../../components/bits/CountUp';
|
||||
import FadeContent from '../../components/bits/FadeContent';
|
||||
import GradientText from '../../components/bits/GradientText';
|
||||
import SpotlightCard from '../../components/bits/SpotlightCard';
|
||||
import ShinyText from '../../components/bits/ShinyText';
|
||||
|
||||
export default function CorporateHome() {
|
||||
const { t } = useTranslation();
|
||||
@@ -25,131 +22,95 @@ export default function CorporateHome() {
|
||||
const enabledModels = models.filter(m => m.enabled !== false);
|
||||
|
||||
return (
|
||||
<div className="bg-white">
|
||||
{/* Hero */}
|
||||
<section className="relative overflow-hidden">
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-slate-50 to-white" />
|
||||
<div className="absolute inset-0 bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(148,163,184,0.15),transparent)]" />
|
||||
<div className="relative max-w-7xl mx-auto px-6 lg:px-8 pt-24 pb-20">
|
||||
<FadeContent blur duration={600} delay={100}>
|
||||
<div className="max-w-3xl">
|
||||
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-md bg-slate-100 text-slate-600 text-xs font-semibold uppercase tracking-wider mb-8">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse" />
|
||||
<ShinyText
|
||||
text={t('home.lightningFast')}
|
||||
speed={5}
|
||||
color="#475569"
|
||||
shineColor="rgba(71,85,105,0.4)"
|
||||
className="text-xs font-semibold uppercase tracking-wider"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
{/* Hero — left-aligned, formal */}
|
||||
<section className="max-w-6xl mx-auto px-6 lg:px-8 pt-32 pb-20">
|
||||
<FadeContent blur duration={800} delay={100}>
|
||||
<div className="max-w-3xl">
|
||||
<h1 className="text-5xl md:text-6xl font-bold text-slate-900 leading-[1.1] tracking-tight">
|
||||
{site?.name || t('home.defaultHeroTitle')}
|
||||
</h1>
|
||||
<p className="text-lg text-slate-500 mt-6 leading-relaxed max-w-xl">
|
||||
{t('home.heroSubtitle')}
|
||||
</p>
|
||||
|
||||
<h1 className="text-4xl md:text-5xl lg:text-6xl font-bold leading-[1.1] tracking-tight mb-6">
|
||||
<GradientText
|
||||
colors={['#0f172a', '#334155', '#64748b', '#334155', '#0f172a']}
|
||||
animationSpeed={8}
|
||||
className="text-4xl md:text-5xl lg:text-6xl font-bold leading-[1.1] tracking-tight"
|
||||
>
|
||||
{site?.name || t('home.defaultHeroTitle')}
|
||||
</GradientText>
|
||||
</h1>
|
||||
|
||||
<p className="text-lg text-slate-500 max-w-xl mb-10 leading-relaxed">
|
||||
{t('home.heroSubtitle')}
|
||||
</p>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
{user ? (
|
||||
<Link to="/dashboard" className="inline-flex items-center px-6 py-3 rounded-lg bg-slate-900 text-white font-semibold text-sm hover:bg-slate-800 transition-colors">
|
||||
{t('home.goToDashboard')}
|
||||
<svg className="ml-2 w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" /></svg>
|
||||
<div className="flex items-center gap-4 mt-10">
|
||||
{user ? (
|
||||
<Link to="/dashboard" className="px-7 py-3 rounded-lg bg-slate-900 text-white font-medium text-sm hover:bg-slate-800 transition-colors">
|
||||
{t('home.goToDashboard')} →
|
||||
</Link>
|
||||
) : (
|
||||
<>
|
||||
<Link to="/register" className="px-7 py-3 rounded-lg bg-slate-900 text-white font-medium text-sm hover:bg-slate-800 transition-colors">
|
||||
{t('home.getStarted')}
|
||||
</Link>
|
||||
) : (
|
||||
<>
|
||||
<Link to="/register" className="inline-flex items-center px-6 py-3 rounded-lg bg-slate-900 text-white font-semibold text-sm hover:bg-slate-800 transition-colors">
|
||||
{t('home.getStarted')}
|
||||
<svg className="ml-2 w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" /></svg>
|
||||
</Link>
|
||||
<Link to="/pricing" className="inline-flex items-center px-6 py-3 rounded-lg border-2 border-slate-200 text-slate-700 font-semibold text-sm hover:border-slate-300 hover:bg-slate-50 transition-colors">
|
||||
{t('home.viewPricing')}
|
||||
</Link>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<Link to="/pricing" className="px-7 py-3 text-slate-500 font-medium text-sm hover:text-slate-900 transition-colors">
|
||||
{t('home.viewPricing')} →
|
||||
</Link>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</FadeContent>
|
||||
</div>
|
||||
</FadeContent>
|
||||
|
||||
{/* Stats bar */}
|
||||
<FadeContent blur duration={600} delay={300}>
|
||||
<div className="mt-20 grid grid-cols-3 divide-x divide-slate-200 border border-slate-200 rounded-xl bg-white shadow-sm">
|
||||
<div className="px-8 py-6 text-center">
|
||||
<div className="text-3xl font-bold text-slate-900">
|
||||
<CountUp from={0} to={enabledModels.length || 50} duration={2} />+
|
||||
</div>
|
||||
<p className="text-sm text-slate-500 mt-1 font-medium">{t('home.aiModels')}</p>
|
||||
</div>
|
||||
<div className="px-8 py-6 text-center">
|
||||
<div className="text-3xl font-bold text-slate-900">
|
||||
<CountUp from={0} to={99.9} duration={2.5} />%
|
||||
</div>
|
||||
<p className="text-sm text-slate-500 mt-1 font-medium">{t('home.uptime')}</p>
|
||||
</div>
|
||||
<div className="px-8 py-6 text-center">
|
||||
<div className="text-3xl font-bold text-slate-900">
|
||||
<<CountUp from={200} to={50} duration={2} direction="down" />ms
|
||||
</div>
|
||||
<p className="text-sm text-slate-500 mt-1 font-medium">{t('home.latency')}</p>
|
||||
{/* Stats — horizontal bar */}
|
||||
<FadeContent blur duration={800} delay={400}>
|
||||
<div className="flex items-center divide-x divide-slate-200 mt-20 pt-10 border-t border-slate-200">
|
||||
<div className="pr-12">
|
||||
<div className="text-2xl font-bold text-slate-900">
|
||||
<CountUp from={0} to={enabledModels.length || 50} duration={2} />+
|
||||
</div>
|
||||
<p className="text-sm text-slate-500 mt-0.5">{t('home.aiModels')}</p>
|
||||
</div>
|
||||
</FadeContent>
|
||||
</div>
|
||||
<div className="px-12">
|
||||
<div className="text-2xl font-bold text-slate-900">
|
||||
<CountUp from={0} to={99.9} duration={2.5} />%
|
||||
</div>
|
||||
<p className="text-sm text-slate-500 mt-0.5">{t('home.uptime')}</p>
|
||||
</div>
|
||||
<div className="pl-12">
|
||||
<div className="text-2xl font-bold text-slate-900">
|
||||
<<CountUp from={200} to={50} duration={2} direction="down" />ms
|
||||
</div>
|
||||
<p className="text-sm text-slate-500 mt-0.5">{t('home.latency')}</p>
|
||||
</div>
|
||||
</div>
|
||||
</FadeContent>
|
||||
</section>
|
||||
|
||||
{/* Features */}
|
||||
<section className="border-y border-slate-200 bg-slate-50">
|
||||
<div className="max-w-7xl mx-auto px-6 lg:px-8 py-24">
|
||||
<FadeContent blur duration={600} delay={100}>
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-3xl font-bold text-slate-900 tracking-tight mb-3">{t('home.whyChooseUs')}</h2>
|
||||
<p className="text-slate-500 text-lg">{t('home.whyChooseUsDesc')}</p>
|
||||
</div>
|
||||
<section className="bg-slate-50 border-y border-slate-200">
|
||||
<div className="max-w-6xl mx-auto px-6 lg:px-8 py-20">
|
||||
<FadeContent blur duration={800} delay={100}>
|
||||
<h2 className="text-2xl font-bold text-slate-900 mb-2">{t('home.whyChooseUs')}</h2>
|
||||
<p className="text-slate-500 mb-10">{t('home.whyChooseUsDesc')}</p>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
<SpotlightCard className="!bg-white !rounded-xl !p-0 !border-slate-200 !shadow-sm" spotlightColor="rgba(245,158,11,0.06)">
|
||||
<div className="p-8">
|
||||
<div className="w-11 h-11 rounded-lg bg-amber-100 flex items-center justify-center mb-5">
|
||||
<svg className="w-5 h-5 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
|
||||
</svg>
|
||||
<div className="grid md:grid-cols-3 gap-6">
|
||||
{[
|
||||
{ title: t('home.lightningFast'), desc: t('home.lightningFastDesc'), icon: (
|
||||
<svg className="w-5 h-5 text-slate-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M13 10V3L4 14h7v7l9-11h-7z" />
|
||||
</svg>
|
||||
)},
|
||||
{ title: t('home.securePrivate'), desc: t('home.securePrivateDesc'), icon: (
|
||||
<svg className="w-5 h-5 text-slate-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
|
||||
</svg>
|
||||
)},
|
||||
{ title: t('home.payAsYouGo'), desc: t('home.payAsYouGoDesc'), icon: (
|
||||
<svg className="w-5 h-5 text-slate-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
)},
|
||||
].map((f, i) => (
|
||||
<div key={i} className="p-6 rounded-xl bg-white border border-slate-200 hover:shadow-sm transition-all">
|
||||
<div className="w-10 h-10 rounded-lg bg-slate-100 flex items-center justify-center mb-4">
|
||||
{f.icon}
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-slate-900 mb-2">{t('home.lightningFast')}</h3>
|
||||
<p className="text-sm text-slate-500 leading-relaxed">{t('home.lightningFastDesc')}</p>
|
||||
<h3 className="text-base font-semibold text-slate-900 mb-2">{f.title}</h3>
|
||||
<p className="text-sm text-slate-500 leading-relaxed">{f.desc}</p>
|
||||
</div>
|
||||
</SpotlightCard>
|
||||
|
||||
<SpotlightCard className="!bg-white !rounded-xl !p-0 !border-slate-200 !shadow-sm" spotlightColor="rgba(14,165,233,0.06)">
|
||||
<div className="p-8">
|
||||
<div className="w-11 h-11 rounded-lg bg-sky-100 flex items-center justify-center mb-5">
|
||||
<svg className="w-5 h-5 text-sky-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-slate-900 mb-2">{t('home.securePrivate')}</h3>
|
||||
<p className="text-sm text-slate-500 leading-relaxed">{t('home.securePrivateDesc')}</p>
|
||||
</div>
|
||||
</SpotlightCard>
|
||||
|
||||
<SpotlightCard className="!bg-white !rounded-xl !p-0 !border-slate-200 !shadow-sm" spotlightColor="rgba(16,185,129,0.06)">
|
||||
<div className="p-8">
|
||||
<div className="w-11 h-11 rounded-lg bg-emerald-100 flex items-center justify-center mb-5">
|
||||
<svg className="w-5 h-5 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-slate-900 mb-2">{t('home.payAsYouGo')}</h3>
|
||||
<p className="text-sm text-slate-500 leading-relaxed">{t('home.payAsYouGoDesc')}</p>
|
||||
</div>
|
||||
</SpotlightCard>
|
||||
))}
|
||||
</div>
|
||||
</FadeContent>
|
||||
</div>
|
||||
@@ -157,121 +118,91 @@ export default function CorporateHome() {
|
||||
|
||||
{/* Models */}
|
||||
{enabledModels.length > 0 && (
|
||||
<section className="max-w-7xl mx-auto px-6 lg:px-8 py-24">
|
||||
<FadeContent blur duration={600} delay={100}>
|
||||
<div className="text-center mb-14">
|
||||
<h2 className="text-3xl font-bold text-slate-900 tracking-tight mb-3">{t('home.availableModels')}</h2>
|
||||
<p className="text-slate-500 text-lg">{t('home.availableModelsDesc', { count: enabledModels.length })}</p>
|
||||
<section className="max-w-6xl mx-auto px-6 lg:px-8 py-20">
|
||||
<FadeContent blur duration={800} delay={100}>
|
||||
<div className="flex items-end justify-between mb-8">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-slate-900 mb-2">{t('home.availableModels')}</h2>
|
||||
<p className="text-slate-500">{t('home.availableModelsDesc', { count: enabledModels.length })}</p>
|
||||
</div>
|
||||
{enabledModels.length > 8 && (
|
||||
<Link to="/pricing" className="text-sm text-slate-600 hover:text-slate-900 transition-colors font-medium">
|
||||
{t('home.viewAllModels', { count: enabledModels.length })} →
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
|
||||
{enabledModels.slice(0, 12).map((m, i) => (
|
||||
<div key={m.id || i} className="px-4 py-3.5 rounded-lg border border-slate-200 bg-white flex items-center gap-3 hover:border-slate-300 hover:shadow-sm transition-all group">
|
||||
<div className="w-2 h-2 rounded-full bg-emerald-500 flex-shrink-0" />
|
||||
<span className="text-sm font-mono text-slate-600 group-hover:text-slate-900 transition-colors truncate">
|
||||
{m.display_name || m.model_name}
|
||||
</span>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-2">
|
||||
{enabledModels.slice(0, 8).map((m, i) => (
|
||||
<div key={m.id || i} className="px-4 py-3 rounded-lg border border-slate-200 hover:border-slate-300 transition-colors">
|
||||
<span className="text-sm text-slate-600 font-mono">{m.display_name || m.model_name}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{enabledModels.length > 12 && (
|
||||
<div className="text-center mt-8">
|
||||
<Link to="/pricing" className="inline-flex items-center text-sm text-slate-600 hover:text-slate-900 transition-colors font-semibold">
|
||||
{t('home.viewAllModels', { count: enabledModels.length })}
|
||||
<svg className="ml-1 w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" /></svg>
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
</FadeContent>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* Packages */}
|
||||
{packages.length > 0 && (
|
||||
<section className="border-y border-slate-200 bg-slate-50">
|
||||
<div className="max-w-7xl mx-auto px-6 lg:px-8 py-24">
|
||||
<FadeContent blur duration={600} delay={100}>
|
||||
<div className="text-center mb-14">
|
||||
<h2 className="text-3xl font-bold text-slate-900 tracking-tight mb-3">{t('home.plansPackages')}</h2>
|
||||
<p className="text-slate-500 text-lg">{t('home.choosePlan')}</p>
|
||||
</div>
|
||||
<section className="max-w-6xl mx-auto px-6 lg:px-8 py-20">
|
||||
<FadeContent blur duration={800} delay={100}>
|
||||
<h2 className="text-2xl font-bold text-slate-900 mb-2">{t('home.plansPackages')}</h2>
|
||||
<p className="text-slate-500 mb-10">{t('home.choosePlan')}</p>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
|
||||
{packages.filter(p => p.enabled).slice(0, 3).map((pkg, i) => (
|
||||
<SpotlightCard
|
||||
key={pkg.id}
|
||||
className={`!bg-white !rounded-xl !p-0 !flex !flex-col ${
|
||||
i === 1 ? '!border-slate-900 !shadow-md relative' : '!border-slate-200'
|
||||
}`}
|
||||
spotlightColor={i === 1 ? 'rgba(15,23,42,0.06)' : 'rgba(0,0,0,0.02)'}
|
||||
>
|
||||
<div className="relative">
|
||||
{i === 1 && (
|
||||
<div className="absolute -top-3 left-1/2 -translate-x-1/2">
|
||||
<span className="bg-slate-900 text-white text-xs font-bold px-3 py-1 rounded-full uppercase tracking-wider">Popular</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="p-8 flex-1 flex flex-col">
|
||||
<h3 className="text-xl font-bold text-slate-900 mb-1">{pkg.name}</h3>
|
||||
{pkg.description && <p className="text-sm text-slate-500 mb-6">{pkg.description}</p>}
|
||||
<div className="mt-auto">
|
||||
<div className="flex items-baseline gap-1.5">
|
||||
<span className="text-4xl font-bold text-slate-900">${pkg.price}</span>
|
||||
{pkg.original_price > pkg.price && (
|
||||
<span className="text-sm text-slate-500 line-through">${pkg.original_price}</span>
|
||||
)}
|
||||
</div>
|
||||
{pkg.duration > 0 && <p className="text-sm text-slate-500 mt-1">{t('home.days', { count: pkg.duration })}</p>}
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-8 pb-8">
|
||||
<Link to={user ? '/packages' : '/register'} className={`block py-3 rounded-lg font-semibold text-sm text-center transition-colors ${
|
||||
i === 1
|
||||
? 'bg-slate-900 text-white hover:bg-slate-800'
|
||||
: 'bg-slate-100 text-slate-700 hover:bg-slate-200'
|
||||
}`}>
|
||||
{user ? t('home.subscribe') : t('home.getStarted')}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</SpotlightCard>
|
||||
))}
|
||||
</div>
|
||||
</FadeContent>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-3 gap-5 max-w-4xl">
|
||||
{packages.filter(p => p.enabled).slice(0, 3).map((pkg, i) => (
|
||||
<div key={pkg.id} className={`rounded-xl p-6 flex flex-col border transition-all ${
|
||||
i === 1 ? 'border-slate-900 shadow-sm' : 'border-slate-200 hover:border-slate-300'
|
||||
}`}>
|
||||
{i === 1 && <span className="text-xs text-slate-900 font-semibold mb-2 uppercase tracking-wider">{t('home.popular') || 'Popular'}</span>}
|
||||
<h3 className="text-base font-semibold text-slate-900">{pkg.name}</h3>
|
||||
{pkg.description && <p className="text-sm text-slate-500 mt-1">{pkg.description}</p>}
|
||||
<div className="mt-auto pt-6">
|
||||
<span className="text-3xl font-bold text-slate-900">${pkg.price}</span>
|
||||
{pkg.original_price > pkg.price && (
|
||||
<span className="text-sm text-slate-500 line-through ml-2">${pkg.original_price}</span>
|
||||
)}
|
||||
{pkg.duration > 0 && <p className="text-xs text-slate-500 mt-1">{t('home.days', { count: pkg.duration })}</p>}
|
||||
</div>
|
||||
<Link to={user ? '/packages' : '/register'} className={`mt-4 py-2.5 rounded-lg font-medium text-sm text-center transition-colors ${
|
||||
i === 1
|
||||
? 'bg-slate-900 text-white hover:bg-slate-800'
|
||||
: 'bg-slate-100 text-slate-700 hover:bg-slate-200'
|
||||
}`}>
|
||||
{user ? t('home.subscribe') : t('home.getStarted')}
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</FadeContent>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* CTA */}
|
||||
<section className="max-w-7xl mx-auto px-6 lg:px-8 py-24">
|
||||
<FadeContent blur duration={600} delay={100}>
|
||||
<div className="bg-slate-900 rounded-2xl p-12 md:p-16 text-center relative overflow-hidden">
|
||||
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,rgba(148,163,184,0.15),transparent)]" />
|
||||
<div className="relative">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-white mb-4 tracking-tight">{t('home.readyToStart')}</h2>
|
||||
<p className="text-slate-400 mb-10 max-w-lg mx-auto text-lg">{t('home.readyToStartDesc')}</p>
|
||||
<div className="flex items-center justify-center gap-4">
|
||||
{user ? (
|
||||
<Link to="/dashboard" className="inline-flex items-center px-8 py-3 rounded-lg bg-white text-slate-900 font-semibold text-sm hover:bg-slate-100 transition-colors">
|
||||
{t('home.goToDashboard')}
|
||||
<svg className="ml-2 w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" /></svg>
|
||||
<section className="bg-slate-900">
|
||||
<div className="max-w-6xl mx-auto px-6 lg:px-8 py-20 text-center">
|
||||
<FadeContent blur duration={800} delay={100}>
|
||||
<h2 className="text-2xl font-bold text-white mb-3">{t('home.readyToStart')}</h2>
|
||||
<p className="text-slate-400 mb-8 max-w-md mx-auto">{t('home.readyToStartDesc')}</p>
|
||||
<div className="flex items-center justify-center gap-4">
|
||||
{user ? (
|
||||
<Link to="/dashboard" className="px-7 py-3 rounded-lg bg-white text-slate-900 font-medium text-sm hover:bg-slate-100 transition-colors">
|
||||
{t('home.goToDashboard')} →
|
||||
</Link>
|
||||
) : (
|
||||
<>
|
||||
<Link to="/register" className="px-7 py-3 rounded-lg bg-white text-slate-900 font-medium text-sm hover:bg-slate-100 transition-colors">
|
||||
{t('home.createFreeAccount')} →
|
||||
</Link>
|
||||
) : (
|
||||
<>
|
||||
<Link to="/register" className="inline-flex items-center px-8 py-3 rounded-lg bg-white text-slate-900 font-semibold text-sm hover:bg-slate-100 transition-colors">
|
||||
{t('home.createFreeAccount')}
|
||||
<svg className="ml-2 w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" /></svg>
|
||||
</Link>
|
||||
<Link to="/login" className="px-8 py-3 rounded-lg border border-slate-700 text-slate-300 font-medium text-sm hover:bg-slate-800 transition-colors">
|
||||
{t('home.signIn')}
|
||||
</Link>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<Link to="/login" className="px-7 py-3 text-slate-400 font-medium text-sm hover:text-white transition-colors">
|
||||
{t('home.signIn')}
|
||||
</Link>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</FadeContent>
|
||||
</FadeContent>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
|
||||
+132
-156
@@ -4,9 +4,8 @@ import { useTranslation } from 'react-i18next';
|
||||
import { useAuth } from '../../context/AuthContext';
|
||||
import { useSite } from '../../context/SiteContext';
|
||||
import { getSiteModels, getSitePackages } from '../../api';
|
||||
import Particles from '../../components/bits/Particles';
|
||||
import DecryptedText from '../../components/bits/DecryptedText';
|
||||
import CountUp from '../../components/bits/CountUp';
|
||||
import FadeContent from '../../components/bits/FadeContent';
|
||||
|
||||
export default function DarkHome() {
|
||||
const { t } = useTranslation();
|
||||
@@ -24,200 +23,177 @@ export default function DarkHome() {
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
{/* Particles Background */}
|
||||
<div className="absolute inset-0 h-[800px] overflow-hidden pointer-events-none">
|
||||
<Particles
|
||||
particleColors={['#10b981', '#06b6d4', '#8b5cf6']}
|
||||
particleCount={60}
|
||||
particleSpread={15}
|
||||
speed={0.2}
|
||||
particleBaseSize={80}
|
||||
moveParticlesOnHover={true}
|
||||
alphaParticles={false}
|
||||
disableRotation={false}
|
||||
/>
|
||||
</div>
|
||||
{/* Hero — left-aligned, elegant dark */}
|
||||
<section className="max-w-5xl mx-auto px-6 pt-32 pb-24">
|
||||
<FadeContent blur duration={800} delay={100}>
|
||||
<div className="max-w-3xl">
|
||||
<div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full border border-emerald-500/20 mb-8">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-emerald-500" />
|
||||
<span className="text-xs text-emerald-400/80 font-medium tracking-wide">{t('home.heroTagline') || 'All Systems Operational'}</span>
|
||||
</div>
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="relative max-w-7xl mx-auto px-6 pt-28 pb-24">
|
||||
<div className="text-center max-w-4xl mx-auto">
|
||||
{/* Terminal badge */}
|
||||
<div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full border border-emerald-500/20 bg-emerald-500/5 mb-8">
|
||||
<span className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" />
|
||||
<span className="text-xs font-mono text-emerald-400/80 uppercase tracking-wider">System Online</span>
|
||||
</div>
|
||||
<h1 className="text-5xl md:text-6xl font-heading font-bold text-white leading-[1.1] tracking-tight">
|
||||
{site?.name || t('home.defaultHeroTitle')}
|
||||
</h1>
|
||||
<p className="text-lg text-neutral-400 mt-6 leading-relaxed max-w-xl">
|
||||
{t('home.heroSubtitle')}
|
||||
</p>
|
||||
|
||||
<h1 className="text-5xl md:text-7xl font-extrabold text-white leading-tight mb-6 tracking-tight">
|
||||
<DecryptedText
|
||||
text={site?.name || t('home.defaultHeroTitle')}
|
||||
speed={60}
|
||||
maxIterations={10}
|
||||
revealDirection="start"
|
||||
className="text-white"
|
||||
encryptedClassName="text-emerald-500/30"
|
||||
/>
|
||||
</h1>
|
||||
|
||||
<p className="text-lg md:text-xl text-neutral-400 max-w-2xl mx-auto mb-10 leading-relaxed">
|
||||
<span className="text-emerald-400/60 font-mono">{'> '}</span>
|
||||
{t('home.heroSubtitle')}
|
||||
</p>
|
||||
|
||||
<div className="flex items-center justify-center gap-4">
|
||||
{user ? (
|
||||
<Link to="/dashboard" className="px-8 py-3.5 rounded-lg bg-emerald-500 text-black font-bold text-base hover:bg-emerald-400 transition-all font-mono shadow-lg shadow-emerald-500/20">
|
||||
{t('home.goToDashboard')}
|
||||
</Link>
|
||||
) : (
|
||||
<>
|
||||
<Link to="/register" className="px-8 py-3.5 rounded-lg bg-emerald-500 text-black font-bold text-base hover:bg-emerald-400 transition-all font-mono shadow-lg shadow-emerald-500/20">
|
||||
{t('home.getStarted')}
|
||||
<div className="flex items-center gap-4 mt-10">
|
||||
{user ? (
|
||||
<Link to="/dashboard" className="px-7 py-3 rounded-lg bg-emerald-500 text-black font-semibold text-sm hover:bg-emerald-400 transition-colors">
|
||||
{t('home.goToDashboard')} →
|
||||
</Link>
|
||||
<Link to="/pricing" className="px-8 py-3.5 rounded-lg border border-emerald-500/20 text-emerald-400 font-medium text-base hover:bg-emerald-500/10 transition-all font-mono">
|
||||
{t('home.viewPricing')}
|
||||
</Link>
|
||||
</>
|
||||
)}
|
||||
) : (
|
||||
<>
|
||||
<Link to="/register" className="px-7 py-3 rounded-lg bg-emerald-500 text-black font-semibold text-sm hover:bg-emerald-400 transition-colors">
|
||||
{t('home.getStarted')}
|
||||
</Link>
|
||||
<Link to="/pricing" className="px-7 py-3 text-neutral-400 font-medium text-sm hover:text-white transition-colors">
|
||||
{t('home.viewPricing')} →
|
||||
</Link>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</FadeContent>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="grid grid-cols-3 gap-4 max-w-2xl mx-auto mt-20">
|
||||
{[
|
||||
{ label: t('home.aiModels'), value: enabledModels.length || 50, suffix: '+', color: 'text-emerald-400', border: 'border-emerald-500/15' },
|
||||
{ label: t('home.uptime'), value: 99.9, suffix: '%', color: 'text-cyan-400', border: 'border-cyan-500/15' },
|
||||
{ label: t('home.latency'), value: 50, suffix: 'ms', prefix: '<', color: 'text-violet-400', border: 'border-violet-500/15' },
|
||||
].map((s, i) => (
|
||||
<div key={i} className={`text-center p-5 rounded-lg bg-[#030712]/60 border ${s.border} font-mono backdrop-blur-sm`}>
|
||||
<div className={`text-3xl font-bold ${s.color}`}>
|
||||
{s.prefix}<CountUp from={0} to={s.value} duration={2} />{s.suffix}
|
||||
<FadeContent blur duration={800} delay={400}>
|
||||
<div className="flex items-center gap-12 mt-20 border-t border-neutral-800 pt-10">
|
||||
<div>
|
||||
<div className="text-2xl font-bold text-emerald-400">
|
||||
<CountUp from={0} to={enabledModels.length || 50} duration={2} />+
|
||||
</div>
|
||||
<p className="text-xs text-neutral-500 mt-1.5 uppercase tracking-wider">{s.label}</p>
|
||||
<p className="text-sm text-neutral-500 mt-0.5">{t('home.aiModels')}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Features Section */}
|
||||
<section className="relative max-w-7xl mx-auto px-6 py-20">
|
||||
<div className="text-center mb-14">
|
||||
<h2 className="text-3xl font-bold text-white mb-3">{t('home.whyChooseUs')}</h2>
|
||||
<p className="text-neutral-500">{t('home.whyChooseUsDesc')}</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-6">
|
||||
{[
|
||||
{ icon: (
|
||||
<svg className="w-5 h-5 text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M13 10V3L4 14h7v7l9-11h-7z" />
|
||||
</svg>
|
||||
), title: t('home.lightningFast'), desc: t('home.lightningFastDesc'), accent: 'emerald' },
|
||||
{ icon: (
|
||||
<svg className="w-5 h-5 text-cyan-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
|
||||
</svg>
|
||||
), title: t('home.securePrivate'), desc: t('home.securePrivateDesc'), accent: 'cyan' },
|
||||
{ icon: (
|
||||
<svg className="w-5 h-5 text-violet-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
), title: t('home.payAsYouGo'), desc: t('home.payAsYouGoDesc'), accent: 'violet' },
|
||||
].map((f, i) => (
|
||||
<div key={i} className={`p-6 rounded-xl bg-[#030712]/60 border border-${f.accent}-500/10 hover:border-${f.accent}-500/25 transition-all group backdrop-blur-sm`}>
|
||||
<div className={`w-10 h-10 rounded-lg bg-${f.accent}-500/10 flex items-center justify-center mb-4`}>
|
||||
{f.icon}
|
||||
<div>
|
||||
<div className="text-2xl font-bold text-white">
|
||||
<CountUp from={0} to={99.9} duration={2.5} />%
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-white mb-2">{f.title}</h3>
|
||||
<p className="text-sm text-neutral-400 leading-relaxed">{f.desc}</p>
|
||||
<div className={`h-px w-0 group-hover:w-full bg-gradient-to-r from-${f.accent}-500/50 to-transparent transition-all duration-500 mt-4`} />
|
||||
<p className="text-sm text-neutral-500 mt-0.5">{t('home.uptime')}</p>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-2xl font-bold text-white">
|
||||
<<CountUp from={200} to={50} duration={2} direction="down" />ms
|
||||
</div>
|
||||
<p className="text-sm text-neutral-500 mt-0.5">{t('home.latency')}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Models Preview */}
|
||||
{enabledModels.length > 0 && (
|
||||
<section className="relative max-w-7xl mx-auto px-6 py-20">
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-3xl font-bold text-white mb-3">{t('home.availableModels')}</h2>
|
||||
<p className="text-neutral-500">{t('home.availableModelsDesc', { count: enabledModels.length })}</p>
|
||||
</div>
|
||||
</FadeContent>
|
||||
</section>
|
||||
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-2">
|
||||
{enabledModels.slice(0, 12).map((m, i) => (
|
||||
<div key={m.id || i} className="px-4 py-3 rounded-lg bg-[#030712]/60 border border-emerald-500/[0.08] flex items-center gap-3 hover:border-emerald-500/20 transition-colors group font-mono backdrop-blur-sm">
|
||||
<span className="text-emerald-500/60 text-xs">$</span>
|
||||
<span className="text-sm text-neutral-400 group-hover:text-emerald-400 transition-colors truncate">
|
||||
{m.display_name || m.model_name}
|
||||
</span>
|
||||
{/* Features */}
|
||||
<section className="max-w-5xl mx-auto px-6 py-20">
|
||||
<FadeContent blur duration={800} delay={100}>
|
||||
<h2 className="text-2xl font-heading font-bold text-white mb-2">{t('home.whyChooseUs')}</h2>
|
||||
<p className="text-neutral-500 mb-10">{t('home.whyChooseUsDesc')}</p>
|
||||
|
||||
<div className="space-y-0">
|
||||
{[
|
||||
{ title: t('home.lightningFast'), desc: t('home.lightningFastDesc'), accent: 'emerald' },
|
||||
{ title: t('home.securePrivate'), desc: t('home.securePrivateDesc'), accent: 'cyan' },
|
||||
{ title: t('home.payAsYouGo'), desc: t('home.payAsYouGoDesc'), accent: 'violet' },
|
||||
].map((f, i) => (
|
||||
<div key={i} className="flex gap-6 items-start py-6 border-b border-neutral-800/60 last:border-0 group">
|
||||
<span className={`text-sm font-mono text-${f.accent}-500/60 mt-0.5`}>0{i + 1}</span>
|
||||
<div>
|
||||
<h3 className="text-base font-semibold text-white mb-1 group-hover:text-neutral-300 transition-colors">{f.title}</h3>
|
||||
<p className="text-sm text-neutral-500 leading-relaxed max-w-lg">{f.desc}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</FadeContent>
|
||||
</section>
|
||||
|
||||
{enabledModels.length > 12 && (
|
||||
<div className="text-center mt-6">
|
||||
<Link to="/pricing" className="text-sm text-emerald-400 hover:text-emerald-300 transition-colors font-mono">
|
||||
{t('home.viewAllModels', { count: enabledModels.length })} →
|
||||
</Link>
|
||||
{/* Models */}
|
||||
{enabledModels.length > 0 && (
|
||||
<section className="max-w-5xl mx-auto px-6 py-20">
|
||||
<FadeContent blur duration={800} delay={100}>
|
||||
<div className="flex items-end justify-between mb-8">
|
||||
<div>
|
||||
<h2 className="text-2xl font-heading font-bold text-white mb-2">{t('home.availableModels')}</h2>
|
||||
<p className="text-neutral-500">{t('home.availableModelsDesc', { count: enabledModels.length })}</p>
|
||||
</div>
|
||||
{enabledModels.length > 8 && (
|
||||
<Link to="/pricing" className="text-sm text-emerald-400 hover:text-emerald-300 transition-colors">
|
||||
{t('home.viewAllModels', { count: enabledModels.length })} →
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-2">
|
||||
{enabledModels.slice(0, 8).map((m, i) => (
|
||||
<div key={m.id || i} className="px-4 py-3 rounded-lg border border-neutral-800/60 hover:border-emerald-500/20 transition-colors group">
|
||||
<span className="text-sm text-neutral-400 font-mono group-hover:text-neutral-300 transition-colors truncate block">{m.display_name || m.model_name}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</FadeContent>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* Packages */}
|
||||
{packages.length > 0 && (
|
||||
<section className="relative max-w-7xl mx-auto px-6 py-20">
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-3xl font-bold text-white mb-3">{t('home.plansPackages')}</h2>
|
||||
<p className="text-neutral-500">{t('home.choosePlan')}</p>
|
||||
</div>
|
||||
<section className="max-w-5xl mx-auto px-6 py-20">
|
||||
<FadeContent blur duration={800} delay={100}>
|
||||
<h2 className="text-2xl font-heading font-bold text-white mb-2">{t('home.plansPackages')}</h2>
|
||||
<p className="text-neutral-500 mb-10">{t('home.choosePlan')}</p>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-6 max-w-4xl mx-auto">
|
||||
{packages.filter(p => p.enabled).slice(0, 3).map((pkg) => (
|
||||
<div key={pkg.id} className="rounded-xl p-6 flex flex-col bg-[#030712]/60 border border-emerald-500/[0.08] hover:border-emerald-500/20 transition-all backdrop-blur-sm">
|
||||
<h3 className="text-lg font-semibold text-white mb-1">{pkg.name}</h3>
|
||||
{pkg.description && <p className="text-sm text-neutral-400 mb-4">{pkg.description}</p>}
|
||||
<div className="mt-auto pt-4">
|
||||
<span className="text-3xl font-bold text-emerald-400 font-mono">${pkg.price}</span>
|
||||
{pkg.original_price > pkg.price && (
|
||||
<span className="text-sm text-neutral-600 line-through ml-2">${pkg.original_price}</span>
|
||||
)}
|
||||
{pkg.duration > 0 && <p className="text-xs text-neutral-600 mt-1">{t('home.days', { count: pkg.duration })}</p>}
|
||||
<div className="grid md:grid-cols-3 gap-4 max-w-4xl">
|
||||
{packages.filter(p => p.enabled).slice(0, 3).map((pkg, i) => (
|
||||
<div key={pkg.id} className={`rounded-xl p-6 flex flex-col border transition-colors ${
|
||||
i === 1 ? 'border-emerald-500/25 bg-emerald-500/[0.04]' : 'border-neutral-800/60 hover:border-neutral-700'
|
||||
}`}>
|
||||
{i === 1 && <span className="text-xs text-emerald-400 font-medium mb-2 uppercase tracking-wider">{t('home.popular') || 'Popular'}</span>}
|
||||
<h3 className="text-base font-semibold text-white">{pkg.name}</h3>
|
||||
{pkg.description && <p className="text-sm text-neutral-500 mt-1">{pkg.description}</p>}
|
||||
<div className="mt-auto pt-6">
|
||||
<span className="text-3xl font-bold text-white">${pkg.price}</span>
|
||||
{pkg.original_price > pkg.price && (
|
||||
<span className="text-sm text-neutral-600 line-through ml-2">${pkg.original_price}</span>
|
||||
)}
|
||||
{pkg.duration > 0 && <p className="text-xs text-neutral-600 mt-1">{t('home.days', { count: pkg.duration })}</p>}
|
||||
</div>
|
||||
<Link to={user ? '/packages' : '/register'} className={`mt-4 py-2.5 rounded-lg font-medium text-sm text-center transition-colors ${
|
||||
i === 1
|
||||
? 'bg-emerald-500 text-black hover:bg-emerald-400'
|
||||
: 'bg-neutral-800 text-white hover:bg-neutral-700'
|
||||
}`}>
|
||||
{user ? t('home.subscribe') : t('home.getStarted')}
|
||||
</Link>
|
||||
</div>
|
||||
<Link to={user ? '/packages' : '/register'} className="mt-4 py-2.5 rounded-lg bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 font-medium text-sm text-center hover:bg-emerald-500/15 transition-colors font-mono">
|
||||
{user ? t('home.subscribe') : t('home.getStarted')}
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</FadeContent>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* CTA */}
|
||||
<section className="relative max-w-7xl mx-auto px-6 py-24">
|
||||
<div className="rounded-xl p-12 text-center bg-[#030712]/60 border border-emerald-500/[0.08] relative overflow-hidden backdrop-blur-sm">
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-emerald-500/[0.03] via-transparent to-cyan-500/[0.03]" />
|
||||
<div className="relative z-10">
|
||||
<h2 className="text-3xl font-bold text-white mb-4">{t('home.readyToStart')}</h2>
|
||||
<p className="text-neutral-400 mb-8 max-w-md mx-auto">{t('home.readyToStartDesc')}</p>
|
||||
<section className="max-w-5xl mx-auto px-6 py-24">
|
||||
<FadeContent blur duration={800} delay={100}>
|
||||
<div className="border-t border-neutral-800 pt-16 text-center">
|
||||
<h2 className="text-2xl font-heading font-bold text-white mb-3">{t('home.readyToStart')}</h2>
|
||||
<p className="text-neutral-500 mb-8 max-w-md mx-auto">{t('home.readyToStartDesc')}</p>
|
||||
<div className="flex items-center justify-center gap-4">
|
||||
{user ? (
|
||||
<Link to="/dashboard" className="px-8 py-3 rounded-lg bg-emerald-500 text-black font-bold hover:bg-emerald-400 transition-all font-mono">
|
||||
{t('home.goToDashboard')}
|
||||
<Link to="/dashboard" className="px-7 py-3 rounded-lg bg-emerald-500 text-black font-semibold text-sm hover:bg-emerald-400 transition-colors">
|
||||
{t('home.goToDashboard')} →
|
||||
</Link>
|
||||
) : (
|
||||
<>
|
||||
<Link to="/register" className="px-8 py-3 rounded-lg bg-emerald-500 text-black font-bold hover:bg-emerald-400 transition-all font-mono">
|
||||
{t('home.createFreeAccount')}
|
||||
<Link to="/register" className="px-7 py-3 rounded-lg bg-emerald-500 text-black font-semibold text-sm hover:bg-emerald-400 transition-colors">
|
||||
{t('home.createFreeAccount')} →
|
||||
</Link>
|
||||
<Link to="/login" className="px-8 py-3 rounded-lg border border-emerald-500/20 text-emerald-400 font-medium hover:bg-emerald-500/10 transition-all font-mono">
|
||||
<Link to="/login" className="px-7 py-3 text-neutral-400 font-medium text-sm hover:text-white transition-colors">
|
||||
{t('home.signIn')}
|
||||
</Link>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</FadeContent>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
|
||||
+164
-186
@@ -4,11 +4,8 @@ import { useTranslation } from 'react-i18next';
|
||||
import { useAuth } from '../../context/AuthContext';
|
||||
import { useSite } from '../../context/SiteContext';
|
||||
import { getSiteModels, getSitePackages } from '../../api';
|
||||
import Aurora from '../../components/bits/Aurora';
|
||||
import SplitText from '../../components/bits/SplitText';
|
||||
import RotatingText from '../../components/bits/RotatingText';
|
||||
import SpotlightCard from '../../components/bits/SpotlightCard';
|
||||
import CountUp from '../../components/bits/CountUp';
|
||||
import FadeContent from '../../components/bits/FadeContent';
|
||||
|
||||
export default function DefaultHome() {
|
||||
const { t } = useTranslation();
|
||||
@@ -26,205 +23,186 @@ export default function DefaultHome() {
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
{/* Aurora Background */}
|
||||
<div className="absolute inset-0 h-[700px] overflow-hidden pointer-events-none opacity-60">
|
||||
<Aurora colorStops={["#4338ca", "#7c3aed", "#06b6d4"]} blend={0.5} amplitude={1.0} speed={0.5} />
|
||||
{/* Subtle gradient */}
|
||||
<div className="absolute inset-0 overflow-hidden pointer-events-none">
|
||||
<div className="absolute -top-40 left-1/4 w-[600px] h-[600px] bg-violet-600/10 rounded-full blur-3xl" />
|
||||
<div className="absolute top-20 right-1/4 w-[400px] h-[400px] bg-blue-600/8 rounded-full blur-3xl" />
|
||||
</div>
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="relative max-w-7xl mx-auto px-6 pt-28 pb-24">
|
||||
<div className="text-center max-w-4xl mx-auto">
|
||||
<div className="mb-6">
|
||||
<h1 className="text-5xl md:text-7xl font-extrabold text-white leading-tight tracking-tight">
|
||||
<SplitText text={site?.name || t('home.defaultHeroTitle')} delay={80} className="inline" />
|
||||
{/* Hero — centered, editorial */}
|
||||
<section className="relative max-w-5xl mx-auto px-6 pt-32 pb-20">
|
||||
<FadeContent blur duration={800} delay={100}>
|
||||
<div className="text-center max-w-3xl mx-auto">
|
||||
<h1 className="text-5xl md:text-7xl font-heading font-extrabold text-white leading-[1.08] tracking-tight">
|
||||
{site?.name || t('home.defaultHeroTitle')}
|
||||
</h1>
|
||||
</div>
|
||||
<p className="text-lg text-neutral-400 mt-6 leading-relaxed max-w-xl mx-auto">
|
||||
{t('home.heroSubtitle')}
|
||||
</p>
|
||||
|
||||
<p className="text-lg md:text-xl text-neutral-400 max-w-2xl mx-auto mb-4 leading-relaxed">
|
||||
{t('home.heroSubtitle')}
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap items-center justify-center gap-3 mb-10">
|
||||
<RotatingText
|
||||
texts={[t('home.lightningFast'), t('home.securePrivate'), t('home.payAsYouGo')]}
|
||||
mainClassName="px-4 py-2 bg-white/[0.06] backdrop-blur-sm rounded-full text-white text-sm font-medium overflow-hidden border border-white/[0.08]"
|
||||
staggerFrom="last"
|
||||
rotationInterval={3000}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-center gap-4">
|
||||
{user ? (
|
||||
<Link to="/dashboard" className="px-8 py-3.5 rounded-2xl bg-white text-black font-semibold text-base hover:bg-neutral-100 transition-all shadow-xl shadow-white/10">
|
||||
{t('home.goToDashboard')}
|
||||
</Link>
|
||||
) : (
|
||||
<>
|
||||
<Link to="/register" className="px-8 py-3.5 rounded-2xl bg-white text-black font-semibold text-base hover:bg-neutral-100 transition-all shadow-xl shadow-white/10">
|
||||
{t('home.getStarted')}
|
||||
</Link>
|
||||
<Link to="/pricing" className="px-8 py-3.5 rounded-2xl border border-white/20 text-white font-medium text-base hover:bg-white/10 transition-all">
|
||||
{t('home.viewPricing')}
|
||||
</Link>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="grid grid-cols-3 gap-6 max-w-2xl mx-auto mt-24">
|
||||
{[
|
||||
{ value: enabledModels.length || 50, suffix: '+', label: t('home.aiModels') },
|
||||
{ value: 99.9, suffix: '%', label: t('home.uptime') },
|
||||
{ value: 50, suffix: 'ms', label: t('home.latency'), prefix: '<' },
|
||||
].map((stat, i) => (
|
||||
<div key={i} className="text-center p-5 rounded-2xl bg-white/[0.04] backdrop-blur-sm border border-white/[0.08]">
|
||||
<div className="text-3xl font-bold text-white">
|
||||
{stat.prefix}<CountUp from={0} to={stat.value} duration={2} />{stat.suffix}
|
||||
</div>
|
||||
<p className="text-sm text-neutral-400 mt-1">{stat.label}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Features Section */}
|
||||
<section className="relative max-w-7xl mx-auto px-6 py-20">
|
||||
<div className="text-center mb-14">
|
||||
<h2 className="text-3xl font-bold text-white mb-3">{t('home.whyChooseUs')}</h2>
|
||||
<p className="text-neutral-400">{t('home.whyChooseUsDesc')}</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-6">
|
||||
<SpotlightCard className="!bg-gradient-to-br !from-violet-500/10 !to-blue-500/10 !border-violet-500/20" spotlightColor="rgba(139,92,246,0.1)">
|
||||
<div className="p-6">
|
||||
<div className="w-12 h-12 rounded-xl bg-white/[0.06] flex items-center justify-center mb-4">
|
||||
<svg className="w-6 h-6 text-violet-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M13 10V3L4 14h7v7l9-11h-7z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-white mb-2">{t('home.lightningFast')}</h3>
|
||||
<p className="text-sm text-neutral-400 leading-relaxed">{t('home.lightningFastDesc')}</p>
|
||||
</div>
|
||||
</SpotlightCard>
|
||||
|
||||
<SpotlightCard className="!bg-gradient-to-br !from-blue-500/10 !to-cyan-500/10 !border-blue-500/20" spotlightColor="rgba(59,130,246,0.1)">
|
||||
<div className="p-6">
|
||||
<div className="w-12 h-12 rounded-xl bg-white/[0.06] flex items-center justify-center mb-4">
|
||||
<svg className="w-6 h-6 text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-white mb-2">{t('home.securePrivate')}</h3>
|
||||
<p className="text-sm text-neutral-400 leading-relaxed">{t('home.securePrivateDesc')}</p>
|
||||
</div>
|
||||
</SpotlightCard>
|
||||
|
||||
<SpotlightCard className="!bg-gradient-to-br !from-cyan-500/10 !to-teal-500/10 !border-cyan-500/20" spotlightColor="rgba(6,182,212,0.1)">
|
||||
<div className="p-6">
|
||||
<div className="w-12 h-12 rounded-xl bg-white/[0.06] flex items-center justify-center mb-4">
|
||||
<svg className="w-6 h-6 text-cyan-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-white mb-2">{t('home.payAsYouGo')}</h3>
|
||||
<p className="text-sm text-neutral-400 leading-relaxed">{t('home.payAsYouGoDesc')}</p>
|
||||
</div>
|
||||
</SpotlightCard>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Models Preview */}
|
||||
{enabledModels.length > 0 && (
|
||||
<section className="relative max-w-7xl mx-auto px-6 py-20">
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-3xl font-bold text-white mb-3">{t('home.availableModels')}</h2>
|
||||
<p className="text-neutral-400">{t('home.availableModelsDesc', { count: enabledModels.length })}</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
|
||||
{enabledModels.slice(0, 12).map((m, i) => (
|
||||
<div key={m.id || i} className="px-4 py-3 rounded-xl bg-white/[0.03] border border-white/[0.06] flex items-center gap-3 hover:bg-white/[0.06] transition-colors group">
|
||||
<div className="w-2 h-2 rounded-full bg-green-400 flex-shrink-0" />
|
||||
<span className="text-sm font-mono text-neutral-300 group-hover:text-white transition-colors truncate">
|
||||
{m.display_name || m.model_name}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{enabledModels.length > 12 && (
|
||||
<div className="text-center mt-6">
|
||||
<Link to="/pricing" className="text-sm text-blue-400 hover:text-blue-300 transition-colors">
|
||||
{t('home.viewAllModels', { count: enabledModels.length })} →
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* Packages Preview */}
|
||||
{packages.length > 0 && (
|
||||
<section className="relative max-w-7xl mx-auto px-6 py-20">
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-3xl font-bold text-white mb-3">{t('home.plansPackages')}</h2>
|
||||
<p className="text-neutral-400">{t('home.choosePlan')}</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-6 max-w-4xl mx-auto">
|
||||
{packages.filter(p => p.enabled).slice(0, 3).map((pkg, i) => (
|
||||
<div key={pkg.id} className={`rounded-2xl p-6 flex flex-col border transition-all hover:scale-[1.02] ${
|
||||
i === 1 ? 'bg-white/[0.06] border-white/[0.12] shadow-xl shadow-blue-500/5' : 'bg-white/[0.03] border-white/[0.06]'
|
||||
}`}>
|
||||
{i === 1 && <span className="text-xs text-blue-400 font-medium mb-2 uppercase tracking-wider">{t('home.popular') || 'Popular'}</span>}
|
||||
<h3 className="text-lg font-semibold text-white mb-1">{pkg.name}</h3>
|
||||
{pkg.description && <p className="text-sm text-neutral-400 mb-4">{pkg.description}</p>}
|
||||
<div className="mt-auto pt-4">
|
||||
<div className="flex items-baseline gap-1">
|
||||
<span className="text-3xl font-bold text-white">${pkg.price}</span>
|
||||
{pkg.original_price > pkg.price && (
|
||||
<span className="text-sm text-neutral-500 line-through">${pkg.original_price}</span>
|
||||
)}
|
||||
</div>
|
||||
{pkg.duration > 0 && <p className="text-xs text-neutral-500 mt-1">{t('home.days', { count: pkg.duration })}</p>}
|
||||
</div>
|
||||
<Link to={user ? '/packages' : '/register'} className={`mt-4 py-2.5 rounded-xl font-medium text-sm text-center transition-colors ${
|
||||
i === 1
|
||||
? 'bg-white text-black hover:bg-neutral-100'
|
||||
: 'bg-white/[0.06] text-white border border-white/[0.08] hover:bg-white/[0.1]'
|
||||
}`}>
|
||||
{user ? t('home.subscribe') : t('home.getStarted')}
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="relative max-w-7xl mx-auto px-6 py-24">
|
||||
<div className="rounded-3xl p-12 text-center relative overflow-hidden bg-gradient-to-br from-violet-600/10 via-blue-600/10 to-cyan-600/10 border border-white/[0.08]">
|
||||
<div className="relative z-10">
|
||||
<h2 className="text-3xl font-bold text-white mb-4">{t('home.readyToStart')}</h2>
|
||||
<p className="text-neutral-400 mb-8 max-w-md mx-auto">{t('home.readyToStartDesc')}</p>
|
||||
<div className="flex items-center justify-center gap-4">
|
||||
<div className="flex items-center justify-center gap-4 mt-10">
|
||||
{user ? (
|
||||
<Link to="/dashboard" className="px-8 py-3 rounded-2xl bg-white text-black font-semibold hover:bg-neutral-100 transition-all">
|
||||
<Link to="/dashboard" className="px-8 py-3.5 rounded-2xl bg-white text-black font-semibold text-sm hover:bg-neutral-100 transition-all">
|
||||
{t('home.goToDashboard')}
|
||||
</Link>
|
||||
) : (
|
||||
<>
|
||||
<Link to="/register" className="px-8 py-3 rounded-2xl bg-white text-black font-semibold hover:bg-neutral-100 transition-all">
|
||||
<Link to="/register" className="px-8 py-3.5 rounded-2xl bg-white text-black font-semibold text-sm hover:bg-neutral-100 transition-all">
|
||||
{t('home.getStarted')}
|
||||
</Link>
|
||||
<Link to="/pricing" className="px-8 py-3.5 rounded-2xl border border-white/15 text-white font-medium text-sm hover:bg-white/5 transition-all">
|
||||
{t('home.viewPricing')}
|
||||
</Link>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</FadeContent>
|
||||
|
||||
{/* Stats */}
|
||||
<FadeContent blur duration={800} delay={400}>
|
||||
<div className="grid grid-cols-3 gap-6 max-w-xl mx-auto mt-24">
|
||||
{[
|
||||
{ value: enabledModels.length || 50, suffix: '+', label: t('home.aiModels') },
|
||||
{ value: 99.9, suffix: '%', label: t('home.uptime') },
|
||||
{ value: 50, suffix: 'ms', label: t('home.latency'), prefix: '<' },
|
||||
].map((stat, i) => (
|
||||
<div key={i} className="text-center p-5 rounded-2xl bg-white/[0.03] border border-white/[0.06]">
|
||||
<div className="text-2xl font-bold text-white">
|
||||
{stat.prefix}<CountUp from={0} to={stat.value} duration={2} />{stat.suffix}
|
||||
</div>
|
||||
<p className="text-sm text-neutral-500 mt-1">{stat.label}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</FadeContent>
|
||||
</section>
|
||||
|
||||
{/* Features */}
|
||||
<section className="max-w-5xl mx-auto px-6 py-20">
|
||||
<FadeContent blur duration={800} delay={100}>
|
||||
<div className="text-center mb-14">
|
||||
<h2 className="text-2xl font-heading font-bold text-white mb-3">{t('home.whyChooseUs')}</h2>
|
||||
<p className="text-neutral-500">{t('home.whyChooseUsDesc')}</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-5">
|
||||
{[
|
||||
{ title: t('home.lightningFast'), desc: t('home.lightningFastDesc'), color: 'violet', icon: (
|
||||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M13 10V3L4 14h7v7l9-11h-7z" />
|
||||
</svg>
|
||||
)},
|
||||
{ title: t('home.securePrivate'), desc: t('home.securePrivateDesc'), color: 'blue', icon: (
|
||||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
|
||||
</svg>
|
||||
)},
|
||||
{ title: t('home.payAsYouGo'), desc: t('home.payAsYouGoDesc'), color: 'cyan', icon: (
|
||||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
)},
|
||||
].map((f, i) => (
|
||||
<div key={i} className="p-6 rounded-xl bg-white/[0.02] border border-white/[0.06] hover:border-white/[0.12] transition-colors">
|
||||
<div className={`w-10 h-10 rounded-lg bg-${f.color}-500/10 text-${f.color}-400 flex items-center justify-center mb-4`}>
|
||||
{f.icon}
|
||||
</div>
|
||||
<h3 className="text-base font-semibold text-white mb-2">{f.title}</h3>
|
||||
<p className="text-sm text-neutral-400 leading-relaxed">{f.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</FadeContent>
|
||||
</section>
|
||||
|
||||
{/* Models */}
|
||||
{enabledModels.length > 0 && (
|
||||
<section className="max-w-5xl mx-auto px-6 py-20">
|
||||
<FadeContent blur duration={800} delay={100}>
|
||||
<div className="flex items-end justify-between mb-8">
|
||||
<div>
|
||||
<h2 className="text-2xl font-heading font-bold text-white mb-2">{t('home.availableModels')}</h2>
|
||||
<p className="text-neutral-500">{t('home.availableModelsDesc', { count: enabledModels.length })}</p>
|
||||
</div>
|
||||
{enabledModels.length > 8 && (
|
||||
<Link to="/pricing" className="text-sm text-violet-400 hover:text-violet-300 transition-colors">
|
||||
{t('home.viewAllModels', { count: enabledModels.length })} →
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-2">
|
||||
{enabledModels.slice(0, 8).map((m, i) => (
|
||||
<div key={m.id || i} className="px-4 py-3 rounded-lg border border-white/[0.06] hover:border-white/[0.12] transition-colors">
|
||||
<span className="text-sm text-neutral-300 font-mono">{m.display_name || m.model_name}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</FadeContent>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* Packages */}
|
||||
{packages.length > 0 && (
|
||||
<section className="max-w-5xl mx-auto px-6 py-20">
|
||||
<FadeContent blur duration={800} delay={100}>
|
||||
<h2 className="text-2xl font-heading font-bold text-white mb-2">{t('home.plansPackages')}</h2>
|
||||
<p className="text-neutral-500 mb-10">{t('home.choosePlan')}</p>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-4 max-w-4xl">
|
||||
{packages.filter(p => p.enabled).slice(0, 3).map((pkg, i) => (
|
||||
<div key={pkg.id} className={`rounded-2xl p-6 flex flex-col border transition-colors ${
|
||||
i === 1 ? 'bg-white/[0.04] border-white/[0.12]' : 'bg-white/[0.02] border-white/[0.06] hover:border-white/[0.1]'
|
||||
}`}>
|
||||
{i === 1 && <span className="text-xs text-violet-400 font-medium mb-2 uppercase tracking-wider">{t('home.popular') || 'Popular'}</span>}
|
||||
<h3 className="text-base font-semibold text-white">{pkg.name}</h3>
|
||||
{pkg.description && <p className="text-sm text-neutral-500 mt-1">{pkg.description}</p>}
|
||||
<div className="mt-auto pt-6">
|
||||
<span className="text-3xl font-bold text-white">${pkg.price}</span>
|
||||
{pkg.original_price > pkg.price && (
|
||||
<span className="text-sm text-neutral-600 line-through ml-2">${pkg.original_price}</span>
|
||||
)}
|
||||
{pkg.duration > 0 && <p className="text-xs text-neutral-600 mt-1">{t('home.days', { count: pkg.duration })}</p>}
|
||||
</div>
|
||||
<Link to={user ? '/packages' : '/register'} className={`mt-4 py-2.5 rounded-xl font-medium text-sm text-center transition-colors ${
|
||||
i === 1
|
||||
? 'bg-white text-black hover:bg-neutral-100'
|
||||
: 'bg-white/[0.06] text-white hover:bg-white/[0.1]'
|
||||
}`}>
|
||||
{user ? t('home.subscribe') : t('home.getStarted')}
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</FadeContent>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* CTA */}
|
||||
<section className="max-w-5xl mx-auto px-6 py-24">
|
||||
<FadeContent blur duration={800} delay={100}>
|
||||
<div className="border-t border-white/[0.06] pt-16 text-center">
|
||||
<h2 className="text-2xl font-heading font-bold text-white mb-3">{t('home.readyToStart')}</h2>
|
||||
<p className="text-neutral-500 mb-8 max-w-md mx-auto">{t('home.readyToStartDesc')}</p>
|
||||
<div className="flex items-center justify-center gap-4">
|
||||
{user ? (
|
||||
<Link to="/dashboard" className="px-8 py-3.5 rounded-2xl bg-white text-black font-semibold text-sm hover:bg-neutral-100 transition-all">
|
||||
{t('home.goToDashboard')}
|
||||
</Link>
|
||||
) : (
|
||||
<>
|
||||
<Link to="/register" className="px-8 py-3.5 rounded-2xl bg-white text-black font-semibold text-sm hover:bg-neutral-100 transition-all">
|
||||
{t('home.createFreeAccount')}
|
||||
</Link>
|
||||
<Link to="/login" className="px-8 py-3 rounded-2xl border border-white/20 text-white font-medium hover:bg-white/10 transition-all">
|
||||
<Link to="/login" className="px-8 py-3.5 rounded-2xl border border-white/15 text-white font-medium text-sm hover:bg-white/5 transition-all">
|
||||
{t('home.signIn')}
|
||||
</Link>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</FadeContent>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
|
||||
+170
-197
@@ -4,11 +4,8 @@ import { useTranslation } from 'react-i18next';
|
||||
import { useAuth } from '../../context/AuthContext';
|
||||
import { useSite } from '../../context/SiteContext';
|
||||
import { getSiteModels, getSitePackages } from '../../api';
|
||||
import GradientText from '../../components/bits/GradientText';
|
||||
import BlurText from '../../components/bits/BlurText';
|
||||
import SpotlightCard from '../../components/bits/SpotlightCard';
|
||||
import CountUp from '../../components/bits/CountUp';
|
||||
import StarBorder from '../../components/bits/StarBorder';
|
||||
import FadeContent from '../../components/bits/FadeContent';
|
||||
|
||||
export default function StarterHome() {
|
||||
const { t } = useTranslation();
|
||||
@@ -26,216 +23,192 @@ export default function StarterHome() {
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
{/* Gradient Background */}
|
||||
{/* Subtle gradient background */}
|
||||
<div className="absolute inset-0 overflow-hidden pointer-events-none">
|
||||
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[600px] bg-gradient-radial from-brand-600/20 via-purple-600/5 to-transparent blur-3xl" />
|
||||
<div className="absolute top-[400px] right-0 w-[500px] h-[500px] bg-gradient-radial from-pink-600/10 to-transparent blur-3xl" />
|
||||
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-[900px] h-[500px] bg-gradient-radial from-brand-600/15 to-transparent blur-3xl opacity-60" />
|
||||
</div>
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="relative max-w-7xl mx-auto px-6 pt-24 pb-20">
|
||||
<div className="text-center max-w-4xl mx-auto">
|
||||
<div className="mb-6">
|
||||
<GradientText
|
||||
colors={['#818cf8', '#c084fc', '#f472b6', '#818cf8']}
|
||||
animationSpeed={6}
|
||||
className="text-5xl md:text-7xl font-extrabold leading-tight tracking-tight"
|
||||
>
|
||||
{/* Hero */}
|
||||
<section className="relative max-w-5xl mx-auto px-6 pt-32 pb-20">
|
||||
<FadeContent blur duration={800} delay={100}>
|
||||
<div className="text-center max-w-3xl mx-auto">
|
||||
<p className="text-sm font-medium text-brand-400 mb-4 tracking-wide uppercase">{t('home.heroTagline') || 'AI API Platform'}</p>
|
||||
<h1 className="text-5xl md:text-6xl font-heading font-bold text-white leading-[1.1] tracking-tight">
|
||||
{site?.name || t('home.defaultHeroTitle')}
|
||||
</GradientText>
|
||||
</div>
|
||||
|
||||
<BlurText
|
||||
text={t('home.heroSubtitle')}
|
||||
className="text-lg md:text-xl text-neutral-400 max-w-2xl mx-auto mb-10 leading-relaxed"
|
||||
delay={50}
|
||||
animateBy="words"
|
||||
/>
|
||||
|
||||
<div className="flex items-center justify-center gap-4">
|
||||
{user ? (
|
||||
<Link to="/dashboard">
|
||||
<StarBorder as="div" color="#818cf8" speed="5s">
|
||||
{t('home.goToDashboard')}
|
||||
</StarBorder>
|
||||
</Link>
|
||||
) : (
|
||||
<>
|
||||
<Link to="/register" className="btn-primary text-base !px-8 !py-3">
|
||||
{t('home.getStarted')}
|
||||
</Link>
|
||||
<Link to="/pricing" className="btn-secondary text-base !px-8 !py-3">
|
||||
{t('home.viewPricing')}
|
||||
</Link>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="grid grid-cols-3 gap-6 max-w-xl mx-auto mt-20">
|
||||
<div className="text-center">
|
||||
<div className="text-3xl font-bold text-white">
|
||||
<CountUp from={0} to={enabledModels.length || 50} duration={2} separator="" />+
|
||||
</div>
|
||||
<p className="text-sm text-neutral-500 mt-1">{t('home.aiModels')}</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-3xl font-bold text-white">
|
||||
<CountUp from={0} to={99.9} duration={2.5} />%
|
||||
</div>
|
||||
<p className="text-sm text-neutral-500 mt-1">{t('home.uptime')}</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-3xl font-bold text-white">
|
||||
<<CountUp from={200} to={50} duration={2} direction="down" />ms
|
||||
</div>
|
||||
<p className="text-sm text-neutral-500 mt-1">{t('home.latency')}</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Features Section */}
|
||||
<section className="relative max-w-7xl mx-auto px-6 py-20">
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-3xl font-bold text-white mb-3">{t('home.whyChooseUs')}</h2>
|
||||
<p className="text-neutral-400">{t('home.whyChooseUsDesc')}</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-6">
|
||||
<SpotlightCard className="!bg-neutral-900/60 !border-neutral-800/60" spotlightColor="rgba(129,140,248,0.15)">
|
||||
<div className="w-12 h-12 rounded-xl bg-brand-500/10 flex items-center justify-center mb-4">
|
||||
<svg className="w-6 h-6 text-brand-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M13 10V3L4 14h7v7l9-11h-7z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-white mb-2">{t('home.lightningFast')}</h3>
|
||||
<p className="text-sm text-neutral-400 leading-relaxed">{t('home.lightningFastDesc')}</p>
|
||||
</SpotlightCard>
|
||||
|
||||
<SpotlightCard className="!bg-neutral-900/60 !border-neutral-800/60" spotlightColor="rgba(192,132,252,0.15)">
|
||||
<div className="w-12 h-12 rounded-xl bg-purple-500/10 flex items-center justify-center mb-4">
|
||||
<svg className="w-6 h-6 text-purple-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-white mb-2">{t('home.securePrivate')}</h3>
|
||||
<p className="text-sm text-neutral-400 leading-relaxed">{t('home.securePrivateDesc')}</p>
|
||||
</SpotlightCard>
|
||||
|
||||
<SpotlightCard className="!bg-neutral-900/60 !border-neutral-800/60" spotlightColor="rgba(244,114,182,0.15)">
|
||||
<div className="w-12 h-12 rounded-xl bg-pink-500/10 flex items-center justify-center mb-4">
|
||||
<svg className="w-6 h-6 text-pink-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-white mb-2">{t('home.payAsYouGo')}</h3>
|
||||
<p className="text-sm text-neutral-400 leading-relaxed">{t('home.payAsYouGoDesc')}</p>
|
||||
</SpotlightCard>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Models Preview */}
|
||||
{enabledModels.length > 0 && (
|
||||
<section className="relative max-w-7xl mx-auto px-6 py-20">
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-3xl font-bold text-white mb-3">{t('home.availableModels')}</h2>
|
||||
<p className="text-neutral-400">
|
||||
{t('home.availableModelsDesc', { count: enabledModels.length })}
|
||||
</h1>
|
||||
<p className="text-lg text-neutral-400 mt-6 leading-relaxed max-w-xl mx-auto">
|
||||
{t('home.heroSubtitle')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
|
||||
{enabledModels.slice(0, 12).map((m, i) => (
|
||||
<div
|
||||
key={m.id || i}
|
||||
className="glass-sm px-4 py-3 flex items-center gap-3 hover:bg-white/[0.06] transition-colors group"
|
||||
>
|
||||
<div className="w-2 h-2 rounded-full bg-green-500 flex-shrink-0" />
|
||||
<span className="text-sm font-mono text-neutral-300 group-hover:text-white transition-colors truncate">
|
||||
{m.display_name || m.model_name}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{enabledModels.length > 12 && (
|
||||
<div className="text-center mt-6">
|
||||
<Link to="/pricing" className="text-sm text-brand-400 hover:text-brand-300 transition-colors">
|
||||
{t('home.viewAllModels', { count: enabledModels.length })} →
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* Packages Preview */}
|
||||
{packages.length > 0 && (
|
||||
<section className="relative max-w-7xl mx-auto px-6 py-20">
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-3xl font-bold text-white mb-3">{t('home.plansPackages')}</h2>
|
||||
<p className="text-neutral-400">{t('home.choosePlan')}</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-6 max-w-4xl mx-auto">
|
||||
{packages.filter(p => p.enabled).slice(0, 3).map((pkg) => (
|
||||
<div key={pkg.id} className="glass rounded-2xl p-6 flex flex-col hover:border-brand-500/30 transition-colors">
|
||||
<h3 className="text-lg font-semibold text-white mb-1">{pkg.name}</h3>
|
||||
{pkg.description && (
|
||||
<p className="text-sm text-neutral-400 mb-4">{pkg.description}</p>
|
||||
)}
|
||||
<div className="mt-auto pt-4">
|
||||
<div className="flex items-baseline gap-1">
|
||||
<span className="text-3xl font-bold text-white">${pkg.price}</span>
|
||||
{pkg.original_price > pkg.price && (
|
||||
<span className="text-sm text-neutral-500 line-through">${pkg.original_price}</span>
|
||||
)}
|
||||
</div>
|
||||
{pkg.duration > 0 && (
|
||||
<p className="text-xs text-neutral-500 mt-1">{t('home.days', { count: pkg.duration })}</p>
|
||||
)}
|
||||
</div>
|
||||
<Link
|
||||
to={user ? '/packages' : '/register'}
|
||||
className="btn-primary text-center mt-4 !py-2"
|
||||
>
|
||||
{user ? t('home.subscribe') : t('home.getStarted')}
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="relative max-w-7xl mx-auto px-6 py-24">
|
||||
<div className="glass rounded-3xl p-12 text-center relative overflow-hidden">
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-brand-600/10 via-transparent to-purple-600/10" />
|
||||
<div className="relative z-10">
|
||||
<h2 className="text-3xl font-bold text-white mb-4">
|
||||
{t('home.readyToStart')}
|
||||
</h2>
|
||||
<p className="text-neutral-400 mb-8 max-w-md mx-auto">
|
||||
{t('home.readyToStartDesc')}
|
||||
</p>
|
||||
<div className="flex items-center justify-center gap-4">
|
||||
<div className="flex items-center justify-center gap-4 mt-10">
|
||||
{user ? (
|
||||
<Link to="/dashboard" className="btn-primary text-base !px-8 !py-3">
|
||||
{t('home.goToDashboard')}
|
||||
<Link to="/dashboard" className="px-7 py-3 rounded-xl bg-brand-600 text-white font-medium text-sm hover:bg-brand-500 transition-colors shadow-lg shadow-brand-600/20">
|
||||
{t('home.goToDashboard')} →
|
||||
</Link>
|
||||
) : (
|
||||
<>
|
||||
<Link to="/register" className="btn-primary text-base !px-8 !py-3">
|
||||
{t('home.createFreeAccount')}
|
||||
<Link to="/register" className="px-7 py-3 rounded-xl bg-brand-600 text-white font-medium text-sm hover:bg-brand-500 transition-colors shadow-lg shadow-brand-600/20">
|
||||
{t('home.getStarted')}
|
||||
</Link>
|
||||
<Link to="/login" className="btn-secondary text-base !px-8 !py-3">
|
||||
<Link to="/pricing" className="px-7 py-3 text-neutral-400 font-medium text-sm hover:text-white transition-colors">
|
||||
{t('home.viewPricing')} →
|
||||
</Link>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</FadeContent>
|
||||
|
||||
{/* Stats */}
|
||||
<FadeContent blur duration={800} delay={400}>
|
||||
<div className="grid grid-cols-3 gap-8 max-w-lg mx-auto mt-20 pt-10 border-t border-neutral-800/60">
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold text-white">
|
||||
<CountUp from={0} to={enabledModels.length || 50} duration={2} />+
|
||||
</div>
|
||||
<p className="text-sm text-neutral-500 mt-0.5">{t('home.aiModels')}</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold text-white">
|
||||
<CountUp from={0} to={99.9} duration={2.5} />%
|
||||
</div>
|
||||
<p className="text-sm text-neutral-500 mt-0.5">{t('home.uptime')}</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold text-white">
|
||||
<<CountUp from={200} to={50} duration={2} direction="down" />ms
|
||||
</div>
|
||||
<p className="text-sm text-neutral-500 mt-0.5">{t('home.latency')}</p>
|
||||
</div>
|
||||
</div>
|
||||
</FadeContent>
|
||||
</section>
|
||||
|
||||
{/* Features */}
|
||||
<section className="max-w-5xl mx-auto px-6 py-20">
|
||||
<FadeContent blur duration={800} delay={100}>
|
||||
<div className="text-center mb-14">
|
||||
<h2 className="text-2xl font-heading font-bold text-white mb-3">{t('home.whyChooseUs')}</h2>
|
||||
<p className="text-neutral-500">{t('home.whyChooseUsDesc')}</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-5">
|
||||
{[
|
||||
{ title: t('home.lightningFast'), desc: t('home.lightningFastDesc'), icon: (
|
||||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M13 10V3L4 14h7v7l9-11h-7z" />
|
||||
</svg>
|
||||
)},
|
||||
{ title: t('home.securePrivate'), desc: t('home.securePrivateDesc'), icon: (
|
||||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
|
||||
</svg>
|
||||
)},
|
||||
{ title: t('home.payAsYouGo'), desc: t('home.payAsYouGoDesc'), icon: (
|
||||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
)},
|
||||
].map((f, i) => (
|
||||
<div key={i} className="p-6 rounded-xl border border-neutral-800/60 hover:border-brand-500/25 transition-colors group">
|
||||
<div className="w-10 h-10 rounded-lg bg-brand-500/10 text-brand-400 flex items-center justify-center mb-4">
|
||||
{f.icon}
|
||||
</div>
|
||||
<h3 className="text-base font-semibold text-white mb-2">{f.title}</h3>
|
||||
<p className="text-sm text-neutral-400 leading-relaxed">{f.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</FadeContent>
|
||||
</section>
|
||||
|
||||
{/* Models */}
|
||||
{enabledModels.length > 0 && (
|
||||
<section className="max-w-5xl mx-auto px-6 py-20">
|
||||
<FadeContent blur duration={800} delay={100}>
|
||||
<div className="flex items-end justify-between mb-8">
|
||||
<div>
|
||||
<h2 className="text-2xl font-heading font-bold text-white mb-2">{t('home.availableModels')}</h2>
|
||||
<p className="text-neutral-500">{t('home.availableModelsDesc', { count: enabledModels.length })}</p>
|
||||
</div>
|
||||
{enabledModels.length > 8 && (
|
||||
<Link to="/pricing" className="text-sm text-brand-400 hover:text-brand-300 transition-colors">
|
||||
{t('home.viewAllModels', { count: enabledModels.length })} →
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-2">
|
||||
{enabledModels.slice(0, 8).map((m, i) => (
|
||||
<div key={m.id || i} className="px-4 py-3 rounded-lg border border-neutral-800/60 hover:border-neutral-700 transition-colors">
|
||||
<span className="text-sm text-neutral-300 font-mono">{m.display_name || m.model_name}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</FadeContent>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* Packages */}
|
||||
{packages.length > 0 && (
|
||||
<section className="max-w-5xl mx-auto px-6 py-20">
|
||||
<FadeContent blur duration={800} delay={100}>
|
||||
<h2 className="text-2xl font-heading font-bold text-white mb-2">{t('home.plansPackages')}</h2>
|
||||
<p className="text-neutral-500 mb-10">{t('home.choosePlan')}</p>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-4 max-w-4xl">
|
||||
{packages.filter(p => p.enabled).slice(0, 3).map((pkg, i) => (
|
||||
<div key={pkg.id} className={`rounded-xl p-6 flex flex-col border transition-colors ${
|
||||
i === 1 ? 'border-brand-500/30 bg-brand-500/[0.04]' : 'border-neutral-800/60 hover:border-neutral-700'
|
||||
}`}>
|
||||
{i === 1 && <span className="text-xs text-brand-400 font-medium mb-2 uppercase tracking-wider">{t('home.popular') || 'Popular'}</span>}
|
||||
<h3 className="text-base font-semibold text-white">{pkg.name}</h3>
|
||||
{pkg.description && <p className="text-sm text-neutral-500 mt-1">{pkg.description}</p>}
|
||||
<div className="mt-auto pt-6">
|
||||
<span className="text-3xl font-bold text-white">${pkg.price}</span>
|
||||
{pkg.original_price > pkg.price && (
|
||||
<span className="text-sm text-neutral-600 line-through ml-2">${pkg.original_price}</span>
|
||||
)}
|
||||
{pkg.duration > 0 && <p className="text-xs text-neutral-600 mt-1">{t('home.days', { count: pkg.duration })}</p>}
|
||||
</div>
|
||||
<Link to={user ? '/packages' : '/register'} className={`mt-4 py-2.5 rounded-lg font-medium text-sm text-center transition-colors ${
|
||||
i === 1
|
||||
? 'bg-brand-600 text-white hover:bg-brand-500'
|
||||
: 'bg-neutral-800 text-white hover:bg-neutral-700'
|
||||
}`}>
|
||||
{user ? t('home.subscribe') : t('home.getStarted')}
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</FadeContent>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* CTA */}
|
||||
<section className="max-w-5xl mx-auto px-6 py-24">
|
||||
<FadeContent blur duration={800} delay={100}>
|
||||
<div className="border-t border-neutral-800 pt-16 text-center">
|
||||
<h2 className="text-2xl font-heading font-bold text-white mb-3">{t('home.readyToStart')}</h2>
|
||||
<p className="text-neutral-500 mb-8 max-w-md mx-auto">{t('home.readyToStartDesc')}</p>
|
||||
<div className="flex items-center justify-center gap-4">
|
||||
{user ? (
|
||||
<Link to="/dashboard" className="px-7 py-3 rounded-xl bg-brand-600 text-white font-medium text-sm hover:bg-brand-500 transition-colors shadow-lg shadow-brand-600/20">
|
||||
{t('home.goToDashboard')} →
|
||||
</Link>
|
||||
) : (
|
||||
<>
|
||||
<Link to="/register" className="px-7 py-3 rounded-xl bg-brand-600 text-white font-medium text-sm hover:bg-brand-500 transition-colors shadow-lg shadow-brand-600/20">
|
||||
{t('home.createFreeAccount')} →
|
||||
</Link>
|
||||
<Link to="/login" className="px-7 py-3 text-neutral-400 font-medium text-sm hover:text-white transition-colors">
|
||||
{t('home.signIn')}
|
||||
</Link>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</FadeContent>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in new issue
Block a user