feat: Enhance Pricing Page with Enterprise Plan and Billing Toggle
- Added Enterprise plan with features and pricing. - Introduced billing toggle for monthly and yearly subscriptions. - Updated feature list to include enterprise-specific features. - Improved UI for plan cards and added new styles for better visual appeal. - Adjusted SEO metadata to reflect new pricing structure. - Enhanced global styles for marketing elements.
This commit is contained in:
Your Name
@@ -1,6 +1,6 @@
|
||||
import { Link } from 'react-router-dom';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { FileText } from 'lucide-react';
|
||||
import { ArrowRight, FileText, Layers3 } from 'lucide-react';
|
||||
|
||||
const FOOTER_TOOLS = {
|
||||
PDF: [
|
||||
@@ -49,99 +49,87 @@ export default function Footer() {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<footer className="border-t border-slate-200 bg-slate-50 dark:border-slate-700 dark:bg-slate-900">
|
||||
<div className="mx-auto max-w-7xl px-4 py-10 sm:px-6 lg:px-8">
|
||||
{/* Tool link grid */}
|
||||
<div className="mb-8 grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{Object.entries(FOOTER_TOOLS).map(([category, tools]) => (
|
||||
<div key={category}>
|
||||
<h3 className="mb-3 text-sm font-semibold uppercase tracking-wider text-slate-900 dark:text-white">
|
||||
{category}
|
||||
</h3>
|
||||
<ul className="space-y-2">
|
||||
{tools.map((tool) => (
|
||||
<li key={tool.slug}>
|
||||
<Link
|
||||
to={(tool as { slug: string; isLanding?: boolean; isComparison?: boolean }).isComparison ? `/compare/${tool.slug}` : (tool as { slug: string; isLanding?: boolean }).isLanding ? `/${tool.slug}` : `/tools/${tool.slug}`}
|
||||
className="text-sm text-slate-500 transition-colors hover:text-primary-600 dark:text-slate-400 dark:hover:text-primary-400"
|
||||
>
|
||||
{tool.label}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<footer className="border-t border-slate-200/80 bg-white/80 backdrop-blur-sm dark:border-slate-700/60 dark:bg-slate-950/80">
|
||||
<div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
|
||||
<div className="marketing-panel overflow-hidden px-6 py-8 sm:px-8 sm:py-10">
|
||||
<div className="grid gap-10 xl:grid-cols-[1.15fr,1.85fr]">
|
||||
<div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-gradient-to-br from-primary-500 via-sky-500 to-accent-500 shadow-lg shadow-primary-200/70 dark:shadow-primary-950/40">
|
||||
<Layers3 className="h-5 w-5 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xl font-black tracking-tight text-slate-950 dark:text-white">
|
||||
{t('common.appName')}
|
||||
</p>
|
||||
<p className="text-sm text-slate-500 dark:text-slate-400">
|
||||
{t('common.siteTagline', 'Online PDF and file workflows')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="mt-6 max-w-md text-sm leading-7 text-slate-600 dark:text-slate-300">
|
||||
{t(
|
||||
'common.footerDescription',
|
||||
'Convert, compress, edit, and automate document work in one browser-based workspace built for speed, clarity, and secure processing.'
|
||||
)}
|
||||
</p>
|
||||
|
||||
<div className="mt-6 flex flex-wrap gap-3">
|
||||
<Link
|
||||
to="/tools"
|
||||
className="inline-flex items-center gap-2 rounded-full bg-slate-950 px-4 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-primary-600 dark:bg-white dark:text-slate-950 dark:hover:bg-primary-300"
|
||||
>
|
||||
{t('common.allTools')}
|
||||
<ArrowRight className="h-4 w-4" />
|
||||
</Link>
|
||||
<Link
|
||||
to="/developers"
|
||||
className="inline-flex items-center rounded-full border border-slate-200 px-4 py-2.5 text-sm font-semibold text-slate-700 transition-colors hover:bg-white dark:border-slate-700 dark:text-slate-200 dark:hover:bg-slate-900"
|
||||
>
|
||||
{t('common.developers')}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
<div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5">
|
||||
{Object.entries(FOOTER_TOOLS).map(([category, tools]) => (
|
||||
<div key={category}>
|
||||
<h3 className="mb-4 text-xs font-bold uppercase tracking-[0.22em] text-slate-500 dark:text-slate-400">
|
||||
{category}
|
||||
</h3>
|
||||
<ul className="space-y-2.5">
|
||||
{tools.map((tool) => (
|
||||
<li key={tool.slug}>
|
||||
<Link
|
||||
to={(tool as { slug: string; isLanding?: boolean; isComparison?: boolean }).isComparison ? `/compare/${tool.slug}` : (tool as { slug: string; isLanding?: boolean }).isLanding ? `/${tool.slug}` : `/tools/${tool.slug}`}
|
||||
className="text-sm text-slate-600 transition-colors hover:text-primary-600 dark:text-slate-300 dark:hover:text-primary-400"
|
||||
>
|
||||
{tool.label}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom bar */}
|
||||
<div className="border-t border-slate-200 pt-6 dark:border-slate-700">
|
||||
<div className="flex flex-col items-center justify-between gap-4 sm:flex-row">
|
||||
{/* Brand */}
|
||||
<div className="flex items-center gap-2 text-slate-600 dark:text-slate-400">
|
||||
<FileText className="h-5 w-5" />
|
||||
<span className="text-sm font-medium">
|
||||
© {new Date().getFullYear()} {t('common.appName')}
|
||||
</span>
|
||||
</div>
|
||||
<div className="mt-6 flex flex-col gap-4 border-t border-slate-200/80 pt-6 dark:border-slate-700/60 lg:flex-row lg:items-center lg:justify-between">
|
||||
<div className="flex items-center gap-2 text-sm text-slate-500 dark:text-slate-400">
|
||||
<FileText className="h-4 w-4" />
|
||||
<span>© {new Date().getFullYear()} {t('common.appName')}</span>
|
||||
</div>
|
||||
|
||||
{/* Links */}
|
||||
<div className="flex items-center gap-6">
|
||||
<Link
|
||||
to="/privacy"
|
||||
className="text-sm text-slate-500 transition-colors hover:text-primary-600 dark:text-slate-400 dark:hover:text-primary-400"
|
||||
>
|
||||
{t('common.privacy')}
|
||||
</Link>
|
||||
<Link
|
||||
to="/terms"
|
||||
className="text-sm text-slate-500 transition-colors hover:text-primary-600 dark:text-slate-400 dark:hover:text-primary-400"
|
||||
>
|
||||
{t('common.terms')}
|
||||
</Link>
|
||||
<Link
|
||||
to="/tools"
|
||||
className="text-sm text-slate-500 transition-colors hover:text-primary-600 dark:text-slate-400 dark:hover:text-primary-400"
|
||||
>
|
||||
{t('common.allTools')}
|
||||
</Link>
|
||||
<Link
|
||||
to="/about"
|
||||
className="text-sm text-slate-500 transition-colors hover:text-primary-600 dark:text-slate-400 dark:hover:text-primary-400"
|
||||
>
|
||||
{t('common.about')}
|
||||
</Link>
|
||||
<Link
|
||||
to="/contact"
|
||||
className="text-sm text-slate-500 transition-colors hover:text-primary-600 dark:text-slate-400 dark:hover:text-primary-400"
|
||||
>
|
||||
{t('common.contact')}
|
||||
</Link>
|
||||
<Link
|
||||
to="/pricing"
|
||||
className="text-sm text-slate-500 transition-colors hover:text-primary-600 dark:text-slate-400 dark:hover:text-primary-400"
|
||||
>
|
||||
{t('common.pricing')}
|
||||
</Link>
|
||||
<Link
|
||||
to="/pricing-transparency"
|
||||
className="text-sm text-slate-500 transition-colors hover:text-primary-600 dark:text-slate-400 dark:hover:text-primary-400"
|
||||
>
|
||||
{t('common.pricingTransparency')}
|
||||
</Link>
|
||||
<Link
|
||||
to="/blog"
|
||||
className="text-sm text-slate-500 transition-colors hover:text-primary-600 dark:text-slate-400 dark:hover:text-primary-400"
|
||||
>
|
||||
{t('common.blog')}
|
||||
</Link>
|
||||
<Link
|
||||
to="/developers"
|
||||
className="text-sm text-slate-500 transition-colors hover:text-primary-600 dark:text-slate-400 dark:hover:text-primary-400"
|
||||
>
|
||||
{t('common.developers')}
|
||||
</Link>
|
||||
</div>
|
||||
<div className="flex flex-wrap items-center gap-4 text-sm">
|
||||
<Link to="/privacy" className="text-slate-500 transition-colors hover:text-primary-600 dark:text-slate-400 dark:hover:text-primary-400">{t('common.privacy')}</Link>
|
||||
<Link to="/terms" className="text-slate-500 transition-colors hover:text-primary-600 dark:text-slate-400 dark:hover:text-primary-400">{t('common.terms')}</Link>
|
||||
<Link to="/pricing" className="text-slate-500 transition-colors hover:text-primary-600 dark:text-slate-400 dark:hover:text-primary-400">{t('common.pricing')}</Link>
|
||||
<Link to="/pricing-transparency" className="text-slate-500 transition-colors hover:text-primary-600 dark:text-slate-400 dark:hover:text-primary-400">{t('common.pricingTransparency')}</Link>
|
||||
<Link to="/about" className="text-slate-500 transition-colors hover:text-primary-600 dark:text-slate-400 dark:hover:text-primary-400">{t('common.about')}</Link>
|
||||
<Link to="/contact" className="text-slate-500 transition-colors hover:text-primary-600 dark:text-slate-400 dark:hover:text-primary-400">{t('common.contact')}</Link>
|
||||
<Link to="/blog" className="text-slate-500 transition-colors hover:text-primary-600 dark:text-slate-400 dark:hover:text-primary-400">{t('common.blog')}</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { Link, NavLink, useLocation } from 'react-router-dom';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { FileText, Moon, Sun, Menu, X, ChevronDown, UserRound, Coins, ArrowRight } from 'lucide-react';
|
||||
import { ChevronDown, Coins, ArrowRight, Layers3, Menu, Moon, Sparkles, Sun, UserRound, X } from 'lucide-react';
|
||||
import { useAuthStore } from '@/stores/authStore';
|
||||
import { ensureLanguageResources } from '@/i18n';
|
||||
|
||||
interface LangOption {
|
||||
code: string;
|
||||
label: string;
|
||||
@@ -16,6 +17,14 @@ const languages: LangOption[] = [
|
||||
{ code: 'fr', label: 'Français', flag: '🇫🇷' },
|
||||
];
|
||||
|
||||
const NAV_LINKS = [
|
||||
{ to: '/tools', key: 'common.allTools', fallback: 'All tools' },
|
||||
{ to: '/pricing', key: 'common.pricing', fallback: 'Pricing' },
|
||||
{ to: '/developers', key: 'common.developers', fallback: 'Developers' },
|
||||
{ to: '/about', key: 'common.about', fallback: 'About' },
|
||||
{ to: '/contact', key: 'common.contact', fallback: 'Contact' },
|
||||
] as const;
|
||||
|
||||
function useDarkMode() {
|
||||
const [isDark, setIsDark] = useState(() => {
|
||||
if (typeof window === 'undefined') return false;
|
||||
@@ -41,6 +50,7 @@ function useDarkMode() {
|
||||
export default function Header() {
|
||||
const { t, i18n } = useTranslation();
|
||||
const { isDark, toggle: toggleDark } = useDarkMode();
|
||||
const location = useLocation();
|
||||
const user = useAuthStore((state) => state.user);
|
||||
const credits = useAuthStore((state) => state.credits);
|
||||
const [langOpen, setLangOpen] = useState(false);
|
||||
@@ -60,96 +70,99 @@ export default function Header() {
|
||||
return () => document.removeEventListener('mousedown', handleClick);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
setMobileOpen(false);
|
||||
setLangOpen(false);
|
||||
}, [location.pathname]);
|
||||
|
||||
const switchLang = async (code: string) => {
|
||||
const resolved = await ensureLanguageResources(code);
|
||||
void i18n.changeLanguage(resolved);
|
||||
setLangOpen(false);
|
||||
};
|
||||
|
||||
const desktopNavClassName = ({ isActive }: { isActive: boolean }) =>
|
||||
[
|
||||
'rounded-full px-4 py-2 text-sm font-semibold transition-all duration-200',
|
||||
isActive
|
||||
? 'bg-slate-900 text-white shadow-sm dark:bg-white dark:text-slate-950'
|
||||
: 'text-slate-600 hover:bg-white hover:text-slate-900 dark:text-slate-300 dark:hover:bg-slate-800 dark:hover:text-white',
|
||||
].join(' ');
|
||||
|
||||
const mobileNavClassName = ({ isActive }: { isActive: boolean }) =>
|
||||
[
|
||||
'block rounded-2xl px-4 py-3 text-sm font-semibold transition-colors',
|
||||
isActive
|
||||
? 'bg-primary-600 text-white shadow-sm shadow-primary-200 dark:shadow-primary-950/30'
|
||||
: 'text-slate-700 hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-slate-800',
|
||||
].join(' ');
|
||||
|
||||
return (
|
||||
<header className="sticky top-0 z-50 border-b border-slate-200/80 bg-white/85 backdrop-blur-xl dark:border-slate-700/60 dark:bg-slate-900/85">
|
||||
<div className="mx-auto flex h-16 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8">
|
||||
{/* Logo */}
|
||||
<Link to="/" className="flex items-center gap-2.5 group">
|
||||
<div className="flex h-9 w-9 items-center justify-center rounded-xl bg-primary-600 shadow-sm shadow-primary-200 group-hover:bg-primary-700 transition-colors dark:shadow-primary-900/40">
|
||||
<FileText className="h-5 w-5 text-white" />
|
||||
</div>
|
||||
<span className="text-lg font-extrabold tracking-tight text-slate-900 dark:text-white">
|
||||
{t('common.appName')}
|
||||
</span>
|
||||
</Link>
|
||||
<header className="sticky top-0 z-50 border-b border-slate-200/70 bg-white/78 backdrop-blur-2xl dark:border-slate-700/60 dark:bg-slate-950/78">
|
||||
<div className="mx-auto flex h-20 max-w-7xl items-center justify-between gap-4 px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex items-center gap-8">
|
||||
<Link to="/" className="group flex items-center gap-3">
|
||||
<div className="flex h-11 w-11 items-center justify-center rounded-2xl bg-gradient-to-br from-primary-500 via-sky-500 to-accent-500 shadow-lg shadow-primary-200/70 transition-transform duration-300 group-hover:-translate-y-0.5 dark:shadow-primary-950/40">
|
||||
<Layers3 className="h-5 w-5 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<span className="block text-lg font-black tracking-tight text-slate-950 dark:text-white">
|
||||
{t('common.appName')}
|
||||
</span>
|
||||
<span className="hidden text-xs font-medium text-slate-500 dark:text-slate-400 sm:block">
|
||||
{t('common.siteTagline', 'Online PDF and file workflows')}
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
{/* Desktop Navigation */}
|
||||
<nav className="hidden items-center gap-1 md:flex">
|
||||
<Link
|
||||
to="/"
|
||||
className="rounded-lg px-3 py-2 text-sm font-medium text-slate-600 transition-colors hover:bg-slate-100 hover:text-slate-900 dark:text-slate-300 dark:hover:bg-slate-800 dark:hover:text-white"
|
||||
>
|
||||
{t('common.home')}
|
||||
</Link>
|
||||
<Link
|
||||
to="/pricing"
|
||||
className="rounded-lg px-3 py-2 text-sm font-medium text-slate-600 transition-colors hover:bg-slate-100 hover:text-slate-900 dark:text-slate-300 dark:hover:bg-slate-800 dark:hover:text-white"
|
||||
>
|
||||
{t('common.pricing')}
|
||||
</Link>
|
||||
<Link
|
||||
to="/developers"
|
||||
className="rounded-lg px-3 py-2 text-sm font-medium text-slate-600 transition-colors hover:bg-slate-100 hover:text-slate-900 dark:text-slate-300 dark:hover:bg-slate-800 dark:hover:text-white"
|
||||
>
|
||||
{t('common.developers')}
|
||||
</Link>
|
||||
<Link
|
||||
to="/about"
|
||||
className="rounded-lg px-3 py-2 text-sm font-medium text-slate-600 transition-colors hover:bg-slate-100 hover:text-slate-900 dark:text-slate-300 dark:hover:bg-slate-800 dark:hover:text-white"
|
||||
>
|
||||
{t('common.about')}
|
||||
</Link>
|
||||
</nav>
|
||||
<nav className="hidden items-center gap-1 rounded-full border border-slate-200/80 bg-white/80 p-1 shadow-sm lg:flex dark:border-slate-700/70 dark:bg-slate-900/70">
|
||||
{NAV_LINKS.map((link) => (
|
||||
<NavLink key={link.to} to={link.to} className={desktopNavClassName}>
|
||||
{t(link.key, link.fallback)}
|
||||
</NavLink>
|
||||
))}
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex items-center gap-2">
|
||||
{/* Account / credits pill */}
|
||||
<Link
|
||||
to="/account"
|
||||
className="hidden max-w-[200px] items-center gap-2 rounded-xl border border-slate-200 px-3 py-2 text-sm font-medium text-slate-600 transition-colors hover:bg-slate-50 md:flex dark:border-slate-700 dark:text-slate-300 dark:hover:bg-slate-800"
|
||||
className="hidden max-w-[220px] items-center gap-2 rounded-full border border-slate-200/80 bg-white/70 px-3.5 py-2 text-sm font-medium text-slate-700 transition-colors hover:bg-white lg:flex dark:border-slate-700/70 dark:bg-slate-900/70 dark:text-slate-200 dark:hover:bg-slate-900"
|
||||
>
|
||||
<UserRound className="h-4 w-4 flex-shrink-0" />
|
||||
<UserRound className="h-4 w-4 shrink-0" />
|
||||
<span className="truncate">{user?.email || t('common.account')}</span>
|
||||
{user && credits && (
|
||||
<span className="flex items-center gap-1 rounded-full bg-primary-100 px-2 py-0.5 text-xs font-semibold text-primary-700 dark:bg-primary-900/30 dark:text-primary-300">
|
||||
{user && credits ? (
|
||||
<span className="flex items-center gap-1 rounded-full bg-primary-100 px-2 py-0.5 text-[11px] font-bold text-primary-700 dark:bg-primary-900/40 dark:text-primary-300">
|
||||
<Coins className="h-3 w-3" />
|
||||
{credits.credits_remaining}
|
||||
</span>
|
||||
)}
|
||||
) : null}
|
||||
</Link>
|
||||
|
||||
{/* CTA — Start Free */}
|
||||
{!user && (
|
||||
{!user ? (
|
||||
<Link
|
||||
to="/account"
|
||||
className="hidden md:inline-flex items-center gap-1.5 rounded-xl bg-primary-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm shadow-primary-200 transition-all hover:bg-primary-700 hover:shadow-md hover:-translate-y-px active:translate-y-0 dark:shadow-primary-900/40"
|
||||
className="hidden items-center gap-2 rounded-full bg-slate-950 px-4 py-2.5 text-sm font-semibold text-white shadow-sm transition-all hover:-translate-y-0.5 hover:bg-primary-600 lg:inline-flex dark:bg-white dark:text-slate-950 dark:hover:bg-primary-300"
|
||||
>
|
||||
<Sparkles className="h-4 w-4" />
|
||||
{t('home.startFree', 'Start Free')}
|
||||
<ArrowRight className="h-3.5 w-3.5" />
|
||||
</Link>
|
||||
)}
|
||||
) : null}
|
||||
|
||||
{/* Dark Mode Toggle */}
|
||||
<button
|
||||
onClick={toggleDark}
|
||||
className="flex items-center justify-center rounded-xl p-2.5 text-slate-500 transition-colors hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-800"
|
||||
className="flex items-center justify-center rounded-full border border-transparent p-2.5 text-slate-500 transition-colors hover:border-slate-200 hover:bg-white dark:text-slate-400 dark:hover:border-slate-700 dark:hover:bg-slate-900"
|
||||
aria-label={isDark ? t('common.lightMode') : t('common.darkMode')}
|
||||
title={isDark ? t('common.lightMode') : t('common.darkMode')}
|
||||
>
|
||||
{isDark ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />}
|
||||
</button>
|
||||
|
||||
{/* Language Dropdown */}
|
||||
<div className="relative" ref={langRef}>
|
||||
<button
|
||||
onClick={() => setLangOpen((v) => !v)}
|
||||
className="flex items-center gap-1.5 rounded-xl px-3 py-2 text-sm font-medium text-slate-600 transition-colors hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800"
|
||||
onClick={() => setLangOpen((value) => !value)}
|
||||
className="flex items-center gap-1.5 rounded-full border border-transparent px-3 py-2 text-sm font-medium text-slate-600 transition-colors hover:border-slate-200 hover:bg-white dark:text-slate-300 dark:hover:border-slate-700 dark:hover:bg-slate-900"
|
||||
aria-label={t('common.language')}
|
||||
aria-expanded={langOpen}
|
||||
aria-haspopup="listbox"
|
||||
@@ -159,36 +172,34 @@ export default function Header() {
|
||||
<ChevronDown className={`h-4 w-4 transition-transform duration-200 ${langOpen ? 'rotate-180' : ''}`} />
|
||||
</button>
|
||||
|
||||
{/* Dropdown Menu */}
|
||||
{langOpen && (
|
||||
<div className="absolute end-0 top-full z-50 mt-2 w-44 origin-top-right animate-in fade-in slide-in-from-top-2 rounded-xl border border-slate-200 bg-white p-1 shadow-lg dark:border-slate-700 dark:bg-slate-800">
|
||||
{langOpen ? (
|
||||
<div className="absolute end-0 top-full z-50 mt-2 w-48 origin-top-right rounded-2xl border border-slate-200 bg-white p-1.5 shadow-xl shadow-slate-200/70 dark:border-slate-700 dark:bg-slate-900 dark:shadow-slate-950/30">
|
||||
{languages.map((lang) => (
|
||||
<button
|
||||
key={lang.code}
|
||||
onClick={() => void switchLang(lang.code)}
|
||||
className={`flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors ${
|
||||
className={`flex w-full items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium transition-colors ${
|
||||
lang.code === i18n.language
|
||||
? 'bg-primary-50 text-primary-700 dark:bg-primary-900/30 dark:text-primary-400'
|
||||
: 'text-slate-600 hover:bg-slate-50 dark:text-slate-300 dark:hover:bg-slate-700'
|
||||
? 'bg-primary-50 text-primary-700 dark:bg-primary-900/30 dark:text-primary-300'
|
||||
: 'text-slate-600 hover:bg-slate-50 dark:text-slate-300 dark:hover:bg-slate-800'
|
||||
}`}
|
||||
role="option"
|
||||
aria-selected={lang.code === i18n.language}
|
||||
>
|
||||
<span className="text-lg leading-none">{lang.flag}</span>
|
||||
<span>{lang.label}</span>
|
||||
{lang.code === i18n.language && (
|
||||
{lang.code === i18n.language ? (
|
||||
<span className="ms-auto text-primary-600 dark:text-primary-400">✓</span>
|
||||
)}
|
||||
) : null}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{/* Mobile Menu Toggle */}
|
||||
<button
|
||||
onClick={() => setMobileOpen((v) => !v)}
|
||||
className="flex items-center justify-center rounded-xl p-2.5 text-slate-500 transition-colors hover:bg-slate-100 md:hidden dark:text-slate-400 dark:hover:bg-slate-800"
|
||||
onClick={() => setMobileOpen((value) => !value)}
|
||||
className="flex items-center justify-center rounded-full border border-transparent p-2.5 text-slate-500 transition-colors hover:border-slate-200 hover:bg-white lg:hidden dark:text-slate-400 dark:hover:border-slate-700 dark:hover:bg-slate-900"
|
||||
aria-label="Menu"
|
||||
>
|
||||
{mobileOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
|
||||
@@ -196,62 +207,40 @@ export default function Header() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile Navigation */}
|
||||
{mobileOpen && (
|
||||
<nav className="border-t border-slate-200 bg-white px-4 pb-4 pt-2 md:hidden dark:border-slate-700 dark:bg-slate-900">
|
||||
<Link
|
||||
to="/"
|
||||
onClick={() => setMobileOpen(false)}
|
||||
className="block rounded-lg px-3 py-2.5 text-sm font-medium text-slate-600 transition-colors hover:bg-slate-50 dark:text-slate-300 dark:hover:bg-slate-800"
|
||||
>
|
||||
{t('common.home')}
|
||||
</Link>
|
||||
<Link
|
||||
to="/pricing"
|
||||
onClick={() => setMobileOpen(false)}
|
||||
className="block rounded-lg px-3 py-2.5 text-sm font-medium text-slate-600 transition-colors hover:bg-slate-50 dark:text-slate-300 dark:hover:bg-slate-800"
|
||||
>
|
||||
{t('common.pricing')}
|
||||
</Link>
|
||||
<Link
|
||||
to="/about"
|
||||
onClick={() => setMobileOpen(false)}
|
||||
className="block rounded-lg px-3 py-2.5 text-sm font-medium text-slate-600 transition-colors hover:bg-slate-50 dark:text-slate-300 dark:hover:bg-slate-800"
|
||||
>
|
||||
{t('common.about')}
|
||||
</Link>
|
||||
<Link
|
||||
to="/account"
|
||||
onClick={() => setMobileOpen(false)}
|
||||
className="flex items-center justify-between rounded-lg px-3 py-2.5 text-sm font-medium text-slate-600 transition-colors hover:bg-slate-50 dark:text-slate-300 dark:hover:bg-slate-800"
|
||||
>
|
||||
<span>{user?.email || t('common.account')}</span>
|
||||
{user && credits && (
|
||||
<span className="flex items-center gap-1 rounded-full bg-primary-100 px-2 py-0.5 text-xs font-semibold text-primary-700 dark:bg-primary-900/30 dark:text-primary-300">
|
||||
<Coins className="h-3 w-3" />
|
||||
{credits.credits_remaining}
|
||||
</span>
|
||||
)}
|
||||
</Link>
|
||||
<Link
|
||||
to="/developers"
|
||||
onClick={() => setMobileOpen(false)}
|
||||
className="block rounded-lg px-3 py-2.5 text-sm font-medium text-slate-600 transition-colors hover:bg-slate-50 dark:text-slate-300 dark:hover:bg-slate-800"
|
||||
>
|
||||
{t('common.developers')}
|
||||
</Link>
|
||||
{!user && (
|
||||
{mobileOpen ? (
|
||||
<nav className="border-t border-slate-200/70 bg-white/92 px-4 pb-5 pt-3 lg:hidden dark:border-slate-700/60 dark:bg-slate-950/92">
|
||||
<div className="mx-auto flex max-w-7xl flex-col gap-2">
|
||||
{NAV_LINKS.map((link) => (
|
||||
<NavLink key={link.to} to={link.to} className={mobileNavClassName}>
|
||||
{t(link.key, link.fallback)}
|
||||
</NavLink>
|
||||
))}
|
||||
|
||||
<Link
|
||||
to="/account"
|
||||
onClick={() => setMobileOpen(false)}
|
||||
className="mt-2 flex items-center justify-center gap-2 rounded-xl bg-primary-600 px-4 py-3 text-sm font-semibold text-white hover:bg-primary-700"
|
||||
className="flex items-center justify-between rounded-2xl border border-slate-200 bg-white px-4 py-3 text-sm font-semibold text-slate-700 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200"
|
||||
>
|
||||
{t('home.startFree', 'Start Free')}
|
||||
<ArrowRight className="h-4 w-4" />
|
||||
<span>{user?.email || t('common.account')}</span>
|
||||
{user && credits ? (
|
||||
<span className="flex items-center gap-1 rounded-full bg-primary-100 px-2 py-0.5 text-[11px] font-bold text-primary-700 dark:bg-primary-900/40 dark:text-primary-300">
|
||||
<Coins className="h-3 w-3" />
|
||||
{credits.credits_remaining}
|
||||
</span>
|
||||
) : null}
|
||||
</Link>
|
||||
)}
|
||||
|
||||
{!user ? (
|
||||
<Link
|
||||
to="/account"
|
||||
className="mt-1 flex items-center justify-center gap-2 rounded-2xl bg-slate-950 px-4 py-3 text-sm font-semibold text-white dark:bg-white dark:text-slate-950"
|
||||
>
|
||||
{t('home.startFree', 'Start Free')}
|
||||
<ArrowRight className="h-4 w-4" />
|
||||
</Link>
|
||||
) : null}
|
||||
</div>
|
||||
</nav>
|
||||
)}
|
||||
) : null}
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
25
frontend/src/components/layout/MarketingPageLayout.tsx
Normal file
25
frontend/src/components/layout/MarketingPageLayout.tsx
Normal file
@@ -0,0 +1,25 @@
|
||||
import type { ReactNode } from 'react';
|
||||
|
||||
interface MarketingPageLayoutProps {
|
||||
hero?: ReactNode;
|
||||
children: ReactNode;
|
||||
className?: string;
|
||||
bodyClassName?: string;
|
||||
}
|
||||
|
||||
export default function MarketingPageLayout({
|
||||
hero,
|
||||
children,
|
||||
className,
|
||||
bodyClassName,
|
||||
}: MarketingPageLayoutProps) {
|
||||
const rootClassName = ['marketing-shell relative isolate', className].filter(Boolean).join(' ');
|
||||
const contentClassName = ['relative', bodyClassName].filter(Boolean).join(' ');
|
||||
|
||||
return (
|
||||
<div className={rootClassName}>
|
||||
{hero}
|
||||
<div className={contentClassName}>{children}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user