sepehr
fddd7b7428
All checks were successful
Deploy to Production / Build and Deploy (push) Successful in 2m43s
851 lines
47 KiB
HTML
851 lines
47 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr" class="scroll-smooth">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Wordly.art — Traduction de documents sans altérer la mise en page</title>
|
|
|
|
<!-- Fonts Google -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&family=JetBrains+Mono:wght@400;600;700&display=swap" rel="stylesheet">
|
|
|
|
<!-- Tailwind CSS CDN -->
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
|
|
<!-- Lucide Icons -->
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
|
|
<script>
|
|
tailwind.config = {
|
|
darkMode: 'class',
|
|
theme: {
|
|
extend: {
|
|
fontFamily: {
|
|
sans: ['Inter', 'sans-serif'],
|
|
serif: ['Playfair Display', 'Georgia', 'serif'],
|
|
mono: ['JetBrains Mono', 'monospace'],
|
|
},
|
|
colors: {
|
|
brand: {
|
|
bg: '#FDFCF9',
|
|
dark: '#141414',
|
|
accent: '#C5A17A',
|
|
goldink: '#8B6F47',
|
|
muted: '#F5F3EF',
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
/* Ambient Glow & Mesh effects */
|
|
.hero-glow {
|
|
background: radial-gradient(circle at 50% 18%, rgba(197, 161, 122, 0.22) 0%, rgba(197, 161, 122, 0.08) 35%, transparent 70%);
|
|
}
|
|
.dark .hero-glow {
|
|
background: radial-gradient(circle at 50% 18%, rgba(197, 161, 122, 0.18) 0%, rgba(197, 161, 122, 0.04) 40%, transparent 75%);
|
|
}
|
|
|
|
.gradient-text-gold {
|
|
background: linear-gradient(135deg, #1A1A1A 0%, #8B6F47 50%, #C5A17A 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
.dark .gradient-text-gold {
|
|
background: linear-gradient(135deg, #FFFFFF 0%, #E8D5C0 50%, #C5A17A 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
.luxury-card {
|
|
background: rgba(255, 255, 255, 0.85);
|
|
backdrop-filter: blur(16px);
|
|
border: 1px solid rgba(0, 0, 0, 0.07);
|
|
box-shadow: 0 20px 45px -15px rgba(0, 0, 0, 0.07);
|
|
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
|
|
}
|
|
.luxury-card:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 30px 60px -15px rgba(139, 111, 71, 0.15);
|
|
border-color: rgba(197, 161, 122, 0.4);
|
|
}
|
|
|
|
.dark .luxury-card {
|
|
background: rgba(24, 24, 24, 0.8);
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
box-shadow: 0 20px 45px -15px rgba(0, 0, 0, 0.5);
|
|
}
|
|
.dark .luxury-card:hover {
|
|
border-color: rgba(197, 161, 122, 0.5);
|
|
box-shadow: 0 30px 60px -15px rgba(197, 161, 122, 0.2);
|
|
}
|
|
|
|
.popular-glow {
|
|
position: relative;
|
|
}
|
|
.popular-glow::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: -2px;
|
|
border-radius: 34px;
|
|
background: linear-gradient(135deg, #C5A17A, #8B6F47, #C5A17A);
|
|
z-index: -1;
|
|
opacity: 0.85;
|
|
filter: blur(8px);
|
|
}
|
|
|
|
/* Floating Pill Badge */
|
|
.floating-badge {
|
|
animation: floatSlow 6s ease-in-out infinite alternate;
|
|
}
|
|
.floating-badge-delayed {
|
|
animation: floatSlow 6s ease-in-out infinite alternate 3s;
|
|
}
|
|
@keyframes floatSlow {
|
|
0% { transform: translateY(0px) rotate(0deg); }
|
|
100% { transform: translateY(-10px) rotate(1deg); }
|
|
}
|
|
|
|
/* Laser Scanner Beam */
|
|
@keyframes laserScan {
|
|
0% { top: 0%; opacity: 0; }
|
|
10% { opacity: 1; }
|
|
90% { opacity: 1; }
|
|
100% { top: 100%; opacity: 0; }
|
|
}
|
|
.laser-beam {
|
|
animation: laserScan 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-brand-bg text-brand-dark dark:bg-[#0d0d0d] dark:text-white antialiased selection:bg-brand-accent/20 transition-colors duration-300">
|
|
|
|
<!-- ================================================================ -->
|
|
<!-- NAVBAR HAUT DE GAMME -->
|
|
<!-- ================================================================ -->
|
|
<header class="fixed top-0 left-0 right-0 z-50 bg-brand-bg/85 dark:bg-[#0d0d0d]/85 backdrop-blur-xl border-b border-black/5 dark:border-white/5 transition-colors">
|
|
<div class="max-w-7xl mx-auto px-6 h-20 flex justify-between items-center">
|
|
|
|
<!-- Logo -->
|
|
<a href="#" class="flex items-center gap-3.5 group">
|
|
<div class="w-10 h-10 bg-gradient-to-br from-brand-dark to-[#333] dark:from-brand-accent dark:to-[#8B6F47] rounded-xl flex items-center justify-center text-white dark:text-brand-dark font-serif font-bold text-xl shadow-lg shadow-black/10 group-hover:scale-105 transition-transform">
|
|
W
|
|
</div>
|
|
<span class="text-2xl font-bold tracking-tight text-brand-dark dark:text-white">
|
|
Wordly<span class="text-brand-goldink dark:text-brand-accent">.art</span>
|
|
</span>
|
|
</a>
|
|
|
|
<!-- Menu Navigation -->
|
|
<nav class="hidden md:flex items-center space-x-9">
|
|
<a href="#how" class="text-xs font-bold uppercase tracking-widest text-brand-dark/70 dark:text-white/70 hover:text-brand-goldink dark:hover:text-brand-accent transition-colors">Fonctionnement</a>
|
|
<a href="#fidelity" class="text-xs font-bold uppercase tracking-widest text-brand-dark/70 dark:text-white/70 hover:text-brand-goldink dark:hover:text-brand-accent transition-colors">Fidélité visuelle</a>
|
|
<a href="#formats" class="text-xs font-bold uppercase tracking-widest text-brand-dark/70 dark:text-white/70 hover:text-brand-goldink dark:hover:text-brand-accent transition-colors">Formats</a>
|
|
<a href="#pricing" class="text-xs font-bold uppercase tracking-widest text-brand-dark/70 dark:text-white/70 hover:text-brand-goldink dark:hover:text-brand-accent transition-colors">Tarification</a>
|
|
</nav>
|
|
|
|
<!-- Actions Droite -->
|
|
<div class="flex items-center gap-4">
|
|
<!-- Bouton Bascule Mode Sombre / Clair -->
|
|
<button id="themeToggle" class="p-2.5 rounded-full border border-black/10 dark:border-white/10 text-brand-dark/70 dark:text-white/70 hover:bg-black/5 dark:hover:bg-white/5 transition-all" title="Changer de thème">
|
|
<i data-lucide="moon" class="w-4 h-4 dark:hidden"></i>
|
|
<i data-lucide="sun" class="w-4 h-4 hidden dark:block text-brand-accent"></i>
|
|
</button>
|
|
|
|
<a href="#" class="hidden sm:inline-block text-xs font-bold uppercase tracking-widest text-brand-dark/70 dark:text-white/70 hover:text-brand-dark dark:hover:text-white transition-colors">
|
|
Connexion
|
|
</a>
|
|
|
|
<a href="#pricing" class="relative group overflow-hidden rounded-xl bg-brand-dark dark:bg-brand-accent px-5 py-2.5 text-xs font-bold uppercase tracking-widest text-white dark:text-brand-dark shadow-lg shadow-black/15 dark:shadow-brand-accent/20 hover:shadow-xl transition-all duration-300 hover:scale-[1.02]">
|
|
<span class="relative z-10 flex items-center gap-2">
|
|
<span>Essai gratuit</span>
|
|
<i data-lucide="arrow-right" class="w-3.5 h-3.5 group-hover:translate-x-1 transition-transform"></i>
|
|
</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- ================================================================ -->
|
|
<!-- HERO SECTION : MAJESTUEUSE & LUMINEUSE -->
|
|
<!-- ================================================================ -->
|
|
<section class="relative pt-36 pb-20 md:pt-48 md:pb-32 px-4 hero-glow overflow-hidden">
|
|
|
|
<!-- Éléments de fond décoratifs -->
|
|
<div class="absolute top-1/4 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[400px] bg-gradient-to-tr from-brand-accent/20 to-amber-200/10 dark:from-brand-accent/15 dark:to-transparent rounded-full blur-3xl pointer-events-none -z-10"></div>
|
|
|
|
<div class="max-w-6xl mx-auto text-center relative z-10">
|
|
|
|
<!-- Pastille / Pill -->
|
|
<div class="inline-flex items-center gap-2.5 px-4 py-1.5 mb-8 rounded-full border border-brand-accent/40 bg-brand-accent/10 dark:bg-brand-accent/5 backdrop-blur-md shadow-xs">
|
|
<span class="w-2 h-2 rounded-full bg-brand-goldink dark:bg-brand-accent animate-pulse"></span>
|
|
<span class="text-[11px] font-bold tracking-[0.25em] uppercase text-brand-goldink dark:text-brand-accent">
|
|
Wordly 2.0 • Traduction Office & PDF Haute Fidélité
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Titre Grand Format -->
|
|
<h1 class="text-5xl sm:text-7xl md:text-8xl font-serif font-medium tracking-tight text-brand-dark dark:text-white leading-[1.08] mb-8">
|
|
Traduisez vos documents.<br>
|
|
<span class="italic gradient-text-gold font-serif">Mise en forme parfaite.</span>
|
|
</h1>
|
|
|
|
<!-- Sous-titre rassurant -->
|
|
<p class="max-w-2xl mx-auto text-lg sm:text-xl text-brand-dark/75 dark:text-white/70 font-light leading-relaxed mb-12">
|
|
Le seul traducteur qui préserve les SmartArt, tableaux, graphiques, en-têtes et règles de mise en page — exactement tels qu'ils étaient dans le document d'origine.
|
|
</p>
|
|
|
|
<!-- Boutons d'action -->
|
|
<div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-20">
|
|
<a href="#pricing" class="w-full sm:w-auto px-9 py-4 rounded-2xl bg-brand-dark hover:bg-brand-goldink dark:bg-brand-accent dark:hover:bg-amber-400 text-white dark:text-brand-dark font-bold text-xs uppercase tracking-widest shadow-xl shadow-brand-dark/20 dark:shadow-brand-accent/25 hover:shadow-2xl hover:scale-[1.02] active:scale-98 transition-all flex items-center justify-center gap-2.5">
|
|
<i data-lucide="sparkles" class="w-4 h-4"></i>
|
|
<span>Démarrer l'essai gratuit</span>
|
|
<i data-lucide="arrow-right" class="w-4 h-4"></i>
|
|
</a>
|
|
|
|
<a href="#fidelity" class="w-full sm:w-auto px-8 py-4 rounded-2xl border border-black/15 dark:border-white/15 hover:border-brand-accent bg-white/70 dark:bg-white/5 backdrop-blur-md text-brand-dark dark:text-white font-bold text-xs uppercase tracking-widest hover:bg-black/5 dark:hover:bg-white/10 transition-all flex items-center justify-center gap-2">
|
|
<i data-lucide="eye" class="w-4 h-4 text-brand-goldink dark:text-brand-accent"></i>
|
|
<span>Voir la comparaison</span>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- ============================================================ -->
|
|
<!-- SIMULATEUR BUREAUTIQUE AVEC PASTILLES FLOTTANTES -->
|
|
<!-- ============================================================ -->
|
|
<div class="relative max-w-4xl mx-auto mt-6">
|
|
|
|
<!-- Pastille Flottante 1 (Gauche) -->
|
|
<div class="hidden xl:flex floating-badge absolute -left-16 top-20 z-30 items-center gap-3 px-4 py-2.5 rounded-2xl bg-white/95 dark:bg-[#1f1f1f]/95 border border-brand-accent/40 shadow-2xl backdrop-blur-xl">
|
|
<div class="w-8 h-8 rounded-xl bg-emerald-500/15 text-emerald-600 dark:text-emerald-400 flex items-center justify-center">
|
|
<i data-lucide="check-check" class="w-4 h-4"></i>
|
|
</div>
|
|
<div class="text-left">
|
|
<div class="text-xs font-bold text-brand-dark dark:text-white">SmartArt & Formules</div>
|
|
<div class="text-[10px] text-brand-dark/60 dark:text-white/60 font-medium">100% Intacts et recalculés</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Pastille Flottante 2 (Droite) -->
|
|
<div class="hidden xl:flex floating-badge-delayed absolute -right-16 top-36 z-30 items-center gap-3 px-4 py-2.5 rounded-2xl bg-white/95 dark:bg-[#1f1f1f]/95 border border-brand-accent/40 shadow-2xl backdrop-blur-xl">
|
|
<div class="w-8 h-8 rounded-xl bg-blue-500/15 text-blue-600 dark:text-blue-400 flex items-center justify-center">
|
|
<i data-lucide="shield-check" class="w-4 h-4"></i>
|
|
</div>
|
|
<div class="text-left">
|
|
<div class="text-xs font-bold text-brand-dark dark:text-white">Rétention Zéro</div>
|
|
<div class="text-[10px] text-brand-dark/60 dark:text-white/60 font-medium">Données supprimées après export</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Halo d'ambiance doré sous la fenêtre -->
|
|
<div class="absolute -inset-2 bg-gradient-to-r from-brand-accent/30 via-amber-400/25 to-brand-accent/30 rounded-3xl blur-2xl opacity-70 -z-10"></div>
|
|
|
|
<!-- Cadre de Fenêtre Logicielle -->
|
|
<div class="rounded-2xl md:rounded-3xl border border-black/15 dark:border-white/15 bg-white dark:bg-[#181818] shadow-2xl overflow-hidden text-start">
|
|
|
|
<!-- 1. Barre de Titre (Word Blue) -->
|
|
<div id="officeHeader" class="bg-[#185ABD] px-4 py-2.5 flex items-center justify-between text-white transition-colors duration-300">
|
|
<div class="flex items-center gap-3">
|
|
<div class="flex gap-1.5 pr-2 border-r border-white/20">
|
|
<span class="w-2.5 h-2.5 rounded-full bg-white/30"></span>
|
|
<span class="w-2.5 h-2.5 rounded-full bg-white/30"></span>
|
|
<span class="w-2.5 h-2.5 rounded-full bg-white/30"></span>
|
|
</div>
|
|
<div class="flex items-center gap-2 font-mono text-xs font-bold">
|
|
<i data-lucide="file-text" class="w-4 h-4"></i>
|
|
<span id="windowDocTitle">Cahier_Des_Charges_Technique.docx — Word</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Boutons de contrôle -->
|
|
<div class="flex items-center gap-2 opacity-80">
|
|
<span class="text-[10px] font-mono bg-black/20 px-2 py-0.5 rounded">En direct • FR → EN</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 2. Ruban des formats -->
|
|
<div class="bg-[#F3F2F1] dark:bg-[#222222] border-b border-black/10 dark:border-white/10 px-4 py-2 flex flex-wrap items-center justify-between gap-3">
|
|
<div class="flex items-center gap-1.5">
|
|
<button onclick="switchFormat('docx')" class="fmt-tab px-3 py-1 rounded-lg text-xs font-bold font-mono bg-white dark:bg-[#333] text-[#185ABD] dark:text-white border border-black/10 dark:border-white/15 shadow-xs flex items-center gap-1.5">
|
|
<i data-lucide="file-text" class="w-3.5 h-3.5 text-[#185ABD]"></i> .DOCX
|
|
</button>
|
|
<button onclick="switchFormat('xlsx')" class="fmt-tab px-3 py-1 rounded-lg text-xs font-bold font-mono text-brand-dark/70 dark:text-white/70 hover:bg-black/5 dark:hover:bg-white/5 flex items-center gap-1.5">
|
|
<i data-lucide="file-spreadsheet" class="w-3.5 h-3.5 text-[#107C41]"></i> .XLSX
|
|
</button>
|
|
<button onclick="switchFormat('pptx')" class="fmt-tab px-3 py-1 rounded-lg text-xs font-bold font-mono text-brand-dark/70 dark:text-white/70 hover:bg-black/5 dark:hover:bg-white/5 flex items-center gap-1.5">
|
|
<i data-lucide="presentation" class="w-3.5 h-3.5 text-[#C43E1C]"></i> .PPTX
|
|
</button>
|
|
<button onclick="switchFormat('pdf')" class="fmt-tab px-3 py-1 rounded-lg text-xs font-bold font-mono text-brand-dark/70 dark:text-white/70 hover:bg-black/5 dark:hover:bg-white/5 flex items-center gap-1.5">
|
|
<i data-lucide="file-check" class="w-3.5 h-3.5 text-[#E03E2D]"></i> .PDF
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Langues -->
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-xs font-semibold text-[#8B6F47] dark:text-[#C5A17A]">Langue :</span>
|
|
<div class="flex rounded-lg bg-black/5 dark:bg-white/10 p-0.5 border border-black/10 dark:border-white/10 text-xs font-mono font-bold">
|
|
<button class="px-2.5 py-0.5 rounded bg-brand-accent text-white shadow-xs">FR</button>
|
|
<button class="px-2.5 py-0.5 text-brand-dark/60 dark:text-white/60">EN</button>
|
|
<button class="px-2.5 py-0.5 text-brand-dark/60 dark:text-white/60">ES</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 3. Plan de travail A4 avec document -->
|
|
<div class="p-4 sm:p-7 bg-[#EFECE6] dark:bg-[#111111] relative overflow-hidden flex justify-center">
|
|
|
|
<div class="w-full max-w-3xl bg-[#FAF8F5] dark:bg-[#1e1e1e] p-6 sm:p-8 rounded-xl border border-black/10 dark:border-white/10 shadow-xl relative overflow-hidden">
|
|
|
|
<!-- Faisceau laser scanner en continu -->
|
|
<div class="laser-beam absolute inset-x-0 h-[2px] bg-gradient-to-r from-transparent via-brand-accent to-transparent shadow-[0_0_15px_#C5A17A] pointer-events-none z-20"></div>
|
|
|
|
<!-- En-tête document -->
|
|
<div class="border-b border-black/10 dark:border-white/10 pb-4 mb-5">
|
|
<div class="flex justify-between items-center text-xs text-brand-dark/60 dark:text-white/60 font-mono mb-1">
|
|
<span>SECTION 1 • STYLE : TITRE 1</span>
|
|
<span>MARGES NORMALES (2,5 CM)</span>
|
|
</div>
|
|
<h3 class="text-xl sm:text-2xl font-serif font-bold text-brand-dark dark:text-white">
|
|
Tarte fine aux pommes caramélisées & cannelle
|
|
</h3>
|
|
<p class="text-xs text-brand-goldink dark:text-brand-accent font-medium mt-1">
|
|
Recette artisanale • 15 min préparation • 25 min cuisson 180°C
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Tableau Word stylisé -->
|
|
<div class="grid sm:grid-cols-2 gap-5 text-xs mb-5">
|
|
<div class="p-3.5 rounded-lg bg-white dark:bg-[#282828] border border-[#185ABD]/20">
|
|
<div class="font-bold text-[#185ABD] dark:text-[#74A9FF] mb-2 uppercase tracking-wider text-[10px]">
|
|
Tableau 1 — Ingrédients & Dosages
|
|
</div>
|
|
<div class="space-y-1.5 text-brand-dark/80 dark:text-white/80">
|
|
<div class="flex justify-between border-b border-black/5 dark:border-white/5 pb-1">
|
|
<span>Pâte feuilletée pur beurre</span>
|
|
<strong class="text-brand-goldink dark:text-brand-accent font-mono">1 rouleau</strong>
|
|
</div>
|
|
<div class="flex justify-between border-b border-black/5 dark:border-white/5 pb-1">
|
|
<span>Pommes Golden tranchées</span>
|
|
<strong class="text-brand-goldink dark:text-brand-accent font-mono">4 pièces</strong>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span>Beurre doux fondu</span>
|
|
<strong class="text-brand-goldink dark:text-brand-accent font-mono">25 g</strong>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-3.5 rounded-lg bg-white dark:bg-[#282828] border border-[#185ABD]/20">
|
|
<div class="font-bold text-[#185ABD] dark:text-[#74A9FF] mb-2 uppercase tracking-wider text-[10px]">
|
|
Instructions de préparation
|
|
</div>
|
|
<ol class="space-y-1.5 text-brand-dark/80 dark:text-white/80 list-decimal pl-4 leading-relaxed">
|
|
<li>Étaler la pâte sur la plaque et piquer le fond.</li>
|
|
<li>Disposer les lamelles de pommes en rosace serrée.</li>
|
|
<li>Enfourner 25 min à 180°C jusqu'à dorure parfaite.</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pt-3 border-t border-black/10 dark:border-white/10 flex justify-between items-center text-[10px] font-mono text-brand-dark/60 dark:text-white/60">
|
|
<span class="flex items-center gap-1 text-emerald-600 dark:text-emerald-400 font-bold">
|
|
<i data-lucide="shield-check" class="w-3 h-3"></i> Structure vectorielle & polices préservées
|
|
</span>
|
|
<span>Page 1 / 1 • 184 mots</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 4. Barre d'état logicielle -->
|
|
<div class="bg-[#185ABD] px-4 py-2 text-white flex justify-between items-center text-xs font-mono">
|
|
<span class="flex items-center gap-2">
|
|
<i data-lucide="check" class="w-3.5 h-3.5 text-emerald-300"></i>
|
|
<span>Fidélité garantie : 0 pixel de décalage</span>
|
|
</span>
|
|
<span class="text-white/75">Zoom : 100%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ================================================================ -->
|
|
<!-- BANDEAU DE PREUVES & CHIFFRES CLÉS -->
|
|
<!-- ================================================================ -->
|
|
<section class="border-y border-black/10 dark:border-white/10 bg-white/70 dark:bg-[#141414]/70 backdrop-blur-xl py-10 px-6">
|
|
<div class="max-w-7xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
|
|
|
|
<div class="space-y-1">
|
|
<div class="text-3xl sm:text-4xl font-serif font-bold text-brand-dark dark:text-white">+250 000</div>
|
|
<div class="text-xs font-bold uppercase tracking-wider text-brand-goldink dark:text-brand-accent">Pages traduites</div>
|
|
</div>
|
|
|
|
<div class="space-y-1">
|
|
<div class="text-3xl sm:text-4xl font-serif font-bold text-brand-dark dark:text-white">99.8%</div>
|
|
<div class="text-xs font-bold uppercase tracking-wider text-brand-goldink dark:text-brand-accent">Fidélité visuelle</div>
|
|
</div>
|
|
|
|
<div class="space-y-1">
|
|
<div class="text-3xl sm:text-4xl font-serif font-bold text-brand-dark dark:text-white">13</div>
|
|
<div class="text-xs font-bold uppercase tracking-wider text-brand-goldink dark:text-brand-accent">Langues majeures</div>
|
|
</div>
|
|
|
|
<div class="space-y-1">
|
|
<div class="text-3xl sm:text-4xl font-serif font-bold text-brand-dark dark:text-white">0 Jour</div>
|
|
<div class="text-xs font-bold uppercase tracking-wider text-brand-goldink dark:text-brand-accent">Rétention données</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ================================================================ -->
|
|
<!-- SECTION : COMMENT ÇA MARCHE (3 ÉTAPES CLAIRES) -->
|
|
<!-- ================================================================ -->
|
|
<section id="how" class="py-28 px-6">
|
|
<div class="max-w-7xl mx-auto">
|
|
|
|
<div class="text-center mb-20">
|
|
<span class="inline-block px-3.5 py-1 rounded-full text-[10px] font-bold uppercase tracking-widest bg-brand-accent/15 text-brand-goldink dark:text-brand-accent mb-4">
|
|
Processus fluide
|
|
</span>
|
|
<h2 class="text-4xl sm:text-5xl font-serif font-medium text-brand-dark dark:text-white tracking-tight">
|
|
Comment ça marche ?
|
|
</h2>
|
|
<p class="text-brand-dark/70 dark:text-white/70 text-base max-w-xl mx-auto mt-3 font-light">
|
|
Trois étapes simples. Zéro perte de mise en page, zéro conversion destructrice.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid md:grid-cols-3 gap-8">
|
|
|
|
<!-- Étape 1 -->
|
|
<div class="luxury-card p-8 rounded-3xl relative">
|
|
<div class="w-12 h-12 rounded-2xl bg-brand-dark dark:bg-brand-accent text-white dark:text-brand-dark flex items-center justify-center font-serif font-bold text-xl mb-6 shadow-md">
|
|
1
|
|
</div>
|
|
<h3 class="text-xl font-serif font-bold text-brand-dark dark:text-white mb-3">
|
|
Déposez votre fichier
|
|
</h3>
|
|
<p class="text-sm text-brand-dark/75 dark:text-white/70 leading-relaxed font-light">
|
|
Glissez votre document Word (.docx), classeur Excel (.xlsx), présentation PowerPoint (.pptx) ou PDF natif.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Étape 2 -->
|
|
<div class="luxury-card p-8 rounded-3xl relative">
|
|
<div class="w-12 h-12 rounded-2xl bg-brand-dark dark:bg-brand-accent text-white dark:text-brand-dark flex items-center justify-center font-serif font-bold text-xl mb-6 shadow-md">
|
|
2
|
|
</div>
|
|
<h3 class="text-xl font-serif font-bold text-brand-dark dark:text-white mb-3">
|
|
Choisissez la langue & le style
|
|
</h3>
|
|
<p class="text-sm text-brand-dark/75 dark:text-white/70 leading-relaxed font-light">
|
|
Sélectionnez la langue cible, vos glossaires métier et ajoutez vos consignes de ton ou de contexte IA si souhaité.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Étape 3 -->
|
|
<div class="luxury-card p-8 rounded-3xl relative">
|
|
<div class="w-12 h-12 rounded-2xl bg-brand-dark dark:bg-brand-accent text-white dark:text-brand-dark flex items-center justify-center font-serif font-bold text-xl mb-6 shadow-md">
|
|
3
|
|
</div>
|
|
<h3 class="text-xl font-serif font-bold text-brand-dark dark:text-white mb-3">
|
|
Téléchargez le document fini
|
|
</h3>
|
|
<p class="text-sm text-brand-dark/75 dark:text-white/70 leading-relaxed font-light">
|
|
Récupérez instantanément votre fichier traduit, identique au millimètre près à votre document original.
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ================================================================ -->
|
|
<!-- SECTION : AVANT / APRÈS & FIDÉLITÉ OBSIDIENNE (LUXE & CONTRASTE) -->
|
|
<!-- ================================================================ -->
|
|
<section id="fidelity" class="py-28 px-6 bg-brand-dark text-white relative overflow-hidden">
|
|
|
|
<!-- Lueur dorée centrale -->
|
|
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[700px] h-[350px] bg-brand-accent/15 blur-[120px] pointer-events-none"></div>
|
|
|
|
<div class="max-w-7xl mx-auto relative z-10">
|
|
|
|
<div class="text-center mb-16">
|
|
<span class="inline-block px-3.5 py-1 rounded-full text-[10px] font-bold uppercase tracking-widest bg-brand-accent/20 text-brand-accent mb-4 border border-brand-accent/30">
|
|
Précision chirurgicale
|
|
</span>
|
|
<h2 class="text-4xl sm:text-6xl font-serif font-medium tracking-tight mb-4">
|
|
Votre mise en forme, <span class="italic text-brand-accent">parfaitement préservée</span>
|
|
</h2>
|
|
<p class="text-white/70 text-lg max-w-2xl mx-auto font-light">
|
|
Les autres traducteurs détruisent les tableaux et écrasent la structure. Wordly reconstruit le document dans son format natif.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Comparaison 2 colonnes -->
|
|
<div class="grid md:grid-cols-2 gap-8 relative">
|
|
|
|
<!-- Document Source FR -->
|
|
<div class="bg-[#1e1e1e] p-8 sm:p-10 rounded-3xl border border-white/10 shadow-2xl">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<span class="px-3 py-1 rounded-full text-[10px] font-bold font-mono uppercase bg-white/10 text-white/80 border border-white/15">
|
|
FR — Original
|
|
</span>
|
|
<span class="text-xs text-white/50 font-mono">cahier-des-charges.docx</span>
|
|
</div>
|
|
|
|
<h4 class="text-2xl font-serif font-bold text-white mb-4">
|
|
Cahier des charges — Traitement d'air
|
|
</h4>
|
|
<p class="text-sm text-white/80 leading-relaxed mb-4">
|
|
L'installation de ventilation doit respecter la classe de filtration F7 conformément au planning.
|
|
</p>
|
|
<div class="p-4 rounded-xl bg-black/40 border border-white/10 text-xs text-white/90 space-y-2">
|
|
<div class="flex justify-between">
|
|
<span>Charge thermique</span>
|
|
<strong class="text-brand-accent font-mono">42 kW au débit nominal</strong>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span>Niveau sonore</span>
|
|
<strong class="text-brand-accent font-mono">≤ 45 dB(A) à 3 m</strong>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Document Traduit EN -->
|
|
<div class="bg-[#1e1e1e] p-8 sm:p-10 rounded-3xl border border-brand-accent/40 shadow-2xl relative">
|
|
|
|
<div class="flex items-center justify-between mb-6">
|
|
<span class="px-3 py-1 rounded-full text-[10px] font-bold font-mono uppercase bg-brand-accent/20 text-brand-accent border border-brand-accent/40">
|
|
EN — Traduit (Wordly)
|
|
</span>
|
|
<span class="text-xs text-brand-accent font-mono font-bold">100% Alignement</span>
|
|
</div>
|
|
|
|
<h4 class="text-2xl font-serif font-bold text-white mb-4">
|
|
Technical specification — Air handling
|
|
</h4>
|
|
<p class="text-sm text-white/80 leading-relaxed mb-4">
|
|
The ventilation system must comply with filter class F7 as specified in the master schedule.
|
|
</p>
|
|
<div class="p-4 rounded-xl bg-black/40 border border-brand-accent/30 text-xs text-white/90 space-y-2">
|
|
<div class="flex justify-between">
|
|
<span>Thermal load</span>
|
|
<strong class="text-brand-accent font-mono">42 kW at nominal flow</strong>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span>Sound level</span>
|
|
<strong class="text-brand-accent font-mono">≤ 45 dB(A) at 3 m</strong>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- 3 Cartes de preuves -->
|
|
<div class="grid sm:grid-cols-3 gap-5 mt-10">
|
|
<div class="flex items-center gap-3.5 p-4 rounded-2xl bg-white/5 border border-white/10">
|
|
<div class="w-10 h-10 rounded-xl bg-brand-accent/20 text-brand-accent flex items-center justify-center shrink-0">
|
|
<i data-lucide="layout" class="w-5 h-5"></i>
|
|
</div>
|
|
<span class="text-sm font-medium text-white/90">SmartArt & formes vectorielles reconstruits</span>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-3.5 p-4 rounded-2xl bg-white/5 border border-white/10">
|
|
<div class="w-10 h-10 rounded-xl bg-brand-accent/20 text-brand-accent flex items-center justify-center shrink-0">
|
|
<i data-lucide="pie-chart" class="w-5 h-5"></i>
|
|
</div>
|
|
<span class="text-sm font-medium text-white/90">Séries et axes de graphiques traduits</span>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-3.5 p-4 rounded-2xl bg-white/5 border border-white/10">
|
|
<div class="w-10 h-10 rounded-xl bg-brand-accent/20 text-brand-accent flex items-center justify-center shrink-0">
|
|
<i data-lucide="table" class="w-5 h-5"></i>
|
|
</div>
|
|
<span class="text-sm font-medium text-white/90">Tables des matières régénérées automatiquement</span>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ================================================================ -->
|
|
<!-- SECTION : LES 4 FORMATS BUREAUTIQUES -->
|
|
<!-- ================================================================ -->
|
|
<section id="formats" class="py-28 px-6">
|
|
<div class="max-w-7xl mx-auto">
|
|
|
|
<div class="text-center mb-20">
|
|
<span class="inline-block px-3.5 py-1 rounded-full text-[10px] font-bold uppercase tracking-widest bg-brand-accent/15 text-brand-goldink dark:text-brand-accent mb-4">
|
|
Compatibilité totale
|
|
</span>
|
|
<h2 class="text-4xl sm:text-5xl font-serif font-medium text-brand-dark dark:text-white tracking-tight">
|
|
Chaque format, <span class="italic text-brand-goldink dark:text-brand-accent">chaque élément</span>
|
|
</h2>
|
|
<p class="text-brand-dark/70 dark:text-white/70 text-base max-w-xl mx-auto mt-3 font-light">
|
|
Une ingénierie dédiée pour chaque type de document de la suite bureautique.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
|
|
<!-- Word -->
|
|
<div class="luxury-card p-8 rounded-3xl group">
|
|
<div class="w-12 h-12 rounded-2xl bg-[#185ABD]/10 text-[#185ABD] flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
|
<i data-lucide="file-text" class="w-6 h-6"></i>
|
|
</div>
|
|
<div class="text-[11px] font-bold font-mono text-[#185ABD] mb-2 uppercase tracking-wider">.DOCX</div>
|
|
<h3 class="text-2xl font-serif font-bold text-brand-dark dark:text-white mb-4">Word</h3>
|
|
<ul class="space-y-2.5 text-xs text-brand-dark/75 dark:text-white/70 font-medium">
|
|
<li class="flex items-center gap-2"><i data-lucide="check" class="w-3.5 h-3.5 text-emerald-500"></i> Paragraphes & Titres</li>
|
|
<li class="flex items-center gap-2"><i data-lucide="check" class="w-3.5 h-3.5 text-emerald-500"></i> Tableaux & SmartArt</li>
|
|
<li class="flex items-center gap-2"><i data-lucide="check" class="w-3.5 h-3.5 text-emerald-500"></i> En-têtes & Pieds de page</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Excel -->
|
|
<div class="luxury-card p-8 rounded-3xl group">
|
|
<div class="w-12 h-12 rounded-2xl bg-[#107C41]/10 text-[#107C41] flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
|
<i data-lucide="file-spreadsheet" class="w-6 h-6"></i>
|
|
</div>
|
|
<div class="text-[11px] font-bold font-mono text-[#107C41] mb-2 uppercase tracking-wider">.XLSX</div>
|
|
<h3 class="text-2xl font-serif font-bold text-brand-dark dark:text-white mb-4">Excel</h3>
|
|
<ul class="space-y-2.5 text-xs text-brand-dark/75 dark:text-white/70 font-medium">
|
|
<li class="flex items-center gap-2"><i data-lucide="check" class="w-3.5 h-3.5 text-emerald-500"></i> Formules 100% préservées</li>
|
|
<li class="flex items-center gap-2"><i data-lucide="check" class="w-3.5 h-3.5 text-emerald-500"></i> Onglets & Feuilles multiples</li>
|
|
<li class="flex items-center gap-2"><i data-lucide="check" class="w-3.5 h-3.5 text-emerald-500"></i> Graphiques & Noms de plages</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- PowerPoint -->
|
|
<div class="luxury-card p-8 rounded-3xl group">
|
|
<div class="w-12 h-12 rounded-2xl bg-[#C43E1C]/10 text-[#C43E1C] flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
|
<i data-lucide="presentation" class="w-6 h-6"></i>
|
|
</div>
|
|
<div class="text-[11px] font-bold font-mono text-[#C43E1C] mb-2 uppercase tracking-wider">.PPTX</div>
|
|
<h3 class="text-2xl font-serif font-bold text-brand-dark dark:text-white mb-4">PowerPoint</h3>
|
|
<ul class="space-y-2.5 text-xs text-brand-dark/75 dark:text-white/70 font-medium">
|
|
<li class="flex items-center gap-2"><i data-lucide="check" class="w-3.5 h-3.5 text-emerald-500"></i> Zones de texte ajustées</li>
|
|
<li class="flex items-center gap-2"><i data-lucide="check" class="w-3.5 h-3.5 text-emerald-500"></i> Masques & Diapositives</li>
|
|
<li class="flex items-center gap-2"><i data-lucide="check" class="w-3.5 h-3.5 text-emerald-500"></i> Formes & Groupes vectoriels</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- PDF -->
|
|
<div class="luxury-card p-8 rounded-3xl group">
|
|
<div class="w-12 h-12 rounded-2xl bg-[#E03E2D]/10 text-[#E03E2D] flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
|
<i data-lucide="file-check" class="w-6 h-6"></i>
|
|
</div>
|
|
<div class="text-[11px] font-mono font-bold text-[#E03E2D] mb-2 uppercase tracking-wider">.PDF</div>
|
|
<h3 class="text-2xl font-serif font-bold text-brand-dark dark:text-white mb-4">PDF</h3>
|
|
<ul class="space-y-2.5 text-xs text-brand-dark/75 dark:text-white/70 font-medium">
|
|
<li class="flex items-center gap-2"><i data-lucide="check" class="w-3.5 h-3.5 text-emerald-500"></i> PDF vectoriels natifs</li>
|
|
<li class="flex items-center gap-2"><i data-lucide="check" class="w-3.5 h-3.5 text-emerald-500"></i> Respect absolu de la mise en page</li>
|
|
<li class="flex items-center gap-2"><i data-lucide="check" class="w-3.5 h-3.5 text-emerald-500"></i> OCR haute définition intégré</li>
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ================================================================ -->
|
|
<!-- SECTION : TARIFICATION CLAIRE & ATTRACTIVE -->
|
|
<!-- ================================================================ -->
|
|
<section id="pricing" class="py-28 px-6 bg-brand-muted/40 dark:bg-[#121212]/40">
|
|
<div class="max-w-7xl mx-auto">
|
|
|
|
<div class="text-center mb-16">
|
|
<span class="inline-block px-3.5 py-1 rounded-full text-[10px] font-bold uppercase tracking-widest bg-brand-accent/15 text-brand-goldink dark:text-brand-accent mb-4">
|
|
Tarifs transparents
|
|
</span>
|
|
<h2 class="text-4xl sm:text-5xl font-serif font-medium text-brand-dark dark:text-white tracking-tight">
|
|
Choisissez votre formule
|
|
</h2>
|
|
<p class="text-brand-dark/70 dark:text-white/70 text-base max-w-xl mx-auto mt-3 font-light">
|
|
Commencez gratuitement. Évoluez selon vos volumes de traduction professionnelle.
|
|
</p>
|
|
|
|
<!-- Bascule Mensuel / Annuel -->
|
|
<div class="inline-flex items-center gap-3 p-1.5 rounded-2xl bg-white dark:bg-[#222] border border-black/10 dark:border-white/10 mt-8 shadow-xs">
|
|
<button id="btnMonthly" class="px-5 py-2 rounded-xl text-xs font-bold uppercase tracking-wider text-brand-dark/60 dark:text-white/60">Mensuel</button>
|
|
<button id="btnAnnual" class="px-5 py-2 rounded-xl text-xs font-bold uppercase tracking-wider bg-brand-dark dark:bg-brand-accent text-white dark:text-brand-dark shadow-sm flex items-center gap-1.5">
|
|
<span>Annuel</span>
|
|
<span class="px-1.5 py-0.5 rounded-full text-[9px] bg-brand-accent dark:bg-brand-dark text-brand-dark dark:text-brand-accent font-black">-20%</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid md:grid-cols-3 gap-8 items-stretch">
|
|
|
|
<!-- Formule Starter -->
|
|
<div class="luxury-card p-8 sm:p-10 rounded-3xl flex flex-col justify-between">
|
|
<div>
|
|
<h3 class="text-2xl font-serif font-bold text-brand-dark dark:text-white mb-2">Starter</h3>
|
|
<p class="text-xs text-brand-dark/60 dark:text-white/60 uppercase tracking-widest mb-8">Idéal pour les indépendants</p>
|
|
|
|
<div class="flex items-baseline gap-2 mb-8">
|
|
<span class="text-5xl font-serif font-bold text-brand-dark dark:text-white">7 €</span>
|
|
<span class="text-xs text-brand-dark/60 dark:text-white/60">/ mois</span>
|
|
</div>
|
|
|
|
<ul class="space-y-4 text-xs text-brand-dark/80 dark:text-white/80 mb-10">
|
|
<li class="flex items-center gap-3"><i data-lucide="check" class="w-4 h-4 text-emerald-500 shrink-0"></i> 10 documents par mois</li>
|
|
<li class="flex items-center gap-3"><i data-lucide="check" class="w-4 h-4 text-emerald-500 shrink-0"></i> Word, Excel, PowerPoint & PDF</li>
|
|
<li class="flex items-center gap-3"><i data-lucide="check" class="w-4 h-4 text-emerald-500 shrink-0"></i> Glossaire personnalisé (100 termes)</li>
|
|
<li class="flex items-center gap-3"><i data-lucide="check" class="w-4 h-4 text-emerald-500 shrink-0"></i> Rétention zéro des fichiers</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<a href="#" class="w-full py-3.5 rounded-xl border border-black/15 dark:border-white/15 text-center text-xs font-bold uppercase tracking-widest hover:bg-black/5 dark:hover:bg-white/5 transition-all text-brand-dark dark:text-white">
|
|
Choisir Starter
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Formule Pro (Vedette) -->
|
|
<div class="popular-glow rounded-3xl">
|
|
<div class="luxury-card p-8 sm:p-10 rounded-3xl h-full flex flex-col justify-between bg-gradient-to-b from-white to-amber-50/20 dark:from-[#222] dark:to-[#181818] border-brand-accent relative">
|
|
|
|
<div class="absolute -top-3.5 left-1/2 -translate-x-1/2 px-4 py-1 rounded-full bg-brand-dark dark:bg-brand-accent text-white dark:text-brand-dark text-[10px] font-black uppercase tracking-widest shadow-md">
|
|
★ Recommandé pour PME
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-2xl font-serif font-bold text-brand-dark dark:text-white mb-2">Pro</h3>
|
|
<p class="text-xs text-brand-goldink dark:text-brand-accent font-bold uppercase tracking-widest mb-8">Volume & Équipes</p>
|
|
|
|
<div class="flex items-baseline gap-2 mb-8">
|
|
<span class="text-5xl font-serif font-bold text-brand-dark dark:text-white">15 €</span>
|
|
<span class="text-xs text-brand-dark/60 dark:text-white/60">/ mois</span>
|
|
</div>
|
|
|
|
<ul class="space-y-4 text-xs text-brand-dark/90 dark:text-white/90 mb-10 font-medium">
|
|
<li class="flex items-center gap-3"><i data-lucide="check-circle-2" class="w-4 h-4 text-brand-goldink dark:text-brand-accent shrink-0"></i> 50 documents par mois</li>
|
|
<li class="flex items-center gap-3"><i data-lucide="check-circle-2" class="w-4 h-4 text-brand-goldink dark:text-brand-accent shrink-0"></i> Moteur IA Contextuelle & Consignes</li>
|
|
<li class="flex items-center gap-3"><i data-lucide="check-circle-2" class="w-4 h-4 text-brand-goldink dark:text-brand-accent shrink-0"></i> Glossaires illimités</li>
|
|
<li class="flex items-center gap-3"><i data-lucide="check-circle-2" class="w-4 h-4 text-brand-goldink dark:text-brand-accent shrink-0"></i> Table de relecture & validation</li>
|
|
<li class="flex items-center gap-3"><i data-lucide="check-circle-2" class="w-4 h-4 text-brand-goldink dark:text-brand-accent shrink-0"></i> Export XLIFF / Import CAT</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<a href="#" class="w-full py-4 rounded-xl bg-brand-dark dark:bg-brand-accent text-white dark:text-brand-dark text-center text-xs font-bold uppercase tracking-widest shadow-xl hover:shadow-2xl hover:scale-[1.02] transition-all">
|
|
Démarrer avec Pro
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Formule Business -->
|
|
<div class="luxury-card p-8 sm:p-10 rounded-3xl flex flex-col justify-between">
|
|
<div>
|
|
<h3 class="text-2xl font-serif font-bold text-brand-dark dark:text-white mb-2">Business</h3>
|
|
<p class="text-xs text-brand-dark/60 dark:text-white/60 uppercase tracking-widest mb-8">Grands comptes & Agences</p>
|
|
|
|
<div class="flex items-baseline gap-2 mb-8">
|
|
<span class="text-5xl font-serif font-bold text-brand-dark dark:text-white">39 €</span>
|
|
<span class="text-xs text-brand-dark/60 dark:text-white/60">/ mois</span>
|
|
</div>
|
|
|
|
<ul class="space-y-4 text-xs text-brand-dark/80 dark:text-white/80 mb-10">
|
|
<li class="flex items-center gap-3"><i data-lucide="check" class="w-4 h-4 text-emerald-500 shrink-0"></i> Documents illimités</li>
|
|
<li class="flex items-center gap-3"><i data-lucide="check" class="w-4 h-4 text-emerald-500 shrink-0"></i> Espaces de travail partagés</li>
|
|
<li class="flex items-center gap-3"><i data-lucide="check" class="w-4 h-4 text-emerald-500 shrink-0"></i> Accès API & automatisation</li>
|
|
<li class="flex items-center gap-3"><i data-lucide="check" class="w-4 h-4 text-emerald-500 shrink-0"></i> Support dédié prioritaire</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<a href="#" class="w-full py-3.5 rounded-xl border border-black/15 dark:border-white/15 text-center text-xs font-bold uppercase tracking-widest hover:bg-black/5 dark:hover:bg-white/5 transition-all text-brand-dark dark:text-white">
|
|
Choisir Business
|
|
</a>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ================================================================ -->
|
|
<!-- CALL TO ACTION FINAL -->
|
|
<!-- ================================================================ -->
|
|
<section class="py-28 px-6 text-center relative overflow-hidden">
|
|
<div class="max-w-4xl mx-auto luxury-card p-12 sm:p-20 rounded-[40px] relative overflow-hidden border-brand-accent/30">
|
|
|
|
<!-- Halo intérieur -->
|
|
<div class="absolute -top-24 -right-24 w-72 h-72 bg-brand-accent/20 rounded-full blur-3xl"></div>
|
|
|
|
<h2 class="text-4xl sm:text-6xl font-serif font-bold text-brand-dark dark:text-white tracking-tight mb-6">
|
|
Prêt à traduire sans perdre <span class="italic gradient-text-gold font-serif">une seule seconde ?</span>
|
|
</h2>
|
|
<p class="text-brand-dark/75 dark:text-white/70 text-base sm:text-lg max-w-xl mx-auto font-light leading-relaxed mb-10">
|
|
Glissez votre premier document et découvrez la précision Wordly. 3 documents offerts sans carte bancaire.
|
|
</p>
|
|
|
|
<a href="#pricing" class="inline-flex items-center gap-3 px-10 py-5 rounded-2xl bg-brand-dark dark:bg-brand-accent text-white dark:text-brand-dark font-bold text-xs uppercase tracking-widest shadow-2xl hover:scale-105 transition-all">
|
|
<span>Commencer maintenant</span>
|
|
<i data-lucide="arrow-right" class="w-4 h-4"></i>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ================================================================ -->
|
|
<!-- FOOTER -->
|
|
<!-- ================================================================ -->
|
|
<footer class="border-t border-black/10 dark:border-white/10 bg-white dark:bg-[#0a0a0a] py-16 px-6">
|
|
<div class="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center gap-8">
|
|
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 bg-brand-dark dark:bg-brand-accent rounded-lg flex items-center justify-center text-white dark:text-brand-dark font-serif font-bold text-base">
|
|
W
|
|
</div>
|
|
<span class="font-bold text-lg text-brand-dark dark:text-white">
|
|
Wordly<span class="text-brand-goldink dark:text-brand-accent">.art</span>
|
|
</span>
|
|
</div>
|
|
|
|
<div class="text-xs text-brand-dark/60 dark:text-white/60 uppercase tracking-widest font-mono">
|
|
© 2026 Wordly.art • Traduction certifiée haute fidélité
|
|
</div>
|
|
|
|
<div class="flex items-center gap-6 text-xs font-bold text-brand-dark/70 dark:text-white/70 uppercase tracking-wider">
|
|
<a href="#" class="hover:text-brand-dark dark:hover:text-white">Confidentialité</a>
|
|
<a href="#" class="hover:text-brand-dark dark:hover:text-white">Tarifs</a>
|
|
<a href="#" class="hover:text-brand-dark dark:hover:text-white">Contact</a>
|
|
</div>
|
|
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
// Initialisation Lucide icons
|
|
lucide.createIcons();
|
|
|
|
// Toggle Mode Sombre / Clair
|
|
const themeBtn = document.getElementById('themeToggle');
|
|
themeBtn.addEventListener('click', () => {
|
|
document.documentElement.classList.toggle('dark');
|
|
lucide.createIcons();
|
|
});
|
|
|
|
// Bascule de format dans la démonstration
|
|
const formatHeaders = {
|
|
docx: { bg: 'bg-[#185ABD]', title: 'Cahier_Des_Charges_Technique.docx — Word' },
|
|
xlsx: { bg: 'bg-[#107C41]', title: 'Calculs_Financiers_Recette.xlsx — Excel' },
|
|
pptx: { bg: 'bg-[#C43E1C]', title: 'Presentation_Executive_Projet.pptx — PowerPoint' },
|
|
pdf: { bg: 'bg-[#E03E2D]', title: 'Rapport_Officiel_Certifie.pdf — Adobe Acrobat' }
|
|
};
|
|
|
|
function switchFormat(fmt) {
|
|
const cfg = formatHeaders[fmt];
|
|
const header = document.getElementById('officeHeader');
|
|
const docTitle = document.getElementById('windowDocTitle');
|
|
|
|
header.className = `${cfg.bg} px-4 py-2.5 flex items-center justify-between text-white transition-colors duration-300`;
|
|
docTitle.textContent = cfg.title;
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|