feat: add clean and corporate white-style theme templates
Add two new white-background themes with distinct design languages: - Clean: soft blue accents, rounded cards, gradient CTA section - Corporate: slate/professional palette, sharp borders, structured layout Both themes include full nav (with topup), LanguageSwitch, FadeContent animations, model grid, package cards, and responsive mobile menu. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
abingyydsandClaude Sonnet 4.6 committed
1 parent
914ddf0a26
commit
a570ecbbcd
5 files changed
+793
No files matched your search
@@ -21,6 +21,14 @@ const themeRegistry = {
|
||||
Home: React.lazy(() => import('../themes/minimal/Home')),
|
||||
Layout: React.lazy(() => import('../themes/minimal/Layout')),
|
||||
},
|
||||
clean: {
|
||||
Home: React.lazy(() => import('../themes/clean/Home')),
|
||||
Layout: React.lazy(() => import('../themes/clean/Layout')),
|
||||
},
|
||||
corporate: {
|
||||
Home: React.lazy(() => import('../themes/corporate/Home')),
|
||||
Layout: React.lazy(() => import('../themes/corporate/Layout')),
|
||||
},
|
||||
};
|
||||
|
||||
// Full-screen loading spinner shown while site info is being fetched
|
||||
|
||||
@@ -0,0 +1,231 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useAuth } from '../../context/AuthContext';
|
||||
import { useSite } from '../../context/SiteContext';
|
||||
import { getSiteModels, getSitePackages } from '../../api';
|
||||
import CountUp from '../../components/bits/CountUp';
|
||||
import FadeContent from '../../components/bits/FadeContent';
|
||||
|
||||
export default function CleanHome() {
|
||||
const { t } = useTranslation();
|
||||
const { user } = useAuth();
|
||||
const { site } = useSite();
|
||||
const [models, setModels] = useState([]);
|
||||
const [packages, setPackages] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
getSiteModels().then(r => { if (r.data.success) setModels(r.data.data || []); }).catch(() => {});
|
||||
getSitePackages().then(r => { if (r.data.success) setPackages(r.data.data || []); }).catch(() => {});
|
||||
}, []);
|
||||
|
||||
const enabledModels = models.filter(m => m.enabled !== false);
|
||||
|
||||
return (
|
||||
<div className="bg-white">
|
||||
{/* Hero */}
|
||||
<section className="max-w-6xl mx-auto px-6 pt-20 pb-16">
|
||||
<FadeContent blur duration={600} 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" />
|
||||
{t('home.lightningFast')}
|
||||
</div>
|
||||
|
||||
<h1 className="text-4xl md:text-6xl font-bold text-gray-900 leading-tight tracking-tight mb-6">
|
||||
{site?.name || t('home.defaultHeroTitle')}
|
||||
</h1>
|
||||
|
||||
<p className="text-lg text-gray-500 max-w-xl mx-auto mb-10 leading-relaxed">
|
||||
{t('home.heroSubtitle')}
|
||||
</p>
|
||||
|
||||
<div className="flex items-center justify-center gap-3">
|
||||
{user ? (
|
||||
<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')} →
|
||||
</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>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</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">
|
||||
<div className="text-center">
|
||||
<div className="text-3xl font-bold text-gray-900">
|
||||
<CountUp from={0} to={enabledModels.length || 50} duration={2} />+
|
||||
</div>
|
||||
<p className="text-sm text-gray-400 mt-1">{t('home.aiModels')}</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-3xl font-bold text-gray-900">
|
||||
<CountUp from={0} to={99.9} duration={2.5} />%
|
||||
</div>
|
||||
<p className="text-sm text-gray-400 mt-1">{t('home.uptime')}</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-3xl font-bold text-gray-900">
|
||||
<<CountUp from={200} to={50} duration={2} direction="down" />ms
|
||||
</div>
|
||||
<p className="text-sm text-gray-400 mt-1">{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>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-6">
|
||||
<div className="bg-white rounded-2xl p-7 border border-gray-100 hover:shadow-lg hover:shadow-gray-100/50 transition-all">
|
||||
<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>
|
||||
|
||||
<div className="bg-white rounded-2xl p-7 border border-gray-100 hover:shadow-lg hover:shadow-gray-100/50 transition-all">
|
||||
<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>
|
||||
|
||||
<div className="bg-white rounded-2xl p-7 border border-gray-100 hover:shadow-lg hover:shadow-gray-100/50 transition-all">
|
||||
<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>
|
||||
</div>
|
||||
</FadeContent>
|
||||
</div>
|
||||
</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>
|
||||
</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>
|
||||
))}
|
||||
</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>
|
||||
|
||||
<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={`bg-white rounded-2xl p-6 flex flex-col border transition-all hover:shadow-lg hover:shadow-gray-100/50 ${
|
||||
i === 1 ? 'border-blue-200 shadow-md shadow-blue-50' : 'border-gray-100'
|
||||
}`}>
|
||||
{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-400 line-through">${pkg.original_price}</span>
|
||||
)}
|
||||
</div>
|
||||
{pkg.duration > 0 && <p className="text-xs text-gray-400 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>
|
||||
))}
|
||||
</div>
|
||||
</FadeContent>
|
||||
</div>
|
||||
</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>
|
||||
<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>
|
||||
) : (
|
||||
<>
|
||||
<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>
|
||||
<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">
|
||||
{t('home.signIn')}
|
||||
</Link>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</FadeContent>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,148 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Outlet, Link, useNavigate, useLocation } from 'react-router-dom';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useAuth } from '../../context/AuthContext';
|
||||
import { useSite } from '../../context/SiteContext';
|
||||
import LanguageSwitch from '../../components/LanguageSwitch';
|
||||
|
||||
export default function CleanLayout() {
|
||||
const { t } = useTranslation();
|
||||
const { user, logout } = useAuth();
|
||||
const { site } = useSite();
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
||||
|
||||
const siteName = site?.name || 'AI Platform';
|
||||
|
||||
const navItems = [
|
||||
{ to: '/', label: t('nav.home'), auth: false },
|
||||
{ to: '/pricing', label: t('nav.pricing'), auth: false },
|
||||
{ to: '/packages', label: t('nav.packages'), auth: false },
|
||||
{ to: '/dashboard', label: t('nav.dashboard'), auth: true },
|
||||
{ to: '/tokens', label: t('nav.apiKeys'), auth: true },
|
||||
...(site?.enable_topup ? [{ to: '/topup', label: t('nav.topup'), auth: true }] : []),
|
||||
];
|
||||
|
||||
const visibleNavItems = navItems.filter((n) => !n.auth || user);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex flex-col bg-white text-gray-900">
|
||||
{/* Announcement */}
|
||||
{site?.announcement && (
|
||||
<div className="bg-blue-50 border-b border-blue-100 text-center py-2.5 px-4">
|
||||
<p className="text-sm text-blue-700">{site.announcement}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Header */}
|
||||
<header className="sticky top-0 z-50 bg-white/80 backdrop-blur-xl border-b border-gray-100">
|
||||
<div className="max-w-6xl mx-auto px-6 h-16 flex items-center justify-between">
|
||||
<Link to="/" className="flex items-center gap-3 group">
|
||||
{site?.logo ? (
|
||||
<img src={site.logo} alt={siteName} className="h-8 w-auto" />
|
||||
) : (
|
||||
<div className="w-9 h-9 rounded-xl bg-gradient-to-br from-blue-600 to-indigo-600 flex items-center justify-center text-white font-bold text-sm shadow-sm">
|
||||
{siteName.charAt(0)}
|
||||
</div>
|
||||
)}
|
||||
<span className="text-lg font-semibold text-gray-900 group-hover:text-blue-600 transition-colors">
|
||||
{siteName}
|
||||
</span>
|
||||
</Link>
|
||||
|
||||
<nav className="hidden md:flex items-center gap-1">
|
||||
{visibleNavItems.map((n) => (
|
||||
<Link
|
||||
key={n.to}
|
||||
to={n.to}
|
||||
className={`px-3.5 py-2 text-sm rounded-lg transition-all ${
|
||||
location.pathname === n.to
|
||||
? 'text-blue-600 bg-blue-50 font-medium'
|
||||
: 'text-gray-500 hover:text-gray-900 hover:bg-gray-50'
|
||||
}`}
|
||||
>
|
||||
{n.label}
|
||||
</Link>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<LanguageSwitch className="text-gray-400 hover:text-gray-700 hover:bg-gray-50" />
|
||||
|
||||
{user ? (
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-sm text-gray-500 hidden sm:block">{user.display_name || user.username}</span>
|
||||
<button
|
||||
onClick={async () => { await logout(); navigate('/'); }}
|
||||
className="text-sm text-gray-400 hover:text-gray-700 transition-colors"
|
||||
>
|
||||
{t('nav.logout')}
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<Link to="/login" className="text-sm text-gray-500 hover:text-gray-900 px-3 py-2 hidden sm:block transition-colors">
|
||||
{t('nav.login')}
|
||||
</Link>
|
||||
<Link to="/register" className="px-5 py-2 rounded-lg bg-blue-600 text-white text-sm font-medium hover:bg-blue-700 transition-colors shadow-sm">
|
||||
{t('nav.signUp')}
|
||||
</Link>
|
||||
</>
|
||||
)}
|
||||
|
||||
<button
|
||||
className="md:hidden p-2 rounded-lg hover:bg-gray-50 transition-colors"
|
||||
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
|
||||
aria-label="Toggle menu"
|
||||
>
|
||||
<svg className="w-5 h-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
{mobileMenuOpen ? (
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
) : (
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
|
||||
)}
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{mobileMenuOpen && (
|
||||
<div className="md:hidden border-t border-gray-100 bg-white">
|
||||
<nav className="max-w-6xl mx-auto px-6 py-3 flex flex-col gap-1">
|
||||
{visibleNavItems.map((n) => (
|
||||
<Link
|
||||
key={n.to}
|
||||
to={n.to}
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
className={`px-3 py-2.5 text-sm rounded-lg transition-colors ${
|
||||
location.pathname === n.to
|
||||
? 'text-blue-600 bg-blue-50 font-medium'
|
||||
: 'text-gray-500 hover:text-gray-900 hover:bg-gray-50'
|
||||
}`}
|
||||
>
|
||||
{n.label}
|
||||
</Link>
|
||||
))}
|
||||
</nav>
|
||||
</div>
|
||||
)}
|
||||
</header>
|
||||
|
||||
<main className="flex-1"><Outlet /></main>
|
||||
|
||||
<footer className="border-t border-gray-100 mt-auto bg-gray-50/50">
|
||||
<div className="max-w-6xl mx-auto px-6 py-8 flex flex-col md:flex-row items-center justify-between gap-4">
|
||||
<p className="text-sm text-gray-400">© {new Date().getFullYear()} {siteName}.</p>
|
||||
<div className="flex items-center gap-4">
|
||||
{site?.contact_email && (
|
||||
<a href={`mailto:${site.contact_email}`} className="text-sm text-gray-400 hover:text-gray-600 transition-colors">
|
||||
{t('nav.contact')}
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,251 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useAuth } from '../../context/AuthContext';
|
||||
import { useSite } from '../../context/SiteContext';
|
||||
import { getSiteModels, getSitePackages } from '../../api';
|
||||
import CountUp from '../../components/bits/CountUp';
|
||||
import FadeContent from '../../components/bits/FadeContent';
|
||||
|
||||
export default function CorporateHome() {
|
||||
const { t } = useTranslation();
|
||||
const { user } = useAuth();
|
||||
const { site } = useSite();
|
||||
const [models, setModels] = useState([]);
|
||||
const [packages, setPackages] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
getSiteModels().then(r => { if (r.data.success) setModels(r.data.data || []); }).catch(() => {});
|
||||
getSitePackages().then(r => { if (r.data.success) setPackages(r.data.data || []); }).catch(() => {});
|
||||
}, []);
|
||||
|
||||
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" />
|
||||
{t('home.lightningFast')}
|
||||
</div>
|
||||
|
||||
<h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-slate-900 leading-[1.1] tracking-tight mb-6">
|
||||
{site?.name || t('home.defaultHeroTitle')}
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</FadeContent>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
<div className="bg-white rounded-xl p-8 border border-slate-200 shadow-sm hover:shadow-md transition-shadow">
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-xl p-8 border border-slate-200 shadow-sm hover:shadow-md transition-shadow">
|
||||
<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>
|
||||
|
||||
<div className="bg-white rounded-xl p-8 border border-slate-200 shadow-sm hover:shadow-md transition-shadow">
|
||||
<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>
|
||||
</div>
|
||||
</FadeContent>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 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>
|
||||
</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>
|
||||
))}
|
||||
</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>
|
||||
|
||||
<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) => (
|
||||
<div key={pkg.id} className={`bg-white rounded-xl flex flex-col border-2 transition-all hover:shadow-lg ${
|
||||
i === 1 ? 'border-slate-900 shadow-md relative' : 'border-slate-200'
|
||||
}`}>
|
||||
{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-400 line-through">${pkg.original_price}</span>
|
||||
)}
|
||||
</div>
|
||||
{pkg.duration > 0 && <p className="text-sm text-slate-400 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>
|
||||
))}
|
||||
</div>
|
||||
</FadeContent>
|
||||
</div>
|
||||
</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>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</FadeContent>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,155 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Outlet, Link, useNavigate, useLocation } from 'react-router-dom';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useAuth } from '../../context/AuthContext';
|
||||
import { useSite } from '../../context/SiteContext';
|
||||
import LanguageSwitch from '../../components/LanguageSwitch';
|
||||
|
||||
export default function CorporateLayout() {
|
||||
const { t } = useTranslation();
|
||||
const { user, logout } = useAuth();
|
||||
const { site } = useSite();
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
||||
|
||||
const siteName = site?.name || 'AI Platform';
|
||||
|
||||
const navItems = [
|
||||
{ to: '/', label: t('nav.home'), auth: false },
|
||||
{ to: '/pricing', label: t('nav.pricing'), auth: false },
|
||||
{ to: '/packages', label: t('nav.packages'), auth: false },
|
||||
{ to: '/dashboard', label: t('nav.dashboard'), auth: true },
|
||||
{ to: '/tokens', label: t('nav.apiKeys'), auth: true },
|
||||
...(site?.enable_topup ? [{ to: '/topup', label: t('nav.topup'), auth: true }] : []),
|
||||
];
|
||||
|
||||
const visibleNavItems = navItems.filter((n) => !n.auth || user);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex flex-col bg-white text-gray-900">
|
||||
{/* Announcement */}
|
||||
{site?.announcement && (
|
||||
<div className="bg-slate-900 text-center py-2.5 px-4">
|
||||
<p className="text-sm text-slate-200">{site.announcement}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Header */}
|
||||
<header className="sticky top-0 z-50 bg-white border-b border-gray-200">
|
||||
<div className="max-w-7xl mx-auto px-6 lg:px-8 h-16 flex items-center justify-between">
|
||||
<Link to="/" className="flex items-center gap-3 group">
|
||||
{site?.logo ? (
|
||||
<img src={site.logo} alt={siteName} className="h-8 w-auto" />
|
||||
) : (
|
||||
<div className="w-8 h-8 rounded-lg bg-slate-900 flex items-center justify-center text-white font-bold text-sm">
|
||||
{siteName.charAt(0)}
|
||||
</div>
|
||||
)}
|
||||
<span className="text-lg font-bold text-slate-900 tracking-tight">
|
||||
{siteName}
|
||||
</span>
|
||||
</Link>
|
||||
|
||||
<nav className="hidden md:flex items-center gap-0.5">
|
||||
{visibleNavItems.map((n) => (
|
||||
<Link
|
||||
key={n.to}
|
||||
to={n.to}
|
||||
className={`px-4 py-2 text-sm font-medium transition-colors ${
|
||||
location.pathname === n.to
|
||||
? 'text-slate-900 border-b-2 border-slate-900'
|
||||
: 'text-slate-500 hover:text-slate-900'
|
||||
}`}
|
||||
>
|
||||
{n.label}
|
||||
</Link>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<LanguageSwitch className="text-slate-400 hover:text-slate-700 hover:bg-slate-50" />
|
||||
|
||||
{user ? (
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-sm text-slate-600 hidden sm:block font-medium">
|
||||
{user.display_name || user.username}
|
||||
</span>
|
||||
<button
|
||||
onClick={async () => { await logout(); navigate('/'); }}
|
||||
className="text-sm text-slate-400 hover:text-slate-700 transition-colors"
|
||||
>
|
||||
{t('nav.logout')}
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<Link to="/login" className="text-sm text-slate-600 hover:text-slate-900 px-3 py-2 hidden sm:block transition-colors font-medium">
|
||||
{t('nav.login')}
|
||||
</Link>
|
||||
<Link to="/register" className="px-5 py-2 rounded-lg bg-slate-900 text-white text-sm font-medium hover:bg-slate-800 transition-colors">
|
||||
{t('nav.signUp')}
|
||||
</Link>
|
||||
</>
|
||||
)}
|
||||
|
||||
<button
|
||||
className="md:hidden p-2 rounded-lg hover:bg-slate-50 transition-colors"
|
||||
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
|
||||
aria-label="Toggle menu"
|
||||
>
|
||||
<svg className="w-5 h-5 text-slate-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
{mobileMenuOpen ? (
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
) : (
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
|
||||
)}
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{mobileMenuOpen && (
|
||||
<div className="md:hidden border-t border-gray-200 bg-white">
|
||||
<nav className="max-w-7xl mx-auto px-6 py-3 flex flex-col">
|
||||
{visibleNavItems.map((n) => (
|
||||
<Link
|
||||
key={n.to}
|
||||
to={n.to}
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
className={`px-4 py-3 text-sm font-medium border-b border-gray-100 last:border-0 transition-colors ${
|
||||
location.pathname === n.to
|
||||
? 'text-slate-900 bg-slate-50'
|
||||
: 'text-slate-500 hover:text-slate-900'
|
||||
}`}
|
||||
>
|
||||
{n.label}
|
||||
</Link>
|
||||
))}
|
||||
</nav>
|
||||
</div>
|
||||
)}
|
||||
</header>
|
||||
|
||||
<main className="flex-1"><Outlet /></main>
|
||||
|
||||
<footer className="border-t border-gray-200 mt-auto bg-white">
|
||||
<div className="max-w-7xl mx-auto px-6 lg:px-8 py-10">
|
||||
<div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-6">
|
||||
<div>
|
||||
<span className="text-sm font-bold text-slate-900 tracking-tight">{siteName}</span>
|
||||
<p className="text-xs text-slate-400 mt-1">© {new Date().getFullYear()} {siteName}. All rights reserved.</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-6">
|
||||
{site?.contact_email && (
|
||||
<a href={`mailto:${site.contact_email}`} className="text-sm text-slate-400 hover:text-slate-600 transition-colors">
|
||||
{t('nav.contact')}
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user