| <!DOCTYPE html> |
| <html lang="fr"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Simulation Conduite Camion - Nouvelle Expérience</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'); |
| |
| :root { |
| --primary: #3b82f6; |
| --secondary: #1e40af; |
| --dark: #1e293b; |
| --light: #f8fafc; |
| } |
| |
| body { |
| font-family: 'Poppins', sans-serif; |
| margin: 0; |
| padding: 0; |
| background-color: var(--dark); |
| color: var(--light); |
| overflow-x: hidden; |
| } |
| |
| |
| @keyframes fadeIn { |
| from { opacity: 0; transform: translateY(20px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
| |
| .fade-in { |
| animation: fadeIn 0.8s ease-out forwards; |
| } |
| |
| |
| .neon-btn { |
| position: relative; |
| display: inline-block; |
| padding: 12px 30px; |
| color: var(--primary); |
| text-transform: uppercase; |
| letter-spacing: 2px; |
| font-weight: 600; |
| text-decoration: none; |
| overflow: hidden; |
| transition: 0.5s; |
| border: 2px solid var(--primary); |
| border-radius: 8px; |
| } |
| |
| .neon-btn:hover { |
| background: var(--primary); |
| color: var(--light); |
| box-shadow: 0 0 10px var(--primary), |
| 0 0 20px var(--primary), |
| 0 0 40px var(--primary); |
| } |
| |
| |
| .gradient-bg { |
| background: linear-gradient(-45deg, #1e3a8a, #1e40af, #3b82f6, #60a5fa); |
| background-size: 400% 400%; |
| animation: gradient 15s ease infinite; |
| } |
| |
| @keyframes gradient { |
| 0% { background-position: 0% 50%; } |
| 50% { background-position: 100% 50%; } |
| 100% { background-position: 0% 50%; } |
| } |
| |
| |
| .card-3d { |
| transform-style: preserve-3d; |
| transform: perspective(1000px); |
| transition: all 0.5s ease; |
| } |
| |
| .card-3d:hover { |
| transform: perspective(1000px) rotateY(10deg) rotateX(5deg) translateY(-10px); |
| box-shadow: 0 20px 40px rgba(0,0,0,0.3); |
| } |
| |
| |
| .hero-section { |
| height: 100vh; |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .hero-video { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| object-fit: cover; |
| z-index: -1; |
| opacity: 0.7; |
| } |
| |
| |
| .nav-link { |
| position: relative; |
| } |
| |
| .nav-link::after { |
| content: ''; |
| position: absolute; |
| width: 0; |
| height: 2px; |
| bottom: -5px; |
| left: 0; |
| background-color: var(--primary); |
| transition: width 0.3s ease; |
| } |
| |
| .nav-link:hover::after { |
| width: 100%; |
| } |
| |
| |
| .feature-icon { |
| font-size: 2.5rem; |
| color: var(--primary); |
| margin-bottom: 1rem; |
| transition: all 0.3s ease; |
| } |
| |
| .feature-card:hover .feature-icon { |
| transform: scale(1.2) translateY(-5px); |
| } |
| |
| |
| .parallax { |
| background-attachment: fixed; |
| background-position: center; |
| background-repeat: no-repeat; |
| background-size: cover; |
| } |
| |
| |
| .form-input { |
| background: rgba(255,255,255,0.1); |
| border: none; |
| border-bottom: 2px solid var(--primary); |
| color: white; |
| transition: all 0.3s ease; |
| } |
| |
| .form-input:focus { |
| background: rgba(255,255,255,0.2); |
| outline: none; |
| box-shadow: 0 5px 15px rgba(59, 130, 246, 0.3); |
| } |
| |
| |
| .loader { |
| border: 5px solid rgba(255,255,255,0.1); |
| border-top: 5px solid var(--primary); |
| border-radius: 50%; |
| width: 50px; |
| height: 50px; |
| animation: spin 1s linear infinite; |
| } |
| |
| @keyframes spin { |
| 0% { transform: rotate(0deg); } |
| 100% { transform: rotate(360deg); } |
| } |
| </style> |
| </head> |
| <body class="text-gray-100"> |
| |
| <nav class="fixed w-full z-50 bg-gray-900/80 backdrop-blur-md"> |
| <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-shrink-0 flex items-center"> |
| <i class="fas fa-truck-moving text-3xl text-blue-400 mr-2"></i> |
| <span class="text-xl font-bold text-white">TRUCK<span class="text-blue-400">SIM</span></span> |
| </div> |
| |
| |
| <div class="hidden md:flex space-x-8"> |
| <a href="#" class="nav-link text-white hover:text-blue-400 transition">Accueil</a> |
| <a href="#features" class="nav-link text-white hover:text-blue-400 transition">Fonctionnalités</a> |
| <a href="#simulator" class="nav-link text-white hover:text-blue-400 transition">Simulateur</a> |
| <a href="#gallery" class="nav-link text-white hover:text-blue-400 transition">Galerie</a> |
| <a href="#contact" class="nav-link text-white hover:text-blue-400 transition">Contact</a> |
| </div> |
| |
| |
| <div class="hidden md:block"> |
| <a href="#" class="neon-btn px-6 py-2 rounded-full font-medium"> |
| <i class="fas fa-sign-in-alt mr-2"></i>Connexion |
| </a> |
| </div> |
| |
| |
| <div class="md:hidden"> |
| <button id="mobile-menu-button" class="text-white focus:outline-none"> |
| <i class="fas fa-bars text-2xl"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div id="mobile-menu" class="hidden md:hidden bg-gray-800/95"> |
| <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> |
| <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-gray-700">Accueil</a> |
| <a href="#features" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-gray-700">Fonctionnalités</a> |
| <a href="#simulator" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-gray-700">Simulateur</a> |
| <a href="#gallery" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-gray-700">Galerie</a> |
| <a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-gray-700">Contact</a> |
| <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-blue-400 hover:bg-gray-700">Connexion</a> |
| </div> |
| </div> |
| </nav> |
| |
| |
| <section class="hero-section flex items-center justify-center text-center"> |
| <video autoplay muted loop class="hero-video"> |
| <source src="https://assets.mixkit.co/videos/preview/mixkit-truck-on-a-country-road-21803-large.mp4" type="video/mp4"> |
| </video> |
| |
| <div class="container mx-auto px-6 z-10 fade-in"> |
| <h1 class="text-5xl md:text-7xl font-bold mb-6 text-white"> |
| <span class="text-blue-400">SIMULATION</span> DE CONDUITE CAMION |
| </h1> |
| <p class="text-xl md:text-2xl mb-10 max-w-3xl mx-auto"> |
| Découvrez l'expérience ultime de conduite de poids lourds avec notre simulateur réaliste. |
| </p> |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> |
| <a href="#simulator" class="neon-btn px-8 py-3 text-lg font-semibold"> |
| <i class="fas fa-play mr-2"></i>Essayer maintenant |
| </a> |
| <a href="#features" class="bg-gray-800 hover:bg-gray-700 px-8 py-3 text-lg font-semibold rounded-lg border border-gray-600 transition"> |
| <i class="fas fa-info-circle mr-2"></i>En savoir plus |
| </a> |
| </div> |
| </div> |
| |
| <div class="absolute bottom-10 left-0 right-0 flex justify-center"> |
| <a href="#features" class="text-white animate-bounce"> |
| <i class="fas fa-chevron-down text-3xl"></i> |
| </a> |
| </div> |
| </section> |
| |
| |
| <section id="features" class="py-20 bg-gradient-to-b from-gray-900 to-gray-800"> |
| <div class="container mx-auto px-6"> |
| <div class="text-center mb-16 fade-in"> |
| <h2 class="text-4xl font-bold mb-4"> |
| <span class="text-blue-400">Fonctionnalités</span> Exceptionnelles |
| </h2> |
| <p class="text-xl text-gray-300 max-w-3xl mx-auto"> |
| Notre simulateur offre une expérience de conduite ultra-réaliste avec des fonctionnalités uniques. |
| </p> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10"> |
| |
| <div class="feature-card bg-gray-800/50 p-8 rounded-xl border border-gray-700 hover:border-blue-400 transition card-3d fade-in"> |
| <div class="feature-icon"> |
| <i class="fas fa-tachometer-alt"></i> |
| </div> |
| <h3 class="text-2xl font-bold mb-3">Tableau de bord réaliste</h3> |
| <p class="text-gray-300"> |
| Un tableau de bord complet avec toutes les jauges et indicateurs d'un vrai camion, entièrement interactif. |
| </p> |
| </div> |
| |
| |
| <div class="feature-card bg-gray-800/50 p-8 rounded-xl border border-gray-700 hover:border-blue-400 transition card-3d fade-in" style="animation-delay: 0.2s;"> |
| <div class="feature-icon"> |
| <i class="fas fa-map-marked-alt"></i> |
| </div> |
| <h3 class="text-2xl font-bold mb-3">Environnements variés</h3> |
| <p class="text-gray-300"> |
| Conduisez à travers différents paysages : villes, montagnes, déserts et plus encore. |
| </p> |
| </div> |
| |
| |
| <div class="feature-card bg-gray-800/50 p-8 rounded-xl border border-gray-700 hover:border-blue-400 transition card-3d fade-in" style="animation-delay: 0.4s;"> |
| <div class="feature-icon"> |
| <i class="fas fa-cloud-sun-rain"></i> |
| </div> |
| <h3 class="text-2xl font-bold mb-3">Conditions météo</h3> |
| <p class="text-gray-300"> |
| Expérimentez différentes conditions météorologiques qui affectent la conduite. |
| </p> |
| </div> |
| |
| |
| <div class="feature-card bg-gray-800/50 p-8 rounded-xl border border-gray-700 hover:border-blue-400 transition card-3d fade-in" style="animation-delay: 0.6s;"> |
| <div class="feature-icon"> |
| <i class="fas fa-cogs"></i> |
| </div> |
| <h3 class="text-2xl font-bold mb-3">Réglages avancés</h3> |
| <p class="text-gray-300"> |
| Personnalisez votre expérience avec des réglages moteur, transmission et plus. |
| </p> |
| </div> |
| |
| |
| <div class="feature-card bg-gray-800/50 p-8 rounded-xl border border-gray-700 hover:border-blue-400 transition card-3d fade-in" style="animation-delay: 0.8s;"> |
| <div class="feature-icon"> |
| <i class="fas fa-vr-cardboard"></i> |
| </div> |
| <h3 class="text-2xl font-bold mb-3">Support VR</h3> |
| <p class="text-gray-300"> |
| Compatible avec les casques VR pour une immersion totale (optionnel). |
| </p> |
| </div> |
| |
| |
| <div class="feature-card bg-gray-800/50 p-8 rounded-xl border border-gray-700 hover:border-blue-400 transition card-3d fade-in" style="animation-delay: 1s;"> |
| <div class="feature-icon"> |
| <i class="fas fa-trophy"></i> |
| </div> |
| <h3 class="text-2xl font-bold mb-3">Mode carrière</h3> |
| <p class="text-gray-300"> |
| Progressez dans une carrière de chauffeur avec missions et défis. |
| </p> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section class="parallax h-96 flex items-center justify-center" style="background-image: url('https://images.unsplash.com/photo-1544620347-c4fd4a3d5957?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');"> |
| <div class="bg-black/60 w-full h-full flex items-center justify-center"> |
| <div class="text-center px-6"> |
| <h2 class="text-4xl font-bold mb-6 text-white"> |
| <span class="text-blue-400">Immersion</span> Totale |
| </h2> |
| <p class="text-xl text-gray-300 max-w-3xl mx-auto"> |
| Une expérience de conduite qui vous transporte dans un univers réaliste avec des graphismes de haute qualité. |
| </p> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section id="simulator" class="py-20 bg-gray-900"> |
| <div class="container mx-auto px-6"> |
| <div class="text-center mb-16 fade-in"> |
| <h2 class="text-4xl font-bold mb-4"> |
| Essayez notre <span class="text-blue-400">Simulateur</span> |
| </h2> |
| <p class="text-xl text-gray-300 max-w-3xl mx-auto"> |
| Testez une version démo de notre simulateur directement depuis votre navigateur. |
| </p> |
| </div> |
| |
| <div class="bg-gray-800/50 rounded-xl overflow-hidden border border-gray-700 max-w-6xl mx-auto fade-in"> |
| |
| <div class="bg-gray-800 px-6 py-3 flex items-center justify-between border-b border-gray-700"> |
| <div class="flex items-center space-x-4"> |
| <div class="w-3 h-3 rounded-full bg-red-500"></div> |
| <div class="w-3 h-3 rounded-full bg-yellow-500"></div> |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> |
| </div> |
| <div class="text-gray-400 text-sm"> |
| Simulateur de conduite - Mode Démo |
| </div> |
| <div class="w-8"></div> |
| </div> |
| |
| |
| <div class="p-6 md:p-10"> |
| <div class="aspect-w-16 aspect-h-9 bg-black rounded-lg overflow-hidden relative"> |
| |
| <div class="w-full h-full flex items-center justify-center bg-gradient-to-br from-gray-900 to-gray-800"> |
| <div class="text-center"> |
| <i class="fas fa-truck-moving text-6xl text-blue-400 mb-4"></i> |
| <h3 class="text-2xl font-bold text-white mb-2">Simulateur de Conduite</h3> |
| <p class="text-gray-400 mb-6">Chargement de l'expérience interactive...</p> |
| <div class="loader mx-auto"></div> |
| </div> |
| </div> |
| |
| |
| <div class="absolute inset-0 bg-black/80 flex items-center justify-center flex-col transition-opacity duration-500"> |
| <h3 class="text-3xl font-bold text-white mb-6">Prêt à conduire?</h3> |
| <button id="start-simulator" class="neon-btn px-8 py-3 text-lg font-semibold mb-4"> |
| <i class="fas fa-play mr-2"></i>Démarrer la simulation |
| </button> |
| <p class="text-gray-400 text-sm"> |
| Utilisez les touches fléchées ou WASD pour conduire |
| </p> |
| </div> |
| </div> |
| |
| |
| <div class="mt-6 grid grid-cols-2 md:grid-cols-4 gap-4"> |
| <div class="bg-gray-800 p-4 rounded-lg text-center border border-gray-700"> |
| <div class="text-blue-400 text-2xl mb-2"> |
| <i class="fas fa-tachometer-alt"></i> |
| </div> |
| <div class="text-white font-medium">Vitesse</div> |
| <div class="text-gray-400 text-sm">KM/H</div> |
| </div> |
| |
| <div class="bg-gray-800 p-4 rounded-lg text-center border border-gray-700"> |
| <div class="text-blue-400 text-2xl mb-2"> |
| <i class="fas fa-cogs"></i> |
| </div> |
| <div class="text-white font-medium">RPM</div> |
| <div class="text-gray-400 text-sm">x1000</div> |
| </div> |
| |
| <div class="bg-gray-800 p-4 rounded-lg text-center border border-gray-700"> |
| <div class="text-blue-400 text-2xl mb-2"> |
| <i class="fas fa-gas-pump"></i> |
| </div> |
| <div class="text-white font-medium">Carburant</div> |
| <div class="text-gray-400 text-sm">%</div> |
| </div> |
| |
| <div class="bg-gray-800 p-4 rounded-lg text-center border border-gray-700"> |
| <div class="text-blue-400 text-2xl mb-2"> |
| <i class="fas fa-temperature-high"></i> |
| </div> |
| <div class="text-white font-medium">Température</div> |
| <div class="text-gray-400 text-sm">°C</div> |
| </div> |
| </div> |
| |
| |
| <div class="mt-8 bg-blue-900/20 border border-blue-800 rounded-lg p-4"> |
| <h4 class="text-blue-400 font-bold mb-2 flex items-center"> |
| <i class="fas fa-info-circle mr-2"></i> Instructions |
| </h4> |
| <ul class="text-gray-300 text-sm space-y-1"> |
| <li><span class="text-blue-400">↑</span> ou <span class="text-blue-400">W</span> : Accélérer</li> |
| <li><span class="text-blue-400">↓</span> ou <span class="text-blue-400">S</span> : Freiner/Reculer</li> |
| <li><span class="text-blue-400">← →</span> ou <span class="text-blue-400">A D</span> : Direction</li> |
| <li><span class="text-blue-400">P/R/N/D</span> : Changer de vitesse</li> |
| <li><span class="text-blue-400">L</span> : Phares</li> |
| <li><span class="text-blue-400">V</span> : Changer de vue</li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section id="gallery" class="py-20 bg-gray-800"> |
| <div class="container mx-auto px-6"> |
| <div class="text-center mb-16 fade-in"> |
| <h2 class="text-4xl font-bold mb-4"> |
| <span class="text-blue-400">Galerie</span> Visuelle |
| </h2> |
| <p class="text-xl text-gray-300 max-w-3xl mx-auto"> |
| Découvrez des captures d'écran de notre simulateur en action. |
| </p> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> |
| |
| <div class="group relative overflow-hidden rounded-xl h-64 fade-in"> |
| <img src="https://images.unsplash.com/photo-1544620347-c4fd4a3d5957?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" |
| alt="Simulateur vue 1" class="w-full h-full object-cover transition duration-500 group-hover:scale-110"> |
| <div class="absolute inset-0 bg-black/50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition"> |
| <i class="fas fa-search-plus text-3xl text-white"></i> |
| </div> |
| </div> |
| |
| |
| <div class="group relative overflow-hidden rounded-xl h-64 fade-in" style="animation-delay: 0.2s;"> |
| <img src="https://images.unsplash.com/photo-1509316785289-025f5b846b35?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" |
| alt="Simulateur vue 2" class="w-full h-full object-cover transition duration-500 group-hover:scale-110"> |
| <div class="absolute inset-0 bg-black/50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition"> |
| <i class="fas fa-search-plus text-3xl text-white"></i> |
| </div> |
| </div> |
| |
| |
| <div class="group relative overflow-hidden rounded-xl h-64 fade-in" style="animation-delay: 0.4s;"> |
| <img src="https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" |
| alt="Simulateur vue 3" class="w-full h-full object-cover transition duration-500 group-hover:scale-110"> |
| <div class="absolute inset-0 bg-black/50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition"> |
| <i class="fas fa-search-plus text-3xl text-white"></i> |
| </div> |
| </div> |
| |
| |
| <div class="group relative overflow-hidden rounded-xl h-64 fade-in" style="animation-delay: 0.6s;"> |
| <img src="https://images.unsplash.com/photo-1518631081464-491a903a6c9c?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" |
| alt="Simulateur vue 4" class="w-full h-full object-cover transition duration-500 group-hover:scale-110"> |
| <div class="absolute inset-0 bg-black/50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition"> |
| <i class="fas fa-search-plus text-3xl text-white"></i> |
| </div> |
| </div> |
| |
| |
| <div class="group relative overflow-hidden rounded-xl h-64 fade-in" style="animation-delay: 0.8s;"> |
| <img src="https://images.unsplash.com/photo-1519125323398-675f0ddb6308?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" |
| alt="Simulateur vue 5" class="w-full h-full object-cover transition duration-500 group-hover:scale-110"> |
| <div class="absolute inset-0 bg-black/50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition"> |
| <i class="fas fa-search-plus text-3xl text-white"></i> |
| </div> |
| </div> |
| |
| |
| <div class="group relative overflow-hidden rounded-xl h-64 fade-in" style="animation-delay: 1s;"> |
| <img src="https://images.unsplash.com/photo-1544620347-c4fd4a3d5957?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" |
| alt="Simulateur vue 6" class="w-full h-full object-cover transition duration-500 group-hover:scale-110"> |
| <div class="absolute inset-0 bg-black/50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition"> |
| <i class="fas fa-search-plus text-3xl text-white"></i> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="text-center mt-12 fade-in"> |
| <button class="bg-blue-600 hover:bg-blue-700 px-8 py-3 rounded-lg font-medium text-white transition flex items-center mx-auto"> |
| <i class="fas fa-images mr-2"></i> Voir plus de captures |
| </button> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section id="contact" class="py-20 gradient-bg"> |
| <div class="container mx-auto px-6"> |
| <div class="max-w-4xl mx-auto bg-gray-900/80 rounded-xl overflow-hidden border border-gray-700 backdrop-blur-sm"> |
| <div class="grid grid-cols-1 md:grid-cols-2"> |
| |
| <div class="p-10 bg-gray-900/50"> |
| <h2 class="text-3xl font-bold mb-6 text-white"> |
| Contactez-<span class="text-blue-400">nous</span> |
| </h2> |
| |
| <div class="space-y-6"> |
| <div class="flex items-start"> |
| <div class="text-blue-400 mr-4 mt-1"> |
| <i class="fas fa-map-marker-alt text-xl"></i> |
| </div> |
| <div> |
| <h4 class="text-white font-medium mb-1">Adresse</h4> |
| <p class="text-gray-300">123 Rue du Camion, 75000 Paris</p> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="text-blue-400 mr-4 mt-1"> |
| <i class="fas fa-envelope text-xl"></i> |
| </div> |
| <div> |
| <h4 class="text-white font-medium mb-1">Email</h4> |
| <p class="text-gray-300">contact@trucksim.com</p> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="text-blue-400 mr-4 mt-1"> |
| <i class="fas fa-phone-alt text-xl"></i> |
| </div> |
| <div> |
| <h4 class="text-white font-medium mb-1">Téléphone</h4> |
| <p class="text-gray-300">+33 1 23 45 67 89</p> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="text-blue-400 mr-4 mt-1"> |
| <i class="fas fa-clock text-xl"></i> |
| </div> |
| <div> |
| <h4 class="text-white font-medium mb-1">Horaires</h4> |
| <p class="text-gray-300">Lun-Ven: 9h-18h</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mt-8"> |
| <h4 class="text-white font-medium mb-4">Suivez-nous</h4> |
| <div class="flex space-x-4"> |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-white hover:bg-blue-500 transition"> |
| <i class="fab fa-facebook-f"></i> |
| </a> |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-white hover:bg-blue-400 transition"> |
| <i class="fab fa-twitter"></i> |
| </a> |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-white hover:bg-red-500 transition"> |
| <i class="fab fa-youtube"></i> |
| </a> |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-white hover:bg-purple-500 transition"> |
| <i class="fab fa-discord"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="p-10"> |
| <form class="space-y-6"> |
| <div> |
| <label for="name" class="block text-white mb-2">Votre nom</label> |
| <input type="text" id="name" class="form-input w-full px-4 py-3 rounded-lg focus:ring-2 focus:ring-blue-400"> |
| </div> |
| |
| <div> |
| <label for="email" class="block text-white mb-2">Votre email</label> |
| <input type="email" id="email" class="form-input w-full px-4 py-3 rounded-lg focus:ring-2 focus:ring-blue-400"> |
| </div> |
| |
| <div> |
| <label for="subject" class="block text-white mb-2">Sujet</label> |
| <input type="text" id="subject" class="form-input w-full px-4 py-3 rounded-lg focus:ring-2 focus:ring-blue-400"> |
| </div> |
| |
| <div> |
| <label for="message" class="block text-white mb-2">Message</label> |
| <textarea id="message" rows="4" class="form-input w-full px-4 py-3 rounded-lg focus:ring-2 focus:ring-blue-400"></textarea> |
| </div> |
| |
| <button type="submit" class="neon-btn w-full py-3 text-lg font-semibold"> |
| <i class="fas fa-paper-plane mr-2"></i> Envoyer le message |
| </button> |
| </form> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <footer class="bg-gray-900/90 text-gray-400 py-12 border-t border-gray-800"> |
| <div class="container mx-auto px-6"> |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-10"> |
| <div> |
| <div class="flex items-center mb-4"> |
| <i class="fas fa-truck-moving text-3xl text-blue-400 mr-2"></i> |
| <span class="text-xl font-bold text-white">TRUCK<span class="text-blue-400">SIM</span></span> |
| </div> |
| <p class="text-sm"> |
| Le simulateur de conduite de camion le plus réaliste jamais créé. |
| </p> |
| </div> |
| |
| <div> |
| <h4 class="text-white font-medium mb-4 text-lg">Liens rapides</h4> |
| <ul class="space-y-2"> |
| <li><a href="#" class="hover:text-blue-400 transition">Accueil</a></li> |
| <li><a href="#features" class="hover:text-blue-400 transition">Fonctionnalités</a></li> |
| <li><a href="#simulator" class="hover:text-blue-400 transition">Simulateur</a></li> |
| <li><a href="#gallery" class="hover:text-blue-400 transition">Galerie</a></li> |
| <li><a href="#contact" class="hover:text-blue-400 transition">Contact</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h4 class="text-white font-medium mb-4 text-lg">Support</h4> |
| <ul class="space-y-2"> |
| <li><a href="#" class="hover:text-blue-400 transition">FAQ</a></li> |
| <li><a href="#" class="hover:text-blue-400 transition">Documentation</a></li> |
| <li><a href="#" class="hover:text-blue-400 transition">Forum</a></li> |
| <li><a href="#" class="hover:text-blue-400 transition">Statut</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h4 class="text-white font-medium mb-4 text-lg">Newsletter</h4> |
| <p class="text-sm mb-4"> |
| Abonnez-vous pour recevoir les dernières actualités et mises à jour. |
| </p> |
| <div class="flex"> |
| <input type="email" placeholder="Votre email" class="bg-gray-800 text-white px-4 py-2 rounded-l-lg focus:outline-none w-full"> |
| <button class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-r-lg text-white"> |
| <i class="fas fa-paper-plane"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| <div class="border-t border-gray-800 mt-10 pt-6 flex flex-col md:flex-row justify-between items-center"> |
| <p class="text-sm mb-4 md:mb-0"> |
| © 2023 TruckSim. Tous droits réservés. |
| </p> |
| |
| <div class="flex space-x-6"> |
| <a href="#" class="text-gray-400 hover:text-blue-400 transition"> |
| <i class="fab fa-facebook-f"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-blue-400 transition"> |
| <i class="fab fa-twitter"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-red-500 transition"> |
| <i class="fab fa-youtube"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-purple-500 transition"> |
| <i class="fab fa-discord"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| </footer> |
| |
| |
| <script> |
| |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { |
| const menu = document.getElementById('mobile-menu'); |
| menu.classList.toggle('hidden'); |
| }); |
| |
| |
| const fadeElements = document.querySelectorAll('.fade-in'); |
| |
| const observer = new IntersectionObserver((entries) => { |
| entries.forEach(entry => { |
| if (entry.isIntersecting) { |
| entry.target.style.opacity = '1'; |
| entry.target.style.transform = 'translateY(0)'; |
| } |
| }); |
| }, { threshold: 0.1 }); |
| |
| fadeElements.forEach(el => { |
| el.style.opacity = '0'; |
| el.style.transform = 'translateY(20px)'; |
| el.style.transition = 'opacity 0.6s ease, transform 0.6s ease'; |
| observer.observe(el); |
| }); |
| |
| |
| document.getElementById('start-simulator').addEventListener('click', function() { |
| const overlay = this.closest('.absolute'); |
| overlay.style.opacity = '0'; |
| overlay.style.pointerEvents = 'none'; |
| |
| |
| setTimeout(() => { |
| alert("Le simulateur est en cours de chargement... Cette démo montre seulement l'interface."); |
| }, 1000); |
| }); |
| |
| |
| </html> |
