| <!DOCTYPE html> |
| <html lang="fr"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>E-Permis - Plateforme de demandes administratives en ligne</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> |
| .gradient-bg { |
| background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%); |
| } |
| .card-hover { |
| transition: all 0.3s ease; |
| } |
| .card-hover:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
| } |
| .auth-modal { |
| display: none; |
| animation: fadeIn 0.3s ease-out; |
| } |
| @keyframes fadeIn { |
| from { opacity: 0; transform: translateY(-20px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
| .progress-step { |
| position: relative; |
| } |
| .progress-step:not(:last-child):after { |
| content: ''; |
| position: absolute; |
| top: 20px; |
| left: 50%; |
| height: 20px; |
| width: 2px; |
| background-color: #d1d5db; |
| } |
| </style> |
| </head> |
| <body class="font-sans bg-gray-50"> |
| |
| <nav class="gradient-bg text-white shadow-lg"> |
| <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-file-alt text-2xl mr-2"></i> |
| <span class="font-bold text-xl">E-Permis</span> |
| </div> |
| <div class="hidden md:flex items-center space-x-8"> |
| <a href="#services" class="hover:text-blue-200">Services</a> |
| <a href="#fonctionnement" class="hover:text-blue-200">Comment ça marche</a> |
| <a href="#faq" class="hover:text-blue-200">FAQ</a> |
| <button onclick="openAuthModal('login')" class="bg-white text-blue-600 px-4 py-2 rounded-lg font-medium hover:bg-gray-100 transition">Connexion</button> |
| </div> |
| <button class="md:hidden focus:outline-none" id="mobile-menu-button"> |
| <i class="fas fa-bars text-2xl"></i> |
| </button> |
| </div> |
| |
| <div class="md:hidden hidden pt-4" id="mobile-menu"> |
| <a href="#services" class="block py-2 hover:bg-blue-700 px-4 rounded">Services</a> |
| <a href="#fonctionnement" class="block py-2 hover:bg-blue-700 px-4 rounded">Comment ça marche</a> |
| <a href="#faq" class="block py-2 hover:bg-blue-700 px-4 rounded">FAQ</a> |
| <button onclick="openAuthModal('login')" class="w-full bg-white text-blue-600 px-4 py-2 rounded-lg font-medium hover:bg-gray-100 transition mt-2">Connexion</button> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <section class="gradient-bg text-white py-20"> |
| <div class="container mx-auto px-6 flex flex-col md:flex-row items-center"> |
| <div class="md:w-1/2 mb-10 md:mb-0"> |
| <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-6">Simplifiez vos démarches administratives en ligne</h1> |
| <p class="text-xl mb-8">Demandez vos autorisations en quelques clics et suivez l'avancement de vos dossiers en temps réel.</p> |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> |
| <button onclick="openAuthModal('register')" class="bg-white text-blue-600 px-6 py-3 rounded-lg font-bold hover:bg-gray-100 transition">Créer un compte</button> |
| <button class="border-2 border-white px-6 py-3 rounded-lg font-bold hover:bg-blue-700 transition">En savoir plus</button> |
| </div> |
| </div> |
| <div class="md:w-1/2 flex justify-center"> |
| <img src="https://illustrations.popsy.co/amber/digital-nomad.svg" alt="Personne utilisant un ordinateur" class="w-full max-w-md"> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="services" class="py-16 bg-white"> |
| <div class="container mx-auto px-6"> |
| <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Nos services en ligne</h2> |
| <div class="grid md:grid-cols-2 gap-8"> |
| |
| <div class="bg-gray-50 rounded-xl p-8 card-hover border border-gray-200"> |
| <div class="flex items-center mb-6"> |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> |
| <i class="fas fa-home text-blue-600 text-xl"></i> |
| </div> |
| <h3 class="text-xl font-bold text-gray-800">Permis de construire</h3> |
| </div> |
| <p class="text-gray-600 mb-6">Déposez votre demande de permis de construire en ligne et suivez son avancement en temps réel. Notre système vous guide pas à pas dans le dépôt de votre dossier.</p> |
| <div class="flex justify-between items-center"> |
| <span class="text-sm text-gray-500">Traitement moyen: 2 mois</span> |
| <button onclick="openAuthModal('register')" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition">Démarrer</button> |
| </div> |
| </div> |
| |
| |
| <div class="bg-gray-50 rounded-xl p-8 card-hover border border-gray-200"> |
| <div class="flex items-center mb-6"> |
| <div class="bg-green-100 p-3 rounded-full mr-4"> |
| <i class="fas fa-building text-green-600 text-xl"></i> |
| </div> |
| <h3 class="text-xl font-bold text-gray-800">Autorisation d'urbanisme</h3> |
| </div> |
| <p class="text-gray-600 mb-6">Obtenez votre autorisation d'urbanisme pour vos travaux sans vous déplacer. Notre plateforme vérifie automatiquement la complétude de votre dossier avant soumission.</p> |
| <div class="flex justify-between items-center"> |
| <span class="text-sm text-gray-500">Traitement moyen: 1 mois</span> |
| <button onclick="openAuthModal('register')" class="bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition">Démarrer</button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="fonctionnement" class="py-16 bg-gray-50"> |
| <div class="container mx-auto px-6"> |
| <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Comment ça marche ?</h2> |
| <div class="flex flex-col md:flex-row justify-between items-center mb-12"> |
| <div class="md:w-1/2 mb-10 md:mb-0"> |
| <img src="https://illustrations.popsy.co/amber/secure-files.svg" alt="Processus de demande" class="w-full max-w-md mx-auto"> |
| </div> |
| <div class="md:w-1/2 md:pl-12"> |
| <div class="space-y-8"> |
| <div class="flex"> |
| <div class="flex flex-col items-center mr-6"> |
| <div class="progress-step"> |
| <div class="flex items-center justify-center w-10 h-10 bg-blue-600 rounded-full text-white font-bold">1</div> |
| </div> |
| </div> |
| <div> |
| <h3 class="text-xl font-bold text-gray-800 mb-2">Créez votre compte</h3> |
| <p class="text-gray-600">Inscrivez-vous en quelques minutes avec votre email et des informations personnelles.</p> |
| </div> |
| </div> |
| <div class="flex"> |
| <div class="flex flex-col items-center mr-6"> |
| <div class="progress-step"> |
| <div class="flex items-center justify-center w-10 h-10 bg-blue-600 rounded-full text-white font-bold">2</div> |
| </div> |
| </div> |
| <div> |
| <h3 class="text-xl font-bold text-gray-800 mb-2">Sélectionnez votre demande</h3> |
| <p class="text-gray-600">Choisissez entre permis de construire ou autorisation d'urbanisme selon vos besoins.</p> |
| </div> |
| </div> |
| <div class="flex"> |
| <div class="flex flex-col items-center mr-6"> |
| <div class="progress-step"> |
| <div class="flex items-center justify-center w-10 h-10 bg-blue-600 rounded-full text-white font-bold">3</div> |
| </div> |
| </div> |
| <div> |
| <h3 class="text-xl font-bold text-gray-800 mb-2">Complétez le formulaire</h3> |
| <p class="text-gray-600">Notre assistant intelligent vous guide dans le remplissage et vous indique les pièces à joindre.</p> |
| </div> |
| </div> |
| <div class="flex"> |
| <div class="flex flex-col items-center mr-6"> |
| <div class="progress-step"> |
| <div class="flex items-center justify-center w-10 h-10 bg-blue-600 rounded-full text-white font-bold">4</div> |
| </div> |
| </div> |
| <div> |
| <h3 class="text-xl font-bold text-gray-800 mb-2">Suivez votre dossier</h3> |
| <p class="text-gray-600">Recevez des notifications à chaque étape du traitement de votre demande.</p> |
| </div> |
| </div> |
| </div> |
| </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-12 text-gray-800">Pourquoi choisir E-Permis ?</h2> |
| <div class="grid md:grid-cols-3 gap-8"> |
| <div class="text-center p-6 rounded-lg"> |
| <div class="bg-blue-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4"> |
| <i class="fas fa-clock text-blue-600 text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-2 text-gray-800">Gain de temps</h3> |
| <p class="text-gray-600">Plus besoin de vous déplacer en mairie, toutes les démarches se font en ligne.</p> |
| </div> |
| <div class="text-center p-6 rounded-lg"> |
| <div class="bg-green-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4"> |
| <i class="fas fa-bell text-green-600 text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-2 text-gray-800">Notifications</h3> |
| <p class="text-gray-600">Soyez alerté par email et SMS à chaque étape de votre dossier.</p> |
| </div> |
| <div class="text-center p-6 rounded-lg"> |
| <div class="bg-purple-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4"> |
| <i class="fas fa-lock text-purple-600 text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-2 text-gray-800">Sécurité</h3> |
| <p class="text-gray-600">Vos données sont protégées et chiffrées conformément au RGPD.</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="faq" class="py-16 bg-gray-50"> |
| <div class="container mx-auto px-6"> |
| <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Questions fréquentes</h2> |
| <div class="max-w-3xl mx-auto"> |
| <div class="mb-4 border border-gray-200 rounded-lg overflow-hidden"> |
| <button class="faq-toggle w-full flex justify-between items-center p-4 bg-white hover:bg-gray-50 transition"> |
| <span class="text-lg font-medium text-gray-800">Quels documents dois-je préparer ?</span> |
| <i class="fas fa-chevron-down text-gray-500 transition-transform"></i> |
| </button> |
| <div class="faq-content hidden p-4 bg-gray-50 border-t border-gray-200"> |
| <p class="text-gray-600">Les documents nécessaires dépendent du type de demande. Pour un permis de construire, vous aurez généralement besoin d'un plan de situation, de plans de masse et de coupe, d'un plan des façades et des toitures, ainsi que d'un document graphique. Notre assistant vous guidera précisément selon votre projet.</p> |
| </div> |
| </div> |
| <div class="mb-4 border border-gray-200 rounded-lg overflow-hidden"> |
| <button class="faq-toggle w-full flex justify-between items-center p-4 bg-white hover:bg-gray-50 transition"> |
| <span class="text-lg font-medium text-gray-800">Combien de temps prend le traitement ?</span> |
| <i class="fas fa-chevron-down text-gray-500 transition-transform"></i> |
| </button> |
| <div class="faq-content hidden p-4 bg-gray-50 border-t border-gray-200"> |
| <p class="text-gray-600">Le délai légal pour un permis de construire est de 2 mois à compter de la date de dépôt du dossier complet. Pour une déclaration préalable de travaux, le délai est de 1 mois. Ces délais peuvent varier selon la complexité du dossier et la charge de travail des services instructeurs.</p> |
| </div> |
| </div> |
| <div class="mb-4 border border-gray-200 rounded-lg overflow-hidden"> |
| <button class="faq-toggle w-full flex justify-between items-center p-4 bg-white hover:bg-gray-50 transition"> |
| <span class="text-lg font-medium text-gray-800">Puis-je modifier ma demande après soumission ?</span> |
| <i class="fas fa-chevron-down text-gray-500 transition-transform"></i> |
| </button> |
| <div class="faq-content hidden p-4 bg-gray-50 border-t border-gray-200"> |
| <p class="text-gray-600">Oui, tant que votre dossier n'a pas été pris en compte par l'administration, vous pouvez le modifier via votre espace personnel. Une fois le traitement commencé, vous devrez contacter le service instructeur pour toute modification.</p> |
| </div> |
| </div> |
| <div class="mb-4 border border-gray-200 rounded-lg overflow-hidden"> |
| <button class="faq-toggle w-full flex justify-between items-center p-4 bg-white hover:bg-gray-50 transition"> |
| <span class="text-lg font-medium text-gray-800">Comment payer les frais de dossier ?</span> |
| <i class="fas fa-chevron-down text-gray-500 transition-transform"></i> |
| </button> |
| <div class="faq-content hidden p-4 bg-gray-50 border-t border-gray-200"> |
| <p class="text-gray-600">Le paiement s'effectue directement en ligne par carte bancaire ou virement sécurisé à la soumission de votre demande. Un reçu vous sera envoyé par email. Certaines communes peuvent exempter de frais pour certains types de demandes.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="gradient-bg text-white py-16"> |
| <div class="container mx-auto px-6 text-center"> |
| <h2 class="text-3xl font-bold mb-6">Prêt à simplifier vos démarches ?</h2> |
| <p class="text-xl mb-8 max-w-2xl mx-auto">Rejoignez les milliers de particuliers et professionnels qui utilisent déjà E-Permis pour leurs demandes administratives.</p> |
| <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4"> |
| <button onclick="openAuthModal('register')" class="bg-white text-blue-600 px-8 py-3 rounded-lg font-bold hover:bg-gray-100 transition">Créer un compte gratuit</button> |
| <button class="border-2 border-white px-8 py-3 rounded-lg font-bold hover:bg-blue-700 transition">Nous contacter</button> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <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-file-alt text-2xl mr-2"></i> |
| <span class="font-bold text-xl">E-Permis</span> |
| </div> |
| <p class="text-gray-400">La solution simple et sécurisée pour vos demandes d'autorisations administratives en ligne.</p> |
| </div> |
| <div> |
| <h3 class="text-lg font-bold mb-4">Services</h3> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Permis de construire</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Autorisation d'urbanisme</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Suivi de dossier</a></li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="text-lg font-bold mb-4">Aide</h3> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Centre d'aide</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Contact</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Mentions légales</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">CGU</a></li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="text-lg font-bold mb-4">Nous suivre</h3> |
| <div class="flex space-x-4"> |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-facebook-f"></i></a> |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter"></i></a> |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-linkedin-in"></i></a> |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-instagram"></i></a> |
| </div> |
| <div class="mt-6"> |
| <p class="text-gray-400">Abonnez-vous à notre newsletter</p> |
| <div class="flex mt-2"> |
| <input type="email" placeholder="Votre email" class="bg-gray-700 text-white px-4 py-2 rounded-l focus:outline-none w-full"> |
| <button class="bg-blue-600 px-4 py-2 rounded-r hover:bg-blue-700 transition"><i class="fas fa-paper-plane"></i></button> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400"> |
| <p>© 2023 E-Permis. Tous droits réservés.</p> |
| </div> |
| </div> |
| </footer> |
|
|
| |
| <div id="auth-modal" class="auth-modal fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50"> |
| <div class="bg-white rounded-lg shadow-xl w-full max-w-md overflow-hidden"> |
| <div class="flex justify-between items-center border-b p-4"> |
| <h3 id="auth-modal-title" class="text-xl font-bold">Connexion</h3> |
| <button onclick="closeAuthModal()" class="text-gray-500 hover:text-gray-700"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| |
| |
| <div id="login-form" class="p-6"> |
| <form> |
| <div class="mb-4"> |
| <label for="login-email" class="block text-gray-700 mb-2">Email</label> |
| <input type="email" id="login-email" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| </div> |
| <div class="mb-6"> |
| <label for="login-password" class="block text-gray-700 mb-2">Mot de passe</label> |
| <input type="password" id="login-password" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| <a href="#" class="text-sm text-blue-600 hover:underline mt-2 inline-block">Mot de passe oublié ?</a> |
| </div> |
| <button type="button" class="w-full bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700 transition mb-4">Se connecter</button> |
| <div class="text-center"> |
| <p class="text-gray-600">Pas encore de compte ? <button type="button" onclick="switchAuthForm('register')" class="text-blue-600 hover:underline">S'inscrire</button></p> |
| </div> |
| </form> |
| </div> |
| |
| |
| <div id="register-form" class="p-6 hidden"> |
| <form> |
| <div class="grid md:grid-cols-2 gap-4 mb-4"> |
| <div> |
| <label for="register-firstname" class="block text-gray-700 mb-2">Prénom</label> |
| <input type="text" id="register-firstname" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| </div> |
| <div> |
| <label for="register-lastname" class="block text-gray-700 mb-2">Nom</label> |
| <input type="text" id="register-lastname" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| </div> |
| </div> |
| <div class="mb-4"> |
| <label for="register-email" class="block text-gray-700 mb-2">Email</label> |
| <input type="email" id="register-email" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| </div> |
| <div class="mb-4"> |
| <label for="register-password" class="block text-gray-700 mb-2">Mot de passe</label> |
| <input type="password" id="register-password" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| <p class="text-xs text-gray-500 mt-1">Minimum 8 caractères avec au moins un chiffre et une majuscule</p> |
| </div> |
| <div class="mb-6"> |
| <label for="register-confirm-password" class="block text-gray-700 mb-2">Confirmer le mot de passe</label> |
| <input type="password" id="register-confirm-password" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| </div> |
| <div class="mb-4 flex items-start"> |
| <input type="checkbox" id="register-terms" class="mt-1 mr-2"> |
| <label for="register-terms" class="text-gray-700 text-sm">J'accepte les <a href="#" class="text-blue-600 hover:underline">conditions générales</a> et la <a href="#" class="text-blue-600 hover:underline">politique de confidentialité</a></label> |
| </div> |
| <button type="button" class="w-full bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700 transition mb-4">Créer un compte</button> |
| <div class="text-center"> |
| <p class="text-gray-600">Déjà inscrit ? <button type="button" onclick="switchAuthForm('login')" class="text-blue-600 hover:underline">Se connecter</button></p> |
| </div> |
| </form> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { |
| const menu = document.getElementById('mobile-menu'); |
| menu.classList.toggle('hidden'); |
| }); |
| |
| |
| </html> |
