|
|
<!DOCTYPE html> |
|
|
<html lang="fr"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>IVECO - Nouvelle Génération</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=Roboto:wght@300;400;500;700;900&display=swap'); |
|
|
|
|
|
:root { |
|
|
--iveco-blue: #005baa; |
|
|
--iveco-dark: #0a1929; |
|
|
--iveco-light: #f0f8ff; |
|
|
} |
|
|
|
|
|
body { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
font-family: 'Roboto', sans-serif; |
|
|
background-color: var(--iveco-dark); |
|
|
color: white; |
|
|
overflow-x: hidden; |
|
|
} |
|
|
|
|
|
.hero-section { |
|
|
background: linear-gradient(135deg, var(--iveco-dark) 0%, var(--iveco-blue) 100%); |
|
|
min-height: 100vh; |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.hero-overlay { |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: rgba(0, 0, 0, 0.3); |
|
|
z-index: 1; |
|
|
} |
|
|
|
|
|
.hero-content { |
|
|
position: relative; |
|
|
z-index: 2; |
|
|
} |
|
|
|
|
|
.truck-animation { |
|
|
position: absolute; |
|
|
bottom: -10%; |
|
|
right: -10%; |
|
|
width: 70%; |
|
|
max-width: 800px; |
|
|
animation: float 8s ease-in-out infinite; |
|
|
} |
|
|
|
|
|
@keyframes float { |
|
|
0% { transform: translateY(0px) rotate(0deg); } |
|
|
50% { transform: translateY(-20px) rotate(2deg); } |
|
|
100% { transform: translateY(0px) rotate(0deg); } |
|
|
} |
|
|
|
|
|
.feature-card { |
|
|
background: rgba(255, 255, 255, 0.1); |
|
|
backdrop-filter: blur(10px); |
|
|
border: 1px solid rgba(255, 255, 255, 0.2); |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.feature-card:hover { |
|
|
transform: translateY(-10px); |
|
|
box-shadow: 0 15px 30px rgba(0, 91, 170, 0.3); |
|
|
} |
|
|
|
|
|
.nav-link { |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.nav-link::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
width: 0; |
|
|
height: 2px; |
|
|
bottom: -5px; |
|
|
left: 0; |
|
|
background-color: white; |
|
|
transition: width 0.3s ease; |
|
|
} |
|
|
|
|
|
.nav-link:hover::after { |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
.btn-primary { |
|
|
background: var(--iveco-blue); |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.btn-primary:hover { |
|
|
background: #004a8c; |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 5px 15px rgba(0, 91, 170, 0.4); |
|
|
} |
|
|
|
|
|
.btn-outline { |
|
|
border: 2px solid white; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.btn-outline:hover { |
|
|
background: white; |
|
|
color: var(--iveco-blue); |
|
|
} |
|
|
|
|
|
.stats-item { |
|
|
position: relative; |
|
|
padding-left: 2rem; |
|
|
} |
|
|
|
|
|
.stats-item::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
left: 0; |
|
|
top: 50%; |
|
|
transform: translateY(-50%); |
|
|
width: 1rem; |
|
|
height: 1rem; |
|
|
background: var(--iveco-blue); |
|
|
border-radius: 50%; |
|
|
} |
|
|
|
|
|
.section-divider { |
|
|
height: 100px; |
|
|
background: linear-gradient(to bottom, var(--iveco-blue), transparent); |
|
|
clip-path: polygon(0 0, 100% 0, 100% 70%, 0 100%); |
|
|
} |
|
|
|
|
|
.footer { |
|
|
background: linear-gradient(to bottom, var(--iveco-dark), #000); |
|
|
} |
|
|
|
|
|
|
|
|
.particles { |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
z-index: 1; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.particle { |
|
|
position: absolute; |
|
|
background: rgba(255, 255, 255, 0.5); |
|
|
border-radius: 50%; |
|
|
animation: particles-animation linear infinite; |
|
|
} |
|
|
|
|
|
@keyframes particles-animation { |
|
|
0% { transform: translateY(0) translateX(0); opacity: 1; } |
|
|
100% { transform: translateY(-1000px) translateX(200px); opacity: 0; } |
|
|
} |
|
|
|
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.truck-animation { |
|
|
width: 100%; |
|
|
right: -30%; |
|
|
} |
|
|
|
|
|
.hero-content { |
|
|
padding-top: 100px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.mobile-menu { |
|
|
max-height: 0; |
|
|
overflow: hidden; |
|
|
transition: max-height 0.3s ease-out; |
|
|
} |
|
|
|
|
|
.mobile-menu.open { |
|
|
max-height: 500px; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
<nav class="fixed w-full z-50 bg-black bg-opacity-80 backdrop-filter backdrop-blur-lg"> |
|
|
<div class="container mx-auto px-6 py-4"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center"> |
|
|
<img src="https://www.iveco.com/etc.clientlibs/iveco/clientlibs/clientlib-site/resources/images/logo.svg" alt="IVECO Logo" class="h-10"> |
|
|
</div> |
|
|
<div class="hidden md:flex space-x-8"> |
|
|
<a href="#home" class="nav-link text-white font-medium">Accueil</a> |
|
|
<a href="#models" class="nav-link text-white font-medium">Gamme</a> |
|
|
<a href="#services" class="nav-link text-white font-medium">Services</a> |
|
|
<a href="#technology" class="nav-link text-white font-medium">Innovation</a> |
|
|
<a href="#about" class="nav-link text-white font-medium">À propos</a> |
|
|
<a href="#contact" class="nav-link text-white font-medium">Contact</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 id="mobile-menu" class="mobile-menu md:hidden bg-gray-900 mt-4 rounded-lg"> |
|
|
<div class="px-4 py-2 flex flex-col space-y-3"> |
|
|
<a href="#home" class="nav-link text-white font-medium block py-2">Accueil</a> |
|
|
<a href="#models" class="nav-link text-white font-medium block py-2">Gamme</a> |
|
|
<a href="#services" class="nav-link text-white font-medium block py-2">Services</a> |
|
|
<a href="#technology" class="nav-link text-white font-medium block py-2">Innovation</a> |
|
|
<a href="#about" class="nav-link text-white font-medium block py-2">À propos</a> |
|
|
<a href="#contact" class="nav-link text-white font-medium block py-2">Contact</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section id="home" class="hero-section"> |
|
|
|
|
|
<div class="particles" id="particles"></div> |
|
|
|
|
|
<div class="hero-overlay"></div> |
|
|
|
|
|
<div class="container mx-auto px-6 py-24 hero-content flex flex-col justify-center min-h-screen"> |
|
|
<div class="w-full md:w-1/2"> |
|
|
<h1 class="text-5xl md:text-7xl font-bold mb-6 leading-tight"> |
|
|
<span class="text-white">L'avenir du</span> |
|
|
<span class="text-blue-300">transport</span> |
|
|
</h1> |
|
|
<p class="text-xl md:text-2xl text-gray-300 mb-10"> |
|
|
Découvrez la nouvelle génération de véhicules IVECO, conçus pour maximiser l'efficacité, réduire les émissions et révolutionner votre expérience de conduite. |
|
|
</p> |
|
|
<div class="flex flex-wrap gap-4"> |
|
|
<a href="#models" class="btn-primary px-8 py-4 rounded-full text-white font-bold"> |
|
|
Explorer la gamme <i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
<a href="#" id="configurator-btn" class="btn-outline px-8 py-4 rounded-full text-white font-bold"> |
|
|
Configurateur 3D <i class="fas fa-cog ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<img src="https://www.iveco.com/dam/jcr:6c5c1c1b-3a4e-4d1e-9c6a-3b3e3b3b3b3b" alt="IVECO Truck" class="truck-animation"> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<div class="section-divider"></div> |
|
|
|
|
|
|
|
|
<section id="services" class="py-20 bg-gray-900"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="text-center mb-20"> |
|
|
<h2 class="text-4xl font-bold mb-4">Pourquoi choisir IVECO ?</h2> |
|
|
<p class="text-xl text-gray-400 max-w-3xl mx-auto"> |
|
|
Une combinaison unique de performance, d'innovation et de durabilité qui fait la différence sur la route. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-10"> |
|
|
<div class="feature-card p-8 rounded-xl"> |
|
|
<div class="text-blue-400 text-5xl mb-6"> |
|
|
<i class="fas fa-leaf"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold mb-4">Durabilité</h3> |
|
|
<p class="text-gray-300"> |
|
|
Nos solutions à faibles émissions et notre engagement envers l'économie circulaire réduisent l'impact environnemental. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="feature-card p-8 rounded-xl"> |
|
|
<div class="text-blue-400 text-5xl mb-6"> |
|
|
<i class="fas fa-tachometer-alt"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold mb-4">Performance</h3> |
|
|
<p class="text-gray-300"> |
|
|
Moteurs haute performance conçus pour offrir le meilleur rendement énergétique et la plus grande fiabilité. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="feature-card p-8 rounded-xl"> |
|
|
<div class="text-blue-400 text-5xl mb-6"> |
|
|
<i class="fas fa-cogs"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold mb-4">Technologie</h3> |
|
|
<p class="text-gray-300"> |
|
|
Systèmes connectés et assistance à la conduite de pointe pour une sécurité et une efficacité maximale. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="about" class="py-20 bg-gray-800"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
|
|
<div class="text-center"> |
|
|
<div class="text-5xl font-bold text-blue-400 mb-2">45+</div> |
|
|
<div class="text-xl text-gray-300">Années d'expérience</div> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<div class="text-5xl font-bold text-blue-400 mb-2">160+</div> |
|
|
<div class="text-xl text-gray-300">Pays desservis</div> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<div class="text-5xl font-bold text-blue-400 mb-2">500K+</div> |
|
|
<div class="text-xl text-gray-300">Véhicules produits</div> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<div class="text-5xl font-bold text-blue-400 mb-2">10K+</div> |
|
|
<div class="text-xl text-gray-300">Employés dédiés</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="models" class="py-20 bg-gray-900"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="text-center mb-20"> |
|
|
<h2 class="text-4xl font-bold mb-4">Notre gamme de véhicules</h2> |
|
|
<p class="text-xl text-gray-400 max-w-3xl mx-auto"> |
|
|
Découvrez notre sélection de véhicules conçus pour répondre à tous vos besoins de transport. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="relative overflow-hidden rounded-xl h-96 group"> |
|
|
<img src="https://www.iveco.com/dam/jcr:12345678-1234-1234-1234-123456789012" alt="IVECO S-Way" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"> |
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-80"></div> |
|
|
<div class="absolute bottom-0 left-0 p-8 text-white"> |
|
|
<h3 class="text-2xl font-bold mb-2">IVECO S-Way</h3> |
|
|
<p class="text-gray-300 mb-4">Le camion longue distance par excellence</p> |
|
|
<a href="#" class="model-details inline-flex items-center text-blue-400 font-medium" data-model="s-way"> |
|
|
En savoir plus <i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="relative overflow-hidden rounded-xl h-96 group"> |
|
|
<img src="https://www.iveco.com/dam/jcr:87654321-4321-4321-4321-210987654321" alt="IVECO T-Way" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"> |
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-80"></div> |
|
|
<div class="absolute bottom-0 left-0 p-8 text-white"> |
|
|
<h3 class="text-2xl font-bold mb-2">IVECO T-Way</h3> |
|
|
<p class="text-gray-300 mb-4">Robuste et polyvalent pour les chantiers</p> |
|
|
<a href="#" class="model-details inline-flex items-center text-blue-400 font-medium" data-model="t-way"> |
|
|
En savoir plus <i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="relative overflow-hidden rounded-xl h-96 group"> |
|
|
<img src="https://www.iveco.com/dam/jcr:abcdef12-3456-7890-1234-567890abcdef" alt="IVECO Daily" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"> |
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-80"></div> |
|
|
<div class="absolute bottom-0 left-0 p-8 text-white"> |
|
|
<h3 class="text-2xl font-bold mb-2">IVECO Daily</h3> |
|
|
<p class="text-gray-300 mb-4">Le véhicule utilitaire léger polyvalent</p> |
|
|
<a href="#" class="model-details inline-flex items-center text-blue-400 font-medium" data-model="daily"> |
|
|
En savoir plus <i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="text-center mt-12"> |
|
|
<a href="#models" class="btn-primary px-8 py-4 rounded-full text-white font-bold inline-flex items-center"> |
|
|
Voir toute la gamme <i class="fas fa-chevron-down ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="technology" class="py-20 bg-gray-800"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="flex flex-col md:flex-row items-center"> |
|
|
<div class="md:w-1/2 mb-10 md:mb-0 md:pr-10"> |
|
|
<h2 class="text-4xl font-bold mb-6">Technologie de pointe</h2> |
|
|
<p class="text-xl text-gray-300 mb-8"> |
|
|
IVECO intègre les dernières innovations technologiques pour offrir des véhicules plus intelligents, plus sûrs et plus efficaces. |
|
|
</p> |
|
|
|
|
|
<div class="space-y-6"> |
|
|
<div class="stats-item"> |
|
|
<h3 class="text-2xl font-bold mb-2">Connectivité avancée</h3> |
|
|
<p class="text-gray-400"> |
|
|
Systèmes embarqués connectés pour une gestion optimale de votre flotte. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="stats-item"> |
|
|
<h3 class="text-2xl font-bold mb-2">Assistance à la conduite</h3> |
|
|
<p class="text-gray-400"> |
|
|
Technologies ADAS pour une sécurité renforcée sur toutes vos routes. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="stats-item"> |
|
|
<h3 class="text-2xl font-bold mb-2">Motorisation alternative</h3> |
|
|
<p class="text-gray-400"> |
|
|
Solutions électriques, GNL et hydrogène pour une transition énergétique efficace. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="md:w-1/2"> |
|
|
<div class="relative"> |
|
|
<img src="https://www.iveco.com/dam/jcr:98765432-1234-5678-9012-345678901234" alt="IVECO Technology" class="w-full rounded-xl"> |
|
|
<button id="video-btn" class="absolute inset-0 flex items-center justify-center"> |
|
|
<span class="bg-blue-500 hover:bg-blue-600 text-white rounded-full w-20 h-20 flex items-center justify-center shadow-xl transform hover:scale-110 transition-all"> |
|
|
<i class="fas fa-play text-2xl"></i> |
|
|
</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 bg-gray-900"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="text-center mb-20"> |
|
|
<h2 class="text-4xl font-bold mb-4">Ils nous font confiance</h2> |
|
|
<p class="text-xl text-gray-400 max-w-3xl mx-auto"> |
|
|
Des entreprises de toutes tailles choisissent IVECO pour leurs besoins de transport. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="bg-gray-800 p-8 rounded-xl"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<div class="text-yellow-400 text-xl mr-2"> |
|
|
<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> |
|
|
<p class="text-gray-300 mb-6"> |
|
|
"La fiabilité de nos IVECO nous permet de garantir des livraisons à temps à nos clients, avec un excellent rendement énergétique." |
|
|
</p> |
|
|
<div class="flex items-center"> |
|
|
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Jean Dupont" class="w-12 h-12 rounded-full mr-4"> |
|
|
<div> |
|
|
<h4 class="font-bold">Jean Dupont</h4> |
|
|
<p class="text-gray-400 text-sm">Directeur Logistique, Transports Dupont</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800 p-8 rounded-xl"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<div class="text-yellow-400 text-xl mr-2"> |
|
|
<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> |
|
|
<p class="text-gray-300 mb-6"> |
|
|
"Le service après-vente IVECO est exceptionnel. Nos véhicules sont toujours opérationnels grâce à leur réactivité." |
|
|
</p> |
|
|
<div class="flex items-center"> |
|
|
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Marie Lambert" class="w-12 h-12 rounded-full mr-4"> |
|
|
<div> |
|
|
<h4 class="font-bold">Marie Lambert</h4> |
|
|
<p class="text-gray-400 text-sm">Responsable Flotte, Bâtiments Lambert</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800 p-8 rounded-xl"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<div class="text-yellow-400 text-xl mr-2"> |
|
|
<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> |
|
|
<p class="text-gray-300 mb-6"> |
|
|
"La transition vers les modèles électriques IVECO a été fluide et nous a permis de réduire significativement notre empreinte carbone." |
|
|
</p> |
|
|
<div class="flex items-center"> |
|
|
<img src="https://randomuser.me/api/portraits/men/67.jpg" alt="Thomas Martin" class="w-12 h-12 rounded-full mr-4"> |
|
|
<div> |
|
|
<h4 class="font-bold">Thomas Martin</h4> |
|
|
<p class="text-gray-400 text-sm">PDG, Eco-Transports Martin</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="contact" class="py-20 bg-blue-900"> |
|
|
<div class="container mx-auto px-6 text-center"> |
|
|
<h2 class="text-4xl font-bold mb-6">Prêt à révolutionner votre flotte ?</h2> |
|
|
<p class="text-xl text-blue-200 mb-10 max-w-3xl mx-auto"> |
|
|
Contactez nos experts pour trouver la solution IVECO parfaitement adaptée à vos besoins. |
|
|
</p> |
|
|
<div class="flex flex-wrap justify-center gap-4"> |
|
|
<a href="#" id="quote-btn" class="btn-primary px-8 py-4 rounded-full text-white font-bold"> |
|
|
Demander un devis <i class="fas fa-file-alt ml-2"></i> |
|
|
</a> |
|
|
<a href="#" id="contact-btn" class="btn-outline px-8 py-4 rounded-full text-white font-bold"> |
|
|
Nous contacter <i class="fas fa-phone ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="footer pt-20 pb-10"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-10 mb-10"> |
|
|
<div> |
|
|
<img src="https://www.iveco.com/etc.clientlibs/iveco/clientlibs/clientlib-site/resources/images/logo.svg" alt="IVECO Logo" class="h-10 mb-6"> |
|
|
<p class="text-gray-400"> |
|
|
Leader européen des véhicules industriels, IVECO conçoit, fabrique et commercialise des solutions de transport durables. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-xl font-bold mb-6 text-white">Gamme de véhicules</h3> |
|
|
<ul class="space-y-3"> |
|
|
<li><a href="#models" class="text-gray-400 hover:text-white transition">Camions longue distance</a></li> |
|
|
<li><a href="#models" class="text-gray-400 hover:text-white transition">Camions chantiers</a></li> |
|
|
<li><a href="#models" class="text-gray-400 hover:text-white transition">Véhicules utilitaires</a></li> |
|
|
<li><a href="#models" class="text-gray-400 hover:text-white transition">Bus et autocars</a></li> |
|
|
<li><a href="#models" class="text-gray-400 hover:text-white transition">Véhicules spéciaux</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-xl font-bold mb-6 text-white">Services</h3> |
|
|
<ul class="space-y-3"> |
|
|
<li><a href="#services" class="text-gray-400 hover:text-white transition">Entretien et réparation</a></li> |
|
|
<li><a href="#services" class="text-gray-400 hover:text-white transition">Financement</a></li> |
|
|
<li><a href="#services" class="text-gray-400 hover:text-white transition">Connectivité flotte</a></li> |
|
|
<li><a href="#services" class="text-gray-400 hover:text-white transition">Formation conducteurs</a></li> |
|
|
<li><a href="#services" class="text-gray-400 hover:text-white transition">Pièces détachées</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-xl font-bold mb-6 text-white">Contact</h3> |
|
|
<ul class="space-y-3"> |
|
|
<li class="flex items-center text-gray-400"> |
|
|
<i class="fas fa-map-marker-alt mr-3 text-blue-400"></i> 40 Rue de la République, Lyon |
|
|
</li> |
|
|
<li class="flex items-center text-gray-400"> |
|
|
<i class="fas fa-phone mr-3 text-blue-400"></i> +33 4 72 00 00 00 |
|
|
</li> |
|
|
<li class="flex items-center text-gray-400"> |
|
|
<i class="fas fa-envelope mr-3 text-blue-400"></i> contact@iveco-france.com |
|
|
</li> |
|
|
</ul> |
|
|
<div class="flex space-x-4 mt-6"> |
|
|
<a href="https://facebook.com" target="_blank" class="text-gray-400 hover:text-white text-xl"> |
|
|
<i class="fab fa-facebook-f"></i> |
|
|
</a> |
|
|
<a href="https://twitter.com" target="_blank" class="text-gray-400 hover:text-white text-xl"> |
|
|
<i class="fab fa-twitter"></i> |
|
|
</a> |
|
|
<a href="https://linkedin.com" target="_blank" class="text-gray-400 hover:text-white text-xl"> |
|
|
<i class="fab fa-linkedin-in"></i> |
|
|
</a> |
|
|
<a href="https://youtube.com" target="_blank" class="text-gray-400 hover:text-white text-xl"> |
|
|
<i class="fab fa-youtube"></i> |
|
|
</a> |
|
|
<a href="https://instagram.com" target="_blank" class="text-gray-400 hover:text-white text-xl"> |
|
|
<i class="fab fa-instagram"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="border-t border-gray-800 pt-6 flex flex-col md:flex-row justify-between items-center"> |
|
|
<p class="text-gray-500 text-sm mb-4 md:mb-0"> |
|
|
© 2023 IVECO France. Tous droits réservés. |
|
|
</p> |
|
|
<div class="flex space-x-6"> |
|
|
<a href="#" class="text-gray-500 hover:text-white text-sm">Mentions légales</a> |
|
|
<a href="#" class="text-gray-500 hover:text-white text-sm">Politique de confidentialité</a> |
|
|
<a href="#" class="text-gray-500 hover:text-white text-sm">Conditions générales</a> |
|
|
<a href="#" class="text-gray-500 hover:text-white text-sm">Cookies</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
|
|
|
|
|
|
<div id="configurator-modal" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 hidden"> |
|
|
<div class="bg-gray-900 rounded-xl p-8 max-w-4xl w-full mx-4 relative"> |
|
|
<button id="close-configurator" class="absolute top-4 right-4 text-gray-400 hover:text-white text-2xl"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
<h3 class="text-3xl font-bold mb-6">Configurateur 3D</h3> |
|
|
<div class="bg-gray-800 rounded-lg p-6 mb-6 h-96 flex items-center justify-center"> |
|
|
<p class="text-gray-400">Interface du configurateur 3D en cours de chargement...</p> |
|
|
</div> |
|
|
<div class="flex justify-end"> |
|
|
<button class="btn-primary px-6 py-3 rounded-full text-white font-bold"> |
|
|
Sauvegarder ma configuration <i class="fas fa-save ml-2"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="video-modal" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 hidden"> |
|
|
<div class="bg-gray-900 rounded-xl p-8 max-w-4xl w-full mx-4 relative"> |
|
|
<button id="close-video" class="absolute top-4 right-4 text-gray-400 hover:text-white text-2xl"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
<h3 class="text-3xl font-bold mb-6">Technologies IVECO</h3> |
|
|
<div class="bg-gray-800 rounded-lg p-6 mb-6 aspect-video flex items-center justify-center"> |
|
|
<p class="text-gray-400">Vidéo de démonstration des technologies IVECO</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="model-modal" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 hidden"> |
|
|
<div class="bg-gray-900 rounded-xl p-8 max-w-4xl w-full mx-4 relative"> |
|
|
<button id="close-model" class="absolute top-4 right-4 text-gray-400 hover:text-white text-2xl"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
<h3 id="model-title" class="text-3xl font-bold mb-6">Détails du modèle</h3> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8"> |
|
|
<div> |
|
|
<div class="bg-gray-800 rounded-lg p-6 mb-6 h-64 flex items-center justify-center"> |
|
|
<p id="model-image-placeholder" class="text-gray-400">Image du véhicule</p> |
|
|
</div> |
|
|
<div class="grid grid-cols-2 gap-4"> |
|
|
<div class="bg-gray-800 p-4 rounded-lg"> |
|
|
<div class="text-blue-400 text-xl mb-2"> |
|
|
<i class="fas fa-gas-pump"></i> |
|
|
</div> |
|
|
<h4 class="font-bold mb-1">Consommation</h4> |
|
|
<p id="model-consumption" class="text-gray-400 text-sm">-- L/100km</p> |
|
|
</div> |
|
|
<div class="bg-gray-800 p-4 rounded-lg"> |
|
|
<div class="text-blue-400 text-xl mb-2"> |
|
|
<i class="fas fa-horse-head"></i> |
|
|
</div> |
|
|
<h4 class="font-bold mb-1">Puissance</h4> |
|
|
<p id="model-power" class="text-gray-400 text-sm">-- CV</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-xl font-bold mb-4">Caractéristiques</h4> |
|
|
<ul id="model-features" class="space-y-3 text-gray-300 mb-6"> |
|
|
|
|
|
</ul> |
|
|
<a href="#contact" class="btn-primary px-6 py-3 rounded-full text-white font-bold inline-block"> |
|
|
Demander un devis <i class="fas fa-file-alt ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="contact-modal" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 hidden"> |
|
|
<div class="bg-gray-900 rounded-xl p-8 max-w-2xl w-full mx-4 relative"> |
|
|
<button id="close-contact" class="absolute top-4 right-4 text-gray-400 hover:text-white text-2xl"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
<h3 class="text-3xl font-bold mb-6">Contactez-nous</h3> |
|
|
<form class="space-y-4"> |
|
|
<div> |
|
|
<label for="name" class="block text-gray-300 mb-2">Nom complet</label> |
|
|
<input type="text" id="name" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="email" class="block text-gray-300 mb-2">Email</label> |
|
|
<input type="email" id="email" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="phone" class="block text-gray-300 mb-2">Téléphone</label> |
|
|
<input type="tel" id="phone" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="message" class="block text-gray-300 mb-2">Message</label> |
|
|
<textarea id="message" rows="4" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea> |
|
|
</div> |
|
|
<button type="submit" class="btn-primary px-6 py-3 rounded-full text-white font-bold w-full"> |
|
|
Envoyer <i class="fas fa-paper-plane ml-2"></i> |
|
|
</button> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="quote-modal" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 hidden"> |
|
|
<div class="bg-gray-900 rounded-xl p-8 max-w-2xl w-full mx-4 relative"> |
|
|
<button id="close-quote" class="absolute top-4 right-4 text-gray-400 hover:text-white text-2xl"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
<h3 class="text-3xl font-bold mb-6">Demande de devis</h3> |
|
|
<form class="space-y-4"> |
|
|
<div> |
|
|
<label for="quote-name" class="block text-gray-300 mb-2">Nom complet</label> |
|
|
<input type="text" id="quote-name" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="quote-email" class="block text-gray-300 mb-2">Email</label> |
|
|
<input type="email" id="quote-email" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="quote-phone" class="block text-gray-300 mb-2">Téléphone</label> |
|
|
<input type="tel" id="quote-phone" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="quote-model" class="block text-gray-300 mb-2">Modèle intéressé</label> |
|
|
<select id="quote-model" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
<option value="">Sélectionnez un modèle</option> |
|
|
<option value="s-way">IVECO S-Way</option> |
|
|
<option value="t-way">IVECO T-Way</option> |
|
|
<option value="daily">IVECO Daily</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label for="quote-usage" class="block text-gray-300 mb-2">Usage prévu</label> |
|
|
<textarea id="quote-usage" rows="3" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea> |
|
|
</div> |
|
|
<button type="submit" class="btn-primary px-6 py-3 rounded-full text-white font-bold w-full"> |
|
|
Demander un devis <i class="fas fa-file-alt ml-2"></i> |
|
|
</button> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
function createParticles() { |
|
|
const particlesContainer = document.getElementById('particles'); |
|
|
const particleCount = 30; |
|
|
|
|
|
for (let i = 0; i < particleCount; i++) { |
|
|
const particle = document.createElement('div'); |
|
|
particle.classList.add('particle'); |
|
|
|
|
|
|
|
|
const posX = Math.random() * 100; |
|
|
const posY = Math.random() * 100 + 100; |
|
|
|
|
|
|
|
|
const size = Math.random() * 5 + 1; |
|
|
|
|
|
|
|
|
const duration = Math.random() * 20 + 10; |
|
|
|
|
|
|
|
|
const delay = Math.random() * 5; |
|
|
|
|
|
particle.style.left = `${posX}%`; |
|
|
particle.style.top = `${posY}%`; |
|
|
particle.style.width = `${size}px`; |
|
|
particle.style.height = `${size}px`; |
|
|
particle.style.animationDuration = `${duration}s`; |
|
|
particle.style.animationDelay = `${delay}s`; |
|
|
|
|
|
particlesContainer.appendChild(particle); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
const mobileMenuButton = document.getElementById('mobile-menu-button'); |
|
|
const mobileMenu = document.getElementById('mobile-menu'); |
|
|
|
|
|
mobileMenuButton.addEventListener('click', function() { |
|
|
mobileMenu.classList.toggle('open'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('#mobile-menu a').forEach(link => { |
|
|
link.addEventListener('click', function() { |
|
|
mobileMenu.classList.remove('open'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const configuratorBtn = document.getElementById('configurator-btn'); |
|
|
const configuratorModal = document.getElementById('configurator-modal'); |
|
|
const closeConfigurator = document.getElementById('close-configurator'); |
|
|
|
|
|
const videoBtn = document.getElementById('video-btn'); |
|
|
const videoModal = document.getElementById('video-modal'); |
|
|
const closeVideo = document.getElementById('close-video'); |
|
|
|
|
|
const modelDetails = document.querySelectorAll('.model-details'); |
|
|
const modelModal = document.getElementById('model-modal'); |
|
|
const closeModel = document.getElementById('close-model'); |
|
|
|
|
|
const contactBtn = document.getElementById('contact-btn'); |
|
|
const contactModal = document.getElementById('contact-modal'); |
|
|
const closeContact = document.getElementById('close-contact'); |
|
|
|
|
|
const quoteBtn = document.getElementById('quote-btn'); |
|
|
const quoteModal = document.getElementById('quote-modal'); |
|
|
const closeQuote = document.getElementById('close-quote'); |
|
|
|
|
|
|
|
|
configuratorBtn.addEventListener('click', function(e) { |
|
|
e.preventDefault(); |
|
|
configuratorModal.classList.remove('hidden'); |
|
|
}); |
|
|
|
|
|
closeConfigurator.addEventListener('click', function() { |
|
|
configuratorModal.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
videoBtn.addEventListener('click', function(e) { |
|
|
e.preventDefault(); |
|
|
videoModal.classList.remove('hidden'); |
|
|
}); |
|
|
|
|
|
closeVideo.addEventListener('click', function() { |
|
|
videoModal.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
modelDetails.forEach(button => { |
|
|
button.addEventListener('click', function(e) { |
|
|
e.preventDefault(); |
|
|
const model = this.getAttribute('data-model'); |
|
|
|
|
|
|
|
|
document.getElementById('model-title').textContent = this.parentElement.querySelector('h3').textContent; |
|
|
|
|
|
|
|
|
let consumption, power, features; |
|
|
|
|
|
switch(model) { |
|
|
case 's-way': |
|
|
consumption = '24.5 L/100km'; |
|
|
power = '570 CV'; |
|
|
features = [ |
|
|
'Moteur Cursor 13 Euro VI', |
|
|
'Transmission automatique 12 rapports', |
|
|
'Cabine haut de gamme avec literie', |
|
|
'Système de navigation intégré', |
|
|
'Assistance au maintien de voie' |
|
|
]; |
|
|
break; |
|
|
case 't-way': |
|
|
consumption = '28.7 L/100km'; |
|
|
power = '520 CV'; |
|
|
features = [ |
|
|
'Moteur Cursor 11 Euro VI', |
|
|
'Transmission automatique 16 rapports', |
|
|
'Cabine robuste avec protection', |
|
|
'Suspension renforcée', |
|
|
'Différentiel verrouillable' |
|
|
]; |
|
|
break; |
|
|
case 'daily': |
|
|
consumption = '9.2 L/100km'; |
|
|
power = '210 CV'; |
|
|
features = [ |
|
|
'Moteur F1C Euro VI', |
|
|
'Transmission automatique 8 rapports', |
|
|
'Cabine multifonction', |
|
|
'Châssis modulable', |
|
|
'Options électriques disponibles' |
|
|
]; |
|
|
break; |
|
|
} |
|
|
|
|
|
document.getElementById('model-consumption').textContent = consumption; |
|
|
document.getElementById('model-power').textContent = power; |
|
|
|
|
|
const featuresList = document.getElementById('model-features'); |
|
|
featuresList.innerHTML = ''; |
|
|
|
|
|
features.forEach(feature => { |
|
|
const li = document.createElement('li'); |
|
|
li.className = 'flex items-start'; |
|
|
li.innerHTML = `<i class="fas fa-check text-blue-400 mt-1 mr-2"></i> ${feature}`; |
|
|
featuresList.appendChild(li); |
|
|
}); |
|
|
|
|
|
modelModal.classList.remove('hidden'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
closeModel.addEventListener('click', function() { |
|
|
modelModal.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
contactBtn.addEventListener('click', function(e) { |
|
|
e.preventDefault(); |
|
|
contactModal.classList.remove('hidden'); |
|
|
}); |
|
|
|
|
|
closeContact.addEventListener('click', function() { |
|
|
contactModal.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
quoteBtn.addEventListener('click', function(e) { |
|
|
e.preventDefault(); |
|
|
quoteModal.classList.remove('hidden'); |
|
|
}); |
|
|
|
|
|
closeQuote.addEventListener('click', function() { |
|
|
quoteModal.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
window.addEventListener('click', function(e) { |
|
|
if (e.target === configuratorModal) { |
|
|
configuratorModal.classList.add('hidden'); |
|
|
} |
|
|
if (e.target === videoModal) { |
|
|
videoModal.classList.add('hidden'); |
|
|
} |
|
|
if (e.target === modelModal) { |
|
|
modelModal.classList.add('hidden'); |
|
|
} |
|
|
if (e.target === contactModal) { |
|
|
contactModal.classList.add('hidden'); |
|
|
} |
|
|
if (e.target === quoteModal) { |
|
|
quoteModal.classList.add('hidden'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const animateOnScroll = () => { |
|
|
const elements = document.querySelectorAll('.feature-card, .stats-item, [class*="group"]'); |
|
|
|
|
|
elements.forEach(element => { |
|
|
const elementPosition = element.getBoundingClientRect().top; |
|
|
const windowHeight = window.innerHeight; |
|
|
|
|
|
if (elementPosition < windowHeight - 100) { |
|
|
element.classList.add('animate__animated', 'animate__fadeInUp'); |
|
|
} |
|
|
}); |
|
|
}; |
|
|
|
|
|
|
|
|
document.querySelectorAll('form').forEach(form => { |
|
|
form.addEventListener('submit', function(e) { |
|
|
e.preventDefault(); |
|
|
alert('Merci pour votre demande ! Un conseiller IVECO vous contactera rapidement.'); |
|
|
this.reset(); |
|
|
|
|
|
|
|
|
if (this.closest('.modal')) { |
|
|
this.closest('.modal').classList.add('hidden'); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
window.addEventListener('load', function() { |
|
|
createParticles(); |
|
|
animateOnScroll(); |
|
|
}); |
|
|
|
|
|
window.addEventListener('scroll', animateOnScroll); |
|
|
</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=docto41/simulator" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
