Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>TIE - Transformez une bonne course en relation qui dure</title> | |
| <script src="https://cdn.tailwindcss.com"></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@400;500;600&display=swap" rel="stylesheet"> | |
| <style> | |
| body { | |
| font-family: 'Inter', system-ui, sans-serif; | |
| background-color: #0a0a0a; | |
| color: #f5f5f5; | |
| padding-bottom: 80px; | |
| } | |
| .scrollbar-hide::-webkit-scrollbar { | |
| display: none; | |
| } | |
| .scrollbar-hide { | |
| -ms-overflow-style: none; | |
| scrollbar-width: none; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-neutral-950 text-neutral-100 antialiased"> | |
| <!-- Header --> | |
| <header class="sticky top-0 z-50 backdrop-blur-md bg-neutral-950/70 border-b border-neutral-900"> | |
| <div class="max-w-3xl mx-auto px-5 h-14 flex items-center justify-between"> | |
| <div class="text-lg font-semibold tracking-tight text-neutral-100"> | |
| TIE | |
| </div> | |
| <div class="flex items-center gap-4"> | |
| <button class="text-sm text-neutral-300 hover:text-white transition-colors"> | |
| Connexion | |
| </button> | |
| <button class="text-sm text-neutral-300 hover:text-white transition-colors"> | |
| Menu | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="max-w-3xl mx-auto px-5 py-8"> | |
| <!-- Hero Section --> | |
| <section class="flex flex-col items-center text-center mb-8"> | |
| <span class="inline-flex px-3 py-1.5 rounded-full border border-neutral-800 bg-neutral-900 text-xs text-neutral-400 mb-5"> | |
| Relation directe chauffeur ↔ client privé | |
| </span> | |
| <h1 class="text-3xl font-semibold text-neutral-100 leading-tight tracking-tight mb-3"> | |
| Transformez une bonne course en relation qui dure. | |
| </h1> | |
| <p class="text-neutral-400 text-sm text-center max-w-md mb-10"> | |
| TIE permet aux chauffeurs VTC de garder leurs meilleurs clients et aux clients privés de retrouver leur chauffeur de confiance. | |
| </p> | |
| </section> | |
| <!-- Section 1: Je suis chauffeur VTC --> | |
| <section class="mb-8"> | |
| <h2 class="text-xl font-semibold text-neutral-100 mb-4"> | |
| Je suis chauffeur VTC | |
| </h2> | |
| <div class="flex overflow-x-auto gap-4 pb-2 scrollbar-hide"> | |
| <!-- Card 1 --> | |
| <div class="min-w-[220px] bg-neutral-900 rounded-2xl border border-neutral-800 p-5 shadow-sm hover:border-emerald-500 hover:bg-neutral-900 transition cursor-pointer"> | |
| <div class="flex flex-col gap-3 h-full"> | |
| <div class="w-10 h-10 rounded-lg bg-emerald-500/10 flex items-center justify-center"> | |
| <i data-lucide="car" class="w-5 h-5 text-emerald-400"></i> | |
| </div> | |
| <div class="flex flex-col gap-1 flex-1"> | |
| <h3 class="text-base font-medium text-neutral-100">Créer mon espace chauffeur</h3> | |
| <p class="text-sm text-neutral-400">Commencer à utiliser TIE pour garder vos clients.</p> | |
| </div> | |
| <span class="text-sm font-medium text-emerald-400 mt-1">Accéder</span> | |
| </div> | |
| </div> | |
| <!-- Card 2 --> | |
| <div class="min-w-[220px] bg-neutral-900 rounded-2xl border border-neutral-800 p-5 shadow-sm hover:border-emerald-500 hover:bg-neutral-900 transition cursor-pointer"> | |
| <div class="flex flex-col gap-3 h-full"> | |
| <div class="w-10 h-10 rounded-lg bg-emerald-500/10 flex items-center justify-center"> | |
| <i data-lucide="users" class="w-5 h-5 text-emerald-400"></i> | |
| </div> | |
| <div class="flex flex-col gap-1 flex-1"> | |
| <h3 class="text-base font-medium text-neutral-100">Garder mes meilleurs clients</h3> | |
| <p class="text-sm text-neutral-400">Transformez vos bonnes courses en relation durable.</p> | |
| </div> | |
| <span class="text-sm font-medium text-emerald-400 mt-1">Découvrir</span> | |
| </div> | |
| </div> | |
| <!-- Card 3 --> | |
| <div class="min-w-[220px] bg-neutral-900 rounded-2xl border border-neutral-800 p-5 shadow-sm hover:border-emerald-500 hover:bg-neutral-900 transition cursor-pointer"> | |
| <div class="flex flex-col gap-3 h-full"> | |
| <div class="w-10 h-10 rounded-lg bg-emerald-500/10 flex items-center justify-center"> | |
| <i data-lucide="shield" class="w-5 h-5 text-emerald-400"></i> | |
| </div> | |
| <div class="flex flex-col gap-1 flex-1"> | |
| <h3 class="text-base font-medium text-neutral-100">Sans commission</h3> | |
| <p class="text-sm text-neutral-400">Travaillez directement avec vos clients privés.</p> | |
| </div> | |
| <span class="text-sm font-medium text-emerald-400 mt-1">Voir les avantages</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Section 2: Je suis client privé --> | |
| <section class="mb-8"> | |
| <h2 class="text-xl font-semibold text-neutral-100 mb-4"> | |
| Je suis client privé | |
| </h2> | |
| <div class="flex overflow-x-auto gap-4 pb-2 scrollbar-hide"> | |
| <!-- Card 1 --> | |
| <div class="min-w-[220px] bg-neutral-900 rounded-2xl border border-neutral-800 p-5 shadow-sm hover:border-emerald-500 hover:bg-neutral-900 transition cursor-pointer"> | |
| <div class="flex flex-col gap-3 h-full"> | |
| <div class="w-10 h-10 rounded-lg bg-emerald-500/10 flex items-center justify-center"> | |
| <i data-lucide="map-pin" class="w-5 h-5 text-emerald-400"></i> | |
| </div> | |
| <div class="flex flex-col gap-1 flex-1"> | |
| <h3 class="text-base font-medium text-neutral-100">Réserver mon chauffeur</h3> | |
| <p class="text-sm text-neutral-400">Envoyez une demande directement à votre chauffeur.</p> | |
| </div> | |
| <span class="text-sm font-medium text-emerald-400 mt-1">Réserver</span> | |
| </div> | |
| </div> | |
| <!-- Card 2 --> | |
| <div class="min-w-[220px] bg-neutral-900 rounded-2xl border border-neutral-800 p-5 shadow-sm hover:border-emerald-500 hover:bg-neutral-900 transition cursor-pointer"> | |
| <div class="flex flex-col gap-3 h-full"> | |
| <div class="w-10 h-10 rounded-lg bg-emerald-500/10 flex items-center justify-center"> | |
| <i data-lucide="star" class="w-5 h-5 text-emerald-400"></i> | |
| </div> | |
| <div class="flex flex-col gap-1 flex-1"> | |
| <h3 class="text-base font-medium text-neutral-100">Retrouver mon chauffeur</h3> | |
| <p class="text-sm text-neutral-400">Gardez le contact avec votre chauffeur de confiance.</p> | |
| </div> | |
| <span class="text-sm font-medium text-emerald-400 mt-1">Accéder</span> | |
| </div> | |
| </div> | |
| <!-- Card 3 --> | |
| <div class="min-w-[220px] bg-neutral-900 rounded-2xl border border-neutral-800 p-5 shadow-sm hover:border-emerald-500 hover:bg-neutral-900 transition cursor-pointer"> | |
| <div class="flex flex-col gap-3 h-full"> | |
| <div class="w-10 h-10 rounded-lg bg-emerald-500/10 flex items-center justify-center"> | |
| <i data-lucide="repeat" class="w-5 h-5 text-emerald-400"></i> | |
| </div> | |
| <div class="flex flex-col gap-1 flex-1"> | |
| <h3 class="text-base font-medium text-neutral-100">Reprogrammer un trajet</h3> | |
| <p class="text-sm text-neutral-400">Replanifiez vos trajets réguliers facilement.</p> | |
| </div> | |
| <span class="text-sm font-medium text-emerald-400 mt-1">Voir comment</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Trust Section --> | |
| <section class="mt-10"> | |
| <div class="flex flex-wrap justify-center gap-x-6 gap-y-3"> | |
| <div class="flex items-center gap-2 text-xs text-neutral-500"> | |
| <i data-lucide="user-check" class="w-3.5 h-3.5"></i> | |
| <span>Chauffeurs identifiés</span> | |
| </div> | |
| <div class="flex items-center gap-2 text-xs text-neutral-500"> | |
| <i data-lucide="calendar" class="w-3.5 h-3.5"></i> | |
| <span>Réservation simple</span> | |
| </div> | |
| <div class="flex items-center gap-2 text-xs text-neutral-500"> | |
| <i data-lucide="lock" class="w-3.5 h-3.5"></i> | |
| <span>Données sécurisées</span> | |
| </div> | |
| <div class="flex items-center gap-2 text-xs text-neutral-500"> | |
| <i data-lucide="handshake" class="w-3.5 h-3.5"></i> | |
| <span>Relation directe</span> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Bottom Navigation --> | |
| <nav class="fixed bottom-0 left-0 right-0 backdrop-blur-xl bg-neutral-950/70 border-t border-neutral-900 py-3 z-50"> | |
| <div class="flex justify-around items-center"> | |
| <button class="flex flex-col items-center gap-1 text-emerald-400"> | |
| <i data-lucide="home" class="w-5 h-5"></i> | |
| <span class="text-xs">Accueil</span> | |
| </button> | |
| <button class="flex flex-col items-center gap-1 text-neutral-500 hover:text-neutral-300 transition-colors"> | |
| <i data-lucide="car" class="w-5 h-5"></i> | |
| <span class="text-xs">Chauffeur</span> | |
| </button> | |
| <button class="flex flex-col items-center gap-1 text-neutral-500 hover:text-neutral-300 transition-colors"> | |
| <i data-lucide="user" class="w-5 h-5"></i> | |
| <span class="text-xs">Client</span> | |
| </button> | |
| <button class="flex flex-col items-center gap-1 text-neutral-500 hover:text-neutral-300 transition-colors"> | |
| <i data-lucide="log-in" class="w-5 h-5"></i> | |
| <span class="text-xs">Connexion</span> | |
| </button> | |
| </div> | |
| </nav> | |
| <script src="https://unpkg.com/lucide@latest"></script> | |
| <script> | |
| lucide.createIcons(); | |
| </script> | |
| <script src="https://deepsite.hf.co/deepsite-badge.js"></script> | |
| </body> | |
| </html> |