|
|
<!DOCTYPE html> |
|
|
<html lang="fr"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>DR Solar | Votre liberté passe par l'énergie solaire</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> |
|
|
.hero-gradient { |
|
|
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); |
|
|
} |
|
|
.btn-glow { |
|
|
box-shadow: 0 0 15px rgba(59, 130, 246, 0.5); |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.btn-glow:hover { |
|
|
box-shadow: 0 0 25px rgba(59, 130, 246, 0.7); |
|
|
transform: translateY(-2px); |
|
|
} |
|
|
.sun-pulse { |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
@keyframes pulse { |
|
|
0% { transform: scale(1); } |
|
|
50% { transform: scale(1.05); } |
|
|
100% { transform: scale(1); } |
|
|
} |
|
|
.page-transition { |
|
|
transition: opacity 0.5s ease; |
|
|
} |
|
|
.hidden-page { |
|
|
opacity: 0; |
|
|
pointer-events: none; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
} |
|
|
.dr-logo { |
|
|
font-weight: 800; |
|
|
letter-spacing: -1px; |
|
|
} |
|
|
.dr-logo span { |
|
|
color: #3b82f6; |
|
|
} |
|
|
|
|
|
.calendly-inline-widget { |
|
|
min-height: 1000px; |
|
|
height: 100vh; |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
.appointment-container { |
|
|
min-height: 100vh; |
|
|
padding-bottom: 2rem; |
|
|
} |
|
|
|
|
|
.appointment-header { |
|
|
padding-top: 2rem; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="font-sans bg-gray-50 text-gray-800 min-h-screen"> |
|
|
|
|
|
<nav class="bg-white shadow-md"> |
|
|
<div class="container mx-auto px-6 py-4"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-solar-panel text-blue-500 text-3xl mr-2"></i> |
|
|
<span class="dr-logo font-bold text-xl text-gray-800">DR <span>Solar</span></span> |
|
|
</div> |
|
|
<div class="hidden md:flex items-center space-x-8"> |
|
|
<a href="#" class="nav-link text-gray-600 hover:text-blue-500 transition">Accueil</a> |
|
|
<a href="#" class="nav-link text-gray-600 hover:text-blue-500 transition">Services</a> |
|
|
<a href="#" class="nav-link text-gray-600 hover:text-blue-500 transition">À propos</a> |
|
|
<a href="#" class="nav-link text-gray-600 hover:text-blue-500 transition">Contact</a> |
|
|
</div> |
|
|
<button id="menu-btn" class="md:hidden focus:outline-none"> |
|
|
<i class="fas fa-bars text-gray-600 text-xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div id="mobile-menu" class="hidden md:hidden mt-4"> |
|
|
<a href="#" class="block py-2 text-gray-600 hover:text-blue-500 transition">Accueil</a> |
|
|
<a href="#" class="block py-2 text-gray-600 hover:text-blue-500 transition">Services</a> |
|
|
<a href="#" class="block py-2 text-gray-600 hover:text-blue-500 transition">À propos</a> |
|
|
<a href="#" class="block py-2 text-gray-600 hover:text-blue-500 transition">Contact</a> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<div id="home-page" class="page-transition"> |
|
|
|
|
|
<section class="hero-gradient text-white"> |
|
|
<div class="container mx-auto px-6 py-24 md:py-32"> |
|
|
<div class="flex flex-col md:flex-row items-center"> |
|
|
<div class="md:w-1/2 mb-12 md:mb-0"> |
|
|
<h1 class="text-4xl md:text-5xl font-bold leading-tight mb-6"> |
|
|
Votre liberté passe par <br> <span class="text-blue-200">l'énergie solaire</span> |
|
|
</h1> |
|
|
<p class="text-xl mb-8 opacity-90"> |
|
|
DR Solar vous accompagne dans votre transition énergétique avec des solutions solaires sur mesure. |
|
|
</p> |
|
|
<button id="rdv-btn" class="bg-white text-blue-600 font-bold py-4 px-8 rounded-full text-lg btn-glow sun-pulse"> |
|
|
Prendre Rendez-vous |
|
|
</button> |
|
|
</div> |
|
|
<div class="md:w-1/2 flex justify-center"> |
|
|
<img src="https://images.unsplash.com/photo-1509391366360-2e959784a276?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1472&q=80" |
|
|
alt="Panneaux solaires DR Solar" |
|
|
class="rounded-lg shadow-2xl w-full max-w-lg border-4 border-white"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<h2 class="text-3xl font-bold text-center mb-16">Les solutions DR Solar</h2> |
|
|
<div class="grid md:grid-cols-3 gap-12"> |
|
|
<div class="text-center"> |
|
|
<div class="bg-blue-100 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6"> |
|
|
<i class="fas fa-home text-blue-600 text-3xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-3">Installation résidentielle</h3> |
|
|
<p class="text-gray-600">Solutions solaires clé en main pour votre maison avec garantie de performance.</p> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<div class="bg-blue-100 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6"> |
|
|
<i class="fas fa-industry text-blue-600 text-3xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-3">Solutions professionnelles</h3> |
|
|
<p class="text-gray-600">Optimisez votre consommation énergétique avec nos solutions pour entreprises.</p> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<div class="bg-blue-100 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6"> |
|
|
<i class="fas fa-battery-full text-blue-600 text-3xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-3">Systèmes de stockage</h3> |
|
|
<p class="text-gray-600">Maximisez votre autonomie avec nos batteries haute performance.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-gray-100"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<h2 class="text-3xl font-bold text-center mb-16">Ils nous font confiance</h2> |
|
|
<div class="grid md:grid-cols-2 gap-8"> |
|
|
<div class="bg-white p-8 rounded-lg shadow-md"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="text-yellow-500 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-600 mb-6">"DR Solar a transformé ma maison en centrale électrique autonome. Leur expertise et leur professionnalisme sont remarquables."</p> |
|
|
<div class="flex items-center"> |
|
|
<img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Client" class="w-12 h-12 rounded-full mr-4"> |
|
|
<div> |
|
|
<h4 class="font-semibold">Sophie Martin</h4> |
|
|
<p class="text-gray-500 text-sm">Toulouse</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white p-8 rounded-lg shadow-md"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="text-yellow-500 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-600 mb-6">"Notre entreprise a réduit ses coûts énergétiques de 60% grâce à l'installation DR Solar. Un retour sur investissement rapide et une équipe très réactive."</p> |
|
|
<div class="flex items-center"> |
|
|
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Client" class="w-12 h-12 rounded-full mr-4"> |
|
|
<div> |
|
|
<h4 class="font-semibold">Pierre Dubois</h4> |
|
|
<p class="text-gray-500 text-sm">Lyon</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-blue-600 text-white"> |
|
|
<div class="container mx-auto px-6 text-center"> |
|
|
<h2 class="text-3xl font-bold mb-6">Prêt à rejoindre la révolution solaire ?</h2> |
|
|
<p class="text-xl mb-8 max-w-2xl mx-auto">Nos experts DR Solar vous conseillent gratuitement pour trouver la solution adaptée à vos besoins.</p> |
|
|
<button id="rdv-btn-2" class="bg-white text-blue-600 font-bold py-4 px-8 rounded-full text-lg btn-glow"> |
|
|
Prendre Rendez-vous |
|
|
</button> |
|
|
</div> |
|
|
</section> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="appointment-page" class="page-transition hidden-page"> |
|
|
<section class="appointment-container"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="appointment-header flex items-center mb-8"> |
|
|
<button id="back-btn" class="mr-4 text-gray-600 hover:text-blue-500 transition"> |
|
|
<i class="fas fa-arrow-left text-2xl"></i> |
|
|
</button> |
|
|
<h2 class="text-3xl font-bold">Prendre rendez-vous avec DR Solar</h2> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-lg shadow-lg p-6"> |
|
|
<h3 class="text-xl font-semibold mb-4">Sélectionnez une date et une heure</h3> |
|
|
|
|
|
<div id="calendly-widget" class="calendly-inline-widget"></div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="confirmation-page" class="page-transition hidden-page"> |
|
|
<section class="py-32"> |
|
|
<div class="container mx-auto px-6 text-center"> |
|
|
<div class="max-w-2xl mx-auto bg-white rounded-lg shadow-lg p-12"> |
|
|
<div class="w-24 h-24 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-6"> |
|
|
<i class="fas fa-check text-blue-500 text-4xl"></i> |
|
|
</div> |
|
|
<h2 class="text-3xl font-bold mb-6">Merci pour votre confiance <span class="text-blue-500">🌞</span></h2> |
|
|
<p class="text-xl text-gray-600 mb-8"> |
|
|
Votre rendez-vous a été confirmé avec succès. Un expert DR Solar vous contactera si nécessaire. |
|
|
</p> |
|
|
<p class="text-lg text-gray-600 mb-8"> |
|
|
À très vite pour votre transition vers l'énergie solaire ! |
|
|
</p> |
|
|
<button id="home-btn" class="bg-blue-600 text-white font-bold py-3 px-8 rounded-lg hover:bg-blue-700 transition"> |
|
|
Retour à l'accueil |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
</div> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-800 text-white py-12"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="grid md:grid-cols-4 gap-8"> |
|
|
<div> |
|
|
<div class="flex items-center mb-4"> |
|
|
<i class="fas fa-solar-panel text-blue-400 text-3xl mr-2"></i> |
|
|
<span class="dr-logo font-bold text-xl">DR <span>Solar</span></span> |
|
|
</div> |
|
|
<p class="text-gray-400"> |
|
|
Expert en solutions solaires depuis 2010. Nous apportons lumière et énergie à votre quotidien. |
|
|
</p> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold mb-4">Nos services</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-blue-400 transition">Installation résidentielle</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-blue-400 transition">Solutions professionnelles</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-blue-400 transition">Systèmes de stockage</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-blue-400 transition">Maintenance</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold mb-4">Contact</h3> |
|
|
<ul class="space-y-2 text-gray-400"> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-map-marker-alt mr-2 text-blue-400"></i> |
|
|
<span>Rue émile féron 98 1060 Bruxelles</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-phone mr-2 text-blue-400"></i> |
|
|
<span>0472 567 927</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-envelope mr-2 text-blue-400"></i> |
|
|
<span>drsolarbruxelles@gmail.com</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold mb-4">Suivez DR Solar</h3> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="w-10 h-10 bg-gray-700 rounded-full flex items-center justify-center hover:bg-blue-500 transition"> |
|
|
<i class="fab fa-facebook-f"></i> |
|
|
</a> |
|
|
<a href="#" class="w-10 h-10 bg-gray-700 rounded-full flex items-center justify-center hover:bg-blue-500 transition"> |
|
|
<i class="fab fa-twitter"></i> |
|
|
</a> |
|
|
<a href="#" class="w-10 h-10 bg-gray-700 rounded-full flex items-center justify-center hover:bg-blue-500 transition"> |
|
|
<i class="fab fa-instagram"></i> |
|
|
</a> |
|
|
<a href="#" class="w-10 h-10 bg-gray-700 rounded-full flex items-center justify-center hover:bg-blue-500 transition"> |
|
|
<i class="fab fa-linkedin-in"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400"> |
|
|
<p>© 2023 DR Solar. Tous droits réservés.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
|
|
|
<script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript" async></script> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.getElementById('menu-btn').addEventListener('click', function() { |
|
|
const menu = document.getElementById('mobile-menu'); |
|
|
menu.classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
const homePage = document.getElementById('home-page'); |
|
|
const appointmentPage = document.getElementById('appointment-page'); |
|
|
const confirmationPage = document.getElementById('confirmation-page'); |
|
|
|
|
|
|
|
|
document.getElementById('rdv-btn').addEventListener('click', showAppointmentPage); |
|
|
document.getElementById('rdv-btn-2').addEventListener('click', showAppointmentPage); |
|
|
|
|
|
function showAppointmentPage() { |
|
|
homePage.classList.add('hidden-page'); |
|
|
appointmentPage.classList.remove('hidden-page'); |
|
|
|
|
|
|
|
|
Calendly.initInlineWidget({ |
|
|
url: 'https://calendly.com/drsolar', |
|
|
parentElement: document.getElementById('calendly-widget'), |
|
|
prefill: {}, |
|
|
utm: {} |
|
|
}); |
|
|
|
|
|
|
|
|
window.addEventListener('message', function(e) { |
|
|
if (e.data.event && e.data.event === 'calendly.event_scheduled') { |
|
|
|
|
|
appointmentPage.classList.add('hidden-page'); |
|
|
confirmationPage.classList.remove('hidden-page'); |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
document.getElementById('back-btn').addEventListener('click', function() { |
|
|
appointmentPage.classList.add('hidden-page'); |
|
|
homePage.classList.remove('hidden-page'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('home-btn').addEventListener('click', function() { |
|
|
confirmationPage.classList.add('hidden-page'); |
|
|
homePage.classList.remove('hidden-page'); |
|
|
}); |
|
|
</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=durjan/drsolar" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
