|
|
<!DOCTYPE html> |
|
|
<html lang="fr"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Taxi du Val de Marne - Service de taxi 24/7</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Poppins', sans-serif; |
|
|
scroll-behavior: smooth; |
|
|
} |
|
|
|
|
|
.hero-gradient { |
|
|
background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%); |
|
|
} |
|
|
|
|
|
.btn-primary { |
|
|
background: linear-gradient(to right, #2563eb, #1e40af); |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.btn-primary:hover { |
|
|
transform: translateY(-3px); |
|
|
box-shadow: 0 10px 20px rgba(37, 99, 235, 0.3); |
|
|
} |
|
|
|
|
|
.feature-card:hover { |
|
|
transform: translateY(-10px); |
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
|
|
} |
|
|
|
|
|
.feature-card { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.testimonial-card { |
|
|
background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%); |
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); |
|
|
} |
|
|
|
|
|
.map-container { |
|
|
height: 400px; |
|
|
border-radius: 12px; |
|
|
overflow: hidden; |
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
|
|
} |
|
|
|
|
|
.floating-button { |
|
|
position: fixed; |
|
|
bottom: 30px; |
|
|
right: 30px; |
|
|
z-index: 50; |
|
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0% { |
|
|
box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.7); |
|
|
} |
|
|
70% { |
|
|
box-shadow: 0 0 0 10px rgba(37, 99, 235, 0); |
|
|
} |
|
|
100% { |
|
|
box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50"> |
|
|
|
|
|
<nav class="bg-white shadow-lg fixed w-full z-40"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex justify-between h-20 items-center"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 flex items-center"> |
|
|
<i class="fas fa-taxi text-blue-600 text-3xl mr-2"></i> |
|
|
<span class="text-xl font-bold text-gray-800">Taxi du Val de Marne</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="hidden md:block"> |
|
|
<div class="ml-10 flex items-baseline space-x-8"> |
|
|
<a href="#home" class="text-blue-600 hover:text-blue-800 px-3 py-2 rounded-md text-sm font-medium">Accueil</a> |
|
|
<a href="#services" class="text-gray-700 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium">Services</a> |
|
|
<a href="#tarifs" class="text-gray-700 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium">Tarifs</a> |
|
|
<a href="#about" class="text-gray-700 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium">À propos</a> |
|
|
<a href="#contact" class="text-gray-700 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium">Contact</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:hidden"> |
|
|
<button id="mobile-menu-button" class="text-gray-700 hover:text-blue-600 focus:outline-none"> |
|
|
<i class="fas fa-bars text-2xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="mobile-menu" class="hidden md:hidden bg-white shadow-lg"> |
|
|
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> |
|
|
<a href="#home" class="block px-3 py-2 rounded-md text-base font-medium text-blue-600">Accueil</a> |
|
|
<a href="#services" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-600">Services</a> |
|
|
<a href="#tarifs" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-600">Tarifs</a> |
|
|
<a href="#about" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-600">À propos</a> |
|
|
<a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-600">Contact</a> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section id="home" class="hero-gradient pt-32 pb-20 px-4 sm:px-6 lg:px-8 text-white"> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
<div class="md:flex items-center justify-between"> |
|
|
<div class="md:w-1/2 mb-12 md:mb-0"> |
|
|
<h1 class="text-4xl md:text-5xl font-bold leading-tight mb-6">Service de taxi professionnel dans le Val de Marne</h1> |
|
|
<p class="text-xl mb-8 opacity-90">Disponible 24h/24 et 7j/7 pour vos déplacements dans tout le département et au-delà.</p> |
|
|
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> |
|
|
<a href="tel:+33123456789" class="btn-primary text-white font-bold py-3 px-8 rounded-full inline-flex items-center justify-center"> |
|
|
<i class="fas fa-phone-alt mr-2"></i> Appelez-nous |
|
|
</a> |
|
|
<a href="#contact" class="bg-white text-blue-600 font-bold py-3 px-8 rounded-full inline-flex items-center justify-center hover:bg-gray-100 transition"> |
|
|
<i class="fas fa-envelope mr-2"></i> Contactez-nous |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2 flex justify-center"> |
|
|
<img src="https://images.unsplash.com/photo-1502877338535-766e1452684a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" |
|
|
alt="Taxi professionnel" |
|
|
class="rounded-lg shadow-2xl max-w-full h-auto md:max-w-md"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="services" class="py-20 bg-white"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl font-bold text-gray-800 mb-4">Nos Services</h2> |
|
|
<p class="text-xl text-gray-600 max-w-3xl mx-auto">Nous proposons une gamme complète de services de transport pour répondre à tous vos besoins.</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="feature-card bg-white p-8 rounded-xl border border-gray-100"> |
|
|
<div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6"> |
|
|
<i class="fas fa-taxi text-blue-600 text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-3">Courses Urbaines</h3> |
|
|
<p class="text-gray-600">Déplacez-vous facilement dans tout le Val de Marne et Paris avec nos chauffeurs professionnels.</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="feature-card bg-white p-8 rounded-xl border border-gray-100"> |
|
|
<div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6"> |
|
|
<i class="fas fa-plane text-blue-600 text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-3">Transferts Aéroport</h3> |
|
|
<p class="text-gray-600">Service fiable pour vos transferts vers les aéroports de Paris (CDG, Orly) et gares.</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="feature-card bg-white p-8 rounded-xl border border-gray-100"> |
|
|
<div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6"> |
|
|
<i class="fas fa-business-time text-blue-600 text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-3">Transport d'Affaires</h3> |
|
|
<p class="text-gray-600">Service haut de gamme pour vos déplacements professionnels avec voitures premium.</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="feature-card bg-white p-8 rounded-xl border border-gray-100"> |
|
|
<div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6"> |
|
|
<i class="fas fa-glass-cheers text-blue-600 text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-3">Événements Spéciaux</h3> |
|
|
<p class="text-gray-600">Mariages, anniversaires, soirées - nous assurons votre transport en toute élégance.</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="feature-card bg-white p-8 rounded-xl border border-gray-100"> |
|
|
<div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6"> |
|
|
<i class="fas fa-wheelchair text-blue-600 text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-3">Taxi PMR</h3> |
|
|
<p class="text-gray-600">Véhicules adaptés pour personnes à mobilité réduite avec chauffeurs formés.</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="feature-card bg-white p-8 rounded-xl border border-gray-100"> |
|
|
<div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6"> |
|
|
<i class="fas fa-calendar-day text-blue-600 text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-3">Réservation 24/7</h3> |
|
|
<p class="text-gray-600">Réservez votre course à tout moment via notre application, site web ou par téléphone.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="tarifs" class="py-20 bg-gray-50"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl font-bold text-gray-800 mb-4">Nos Tarifs</h2> |
|
|
<p class="text-xl text-gray-600 max-w-3xl mx-auto">Des tarifs transparents et compétitifs pour tous vos déplacements.</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md overflow-hidden"> |
|
|
<div class="px-6 py-8"> |
|
|
<div class="text-center"> |
|
|
<h3 class="text-2xl font-bold text-gray-800 mb-2">Standard</h3> |
|
|
<p class="text-gray-600 mb-6">Pour vos déplacements quotidiens</p> |
|
|
<div class="flex justify-center items-baseline mb-6"> |
|
|
<span class="text-4xl font-bold text-blue-600">1,50€</span> |
|
|
<span class="text-gray-500 ml-1">/km</span> |
|
|
</div> |
|
|
<p class="text-gray-500 mb-6">+ 3,50€ prise en charge</p> |
|
|
</div> |
|
|
<ul class="space-y-3 mb-8"> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>Véhicules confortables</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>Chauffeurs professionnels</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>Disponibilité 24/7</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>Paiement CB ou espèces</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
<div class="px-6 pb-8"> |
|
|
<a href="tel:+33123456789" class="block w-full py-3 px-4 text-center bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition">Réserver maintenant</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-lg overflow-hidden transform scale-105 border-2 border-blue-500"> |
|
|
<div class="absolute top-0 right-0 bg-blue-600 text-white text-xs font-bold px-4 py-1 rounded-bl-lg">Populaire</div> |
|
|
<div class="px-6 py-8"> |
|
|
<div class="text-center"> |
|
|
<h3 class="text-2xl font-bold text-gray-800 mb-2">Aéroport</h3> |
|
|
<p class="text-gray-600 mb-6">Transferts vers CDG/Orly</p> |
|
|
<div class="flex justify-center items-baseline mb-6"> |
|
|
<span class="text-4xl font-bold text-blue-600">50€</span> |
|
|
<span class="text-gray-500 ml-1">à partir de</span> |
|
|
</div> |
|
|
<p class="text-gray-500 mb-6">Forfait selon destination</p> |
|
|
</div> |
|
|
<ul class="space-y-3 mb-8"> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>Suivi de vol inclus</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>45 min d'attente gratuite</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>Grands bagages inclus</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>Voiture premium disponible</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
<div class="px-6 pb-8"> |
|
|
<a href="tel:+33123456789" class="block w-full py-3 px-4 text-center bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition">Réserver maintenant</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md overflow-hidden"> |
|
|
<div class="px-6 py-8"> |
|
|
<div class="text-center"> |
|
|
<h3 class="text-2xl font-bold text-gray-800 mb-2">Premium</h3> |
|
|
<p class="text-gray-600 mb-6">Service haut de gamme</p> |
|
|
<div class="flex justify-center items-baseline mb-6"> |
|
|
<span class="text-4xl font-bold text-blue-600">2,50€</span> |
|
|
<span class="text-gray-500 ml-1">/km</span> |
|
|
</div> |
|
|
<p class="text-gray-500 mb-6">+ 5,00€ prise en charge</p> |
|
|
</div> |
|
|
<ul class="space-y-3 mb-8"> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>Véhicules haut de gamme</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>Chauffeurs en tenue</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>Bouteille d'eau offerte</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>Idéal pour événements</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
<div class="px-6 pb-8"> |
|
|
<a href="tel:+33123456789" class="block w-full py-3 px-4 text-center bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition">Réserver maintenant</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-12 bg-blue-50 rounded-xl p-6"> |
|
|
<div class="md:flex items-center"> |
|
|
<div class="md:w-3/4 mb-4 md:mb-0"> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-2">Besoin d'un devis personnalisé ?</h3> |
|
|
<p class="text-gray-600">Contactez-nous pour obtenir un tarif précis en fonction de votre trajet et besoins spécifiques.</p> |
|
|
</div> |
|
|
<div class="md:w-1/4 text-right"> |
|
|
<a href="#contact" class="inline-block bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-6 rounded-lg transition">Demander un devis</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="about" class="py-20 bg-white"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="md:flex items-center"> |
|
|
<div class="md:w-1/2 mb-12 md:mb-0"> |
|
|
<img src="https://images.unsplash.com/photo-1601584115197-04eaa02e6f66?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" |
|
|
alt="Chauffeur professionnel" |
|
|
class="rounded-lg shadow-xl w-full max-w-lg"> |
|
|
</div> |
|
|
<div class="md:w-1/2 md:pl-12"> |
|
|
<h2 class="text-3xl font-bold text-gray-800 mb-6">À propos de Taxi du Val de Marne</h2> |
|
|
<p class="text-gray-600 mb-6">Fondé en 2010, Taxi du Val de Marne est devenu un acteur majeur du transport de personnes dans le département. Notre engagement : vous offrir un service fiable, ponctuel et professionnel.</p> |
|
|
|
|
|
<div class="space-y-6"> |
|
|
<div class="flex"> |
|
|
<div class="flex-shrink-0"> |
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-100 text-blue-600"> |
|
|
<i class="fas fa-medal text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h3 class="text-lg font-medium text-gray-800">Expérience et Professionnalisme</h3> |
|
|
<p class="mt-1 text-gray-600">Nos chauffeurs sont sélectionnés avec soin et formés régulièrement pour vous garantir un service irréprochable.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex"> |
|
|
<div class="flex-shrink-0"> |
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-100 text-blue-600"> |
|
|
<i class="fas fa-shield-alt text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h3 class="text-lg font-medium text-gray-800">Sécurité avant tout</h3> |
|
|
<p class="mt-1 text-gray-600">Nos véhicules sont contrôlés quotidiennement et assurés tous risques pour votre tranquillité d'esprit.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex"> |
|
|
<div class="flex-shrink-0"> |
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-100 text-blue-600"> |
|
|
<i class="fas fa-heart text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h3 class="text-lg font-medium text-gray-800">Satisfaction client</h3> |
|
|
<p class="mt-1 text-gray-600">Nous mettons tout en œuvre pour répondre à vos attentes avec courtoisie et efficacité.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 bg-gray-50"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl font-bold text-gray-800 mb-4">Ce que disent nos clients</h2> |
|
|
<p class="text-xl text-gray-600 max-w-3xl mx-auto">Découvrez les témoignages de nos clients satisfaits.</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="testimonial-card p-8 rounded-xl"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="flex-shrink-0"> |
|
|
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="Client"> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<div class="text-lg font-medium text-gray-800">Marie D.</div> |
|
|
<div class="text-blue-600"> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-600 italic">"Service impeccable ! Mon chauffeur était à l'heure, très courtois et la voiture était propre et confortable. Je recommande vivement !"</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="testimonial-card p-8 rounded-xl"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="flex-shrink-0"> |
|
|
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Client"> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<div class="text-lg font-medium text-gray-800">Pierre L.</div> |
|
|
<div class="text-blue-600"> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-600 italic">"J'utilise régulièrement Taxi du Val de Marne pour mes déplacements professionnels. Toujours ponctuel et très professionnel. Un service de qualité !"</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="testimonial-card p-8 rounded-xl"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="flex-shrink-0"> |
|
|
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Client"> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<div class="text-lg font-medium text-gray-800">Sophie R.</div> |
|
|
<div class="text-blue-600"> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star-half-alt"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-600 italic">"Transfert aéroport parfait. Le chauffeur m'a attendu alors que mon vol avait du retard. Voiture très confortable. Je referai appel à eux sans hésiter."</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="contact" class="py-20 bg-white"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl font-bold text-gray-800 mb-4">Contactez-nous</h2> |
|
|
<p class="text-xl text-gray-600 max-w-3xl mx-auto">Nous sommes à votre disposition pour répondre à toutes vos questions.</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12"> |
|
|
|
|
|
<div class="bg-gray-50 p-8 rounded-xl shadow-md"> |
|
|
<h3 class="text-2xl font-bold text-gray-800 mb-6">Envoyez-nous un message</h3> |
|
|
<form id="contactForm" class="space-y-6"> |
|
|
<div> |
|
|
<label for="name" class="block text-sm font-medium text-gray-700 mb-1">Nom complet</label> |
|
|
<input type="text" id="name" name="name" required class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label> |
|
|
<input type="email" id="email" name="email" required class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="phone" class="block text-sm font-medium text-gray-700 mb-1">Téléphone</label> |
|
|
<input type="tel" id="phone" name="phone" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="subject" class="block text-sm font-medium text-gray-700 mb-1">Sujet</label> |
|
|
<select id="subject" name="subject" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> |
|
|
<option value="reservation">Réservation</option> |
|
|
<option value="information">Demande d'information</option> |
|
|
<option value="quote">Demande de devis</option> |
|
|
<option value="other">Autre</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label for="message" class="block text-sm font-medium text-gray-700 mb-1">Message</label> |
|
|
<textarea id="message" name="message" rows="4" required class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea> |
|
|
</div> |
|
|
<div> |
|
|
<button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-6 rounded-lg transition">Envoyer le message</button> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<div class="bg-blue-600 text-white p-8 rounded-xl mb-8"> |
|
|
<h3 class="text-2xl font-bold mb-4">Informations de contact</h3> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 mt-1"> |
|
|
<i class="fas fa-map-marker-alt text-xl"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<p class="font-medium">Adresse :</p> |
|
|
<p>12 Avenue de la République, 94000 Créteil</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 mt-1"> |
|
|
<i class="fas fa-phone-alt text-xl"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<p class="font-medium">Téléphone :</p> |
|
|
<p><a href="tel:+33123456789" class="hover:underline">01 23 45 67 89</a></p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 mt-1"> |
|
|
<i class="fas fa-envelope text-xl"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<p class="font-medium">Email :</p> |
|
|
<p><a href="mailto:[email protected]" class="hover:underline">[email protected]</a></p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 mt-1"> |
|
|
<i class="fas fa-clock text-xl"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<p class="font-medium">Horaires :</p> |
|
|
<p>24h/24, 7j/7</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="map-container"> |
|
|
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2628.091845429141!2d2.455376315672127!3d48.79051417928264!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e673d474a6f3a9%3A0x10b82c3688b2120!2sAvenue%20de%20la%20R%C3%A9publique%2C%2094000%20Cr%C3%A9teil!5e0!3m2!1sfr!2sfr!4v1686752345678!5m2!1sfr!2sfr" |
|
|
width="100%" |
|
|
height="100%" |
|
|
style="border:0;" |
|
|
allowfullscreen="" |
|
|
loading="lazy" |
|
|
referrerpolicy="no-referrer-when-downgrade"></iframe> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-blue-600 text-white"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> |
|
|
<h2 class="text-3xl font-bold mb-6">Prêt à réserver votre course ?</h2> |
|
|
<p class="text-xl mb-8 max-w-3xl mx-auto">Téléchargez notre application mobile ou appelez-nous directement pour réserver votre taxi en quelques minutes.</p> |
|
|
<div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-6"> |
|
|
<a href="#" class="bg-white text-blue-600 font-bold py-3 px-8 rounded-full inline-flex items-center justify-center hover:bg-gray-100 transition"> |
|
|
<i class="fab fa-apple text-2xl mr-3"></i> |
|
|
<div class="text-left"> |
|
|
<div class="text-xs">Télécharger sur</div> |
|
|
<div class="text-lg">App Store</div> |
|
|
</div> |
|
|
</a> |
|
|
<a href="#" class="bg-white text-blue-600 font-bold py-3 px-8 rounded-full inline-flex items-center justify-center hover:bg-gray-100 transition"> |
|
|
<i class="fab fa-google-play text-2xl mr-3"></i> |
|
|
<div class="text-left"> |
|
|
<div class="text-xs">Disponible sur</div> |
|
|
<div class="text-lg">Google Play</div> |
|
|
</div> |
|
|
</a> |
|
|
<a href="tel:+33123456789" class="bg-blue-800 hover:bg-blue-900 font-bold py-3 px-8 rounded-full inline-flex items-center justify-center transition"> |
|
|
<i class="fas fa-phone-alt mr-2"></i> Appelez-nous |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-900 text-white pt-16 pb-8"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-12"> |
|
|
<div> |
|
|
<div class="flex items-center mb-6"> |
|
|
<i class="fas fa-taxi text-blue-400 text-3xl mr-2"></i> |
|
|
<span class="text-xl font-bold">Taxi du Val de Marne</span> |
|
|
</div> |
|
|
<p class="text-gray-400 mb-6">Service de taxi professionnel disponible 24h/24 dans tout le Val de Marne et ses alentours.</p> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition"> |
|
|
<i class="fab fa-facebook-f text-xl"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition"> |
|
|
<i class="fab fa-twitter text-xl"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition"> |
|
|
<i class="fab fa-instagram text-xl"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition"> |
|
|
<i class="fab fa-linkedin-in text-xl"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-lg font-bold mb-6">Liens utiles</h3> |
|
|
<ul class="space-y-3"> |
|
|
<li><a href="#home" class="text-gray-400 hover:text-white transition">Accueil</a></li> |
|
|
<li><a href="#services" class="text-gray-400 hover:text-white transition">Services</a></li> |
|
|
<li><a href="#tarifs" class="text-gray-400 hover:text-white transition">Tarifs</a></li> |
|
|
<li><a href="#about" class="text-gray-400 hover:text-white transition">À propos</a></li> |
|
|
<li><a href="#contact" class="text-gray-400 hover:text-white transition">Contact</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-lg font-bold mb-6">Services</h3> |
|
|
<ul class="space-y-3"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Courses urbaines</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Transferts aéroport</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Transport d'affaires</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Événements spéciaux</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Taxi PMR</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-lg font-bold mb-6">Newsletter</h3> |
|
|
<p class="text-gray-400 mb-4">Abonnez-vous à notre newsletter pour recevoir nos offres spéciales.</p> |
|
|
<form class="flex"> |
|
|
<input type="email" placeholder="Votre email" class="px-4 py-2 rounded-l-lg focus:outline-none text-gray-800 w-full"> |
|
|
<button type="submit" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-r-lg transition"> |
|
|
<i class="fas fa-paper-plane"></i> |
|
|
</button> |
|
|
</form> |
|
|
<p class="text-xs text-gray-500 mt-2">Nous ne partagerons jamais votre email.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> |
|
|
<p class="text-gray-400 mb-4 md:mb-0">© 2023 Taxi du Val de Marne. Tous droits réservés.</p> |
|
|
<div class="flex space-x-6"> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition text-sm">Mentions légales</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition text-sm">Politique de confidentialité</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition text-sm">CGV</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
|
|
|
<a href="tel:+33123456789" class="floating-button bg-green-500 hover:bg-green-600 text-white rounded-full w-16 h-16 flex items-center justify-center transition"> |
|
|
<i class="fas fa-phone-alt text-2xl"></i> |
|
|
</a> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.getElementById('mobile-menu-button').addEventListener('click', function() { |
|
|
const menu = document.getElementById('mobile-menu'); |
|
|
menu.classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function (e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
const targetId = this.getAttribute('href'); |
|
|
if (targetId === '#') return; |
|
|
|
|
|
const targetElement = document.querySelector(targetId); |
|
|
if (targetElement) { |
|
|
const headerOffset = 100; |
|
|
const elementPosition = targetElement.getBoundingClientRect().top; |
|
|
const offsetPosition = elementPosition + window.pageYOffset - headerOffset; |
|
|
|
|
|
window.scrollTo({ |
|
|
top: offsetPosition, |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
|
|
|
|
|
|
const mobileMenu = document.getElementById('mobile-menu'); |
|
|
mobileMenu.classList.add('hidden'); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('contactForm').addEventListener('submit', function(e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
|
|
|
|
|
|
alert('Merci pour votre message ! Nous vous contacterons rapidement.'); |
|
|
|
|
|
|
|
|
this.reset(); |
|
|
}); |
|
|
|
|
|
|
|
|
window.addEventListener('scroll', function() { |
|
|
const scrollToTopBtn = document.getElementById('scrollToTopBtn'); |
|
|
if (window.pageYOffset > 300) { |
|
|
scrollToTopBtn?.classList.remove('hidden'); |
|
|
} else { |
|
|
scrollToTopBtn?.classList.add('hidden'); |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Adamchab/taxi94" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
