Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> | |
| <meta name="description" content="TIE permet aux chauffeurs VTC de garder leurs meilleurs clients et aux clients privés de retrouver leur chauffeur de confiance. Sans commission pour les chauffeurs, gratuit pour les clients."> | |
| <meta name="theme-color" content="#0b0b0f"> | |
| <title>TIE — Chauffeur VTC privé, client de confiance et réservation sans commission</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/lucide@latest"></script> | |
| <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&display=swap" rel="stylesheet"> | |
| <style> | |
| html { scroll-behavior: smooth; } | |
| body { font-family: 'Inter', sans-serif; } | |
| .no-scrollbar::-webkit-scrollbar { display: none; } | |
| .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } | |
| .glass-card { | |
| background: linear-gradient(180deg, rgba(21,24,33,0.85), rgba(17,22,32,0.6)); | |
| backdrop-filter: blur(12px); | |
| border: 1px solid rgba(255,255,255,0.08); | |
| transition: all 200ms ease; | |
| } | |
| .premium-card { | |
| background: linear-gradient(135deg, rgba(21,24,33,1) 0%, rgba(16,20,29,1) 100%); | |
| border: 1px solid rgba(255,255,255,0.08); | |
| transition: all 200ms ease; | |
| } | |
| .premium-card:hover { | |
| border-color: rgba(16,185,129,0.25); | |
| transform: translateY(-2px); | |
| box-shadow: 0 8px 30px rgba(0,0,0,0.4), 0 0 0 1px rgba(16,185,129,0.1); | |
| } | |
| .glow-bg { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .glow-bg::before { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| background: radial-gradient(600px circle at 50% 50%, rgba(16,185,129,0.06), transparent 60%); | |
| pointer-events: none; | |
| } | |
| .app-container { | |
| max-width: 760px; | |
| margin: 0 auto; | |
| padding-left: 20px; | |
| padding-right: 20px; | |
| } | |
| .phone-mockup { | |
| box-shadow: 0 0 0 1px rgba(255,255,255,0.20), 0 0 0 5px rgba(255,255,255,0.04), 0 25px 60px rgba(0,0,0,0.6), 0 0 40px rgba(16,185,129,0.08); | |
| background: radial-gradient(circle at 50% 30%, rgba(26,31,43,1), rgba(17,22,32,1)); | |
| } | |
| .article-visual { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .article-visual::after { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| background: linear-gradient(180deg, transparent 40%, rgba(11,11,15,0.95) 100%); | |
| pointer-events: none; | |
| } | |
| .scroll-row { | |
| display: flex; | |
| gap: 18px; | |
| overflow-x: auto; | |
| scroll-snap-type: x mandatory; | |
| -webkit-overflow-scrolling: touch; | |
| padding-bottom: 4px; | |
| } | |
| .scroll-row > * { | |
| scroll-snap-align: start; | |
| flex-shrink: 0; | |
| } | |
| .app-card { | |
| min-width: 290px; | |
| max-width: 310px; | |
| min-height: 260px; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-[#0b0b0f] text-white antialiased selection:bg-emerald-500/30 selection:text-emerald-200"> | |
| <!-- Global glows --> | |
| <div class="fixed inset-0 pointer-events-none z-0 overflow-hidden"> | |
| <div class="absolute -top-[20%] -left-[10%] w-[70vw] h-[70vw] rounded-full bg-emerald-500/8 blur-[120px]"></div> | |
| <div class="absolute top-[40%] -right-[10%] w-[60vw] h-[60vw] rounded-full bg-cyan-500/6 blur-[100px]"></div> | |
| <div class="absolute top-[10%] left-[30%] w-[50vw] h-[50vw] rounded-full bg-blue-500/5 blur-[100px]"></div> | |
| <div class="absolute bottom-[10%] left-[10%] w-[40vw] h-[40vw] rounded-full bg-emerald-500/5 blur-[90px]"></div> | |
| </div> | |
| <!-- HEADER --> | |
| <header class="fixed top-0 inset-x-0 z-50 bg-[#0b0b0f]/70 backdrop-blur-xl border-b border-white/[0.08]"> | |
| <div class="max-w-[980px] mx-auto px-6 h-[72px] flex items-center justify-between"> | |
| <div class="flex items-center gap-3"> | |
| <a href="index.html" class="text-2xl font-black tracking-tighter text-white">TIE</a> | |
| <div class="relative"> | |
| <button id="sim-menu-btn" class="flex items-center gap-1.5 px-3 py-2 text-sm font-medium text-white/70 hover:text-white transition-colors rounded-xl hover:bg-white/5"> | |
| <span>Simulateurs</span> | |
| <i data-lucide="chevron-down" class="w-4 h-4 opacity-60"></i> | |
| </button> | |
| <div id="sim-menu" class="hidden absolute top-full right-0 mt-2 w-64 bg-[#151821] border border-white/10 rounded-2xl shadow-2xl p-2 z-50 overflow-hidden"> | |
| <a href="simulateur.html" class="flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm text-white/70 hover:text-white hover:bg-white/5 transition-colors"> | |
| <i data-lucide="calculator" class="w-4 h-4 text-emerald-400"></i> | |
| <span>Combien gagnez-vous vraiment ?</span> | |
| </a> | |
| <a href="simulateur-pertes.html" class="flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm text-white/70 hover:text-white hover:bg-white/5 transition-colors"> | |
| <i data-lucide="trending-down" class="w-4 h-4 text-emerald-400"></i> | |
| <span>Combien vous perdez par mois ?</span> | |
| </a> | |
| <a href="objectif-reel.html" class="flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm text-white/70 hover:text-white hover:bg-white/5 transition-colors"> | |
| <i data-lucide="target" class="w-4 h-4 text-emerald-400"></i> | |
| <span>Combien devez-vous gagner par jour ?</span> | |
| </a> | |
| <a href="voiture-optimale.html" class="flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm text-white/70 hover:text-white hover:bg-white/5 transition-colors"> | |
| <i data-lucide="car" class="w-4 h-4 text-emerald-400"></i> | |
| <span>Quelle voiture est faite pour vous ?</span> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <button id="settings-btn" class="p-2.5 rounded-full hover:bg-white/5 text-white/70 hover:text-white transition-colors"> | |
| <i data-lucide="settings" class="w-5 h-5"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <main class="pt-[88px] pb-28 relative z-10"> | |
| <!-- HERO --> | |
| <section class="px-4 py-10"> | |
| <div class="max-w-[760px] mx-auto"> | |
| <div class="space-y-6"> | |
| <div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full border border-white/10 bg-white/[0.06] text-white/[0.55] text-xs font-semibold"> | |
| Relation directe chauffeur ↔ client privé | |
| </div> | |
| <h1 class="text-[46px] lg:text-[58px] font-extrabold leading-[0.95] tracking-tight max-w-[620px]"> | |
| Le lien de confiance<br>entre <span class="text-[#34d399]">chauffeurs</span> VTC<br>et <span class="text-[#34d399]">clients</span> privés | |
| </h1> | |
| <p class="text-lg text-white/[0.62]"> | |
| Gardez vos meilleurs clients. Retrouvez votre chauffeur de confiance. | |
| </p> | |
| <p class="text-[#34d399] font-medium leading-relaxed"> | |
| Sans commission pour les chauffeurs.<br>100% gratuit pour les clients. | |
| </p> | |
| <div class="flex flex-col sm:flex-row gap-3 pt-2"> | |
| <a href="chauffeur.html" class="group flex items-center gap-3 w-full sm:w-[250px] h-[58px] px-5 bg-gradient-to-r from-[#34d399] to-[#10b981] text-[#0b0b0f] rounded-2xl font-semibold transition-all active:scale-95"> | |
| <i data-lucide="arrow-right" class="w-5 h-5"></i> | |
| <div class="flex flex-col items-start leading-none gap-0.5"> | |
| <span class="text-sm">Je suis chauffeur VTC</span> | |
| <span class="text-[10px] font-medium opacity-70">Créer mon espace</span> | |
| </div> | |
| </a> | |
| <a href="client.html" class="group flex items-center gap-3 w-full sm:w-[250px] h-[58px] px-5 border border-white/25 hover:border-white/40 hover:bg-white/5 text-white rounded-2xl font-semibold transition-all active:scale-95"> | |
| <i data-lucide="arrow-right" class="w-5 h-5"></i> | |
| <div class="flex flex-col items-start leading-none gap-0.5"> | |
| <span class="text-sm">Je suis client privé</span> | |
| <span class="text-[10px] font-medium opacity-60">Réserver mon chauffeur</span> | |
| </div> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="mt-9 flex justify-center"> | |
| <div class="relative w-[240px] h-[350px] bg-gradient-to-b from-[#1a1f2b] to-[#111620] rounded-[42px] border border-white/20 shadow-2xl flex flex-col items-center overflow-hidden phone-mockup"> | |
| <div class="absolute top-0 left-1/2 -translate-x-1/2 w-[80px] h-[24px] bg-[#0b0b0f] rounded-b-[12px] flex items-center justify-center gap-2"> | |
| <div class="w-10 h-[3px] bg-white/20 rounded-full"></div> | |
| <div class="w-[6px] h-[6px] bg-white/20 rounded-full"></div> | |
| </div> | |
| <div class="absolute top-4 left-5 text-[#34d399] font-bold text-lg tracking-tight">TIE</div> | |
| <div class="absolute top-4 right-5 w-8 h-8 rounded-full bg-[#0b0b0f] border border-white/10 flex items-center justify-center"> | |
| <i data-lucide="user" class="w-4 h-4 text-white/50"></i> | |
| </div> | |
| <div class="relative flex-1 w-full mt-10 mb-6"> | |
| <svg class="absolute inset-0 w-full h-full" viewBox="0 0 240 350" fill="none"> | |
| <path d="M70 250 C120 220 110 150 170 130 C200 115 190 70 225 55" stroke="#34d399" stroke-width="3" stroke-linecap="round" fill="none"/> | |
| <circle cx="70" cy="250" r="3" fill="#34d399"/> | |
| <circle cx="170" cy="130" r="2.5" fill="#34d399"/> | |
| <circle cx="225" cy="55" r="3" fill="#34d399"/> | |
| </svg> | |
| <div class="absolute top-[230px] left-[50px] w-9 h-9 rounded-full bg-[#0b0b0f] border border-[#34d399]/30 flex items-center justify-center z-10"> | |
| <i data-lucide="user" class="w-4 h-4 text-[#34d399]"></i> | |
| </div> | |
| <div class="absolute top-[30px] right-[5px] w-9 h-9 rounded-full bg-[#0b0b0f] border border-[#34d399]/30 flex items-center justify-center z-10"> | |
| <i data-lucide="user" class="w-4 h-4 text-[#34d399]"></i> | |
| </div> | |
| <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-32 h-32 bg-[#34d399]/10 rounded-full blur-2xl pointer-events-none"></div> | |
| </div> | |
| <div class="mb-4 text-center text-white/30 text-[10px] leading-tight"> | |
| Relation directe<br>chauffeur ↔ client | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- VISION --> | |
| <section class="py-6 scroll-mt-24"> | |
| <div class="app-container"> | |
| <div class="bg-[#151821] rounded-[28px] border border-white/10 p-7 overflow-hidden glow-bg"> | |
| <div class="flex flex-col gap-6"> | |
| <div class="flex items-center justify-center"> | |
| <div class="relative flex items-center gap-6"> | |
| <div class="w-14 h-14 rounded-full bg-[#0b0b0f] border border-[#34d399]/30 flex items-center justify-center"> | |
| <i data-lucide="user" class="w-7 h-7 text-[#34d399]"></i> | |
| </div> | |
| <div class="w-20 h-1 bg-[#34d399]/40 rounded-full relative"> | |
| <div class="absolute -left-1 -top-0.5 w-2 h-2 bg-[#34d399] rounded-full"></div> | |
| <div class="absolute -right-1 -top-0.5 w-2 h-2 bg-[#34d399] rounded-full"></div> | |
| </div> | |
| <div class="w-14 h-14 rounded-full bg-[#0b0b0f] border border-[#34d399]/30 flex items-center justify-center"> | |
| <i data-lucide="user" class="w-7 h-7 text-[#34d399]"></i> | |
| </div> | |
| <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-28 h-28 bg-[#34d399]/15 rounded-full blur-2xl pointer-events-none"></div> | |
| </div> | |
| </div> | |
| <div class="space-y-4"> | |
| <h2 class="text-2xl font-bold tracking-tight">Un trajet dure 20 minutes.</h2> | |
| <p class="text-[#34d399] text-lg font-semibold">Une relation de confiance peut durer 20 ans.</p> | |
| <p class="text-white/[0.62] leading-relaxed text-sm"> | |
| Chez TIE, nous croyons qu'un bon chauffeur mérite de retrouver ses meilleurs clients et qu'un client satisfait devrait pouvoir réserver toujours la même personne. | |
| </p> | |
| <p class="text-white font-semibold text-sm">Nous ne créons pas une course. Nous créons une relation.</p> | |
| <a href="#" class="inline-flex items-center gap-2 text-[#34d399] hover:text-[#34d399]/80 font-medium transition-colors text-sm" data-card="future-feature"> | |
| Découvrir notre philosophie <i data-lucide="arrow-right" class="w-4 h-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CHAUFFEURS --> | |
| <section class="py-8 scroll-mt-24"> | |
| <div class="app-container"> | |
| <h2 class="text-[28px] font-extrabold mb-6 tracking-tight">Pour les <span class="text-[#34d399]">chauffeurs</span> VTC</h2> | |
| <div class="scroll-row no-scrollbar -mx-5 px-5"> | |
| <div class="app-card premium-card rounded-[24px] border border-white/10 p-7 flex flex-col"> | |
| <div class="w-14 h-14 rounded-2xl bg-[#34d399]/10 flex items-center justify-center mb-4"> | |
| <i data-lucide="user" class="w-7 h-7 text-[#34d399]"></i> | |
| </div> | |
| <h3 class="text-lg font-bold mb-2 leading-snug">Vous avez déjà vos meilleurs clients. Vous ne le savez simplement pas encore.</h3> | |
| <p class="text-sm text-white/60 mb-6 flex-1">Chaque belle course peut devenir une relation durable.</p> | |
| <a href="#" class="inline-flex items-center gap-2 text-sm text-[#34d399] hover:text-[#34d399]/80 font-medium transition-colors" data-card="future-feature"> | |
| Commencer <i data-lucide="arrow-right" class="w-4 h-4"></i> | |
| </a> | |
| </div> | |
| <div class="app-card premium-card rounded-[24px] border border-white/10 p-7 flex flex-col"> | |
| <div class="w-14 h-14 rounded-2xl bg-[#34d399]/10 flex items-center justify-center mb-4"> | |
| <i data-lucide="trending-up" class="w-7 h-7 text-[#34d399]"></i> | |
| </div> | |
| <h3 class="text-lg font-bold mb-2 leading-snug">Chaque client fidèle est une commission que vous ne paierez plus jamais.</h3> | |
| <p class="text-sm text-white/60 mb-6 flex-1">Construisez progressivement votre clientèle privée.</p> | |
| <a href="#" class="inline-flex items-center gap-2 text-sm text-[#34d399] hover:text-[#34d399]/80 font-medium transition-colors" data-card="future-feature"> | |
| Découvrir <i data-lucide="arrow-right" class="w-4 h-4"></i> | |
| </a> | |
| </div> | |
| <div class="app-card premium-card rounded-[24px] border border-white/10 p-7 flex flex-col"> | |
| <div class="w-14 h-14 rounded-2xl bg-[#34d399]/10 flex items-center justify-center mb-4"> | |
| <i data-lucide="shield" class="w-7 h-7 text-[#34d399]"></i> | |
| </div> | |
| <h3 class="text-lg font-bold mb-2 leading-snug">Votre réputation vaut plus qu'un algorithme.</h3> | |
| <p class="text-sm text-white/60 mb-6 flex-1">Votre meilleur commercial est un client satisfait.</p> | |
| <a href="#" class="inline-flex items-center gap-2 text-sm text-[#34d399] hover:text-[#34d399]/80 font-medium transition-colors" data-card="future-feature"> | |
| Voir comment <i data-lucide="arrow-right" class="w-4 h-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- PROBLÈME PLATEFORMES --> | |
| <section class="py-6 scroll-mt-24"> | |
| <div class="app-container"> | |
| <div class="relative rounded-[28px] border border-white/10 p-7 overflow-hidden bg-gradient-to-br from-[#19131b] via-[#151821] to-[#0b0b0f]"> | |
| <div class="flex items-center justify-center mb-5"> | |
| <div class="relative flex items-end gap-3 h-24"> | |
| <div class="w-8 h-12 bg-[#1a1f2b] rounded-t-lg border-t border-x border-rose-500/30"></div> | |
| <div class="w-8 h-20 bg-[#1a1f2b] rounded-t-lg border-t border-x border-rose-500/30 relative"> | |
| <div class="absolute -top-6 left-1/2 -translate-x-1/2 text-rose-400 text-xs font-bold">%</div> | |
| </div> | |
| <div class="w-8 h-8 bg-[#1a1f2b] rounded-t-lg border-t border-x border-rose-500/30"></div> | |
| <div class="w-8 h-16 bg-[#1a1f2b] rounded-t-lg border-t border-x border-rose-500/30"></div> | |
| <div class="absolute -bottom-6 left-0 right-0 text-center text-white/30 text-[10px] uppercase tracking-wider">Commissions</div> | |
| </div> | |
| </div> | |
| <div class="space-y-4"> | |
| <h2 class="text-2xl font-bold tracking-tight">Pourquoi les plateformes ne favorisent-elles pas la fidélité ?</h2> | |
| <p class="text-white/60 text-sm leading-relaxed"> | |
| Parce qu'un client fidèle à un chauffeur... est un client qui génère moins de commissions. | |
| </p> | |
| <p class="text-[#34d399] font-semibold text-sm leading-relaxed"> | |
| Chez TIE, nous faisons exactement l'inverse. | |
| </p> | |
| <p class="text-white/60 text-sm leading-relaxed"> | |
| Nous encourageons les relations durables. Parce que tout le monde y gagne. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CLIENTS PRIVÉS --> | |
| <section class="px-4 py-10 scroll-mt-24"> | |
| <div class="max-w-6xl mx-auto"> | |
| <h2 class="text-2xl font-bold mb-6 tracking-tight">Pour les <span class="text-emerald-400">clients</span> privés</h2> | |
| <div class="grid md:grid-cols-3 gap-4"> | |
| <div class="bg-[#151821] rounded-2xl border border-white/10 p-5 flex flex-col"> | |
| <div class="w-10 h-10 rounded-xl bg-emerald-500/10 flex items-center justify-center mb-4"> | |
| <i data-lucide="map-pin" class="w-5 h-5 text-emerald-400"></i> | |
| </div> | |
| <h3 class="text-lg font-bold mb-2">Retrouver mon chauffeur</h3> | |
| <p class="text-sm text-white/60 mb-4 flex-1"> | |
| Parce qu'expliquer vos habitudes à un nouveau chauffeur à chaque trajet n'est pas une fatalité. | |
| </p> | |
| <a href="#" class="inline-flex items-center gap-2 text-sm text-emerald-400 hover:text-emerald-300 font-medium transition-colors" data-card="future-feature"> | |
| Réserver <i data-lucide="arrow-right" class="w-4 h-4"></i> | |
| </a> | |
| </div> | |
| <div class="bg-[#151821] rounded-2xl border border-white/10 p-5 flex flex-col"> | |
| <div class="w-10 h-10 rounded-xl bg-emerald-500/10 flex items-center justify-center mb-4"> | |
| <i data-lucide="calendar" class="w-5 h-5 text-emerald-400"></i> | |
| </div> | |
| <h3 class="text-lg font-bold mb-2">Reprogrammer un trajet</h3> | |
| <p class="text-sm text-white/60 mb-4 flex-1"> | |
| Le chauffeur que vous appréciez est disponible ? Réservez-le directement. | |
| </p> | |
| <a href="#" class="inline-flex items-center gap-2 text-sm text-emerald-400 hover:text-emerald-300 font-medium transition-colors" data-card="future-feature"> | |
| Planifier <i data-lucide="arrow-right" class="w-4 h-4"></i> | |
| </a> | |
| </div> | |
| <div class="bg-[#151821] rounded-2xl border border-white/10 p-5 flex flex-col"> | |
| <div class="w-10 h-10 rounded-xl bg-emerald-500/10 flex items-center justify-center mb-4"> | |
| <i data-lucide="users" class="w-5 h-5 text-emerald-400"></i> | |
| </div> | |
| <h3 class="text-lg font-bold mb-2">Réserver pour un proche</h3> | |
| <p class="text-sm text-white/60 mb-4 flex-1"> | |
| Vos parents, vos enfants, vos collaborateurs. Toujours avec une personne en qui vous avez confiance. | |
| </p> | |
| <a href="#" class="inline-flex items-center gap-2 text-sm text-emerald-400 hover:text-emerald-300 font-medium transition-colors" data-card="future-feature"> | |
| Découvrir <i data-lucide="arrow-right" class="w-4 h-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- PERSONAS --> | |
| <section class="px-4 py-6 scroll-mt-24"> | |
| <div class="max-w-6xl mx-auto"> | |
| <h2 class="text-2xl font-bold mb-6 tracking-tight">Ils ont compris avant les autres</h2> | |
| <div class="bg-[#151821] rounded-3xl border border-white/10 p-6 lg:p-8"> | |
| <div class="grid md:grid-cols-3 gap-6"> | |
| <div class="flex flex-col items-center text-center p-4"> | |
| <div class="w-16 h-16 rounded-full bg-gradient-to-br from-emerald-400/20 to-emerald-600/10 border border-emerald-500/20 flex items-center justify-center text-emerald-300 font-bold text-lg mb-4">C1</div> | |
| <h3 class="font-bold mb-2">Le chauffeur indépendant</h3> | |
| <p class="text-sm text-white/60 italic">"Je préfère 100 clients qui me connaissent plutôt que 1 000 anonymes."</p> | |
| </div> | |
| <div class="flex flex-col items-center text-center p-4"> | |
| <div class="w-16 h-16 rounded-full bg-gradient-to-br from-emerald-400/20 to-emerald-600/10 border border-emerald-500/20 flex items-center justify-center text-emerald-300 font-bold text-lg mb-4">C2</div> | |
| <h3 class="font-bold mb-2">Le client fidèle</h3> | |
| <p class="text-sm text-white/60 italic">"Quand je trouve un excellent chauffeur, je veux pouvoir le retrouver."</p> | |
| </div> | |
| <div class="flex flex-col items-center text-center p-4"> | |
| <div class="w-16 h-16 rounded-full bg-gradient-to-br from-emerald-400/20 to-emerald-600/10 border border-emerald-500/20 flex items-center justify-center text-emerald-300 font-bold text-lg mb-4">C3</div> | |
| <h3 class="font-bold mb-2">Le professionnel</h3> | |
| <p class="text-sm text-white/60 italic">"Mon temps est précieux. Je veux une personne qui connaît déjà mes habitudes."</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- SIMULATEURS --> | |
| <section class="px-4 py-10 scroll-mt-24"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="mb-6"> | |
| <h2 class="text-2xl font-bold mb-2 tracking-tight">Comprendre son activité, c'est déjà gagner plus</h2> | |
| <p class="text-white/60">Des outils gratuits pour prendre les bonnes décisions.</p> | |
| </div> | |
| <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-4"> | |
| <a href="simulateur.html" class="group bg-[#151821] rounded-2xl border border-white/10 p-5 hover:border-emerald-500/30 transition-all active:scale-95 flex flex-col"> | |
| <div class="w-10 h-10 rounded-xl bg-emerald-500/10 flex items-center justify-center mb-4"> | |
| <i data-lucide="calculator" class="w-5 h-5 text-emerald-400"></i> | |
| </div> | |
| <h3 class="text-lg font-bold mb-2 leading-snug">Combien gagnez-vous vraiment ?</h3> | |
| <p class="text-sm text-white/60 mb-4 flex-1">Calculez votre rentabilité réelle en quelques secondes.</p> | |
| <span class="inline-flex items-center gap-2 text-sm text-emerald-400 group-hover:text-emerald-300 font-medium"> | |
| Calculer <i data-lucide="arrow-right" class="w-4 h-4"></i> | |
| </span> | |
| </a> | |
| <a href="simulateur-pertes.html" class="group bg-[#151821] rounded-2xl border border-white/10 p-5 hover:border-emerald-500/30 transition-all active:scale-95 flex flex-col"> | |
| <div class="w-10 h-10 rounded-xl bg-emerald-500/10 flex items-center justify-center mb-4"> | |
| <i data-lucide="trending-down" class="w-5 h-5 text-emerald-400"></i> | |
| </div> | |
| <h3 class="text-lg font-bold mb-2 leading-snug">Combien vous perdez par mois ?</h3> | |
| <p class="text-sm text-white/60 mb-4 flex-1">Visualisez ce que les commissions vous coûtent réellement.</p> | |
| <span class="inline-flex items-center gap-2 text-sm text-emerald-400 group-hover:text-emerald-300 font-medium"> | |
| Voir mon estimation <i data-lucide="arrow-right" class="w-4 h-4"></i> | |
| </span> | |
| </a> | |
| <a href="objectif-reel.html" class="group bg-[#151821] rounded-2xl border border-white/10 p-5 hover:border-emerald-500/30 transition-all active:scale-95 flex flex-col"> | |
| <div class="w-10 h-10 rounded-xl bg-emerald-500/10 flex items-center justify-center mb-4"> | |
| <i data-lucide="target" class="w-5 h-5 text-emerald-400"></i> | |
| </div> | |
| <h3 class="text-lg font-bold mb-2 leading-snug">Combien devez-vous gagner par jour ?</h3> | |
| <p class="text-sm text-white/60 mb-4 flex-1">Définissez un objectif clair pour atteindre vos revenus.</p> | |
| <span class="inline-flex items-center gap-2 text-sm text-emerald-400 group-hover:text-emerald-300 font-medium"> | |
| Calculer <i data-lucide="arrow-right" class="w-4 h-4"></i> | |
| </span> | |
| </a> | |
| <a href="voiture-optimale.html" class="group bg-[#151821] rounded-2xl border border-white/10 p-5 hover:border-emerald-500/30 transition-all active:scale-95 flex flex-col"> | |
| <div class="w-10 h-10 rounded-xl bg-emerald-500/10 flex items-center justify-center mb-4"> | |
| <i data-lucide="car" class="w-5 h-5 text-emerald-400"></i> | |
| </div> | |
| <h3 class="text-lg font-bold mb-2 leading-snug">Quelle voiture est faite pour vous ?</h3> | |
| <p class="text-sm text-white/60 mb-4 flex-1">Trouvez le véhicule adapté à votre activité et vos objectifs.</p> | |
| <span class="inline-flex items-center gap-2 text-sm text-emerald-400 group-hover:text-emerald-300 font-medium"> | |
| Découvrir <i data-lucide="arrow-right" class="w-4 h-4"></i> | |
| </span> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- MÉDIA TIE --> | |
| <section class="px-4 py-6 scroll-mt-24"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="flex items-end justify-between mb-6"> | |
| <div> | |
| <h2 class="text-2xl font-bold mb-1 tracking-tight">Le média TIE</h2> | |
| <p class="text-white/60 text-sm">Des conseils concrets pour développer votre activité et mieux vous déplacer.</p> | |
| </div> | |
| <a href="#" class="hidden md:inline-flex items-center gap-2 text-sm text-emerald-400 hover:text-emerald-300 font-medium transition-colors" data-card="future-feature"> | |
| Voir tous les articles <i data-lucide="arrow-right" class="w-4 h-4"></i> | |
| </a> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-4"> | |
| <article class="group bg-[#151821] rounded-2xl border border-white/10 overflow-hidden hover:border-white/20 transition-all"> | |
| <div class="h-40 bg-gradient-to-br from-[#1a1f2b] to-[#0b0b0f] relative"> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <i data-lucide="newspaper" class="w-10 h-10 text-white/5"></i> | |
| </div> | |
| <div class="absolute top-3 left-3"> | |
| <span class="px-2 py-1 rounded-md bg-emerald-500/10 text-emerald-400 text-[10px] font-bold tracking-wider">CHAUFFEURS</span> | |
| </div> | |
| </div> | |
| <div class="p-5"> | |
| <h3 class="font-bold mb-3 leading-snug text-white/90 group-hover:text-white transition-colors">Comment fidéliser ses clients VTC sans dépendre des plateformes ?</h3> | |
| <p class="text-xs text-white/40">4 min de lecture</p> | |
| </div> | |
| </article> | |
| <article class="group bg-[#151821] rounded-2xl border border-white/10 overflow-hidden hover:border-white/20 transition-all"> | |
| <div class="h-40 bg-gradient-to-br from-[#1a1f2b] to-[#0b0b0f] relative"> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <i data-lucide="newspaper" class="w-10 h-10 text-white/5"></i> | |
| </div> | |
| <div class="absolute top-3 left-3"> | |
| <span class="px-2 py-1 rounded-md bg-emerald-500/10 text-emerald-400 text-[10px] font-bold tracking-wider">CHAUFFEURS</span> | |
| </div> | |
| </div> | |
| <div class="p-5"> | |
| <h3 class="font-bold mb-3 leading-snug text-white/90 group-hover:text-white transition-colors">Pourquoi les meilleurs chauffeurs développent leur clientèle privée ?</h3> | |
| <p class="text-xs text-white/40">6 min de lecture</p> | |
| </div> | |
| </article> | |
| <article class="group bg-[#151821] rounded-2xl border border-white/10 overflow-hidden hover:border-white/20 transition-all"> | |
| <div class="h-40 bg-gradient-to-br from-[#1a1f2b] to-[#0b0b0f] relative"> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <i data-lucide="newspaper" class="w-10 h-10 text-white/5"></i> | |
| </div> | |
| <div class="absolute top-3 left-3"> | |
| <span class="px-2 py-1 rounded-md bg-emerald-500/10 text-emerald-400 text-[10px] font-bold tracking-wider">CLIENTS</span> | |
| </div> | |
| </div> | |
| <div class="p-5"> | |
| <h3 class="font-bold mb-3 leading-snug text-white/90 group-hover:text-white transition-colors">Réserver toujours le même chauffeur : une nouvelle façon de se déplacer.</h3> | |
| <p class="text-xs text-white/40">5 min de lecture</p> | |
| </div> | |
| </article> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- MANIFESTE --> | |
| <section class="px-4 py-10 scroll-mt-24"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="bg-[#151821] rounded-3xl border border-white/10 p-6 lg:p-8 overflow-hidden"> | |
| <div class="grid lg:grid-cols-12 gap-8 items-start"> | |
| <div class="lg:col-span-3 flex flex-col items-center lg:items-start text-center lg:text-left"> | |
| <div class="w-16 h-16 rounded-2xl bg-emerald-500/10 border border-emerald-500/20 flex items-center justify-center mb-4"> | |
| <i data-lucide="heart" class="w-8 h-8 text-emerald-400"></i> | |
| </div> | |
| <h2 class="text-2xl font-bold tracking-tight">Le manifeste TIE</h2> | |
| </div> | |
| <div class="lg:col-span-9"> | |
| <div class="space-y-4"> | |
| <div class="flex items-start gap-3"> | |
| <span class="mt-2 w-1.5 h-1.5 rounded-full bg-emerald-400 flex-shrink-0"></span> | |
| <p class="text-white/80">Nous croyons qu'une relation humaine vaut plus qu'un algorithme.</p> | |
| </div> | |
| <div class="flex items-start gap-3"> | |
| <span class="mt-2 w-1.5 h-1.5 rounded-full bg-emerald-400 flex-shrink-0"></span> | |
| <p class="text-white/80">Nous croyons qu'un chauffeur mérite de construire sa propre clientèle.</p> | |
| </div> | |
| <div class="flex items-start gap-3"> | |
| <span class="mt-2 w-1.5 h-1.5 rounded-full bg-emerald-400 flex-shrink-0"></span> | |
| <p class="text-white/80">Nous croyons qu'un client mérite de retrouver une personne en qui il a confiance.</p> | |
| </div> | |
| <div class="flex items-start gap-3"> | |
| <span class="mt-2 w-1.5 h-1.5 rounded-full bg-emerald-400 flex-shrink-0"></span> | |
| <p class="text-white/80">Nous croyons que la fidélité crée plus de valeur que l'intermédiation permanente.</p> | |
| </div> | |
| <div class="flex items-start gap-3"> | |
| <span class="mt-2 w-1.5 h-1.5 rounded-full bg-emerald-400 flex-shrink-0"></span> | |
| <p class="text-white/80">Nous croyons que la mobilité de demain sera plus libre, plus humaine et plus équitable.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- BOTTOM NAVBAR --> | |
| <nav class="fixed bottom-0 inset-x-0 z-50 bg-[#0b0b0f]/90 backdrop-blur-xl border-t border-white/10"> | |
| <div class="max-w-md mx-auto h-16 px-6 flex items-center justify-between"> | |
| <a href="index.html" class="flex flex-col items-center gap-1 text-emerald-400"> | |
| <i data-lucide="home" class="w-5 h-5"></i> | |
| <span class="text-[10px] font-medium">Accueil</span> | |
| </a> | |
| <a href="simulateurs.html" class="flex flex-col items-center gap-1 text-white/50 hover:text-white transition-colors"> | |
| <i data-lucide="calculator" class="w-5 h-5"></i> | |
| <span class="text-[10px] font-medium">Simulateurs</span> | |
| </a> | |
| <a href="mon-espace.html" class="flex flex-col items-center gap-1 text-white/50 hover:text-white transition-colors"> | |
| <i data-lucide="user" class="w-5 h-5"></i> | |
| <span class="text-[10px] font-medium">Mon espace</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center gap-1 text-white/50 hover:text-white transition-colors" onclick="event.preventDefault();"> | |
| <i data-lucide="download" class="w-5 h-5"></i> | |
| <span class="text-[10px] font-medium">Installer TIE</span> | |
| </a> | |
| </div> | |
| </nav> | |
| <script> | |
| // Lucide Icons | |
| lucide.createIcons(); | |
| // Menu Simulateurs dropdown | |
| const simBtn = document.getElementById('sim-menu-btn'); | |
| const simMenu = document.getElementById('sim-menu'); | |
| if (simBtn && simMenu) { | |
| simBtn.addEventListener('click', (e) => { | |
| e.stopPropagation(); | |
| simMenu.classList.toggle('hidden'); | |
| }); | |
| document.addEventListener('click', () => simMenu.classList.add('hidden')); | |
| simMenu.addEventListener('click', (e) => e.stopPropagation()); | |
| } | |
| // Settings (conservé fonctionnel) | |
| const settingsBtn = document.getElementById('settings-btn'); | |
| if (settingsBtn) { | |
| settingsBtn.addEventListener('click', () => { | |
| // Logique existante conservée | |
| window.location.href = '#'; | |
| }); | |
| } | |
| </script> | |
| <script src="https://deepsite.hf.co/deepsite-badge.js"></script> | |
| </body> | |
| </html> |