Spaces:
Running
Running
| <html lang="fr" class="scroll-smooth"> | |
| <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;900&display=swap" rel="stylesheet"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| fontFamily: { | |
| sans: ['Inter', 'sans-serif'], | |
| }, | |
| colors: { | |
| tie: { | |
| bg: '#0b0b0f', | |
| surface: '#151821', | |
| accent: '#34d399', | |
| accentDark: '#10b981', | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| html { scroll-behavior: smooth; } | |
| body { font-family: 'Inter', sans-serif; background-color: #0b0b0f; overflow-x: hidden; } | |
| .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; | |
| } | |
| .scroll-row { | |
| display: flex; | |
| gap: 16px; | |
| 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; | |
| } | |
| .mini-card { | |
| min-width: 260px; | |
| max-width: 280px; | |
| } | |
| .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; | |
| background: linear-gradient(135deg, #1a1f2b, #0b0b0f); | |
| } | |
| .article-visual::after { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| background: linear-gradient(180deg, transparent 40%, rgba(11,11,15,0.95) 100%); | |
| pointer-events: none; | |
| } | |
| .avatar-circle { | |
| width: 56px; | |
| height: 56px; | |
| border-radius: 50%; | |
| background: linear-gradient(135deg, rgba(52,211,153,0.15), rgba(16,185,129,0.05)); | |
| border: 1px solid rgba(52,211,153,0.2); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-weight: 700; | |
| color: #34d399; | |
| font-size: 14px; | |
| flex-shrink: 0; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-tie-bg text-white antialiased selection:bg-emerald-500/30 selection:text-emerald-200 relative"> | |
| <!-- Ambient Background Orbs --> | |
| <div class="fixed inset-0 pointer-events-none z-0 overflow-hidden"> | |
| <div class="ambient-orb w-[70vw] h-[70vw] bg-emerald-500/8 -top-[20%] -left-[10%]" style="animation-duration: 25s;"></div> | |
| <div class="ambient-orb w-[60vw] h-[60vw] bg-cyan-500/6 top-[40%] -right-[10%]" style="animation-duration: 30s; animation-delay: -5s;"></div> | |
| <div class="ambient-orb w-[50vw] h-[50vw] bg-blue-500/5 top-[10%] left-[30%]" style="animation-duration: 22s; animation-delay: -10s;"></div> | |
| <div class="ambient-orb w-[40vw] h-[40vw] bg-emerald-500/5 bottom-[10%] left-[10%]" style="animation-duration: 28s; animation-delay: -15s;"></div> | |
| </div> | |
| <!-- Noise Overlay for texture --> | |
| <div class="fixed inset-0 pointer-events-none z-0 opacity-[0.03]" style="background-image: url('data:image/svg+xml,%3Csvg viewBox=%220 0 256 256%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cfilter id=%22noise%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.65%22 numOctaves=%223%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23noise)%22/%3E%3C/svg%3E');"></div> | |
| <!-- HEADER --> | |
| <header class="fixed top-0 inset-x-0 z-50 glass-panel 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-4"> | |
| <a href="index.html" class="text-2xl font-black tracking-tighter text-white hover:text-emerald-400 transition-colors duration-300">TIE</a> | |
| <div class="relative group"> | |
| <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 transition-transform duration-300 group-hover:rotate-180"></i> | |
| </button> | |
| <div id="sim-menu" class="hidden absolute top-full right-0 mt-2 w-72 bg-[#151821]/95 backdrop-blur-xl border border-white/10 rounded-2xl shadow-2xl p-2 z-50 overflow-hidden transform origin-top-right transition-all duration-200"> | |
| <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 group"> | |
| <i data-lucide="calculator" class="w-4 h-4 text-emerald-400 group-hover:scale-110 transition-transform"></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 group"> | |
| <i data-lucide="trending-down" class="w-4 h-4 text-emerald-400 group-hover:scale-110 transition-transform"></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 group"> | |
| <i data-lucide="target" class="w-4 h-4 text-emerald-400 group-hover:scale-110 transition-transform"></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 group"> | |
| <i data-lucide="car" class="w-4 h-4 text-emerald-400 group-hover:scale-110 transition-transform"></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/10 text-white/70 hover:text-white transition-all duration-300 hover:rotate-90"> | |
| <i data-lucide="settings" class="w-5 h-5"></i> | |
| </button> | |
| </div> | |
| </header> | |
| <main class="pt-[88px] pb-28 relative z-10"> | |
| <!-- HERO --> | |
| <section class="px-4 py-16 lg:py-24 overflow-hidden"> | |
| <div class="max-w-[1000px] mx-auto grid lg:grid-cols-2 gap-12 items-center"> | |
| <div class="space-y-8 reveal active"> | |
| <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-white/10 bg-white/[0.06] text-emerald-400/90 text-xs font-semibold tracking-wide uppercase reveal"> | |
| <span class="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse"></span> | |
| Relation directe chauffeur ↔ client privé | |
| </div> | |
| <h1 class="text-[42px] lg:text-[56px] font-extrabold leading-[0.95] tracking-tight"> | |
| <span class="block reveal">Le lien de confiance</span> | |
| <span class="block reveal reveal-delay-1">entre <span class="text-gradient">chauffeurs</span> VTC</span> | |
| <span class="block reveal reveal-delay-2">et <span class="text-gradient">clients</span> privés</span> | |
| </h1> | |
| <p class="text-lg text-white/60 leading-relaxed reveal reveal-delay-2"> | |
| Gardez vos meilleurs clients. Retrouvez votre chauffeur de confiance. | |
| </p> | |
| <div class="flex items-center gap-3 p-4 rounded-2xl bg-emerald-500/5 border border-emerald-500/10 reveal reveal-delay-3"> | |
| <i data-lucide="check-circle-2" class="w-5 h-5 text-emerald-400 flex-shrink-0"></i> | |
| <p class="text-emerald-400 font-medium text-sm leading-relaxed"> | |
| Sans commission pour les chauffeurs.<br>100% gratuit pour les clients. | |
| </p> | |
| </div> | |
| <div class="flex flex-col sm:flex-row gap-3 pt-2 reveal reveal-delay-3"> | |
| <a href="chauffeur.html" class="group shine relative overflow-hidden flex items-center gap-3 w-full sm:w-[250px] h-[60px] px-6 bg-gradient-to-r from-[#34d399] to-[#10b981] text-[#0b0b0f] rounded-2xl font-semibold transition-all active:scale-95 hover:shadow-lg hover:shadow-emerald-500/20"> | |
| <i data-lucide="arrow-right" class="w-5 h-5 transition-transform group-hover:translate-x-1"></i> | |
| <div class="flex flex-col items-start leading-none gap-0.5"> | |
| <span class="text-sm font-bold">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-[60px] px-6 border border-white/20 hover:border-emerald-500/30 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 transition-transform group-hover:translate-x-1"></i> | |
| <div class="flex flex-col items-start leading-none gap-0.5"> | |
| <span class="text-sm font-bold">Je suis client privé</span> | |
| <span class="text-[10px] font-medium opacity-60">Réserver mon chauffeur</span> | |
| </div> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="flex justify-center lg:justify-end reveal reveal-delay-2"> | |
| <div class="relative w-[260px] h-[420px] lg:w-[280px] lg:h-[460px] rounded-[48px] border border-white/20 overflow-hidden phone-mockup flex flex-col items-center"> | |
| <!-- Notch --> | |
| <div class="absolute top-0 left-1/2 -translate-x-1/2 w-[90px] h-[28px] bg-[#0b0b0f] rounded-b-[16px] flex items-center justify-center gap-2 z-20"> | |
| <div class="w-12 h-[3px] bg-white/20 rounded-full"></div> | |
| <div class="w-[6px] h-[6px] bg-white/20 rounded-full"></div> | |
| </div> | |
| <!-- Header --> | |
| <div class="absolute top-5 left-6 right-6 flex items-center justify-between z-10"> | |
| <div class="text-emerald-400 font-bold text-lg tracking-tight">TIE</div> | |
| <div class="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> | |
| <!-- Map Area --> | |
| <div class="relative flex-1 w-full mt-16 mb-8"> | |
| <svg class="absolute inset-0 w-full h-full" viewBox="0 0 280 460" fill="none" preserveAspectRatio="xMidYMid slice"> | |
| <path d="M60 380 C130 340 120 240 200 200 C240 170 230 100 270 70" stroke="url(#pathGradient)" stroke-width="4" stroke-linecap="round" fill="none" opacity="0.6"> | |
| <animate attributeName="stroke-dasharray" from="0, 1000" to="1000, 0" dur="3s" repeatCount="1" fill="freeze" /> | |
| </path> | |
| <defs> | |
| <linearGradient id="pathGradient" x1="0%" y1="0%" x2="100%" y2="0%"> | |
| <stop offset="0%" stop-color="#34d399" /> | |
| <stop offset="100%" stop-color="#10b981" /> | |
| </linearGradient> | |
| </defs> | |
| <circle cx="60" cy="380" r="4" fill="#34d399"> | |
| <animate attributeName="opacity" values="1;0.5;1" dur="2s" repeatCount="indefinite" /> | |
| </circle> | |
| <circle cx="200" cy="200" r="3" fill="#34d399" /> | |
| <circle cx="270" cy="70" r="4" fill="#34d399"> | |
| <animate attributeName="opacity" values="1;0.5;1" dur="2s" repeatCount="indefinite" /> | |
| </circle> | |
| </svg> | |
| <!-- Driver Avatar --> | |
| <div class="absolute bottom-[40px] left-[40px] w-10 h-10 rounded-full bg-[#0b0b0f] border-2 border-emerald-400/50 flex items-center justify-center z-10 shadow-lg shadow-emerald-500/20"> | |
| <i data-lucide="user" class="w-5 h-5 text-emerald-400"></i> | |
| </div> | |
| <!-- Client Avatar --> | |
| <div class="absolute top-[40px] right-[10px] w-10 h-10 rounded-full bg-[#0b0b0f] border-2 border-emerald-400/50 flex items-center justify-center z-10 shadow-lg shadow-emerald-500/20"> | |
| <i data-lucide="user" class="w-5 h-5 text-emerald-400"></i> | |
| </div> | |
| <!-- Pulse Rings --> | |
| <div class="absolute bottom-[40px] left-[40px] w-10 h-10 rounded-full border border-emerald-400/30 animate-ping"></div> | |
| <div class="absolute top-[40px] right-[10px] w-10 h-10 rounded-full border border-emerald-400/30 animate-ping" style="animation-delay: 1s;"></div> | |
| <!-- Center Glow --> | |
| <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-40 h-40 bg-emerald-500/10 rounded-full blur-3xl pointer-events-none"></div> | |
| </div> | |
| <!-- Footer --> | |
| <div class="absolute bottom-5 left-0 right-0 text-center"> | |
| <div class="text-white/30 text-[10px] leading-tight uppercase tracking-widest">Relation directe</div> | |
| <div class="text-emerald-400/60 text-[10px] leading-tight uppercase tracking-widest mt-0.5">chauffeur ↔ client</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- VISION --> | |
| <section class="py-8 scroll-mt-24"> | |
| <div class="app-container"> | |
| <div class="glass-panel rounded-[32px] border border-white/10 p-8 lg:p-10 overflow-hidden glow-bg relative shine"> | |
| <div class="flex flex-col lg:flex-row gap-8 lg:gap-12 items-center relative z-10"> | |
| <div class="flex items-center justify-center flex-shrink-0"> | |
| <div class="relative flex items-center gap-6 p-4"> | |
| <div class="w-16 h-16 rounded-full bg-[#0b0b0f] border border-emerald-500/30 flex items-center justify-center shadow-lg shadow-emerald-500/10 transition-transform hover:scale-110 duration-300"> | |
| <i data-lucide="user" class="w-8 h-8 text-emerald-400"></i> | |
| </div> | |
| <div class="w-24 h-1.5 bg-emerald-500/20 rounded-full relative overflow-hidden"> | |
| <div class="absolute inset-0 bg-gradient-to-r from-emerald-500/40 to-emerald-400/40 rounded-full animate-pulse"></div> | |
| <div class="absolute -left-1 -top-1 w-3 h-3 bg-emerald-400 rounded-full shadow-lg shadow-emerald-400/50"></div> | |
| <div class="absolute -right-1 -top-1 w-3 h-3 bg-emerald-400 rounded-full shadow-lg shadow-emerald-400/50"></div> | |
| </div> | |
| <div class="w-16 h-16 rounded-full bg-[#0b0b0f] border border-emerald-500/30 flex items-center justify-center shadow-lg shadow-emerald-500/10 transition-transform hover:scale-110 duration-300"> | |
| <i data-lucide="user" class="w-8 h-8 text-emerald-400"></i> | |
| </div> | |
| <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-32 h-32 bg-emerald-500/15 rounded-full blur-2xl pointer-events-none"></div> | |
| </div> | |
| </div> | |
| <div class="space-y-5 flex-1"> | |
| <h2 class="text-3xl font-bold tracking-tight leading-tight">Un trajet dure 20 minutes.</h2> | |
| <p class="text-emerald-400 text-xl font-semibold leading-relaxed">Une relation de confiance peut durer 20 ans.</p> | |
| <p class="text-white/60 leading-relaxed"> | |
| 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-lg">Nous ne créons pas une course. Nous créons une relation.</p> | |
| <a href="#" class="inline-flex items-center gap-2 text-emerald-400 hover:text-emerald-300 font-semibold transition-colors group" data-card="future-feature"> | |
| Découvrir notre philosophie | |
| <i data-lucide="arrow-right" class="w-4 h-4 transition-transform group-hover:translate-x-1"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CHAUFFEURS --> | |
| <section class="py-10 scroll-mt-24"> | |
| <div class="app-container"> | |
| <h2 class="text-[32px] font-extrabold mb-8 tracking-tight reveal">Pour les <span class="text-emerald-400">chauffeurs</span> VTC</h2> | |
| <div class="scroll-row no-scrollbar -mx-5 px-5 reveal"> | |
| <div class="app-card premium-card rounded-[24px] border border-white/10 p-7 flex flex-col group"> | |
| <div class="w-14 h-14 rounded-2xl bg-emerald-500/10 flex items-center justify-center mb-5 transition-transform group-hover:scale-110 duration-300"> | |
| <i data-lucide="user" class="w-7 h-7 text-emerald-400"></i> | |
| </div> | |
| <h3 class="text-lg font-bold mb-3 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-8 flex-1">Chaque belle course peut devenir une relation durable.</p> | |
| <a href="#" class="inline-flex items-center gap-2 text-sm text-emerald-400 hover:text-emerald-300 font-semibold transition-colors group/link" data-card="future-feature"> | |
| Commencer <i data-lucide="arrow-right" class="w-4 h-4 transition-transform group-hover/link:translate-x-1"></i> | |
| </a> | |
| </div> | |
| <div class="app-card premium-card rounded-[24px] border border-white/10 p-7 flex flex-col group"> | |
| <div class="w-14 h-14 rounded-2xl bg-emerald-500/10 flex items-center justify-center mb-5 transition-transform group-hover:scale-110 duration-300"> | |
| <i data-lucide="trending-up" class="w-7 h-7 text-emerald-400"></i> | |
| </div> | |
| <h3 class="text-lg font-bold mb-3 leading-snug">Chaque client fidèle est une commission que vous ne paierez plus jamais.</h3> | |
| <p class="text-sm text-white/60 mb-8 flex-1">Construisez progressivement votre clientèle privée.</p> | |
| <a href="#" class="inline-flex items-center gap-2 text-sm text-emerald-400 hover:text-emerald-300 font-semibold transition-colors group/link" data-card="future-feature"> | |
| Découvrir <i data-lucide="arrow-right" class="w-4 h-4 transition-transform group-hover/link:translate-x-1"></i> | |
| </a> | |
| </div> | |
| <div class="app-card premium-card rounded-[24px] border border-white/10 p-7 flex flex-col group"> | |
| <div class="w-14 h-14 rounded-2xl bg-emerald-500/10 flex items-center justify-center mb-5 transition-transform group-hover:scale-110 duration-300"> | |
| <i data-lucide="shield" class="w-7 h-7 text-emerald-400"></i> | |
| </div> | |
| <h3 class="text-lg font-bold mb-3 leading-snug">Votre réputation vaut plus qu'un algorithme.</h3> | |
| <p class="text-sm text-white/60 mb-8 flex-1">Votre meilleur commercial est un client satisfait.</p> | |
| <a href="#" class="inline-flex items-center gap-2 text-sm text-emerald-400 hover:text-emerald-300 font-semibold transition-colors group/link" data-card="future-feature"> | |
| Voir comment <i data-lucide="arrow-right" class="w-4 h-4 transition-transform group-hover/link:translate-x-1"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- PROBLÈME PLATEFORMES --> | |
| <section class="py-8 scroll-mt-24"> | |
| <div class="app-container"> | |
| <div class="relative rounded-[32px] border border-white/10 p-8 lg:p-10 overflow-hidden bg-gradient-to-br from-[#19131b] via-[#151821] to-[#0b0b0f] reveal"> | |
| <div class="absolute inset-0 bg-[url('http://static.photos/abstract/1024x576/42')] bg-cover bg-center opacity-5 mix-blend-overlay"></div> | |
| <div class="flex items-center justify-center mb-8 relative"> | |
| <div class="relative flex items-end gap-3 h-28"> | |
| <div class="w-10 bg-[#1a1f2b] rounded-t-lg border-t border-x border-rose-500/30 h-[30%] bar-anim" style="animation-delay: 0.1s;"></div> | |
| <div class="w-10 bg-[#1a1f2b] rounded-t-lg border-t border-x border-rose-500/30 h-[70%] relative bar-anim" style="animation-delay: 0.2s;"> | |
| <div class="absolute -top-7 left-1/2 -translate-x-1/2 text-rose-400 text-xs font-bold bg-rose-500/10 px-2 py-0.5 rounded-full">%</div> | |
| </div> | |
| <div class="w-10 bg-[#1a1f2b] rounded-t-lg border-t border-x border-rose-500/30 h-[20%] bar-anim" style="animation-delay: 0.3s;"></div> | |
| <div class="w-10 bg-[#1a1f2b] rounded-t-lg border-t border-x border-rose-500/30 h-[50%] bar-anim" style="animation-delay: 0.4s;"></div> | |
| <div class="absolute -bottom-6 left-0 right-0 text-center text-white/30 text-[10px] uppercase tracking-widest font-semibold">Commissions</div> | |
| </div> | |
| </div> | |
| <div class="space-y-5 relative z-10"> | |
| <h2 class="text-2xl lg:text-3xl font-bold tracking-tight leading-tight">Pourquoi les plateformes ne favorisent-elles pas la fidélité ?</h2> | |
| <p class="text-white/60 leading-relaxed text-lg"> | |
| Parce qu'un client fidèle à un chauffeur... est un client qui génère moins de commissions. | |
| </p> | |
| <div class="p-4 rounded-2xl bg-emerald-500/5 border border-emerald-500/10 inline-block"> | |
| <p class="text-emerald-400 font-bold text-lg leading-relaxed"> | |
| Chez TIE, nous faisons exactement l'inverse. | |
| </p> | |
| </div> | |
| <p class="text-white/60 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-12 scroll-mt-24"> | |
| <div class="max-w-6xl mx-auto"> | |
| <h2 class="text-3xl font-extrabold mb-8 tracking-tight reveal">Pour les <span class="text-emerald-400">clients</span> privés</h2> | |
| <div class="grid md:grid-cols-3 gap-5"> | |
| <div class="glass-card rounded-2xl border border-white/10 p-6 flex flex-col group shine reveal"> | |
| <div class="w-12 h-12 rounded-xl bg-emerald-500/10 flex items-center justify-center mb-5 transition-transform group-hover:scale-110 duration-300"> | |
| <i data-lucide="map-pin" class="w-6 h-6 text-emerald-400"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Retrouver mon chauffeur</h3> | |
| <p class="text-sm text-white/60 mb-8 flex-1 leading-relaxed"> | |
| 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-semibold transition-colors group/link" data-card="future-feature"> | |
| Réserver <i data-lucide="arrow-right" class="w-4 h-4 transition-transform group-hover/link:translate-x-1"></i> | |
| </a> | |
| </div> | |
| <div class="glass-card rounded-2xl border border-white/10 p-6 flex flex-col group shine reveal reveal-delay-1"> | |
| <div class="w-12 h-12 rounded-xl bg-emerald-500/10 flex items-center justify-center mb-5 transition-transform group-hover:scale-110 duration-300"> | |
| <i data-lucide="calendar" class="w-6 h-6 text-emerald-400"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Reprogrammer un trajet</h3> | |
| <p class="text-sm text-white/60 mb-8 flex-1 leading-relaxed"> | |
| 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-semibold transition-colors group/link" data-card="future-feature"> | |
| Planifier <i data-lucide="arrow-right" class="w-4 h-4 transition-transform group-hover/link:translate-x-1"></i> | |
| </a> | |
| </div> | |
| <div class="glass-card rounded-2xl border border-white/10 p-6 flex flex-col group shine reveal reveal-delay-2"> | |
| <div class="w-12 h-12 rounded-xl bg-emerald-500/10 flex items-center justify-center mb-5 transition-transform group-hover:scale-110 duration-300"> | |
| <i data-lucide="users" class="w-6 h-6 text-emerald-400"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Réserver pour un proche</h3> | |
| <p class="text-sm text-white/60 mb-8 flex-1 leading-relaxed"> | |
| 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-semibold transition-colors group/link" data-card="future-feature"> | |
| Découvrir <i data-lucide="arrow-right" class="w-4 h-4 transition-transform group-hover/link:translate-x-1"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- PERSONAS --> | |
| <section class="px-4 py-10 scroll-mt-24"> | |
| <div class="max-w-6xl mx-auto"> | |
| <h2 class="text-3xl font-extrabold mb-8 tracking-tight reveal">Ils ont compris avant les autres</h2> | |
| <div class="glass-panel rounded-3xl border border-white/10 p-6 lg:p-10 reveal"> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="flex flex-col items-center text-center p-6 rounded-2xl hover:bg-white/5 transition-colors duration-300 group"> | |
| <div class="w-20 h-20 rounded-full overflow-hidden border-2 border-emerald-500/20 mb-5 relative"> | |
| <img src="http://static.photos/people/200x200/11" alt="Chauffeur" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"> | |
| </div> | |
| <h3 class="font-bold text-lg mb-2">Le chauffeur indépendant</h3> | |
| <p class="text-sm text-white/60 italic leading-relaxed">"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-6 rounded-2xl hover:bg-white/5 transition-colors duration-300 group"> | |
| <div class="w-20 h-20 rounded-full overflow-hidden border-2 border-emerald-500/20 mb-5 relative"> | |
| <img src="http://static.photos/people/200x200/22" alt="Client fidèle" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"> | |
| </div> | |
| <h3 class="font-bold text-lg mb-2">Le client fidèle</h3> | |
| <p class="text-sm text-white/60 italic leading-relaxed">"Quand je trouve un excellent chauffeur, je veux pouvoir le retrouver."</p> | |
| </div> | |
| <div class="flex flex-col items-center text-center p-6 rounded-2xl hover:bg-white/5 transition-colors duration-300 group"> | |
| <div class="w-20 h-20 rounded-full overflow-hidden border-2 border-emerald-500/20 mb-5 relative"> | |
| <img src="http://static.photos/people/200x200/33" alt="Professionnel" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"> | |
| </div> | |
| <h3 class="font-bold text-lg mb-2">Le professionnel</h3> | |
| <p class="text-sm text-white/60 italic leading-relaxed">"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-12 scroll-mt-24"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="mb-8 reveal"> | |
| <h2 class="text-3xl font-extrabold mb-3 tracking-tight">Comprendre son activité, c'est déjà gagner plus</h2> | |
| <p class="text-white/60 text-lg">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 glass-card rounded-2xl border border-white/10 p-6 flex flex-col hover:border-emerald-500/30 transition-all active:scale-95 shine reveal"> | |
| <div class="w-12 h-12 rounded-xl bg-emerald-500/10 flex items-center justify-center mb-5 transition-transform group-hover:scale-110 duration-300"> | |
| <i data-lucide="calculator" class="w-6 h-6 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-6 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-semibold transition-colors"> | |
| Calculer <i data-lucide="arrow-right" class="w-4 h-4 transition-transform group-hover:translate-x-1"></i> | |
| </span> | |
| </a> | |
| <a href="simulateur-pertes.html" class="group glass-card rounded-2xl border border-white/10 p-6 flex flex-col hover:border-emerald-500/30 transition-all active:scale-95 shine reveal reveal-delay-1"> | |
| <div class="w-12 h-12 rounded-xl bg-emerald-500/10 flex items-center justify-center mb-5 transition-transform group-hover:scale-110 duration-300"> | |
| <i data-lucide="trending-down" class="w-6 h-6 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-6 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-semibold transition-colors"> | |
| Voir mon estimation <i data-lucide="arrow-right" class="w-4 h-4 transition-transform group-hover:translate-x-1"></i> | |
| </span> | |
| </a> | |
| <a href="objectif-reel.html" class="group glass-card rounded-2xl border border-white/10 p-6 flex flex-col hover:border-emerald-500/30 transition-all active:scale-95 shine reveal reveal-delay-2"> | |
| <div class="w-12 h-12 rounded-xl bg-emerald-500/10 flex items-center justify-center mb-5 transition-transform group-hover:scale-110 duration-300"> | |
| <i data-lucide="target" class="w-6 h-6 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-6 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-semibold transition-colors"> | |
| Calculer <i data-lucide="arrow-right" class="w-4 h-4 transition-transform group-hover:translate-x-1"></i> | |
| </span> | |
| </a> | |
| <a href="voiture-optimale.html" class="group glass-card rounded-2xl border border-white/10 p-6 flex flex-col hover:border-emerald-500/30 transition-all active:scale-95 shine reveal reveal-delay-3"> | |
| <div class="w-12 h-12 rounded-xl bg-emerald-500/10 flex items-center justify-center mb-5 transition-transform group-hover:scale-110 duration-300"> | |
| <i data-lucide="car" class="w-6 h-6 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-6 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-semibold transition-colors"> | |
| Découvrir <i data-lucide="arrow-right" class="w-4 h-4 transition-transform group-hover:translate-x-1"></i> | |
| </span> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- MÉDIA TIE --> | |
| <section class="px-4 py-10 scroll-mt-24"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="flex items-end justify-between mb-8 reveal"> | |
| <div> | |
| <h2 class="text-3xl font-extrabold mb-2 tracking-tight">Le média TIE</h2> | |
| <p class="text-white/60">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-semibold transition-colors group" data-card="future-feature"> | |
| Voir tous les articles <i data-lucide="arrow-right" class="w-4 h-4 transition-transform group-hover:translate-x-1"></i> | |
| </a> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-5"> | |
| <article class="group glass-card rounded-2xl border border-white/10 overflow-hidden hover:border-white/20 transition-all reveal shine"> | |
| <div class="h-48 relative overflow-hidden"> | |
| <img src="http://static.photos/business/640x360/1" alt="Article" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-[#0b0b0f] via-[#0b0b0f]/40 to-transparent"></div> | |
| <div class="absolute top-4 left-4"> | |
| <span class="px-3 py-1.5 rounded-lg bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 text-[10px] font-bold tracking-wider uppercase">Chauffeurs</span> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <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 flex items-center gap-2"> | |
| <i data-lucide="clock" class="w-3 h-3"></i> 4 min de lecture | |
| </p> | |
| </div> | |
| </article> | |
| <article class="group glass-card rounded-2xl border border-white/10 overflow-hidden hover:border-white/20 transition-all reveal reveal-delay-1 shine"> | |
| <div class="h-48 relative overflow-hidden"> | |
| <img src="http://static.photos/cityscape/640x360/2" alt="Article" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-[#0b0b0f] via-[#0b0b0f]/40 to-transparent"></div> | |
| <div class="absolute top-4 left-4"> | |
| <span class="px-3 py-1.5 rounded-lg bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 text-[10px] font-bold tracking-wider uppercase">Chauffeurs</span> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <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 flex items-center gap-2"> | |
| <i data-lucide="clock" class="w-3 h-3"></i> 6 min de lecture | |
| </p> | |
| </div> | |
| </article> | |
| <article class="group glass-card rounded-2xl border border-white/10 overflow-hidden hover:border-white/20 transition-all reveal reveal-delay-2 shine"> | |
| <div class="h-48 relative overflow-hidden"> | |
| <img src="http://static.photos/travel/640x360/3" alt="Article" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-[#0b0b0f] via-[#0b0b0f]/40 to-transparent"></div> | |
| <div class="absolute top-4 left-4"> | |
| <span class="px-3 py-1.5 rounded-lg bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 text-[10px] font-bold tracking-wider uppercase">Clients</span> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <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 flex items-center gap-2"> | |
| <i data-lucide="clock" class="w-3 h-3"></i> 5 min de lecture | |
| </p> | |
| </div> | |
| </article> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- MANIFESTE --> | |
| <section class="px-4 py-12 scroll-mt-24"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="glass-panel rounded-3xl border border-white/10 p-8 lg:p-12 overflow-hidden relative reveal"> | |
| <div class="absolute top-0 right-0 w-64 h-64 bg-emerald-500/5 rounded-full blur-3xl pointer-events-none"></div> | |
| <div class="grid lg:grid-cols-12 gap-10 items-start relative z-10"> | |
| <div class="lg:col-span-4 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-6"> | |
| <i data-lucide="heart" class="w-8 h-8 text-emerald-400"></i> | |
| </div> | |
| <h2 class="text-3xl font-bold tracking-tight leading-tight">Le manifeste TIE</h2> | |
| <p class="text-white/50 mt-3 text-sm">Nos convictions, notre raison d'être.</p> | |
| </div> | |
| <div class="lg:col-span-8"> | |
| <div class="space-y-6"> | |
| <div class="flex items-start gap-4 group"> | |
| <span class="mt-2 w-2 h-2 rounded-full bg-emerald-400 flex-shrink-0 shadow-lg shadow-emerald-400/30 group-hover:scale-125 transition-transform"></span> | |
| <p class="text-white/80 leading-relaxed text-lg">Nous croyons qu'une relation humaine vaut plus qu'un algorithme.</p> | |
| </div> | |
| <div class="flex items-start gap-4 group"> | |
| <span class="mt-2 w-2 h-2 rounded-full bg-emerald-400 flex-shrink-0 shadow-lg shadow-emerald-400/30 group-hover:scale-125 transition-transform"></span> | |
| <p class="text-white/80 leading-relaxed text-lg">Nous croyons qu'un chauffeur mérite de construire sa propre clientèle.</p> | |
| </div> | |
| <div class="flex items-start gap-4 group"> | |
| <span class="mt-2 w-2 h-2 rounded-full bg-emerald-400 flex-shrink-0 shadow-lg shadow-emerald-400/30 group-hover:scale-125 transition-transform"></span> | |
| <p class="text-white/80 leading-relaxed text-lg">Nous croyons qu'un client mérite de retrouver une personne en qui il a confiance.</p> | |
| </div> | |
| <div class="flex items-start gap-4 group"> | |
| <span class="mt-2 w-2 h-2 rounded-full bg-emerald-400 flex-shrink-0 shadow-lg shadow-emerald-400/30 group-hover:scale-125 transition-transform"></span> | |
| <p class="text-white/80 leading-relaxed text-lg">Nous croyons que la fidélité crée plus de valeur que l'intermédiation permanente.</p> | |
| </div> | |
| <div class="flex items-start gap-4 group"> | |
| <span class="mt-2 w-2 h-2 rounded-full bg-emerald-400 flex-shrink-0 shadow-lg shadow-emerald-400/30 group-hover:scale-125 transition-transform"></span> | |
| <p class="text-white/80 leading-relaxed text-lg">Nous croyons que la mobilité de demain sera plus libre, plus humaine et plus équitable.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Final --> | |
| <section class="px-4 py-16"> | |
| <div class="max-w-3xl mx-auto text-center reveal"> | |
| <h2 class="text-3xl lg:text-4xl font-extrabold mb-6 tracking-tight">Prêt à créer des liens qui durent ?</h2> | |
| <p class="text-white/60 text-lg mb-10">Rejoignez la communauté TIE et commencez à construire vos relations de confiance dès aujourd'hui.</p> | |
| <div class="flex flex-col sm:flex-row gap-4 justify-center"> | |
| <a href="chauffeur.html" class="group inline-flex items-center justify-center gap-3 px-8 py-4 bg-gradient-to-r from-emerald-400 to-emerald-500 text-[#0b0b0f] rounded-2xl font-bold text-lg transition-all hover:shadow-lg hover:shadow-emerald-500/20 active:scale-95"> | |
| <i data-lucide="user-plus" class="w-5 h-5"></i> | |
| Espace Chauffeur | |
| </a> | |
| <a href="client.html" class="group inline-flex items-center justify-center gap-3 px-8 py-4 border border-white/20 hover:border-emerald-500/30 hover:bg-white/5 text-white rounded-2xl font-bold text-lg transition-all active:scale-95"> | |
| <i data-lucide="search" class="w-5 h-5"></i> | |
| Espace Client | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- BOTTOM NAVBAR --> | |
| <nav class="fixed bottom-0 inset-x-0 z-50 glass-panel 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="nav-item active flex flex-col items-center gap-1"> | |
| <i data-lucide="home" class="w-5 h-5"></i> | |
| <span class="text-[10px] font-medium">Accueil</span> | |
| </a> | |
| <a href="simulateurs.html" class="nav-item 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="nav-item 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="nav-item 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 | |
| const settingsBtn = document.getElementById('settings-btn'); | |
| if (settingsBtn) { | |
| settingsBtn.addEventListener('click', () => { | |
| window.location.href = '#'; | |
| }); | |
| } | |
| // Scroll Reveal Animation | |
| const observerOptions = { | |
| root: null, | |
| rootMargin: '0px', | |
| threshold: 0.1 | |
| }; | |
| const revealObserver = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.classList.add('active'); | |
| revealObserver.unobserve(entry.target); | |
| } | |
| }); | |
| }, observerOptions); | |
| document.querySelectorAll('.reveal').forEach(el => { | |
| revealObserver.observe(el); | |
| }); | |
| // Mouse tracking for premium cards glow effect | |
| document.querySelectorAll('.premium-card').forEach(card => { | |
| card.addEventListener('mousemove', (e) => { | |
| const rect = card.getBoundingClientRect(); | |
| const x = e.clientX - rect.left; | |
| const y = e.clientY - rect.top; | |
| card.style.setProperty('--mouse-x', `${x}px`); | |
| card.style.setProperty('--mouse-y', `${y}px`); | |
| }); | |
| }); | |
| // Bar chart animation trigger | |
| const barObserver = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| const bars = entry.target.querySelectorAll('.bar-anim'); | |
| bars.forEach((bar, index) => { | |
| bar.style.animationPlayState = 'running'; | |
| }); | |
| barObserver.unobserve(entry.target); | |
| } | |
| }); | |
| }, { threshold: 0.3 }); | |
| const barSection = document.querySelector('.bar-anim')?.closest('section'); | |
| if (barSection) { | |
| barObserver.observe(barSection); | |
| } | |
| // Smooth scroll for nav links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const target = document.querySelector(this.getAttribute('href')); | |
| if (target) { | |
| target.scrollIntoView({ behavior: 'smooth', block: 'start' }); | |
| } | |
| }); | |
| }); | |
| </script> | |
| <script src="https://deepsite.hf.co/deepsite-badge.js"></script> | |
| </body> | |
| </html> |