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.

frontend/src/components/layout/Header.tsx

@@ -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>
   );
 }