office_translator/wordly.art---traduction-de-documents-2/src/App.tsx

/**
 * @license
 * SPDX-License-Identifier: Apache-2.0
 */

import { 
  FileText, 
  Layers, 
  MousePointer2, 
  Download, 
  Globe, 
  Cpu, 
  CheckCircle2, 
  ArrowRight, 
  Layout, 
  PieChart, 
  FileSpreadsheet, 
  Presentation, 
  MessageSquare,
  ShieldCheck,
  Zap,
  Menu,
  X,
  Languages,
  Monitor,
  Eye,
  Lock,
  Clock,
  Activity
} from 'lucide-react';
import { motion, AnimatePresence } from 'motion/react';
import { useState } from 'react';
import { useTranslation } from 'react-i18next';

import { Dashboard } from './components/Dashboard';

const Logo = () => (
  <div className="flex items-center gap-4 group cursor-pointer">
    <div className="w-10 h-10 bg-brand-dark rounded-xl flex items-center justify-center text-white font-bold text-2xl shadow-xl transition-all duration-500 group-hover:rotate-[15deg] group-hover:scale-110">
      W
    </div>
    <span className="text-2xl font-bold tracking-tighter text-brand-dark">
      Wordly<span className="text-brand-accent">.art</span>
    </span>
  </div>
);

const Navbar = ({ onLogin }: { onLogin: () => void }) => {
  const [isOpen, setIsOpen] = useState(false);
  const { t, i18n } = useTranslation();

  const toggleLanguage = () => {
    const nextLang = i18n.language === 'fr' ? 'en' : 'fr';
    i18n.changeLanguage(nextLang);
  };

  return (
    <nav className="fixed top-0 left-0 right-0 z-50 bg-brand-bg/80 backdrop-blur-md border-b border-black/5">
      <div className="max-w-7xl mx-auto px-6 h-20 flex justify-between items-center">
        <Logo />
        
        <div className="hidden md:flex items-center space-x-10">
          <a href="#features" className="text-brand-dark/60 hover:text-brand-dark transition-colors text-[11px] font-bold uppercase tracking-widest">{t('nav.why')}</a>
          <a href="#formats" className="text-brand-dark/60 hover:text-brand-dark transition-colors text-[11px] font-bold uppercase tracking-widest">{t('nav.formats')}</a>
          <a href="#pricing" className="text-brand-dark/60 hover:text-brand-dark transition-colors text-[11px] font-bold uppercase tracking-widest">{t('nav.pricing')}</a>
          <div className="h-4 w-[1px] bg-black/10"></div>
          <button 
            onClick={toggleLanguage}
            className="text-[10px] font-bold text-brand-dark hover:text-brand-accent transition-colors uppercase tracking-[0.2em]"
          >
            {i18n.language === 'fr' ? 'English' : 'Français'}
          </button>
          <button onClick={onLogin} className="premium-button py-2.5 px-6 leading-none">
            {t('nav.startFree')}
          </button>
        </div>

        <div className="md:hidden">
          <button onClick={() => setIsOpen(!isOpen)} className="text-brand-dark p-2 hover:bg-black/5 rounded-lg transition-colors">
            {isOpen ? <X size={24} /> : <Menu size={24} />}
          </button>
        </div>
      </div>

      <AnimatePresence>
        {isOpen && (
          <motion.div 
            initial={{ opacity: 0, height: 0 }}
            animate={{ opacity: 1, height: 'auto' }}
            exit={{ opacity: 0, height: 0 }}
            className="md:hidden bg-white border-b border-gray-100 overflow-hidden"
          >
            <div className="px-6 pt-4 pb-10 space-y-4 text-center">
              <button 
                onClick={toggleLanguage}
                className="w-full py-2 text-sm font-black text-[#004777] bg-gray-50 rounded-xl"
              >
                {t('common.language', { lang: i18n.language === 'fr' ? 'English' : 'Français' })} 
                <span className="ml-2 opacity-50 uppercase">{i18n.language === 'fr' ? 'en' : 'fr'}</span>
              </button>
              <a href="#features" onClick={() => setIsOpen(false)} className="block py-3 text-lg font-bold text-gray-700">{t('nav.why')}</a>
              <a href="#formats" onClick={() => setIsOpen(false)} className="block py-3 text-lg font-bold text-gray-700">{t('nav.formats')}</a>
              <a href="#pricing" onClick={() => setIsOpen(false)} className="block py-3 text-lg font-bold text-gray-700">{t('nav.pricing')}</a>
              <div className="pt-6 grid grid-cols-2 gap-4">
                <button onClick={onLogin} className="flex items-center justify-center py-4 text-brand-dark/60 font-bold border-2 border-black/5 rounded-2xl">{t('nav.login')}</button>
                <button onClick={onLogin} className="flex items-center justify-center py-4 bg-brand-dark text-white rounded-2xl font-bold">{t('nav.startFree')}</button>
              </div>
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </nav>
  );
};

const Hero = ({ onLogin }: { onLogin: () => void }) => {
  const { t } = useTranslation();

  return (
    <section className="relative pt-48 pb-32 lg:pt-64 lg:pb-48 px-4 text-center">
      <div className="max-w-5xl mx-auto relative z-10">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, ease: "easeOut" }}
        >
          <div className="inline-flex items-center gap-2 px-4 py-1.5 mb-10 text-[10px] font-bold tracking-[0.3em] text-brand-dark/40 uppercase bg-transparent border border-black/10 rounded-full">
            <Languages size={10} /> {t('hero.tag')}
          </div>
          <h1 className="text-7xl lg:text-9xl mb-10 text-brand-dark font-extrabold uppercase">
            {t('hero.titleLine1')}<br />
            <span className="block mt-4">{t('hero.titleLine2')}</span>
          </h1>
          <p className="text-lg lg:text-xl text-brand-dark/50 mb-14 max-w-2xl mx-auto leading-relaxed font-medium">
            {t('hero.description')}
          </p>
          
          <div className="flex flex-col sm:flex-row gap-4 justify-center mb-24">
            <button onClick={onLogin} className="premium-button px-12 py-5 text-base">
              {t('hero.ctaMain')}
            </button>
            <button className="px-12 py-5 rounded-xl border border-black/10 font-bold text-base hover:bg-black/5 transition-all">
              {t('hero.ctaSec')}
            </button>
          </div>
        </motion.div>

        <motion.div
           initial={{ opacity: 0, scale: 0.98, y: 30 }}
           animate={{ opacity: 1, scale: 1, y: 0 }}
           transition={{ duration: 1.2, ease: [0.16, 1, 0.3, 1], delay: 0.2 }}
           className="relative max-w-5xl mx-auto"
        >
          <div className="editorial-card p-4 lg:p-6 overflow-hidden bg-brand-muted/30">
            <div className="aspect-[16/9] lg:aspect-[21/9] bg-white rounded-2xl relative overflow-hidden shadow-sm border border-black/5">
                <img 
                  src="https://images.unsplash.com/photo-1499951360447-b19be8fe80f5?auto=format&fit=crop&q=80&w=2000" 
                  alt="Workspace" 
                  className="w-full h-full object-cover filter saturate-[0.8] grayscale-[0.1]"
                  referrerPolicy="no-referrer"
                />
                <div className="absolute inset-0 bg-brand-dark/5" />
                
                {/* Floating Badges */}
                <div className="absolute top-8 right-8 w-64 bg-white/90 backdrop-blur-xl border border-black/5 p-6 rounded-2xl shadow-2xl text-left hidden md:block">
                  <div className="flex items-center gap-3 mb-4">
                    <div className="w-8 h-8 rounded-full bg-brand-accent/20 flex items-center justify-center text-brand-accent">
                      <Zap size={16} />
                    </div>
                    <span className="text-[10px] font-bold uppercase tracking-widest text-brand-dark">Context Engine</span>
                  </div>
                  <p className="text-xs text-brand-dark/70 leading-relaxed font-medium">"Translation detected: Technical maintenance term for HVAC systems..."</p>
                </div>

                <div className="absolute bottom-8 left-8 w-64 bg-brand-dark text-white p-6 rounded-2xl shadow-2xl text-left hidden md:block">
                  <div className="flex items-center gap-3 mb-4">
                    <Activity size={16} className="text-brand-accent" />
                    <span className="text-[10px] font-bold uppercase tracking-widest text-brand-accent">Live Analysis</span>
                  </div>
                  <div className="flex items-center -space-x-2">
                    {[1,2,3].map(i => (
                      <div key={i} className="w-6 h-6 rounded-full border-2 border-brand-dark bg-brand-muted text-[8px] flex items-center justify-center font-bold text-brand-dark">JD</div>
                    ))}
                    <span className="text-[10px] ml-4 text-white/60">+12 terms detected</span>
                  </div>
                </div>
            </div>
          </div>
        </motion.div>
      </div>
    </section>
  );
};

const Steps = () => {
  const { t } = useTranslation();
  const steps = [
    {
      num: t('steps.step1.num'),
      title: t('steps.step1.title'),
      desc: t('steps.step1.desc'),
      icon: <MousePointer2 size={24} />,
    },
    {
      num: t('steps.step2.num'),
      title: t('steps.step2.title'),
      desc: t('steps.step2.desc'),
      icon: <Cpu size={24} />,
    },
    {
      num: t('steps.step3.num'),
      title: t('steps.step3.title'),
      desc: t('steps.step3.desc'),
      icon: <Download size={24} />,
    }
  ];

  return (
    <section className="py-32 px-4 border-y border-black/5">
      <div className="max-w-7xl mx-auto">
        <div className="mb-24">
            <span className="accent-pill mb-6 block w-fit">{t('steps.stepLabel', { num: '0' })} PROCESUS</span>
            <h2 className="text-5xl lg:text-7xl text-brand-dark mb-6">{t('steps.title')}</h2>
            <p className="text-brand-dark/40 text-lg max-w-xl font-medium">{t('steps.subtitle')}</p>
        </div>
        
        <div className="grid md:grid-cols-3 gap-16">
          {steps.map((st, i) => (
            <div key={i} className="group">
              <div className="w-12 h-12 rounded-xl bg-brand-muted flex items-center justify-center text-brand-dark mb-8 group-hover:bg-brand-dark group-hover:text-white transition-all duration-500">
                {st.icon}
              </div>
              <h3 className="text-3xl text-brand-dark mb-4">{st.title}</h3>
              <p className="text-brand-dark/40 leading-relaxed font-medium">{st.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};
const FeaturesContext = () => {
  const { t } = useTranslation();
  return (
    <section id="features" className="py-32 px-4 bg-brand-muted/30">
      <div className="max-w-7xl mx-auto">
        <div className="grid lg:grid-cols-12 gap-20 items-end mb-24">
            <div className="lg:col-span-12">
                <span className="accent-pill mb-6 block w-fit font-bold uppercase tracking-widest">intelligence intégrée</span>
                <h2 className="text-6xl lg:text-8xl text-brand-dark leading-none">
                    {t('features.title')}
                </h2>
            </div>
        </div>

        <div className="grid md:grid-cols-3 gap-8">
            {[
            { icon: <Monitor className="text-brand-dark/40" />, title: t('features.context.title'), desc: t('features.context.desc') },
            { icon: <Layers className="text-brand-dark/40" />, title: t('features.glossary.title'), desc: t('features.glossary.desc') },
            { icon: <Eye className="text-brand-dark/40" />, title: t('features.vision.title'), desc: t('features.vision.desc') }
            ].map((item, i) => (
            <div key={i} className="editorial-card p-10 flex flex-col items-start gap-8">
                <div className="w-10 h-10 border border-black/5 rounded-full flex items-center justify-center">
                    {item.icon}
                </div>
                <div>
                    <h4 className="text-2xl font-bold mb-4 text-brand-dark">{item.title}</h4>
                    <p className="text-brand-dark/40 leading-relaxed font-medium text-sm">{item.desc}</p>
                </div>
            </div>
            ))}
        </div>
      </div>
    </section>
  );
};

const LayoutFeatures = () => {
  const { t } = useTranslation();
  const points = (t('layout.points', { returnObjects: true }) as any[]).map((p, i) => ({
    ...p,
    icon: i === 0 ? <Layers size={22} /> : 
          i === 1 ? <Layout size={22} /> :
          i === 2 ? <PieChart size={22} /> :
          i === 3 ? <Zap size={22} /> :
          i === 4 ? <MessageSquare size={22} /> :
          <Globe size={22} />
  }));

  return (
    <section className="py-32 px-4 bg-brand-dark text-white">
      <div className="max-w-7xl mx-auto">
        <div className="text-center mb-32">
          <h2 className="text-6xl lg:text-8xl mb-10 leading-tight">
            {t('layout.title')}<br /> <span>{t('layout.title2')}</span>
          </h2>
          <p className="text-white/40 max-w-2xl mx-auto text-xl font-medium uppercase tracking-widest">
            {t('layout.subtitle')}
          </p>
        </div>
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-px bg-white/5 border border-white/10 rounded-3xl overflow-hidden shadow-2xl">
          {points.map((p, i) => (
             <div 
               key={i} 
               className="group p-14 bg-brand-dark hover:bg-white/[0.02] transition-all duration-700"
             >
               <div className="w-12 h-12 border border-white/10 rounded-xl flex items-center justify-center text-brand-accent mb-10 group-hover:scale-110 group-hover:border-white/20 transition-all">
                 {p.icon}
               </div>
               <h4 className="text-3xl font-bold mb-6 leading-none">{p.title}</h4>
               <p className="text-white/30 text-base leading-relaxed font-medium">{p.desc}</p>
             </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const FormatsSection = () => {
  const { t } = useTranslation();
  const formats = [
    { 
      id: ".DOCX", 
      name: t('formats.word.name'), 
      icon: <FileText className="text-brand-dark/40" />,
      items: t('formats.word.items', { returnObjects: true }) as string[],
    },
    { 
      id: ".XLSX", 
      name: t('formats.excel.name'), 
      icon: <FileSpreadsheet className="text-brand-dark/40" />,
      items: t('formats.excel.items', { returnObjects: true }) as string[],
    },
    { 
      id: ".PPTX", 
      name: t('formats.pptx.name'), 
      icon: <Presentation className="text-brand-dark/40" />,
      items: t('formats.pptx.items', { returnObjects: true }) as string[],
    },
    { 
      id: ".PDF", 
      name: t('formats.pdf.name'), 
      icon: <FileText className="text-brand-dark/40" />,
      items: t('formats.pdf.items', { returnObjects: true }) as string[],
    }
  ];

  return (
    <section id="formats" className="py-40 px-4">
      <div className="max-w-7xl mx-auto">
        <div className="mb-24">
          <span className="accent-pill mb-6 block w-fit">COMPATIBILITÉ</span>
          <h2 className="text-5xl lg:text-7xl text-brand-dark mb-6 leading-tight uppercase font-black">{t('formats.title')} <span>{t('formats.title2')}</span></h2>
          <p className="text-brand-dark/40 max-w-xl text-lg font-medium">{t('formats.subtitle')}</p>
        </div>
        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
          {formats.map((f, i) => (
             <div 
               key={i}
               className="editorial-card p-10 group"
             >
               <div className="flex justify-between items-start mb-10">
                 <div className={`w-12 h-12 bg-brand-muted rounded-xl flex items-center justify-center text-xl group-hover:bg-brand-dark group-hover:text-white transition-all`}>
                   {f.icon}
                 </div>
                 <span className="text-[9px] font-bold text-brand-dark/20 uppercase tracking-[0.2em]">{f.id}</span>
               </div>
               <h3 className="text-2xl font-bold mb-6 text-brand-dark uppercase tracking-tighter">{f.name}</h3>
               <ul className="space-y-4">
                 {f.items.map((item, j) => (
                   <li key={j} className="flex items-start gap-3 text-xs text-brand-dark/40 font-medium">
                     <div className="w-1 h-1 bg-brand-accent rounded-full mt-1.5 shrink-0 opacity-40"></div> {item}
                   </li>
                 ))}
               </ul>
             </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const PricingSection = () => {
  const { t } = useTranslation();
  const [isAnnual, setIsAnnual] = useState(true);

  const plans = [
    {
      name: t('pricing.starter.name'),
      desc: t('pricing.starter.desc'),
      monthlyPrice: 9,
      annualPrice: 7,
      features: t('pricing.starter.features', { returnObjects: true }) as string[],
      cta: t('pricing.starter.cta'),
      popular: false
    },
    {
      name: t('pricing.pro.name'),
      desc: t('pricing.pro.desc'),
      monthlyPrice: 25,
      annualPrice: 19,
      features: t('pricing.pro.features', { returnObjects: true }) as string[],
      cta: t('pricing.pro.cta'),
      popular: true
    },
    {
      name: t('pricing.business.name'),
      desc: t('pricing.business.desc'),
      monthlyPrice: 65,
      annualPrice: 49,
      features: t('pricing.business.features', { returnObjects: true }) as string[],
      cta: t('pricing.business.cta'),
      popular: false
    }
  ];

  return (
    <section id="pricing" className="py-40 px-4 bg-brand-bg">
      <div className="max-w-7xl mx-auto">
        <div className="text-center mb-24">
            <h2 className="text-7xl lg:text-8xl mb-8 leading-tight">{t('pricing.title')}</h2>
            <p className="text-brand-dark/40 text-xl font-bold max-w-2xl mx-auto uppercase tracking-widest">{t('pricing.subtitle')}</p>
        </div>

        <div className="flex items-center justify-center gap-12 mb-32">
           <button 
             onClick={() => setIsAnnual(false)}
             className={`text-sm font-bold uppercase tracking-widest transition-all ${!isAnnual ? 'text-brand-dark underline underline-offset-8' : 'text-brand-dark/30 hover:text-brand-dark'}`}
           >
             {t('pricing.monthly')}
           </button>
           <button 
             onClick={() => setIsAnnual(true)}
             className={`text-sm font-bold uppercase tracking-widest transition-all relative ${isAnnual ? 'text-brand-dark underline underline-offset-8' : 'text-brand-dark/30 hover:text-brand-dark'}`}
           >
             {t('pricing.annual')}
             <span className="absolute -top-6 left-1/2 -translate-x-1/2 text-[9px] font-bold text-brand-accent whitespace-nowrap italic">
               (20% d'économie)
             </span>
           </button>
        </div>

        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-px bg-black/5 rounded-[40px] overflow-hidden border border-black/5">
           {plans.map((p, i) => (
             <div 
               key={i} 
               className={`p-16 bg-white flex flex-col text-left transition-all duration-500 hover:z-10 hover:shadow-2xl hover:scale-[1.01]`}
             >
               <h3 className="text-4xl font-black mb-2 text-brand-dark uppercase tracking-tighter">{p.name}</h3>
               <p className="text-brand-dark/40 text-xs font-bold mb-14 tracking-widest uppercase">{p.desc}</p>
               
               <div className="mb-14">
                 <span className="text-7xl font-black leading-none">€{isAnnual ? p.annualPrice : p.monthlyPrice}</span>
                 <span className="text-brand-dark/30 font-bold ml-2 uppercase text-[10px] tracking-[0.2em]">/ {t('pricing.month')}</span>
               </div>

               <ul className="space-y-6 mb-16 flex-grow">
                 {p.features.map((f, j) => (
                   <li key={j} className="flex items-start gap-4 text-sm text-brand-dark/50 font-medium leading-snug">
                     <div className="w-1 h-1 rounded-full bg-brand-accent mt-2 shrink-0"></div> {f}
                   </li>
                 ))}
               </ul>

               <button className={`w-full py-5 rounded-xl font-bold text-sm transition-all uppercase tracking-widest leading-none ${p.popular ? 'bg-brand-dark text-white shadow-xl' : 'bg-transparent text-brand-dark border border-black/10 hover:bg-black/5'}`}>
                 {p.cta}
               </button>
             </div>
           ))}
        </div>
      </div>
    </section>
  );
};

const CTASection = () => {
  const { t } = useTranslation();
  return (
    <section className="py-40 px-4 text-center">
      <div className="max-w-4xl mx-auto">
          <h2 className="text-7xl lg:text-9xl text-brand-dark mb-10 leading-none tracking-tighter">
            {t('cta.title')}
          </h2>
          <p className="text-2xl text-brand-dark/40 mb-16 font-bold uppercase tracking-[0.2em]">
            {t('cta.subtitle')}
          </p>
          <div className="flex flex-col sm:flex-row gap-6 justify-center items-center">
            <button className="premium-button px-14 py-6 text-xl">
              {t('cta.button')}
            </button>
          </div>
      </div>
    </section>
  );
};

const Footer = () => {
  const { t } = useTranslation();
  return (
    <footer className="bg-brand-muted/30 pt-40 pb-20 px-6">
      <div className="max-w-7xl mx-auto">
        <div className="grid md:grid-cols-12 gap-20 mb-40">
          <div className="md:col-span-12 lg:col-span-6">
            <Logo />
            <p className="text-brand-dark/40 text-lg font-medium mt-12 mb-12 max-w-sm leading-relaxed uppercase tracking-widest">
              {t('footer.desc')}
            </p>
          </div>
          
          <div className="md:col-span-4 lg:col-span-2">
            <h4 className="text-[10px] font-bold uppercase tracking-[0.3em] text-brand-dark mb-10">{t('footer.product')}</h4>
            <ul className="space-y-6 text-xs text-brand-dark/40 font-bold uppercase tracking-widest leading-none">
              <li><a href="#features" className="hover:text-brand-dark transition-colors">{t('nav.why')}</a></li>
              <li><a href="#formats" className="hover:text-brand-dark transition-colors">{t('nav.formats')}</a></li>
              <li><a href="#pricing" className="hover:text-brand-dark transition-colors">{t('nav.pricing')}</a></li>
            </ul>
          </div>
          
          <div className="md:col-span-4 lg:col-span-2">
            <h4 className="text-[10px] font-bold uppercase tracking-[0.3em] text-brand-dark mb-10">{t('footer.resources')}</h4>
            <ul className="space-y-6 text-xs text-brand-dark/40 font-bold uppercase tracking-widest leading-none">
              <li><a href="#" className="hover:text-brand-dark transition-colors">Documentation</a></li>
              <li><a href="#" className="hover:text-brand-dark transition-colors">API</a></li>
            </ul>
          </div>

          <div className="md:col-span-4 lg:col-span-2">
            <h4 className="text-[10px] font-bold uppercase tracking-[0.3em] text-brand-dark mb-10">{t('footer.legal')}</h4>
            <ul className="space-y-6 text-xs text-brand-dark/40 font-bold uppercase tracking-widest leading-none">
              <li><a href="#" className="hover:text-brand-dark transition-colors">Privacy</a></li>
              <li><a href="#" className="hover:text-brand-dark transition-colors">Terms</a></li>
            </ul>
          </div>
        </div>
        
        <div className="pt-10 border-t border-black/5 flex flex-col md:flex-row justify-between items-center gap-10">
          <div className="text-[10px] font-bold text-brand-dark/20 uppercase tracking-[0.4em]">
            {t('footer.rights')}
          </div>
          <div className="text-[10px] font-mono text-brand-dark/20 uppercase tracking-widest">
            v2.4.0 • Built for excellence
          </div>
        </div>
      </div>
    </footer>
  );
};

export default function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  if (isLoggedIn) {
    return <Dashboard onLogout={() => setIsLoggedIn(false)} />;
  }

  return (
    <div className="min-h-screen font-sans bg-brand-bg text-brand-dark selection:bg-brand-accent/20 overflow-x-hidden">
      <Navbar onLogin={() => setIsLoggedIn(true)} />
      <main>
        <Hero onLogin={() => setIsLoggedIn(true)} />
        <Steps />
        <FeaturesContext />
        <LayoutFeatures />
        <FormatsSection />
        <PricingSection />
        <CTASection />
      </main>
      <Footer />
    </div>
  );
}