Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Estimation | ÉléganCiel Immobilier</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/lucide@latest"></script> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Montserrat:wght@300;400;500;600&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="styles.css"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#002349', | |
| gold: '#957C3D', | |
| 'gold-light': '#B8A05F', | |
| }, | |
| fontFamily: { | |
| serif: ['Cormorant Garamond', 'serif'], | |
| sans: ['Montserrat', 'sans-serif'], | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="font-sans text-gray-800 bg-white"> | |
| <!-- Navigation --> | |
| <nav id="navbar" class="fixed w-full z-50 transition-all duration-500 py-6 px-6 lg:px-12 bg-primary/95 backdrop-blur-xl"> | |
| <div class="max-w-7xl mx-auto flex justify-between items-center"> | |
| <a href="index.html" class="flex items-center space-x-3 group"> | |
| <div class="relative w-12 h-12"> | |
| <svg viewBox="0 0 60 60" class="w-full h-full fill-current text-white group-hover:text-gold transition-colors duration-300"> | |
| <path d="M10 25 L30 10 L50 25 L50 50 L10 50 Z" fill="none" stroke="currentColor" stroke-width="2"/> | |
| <path d="M20 50 L20 35 L30 28 L40 35 L40 50" fill="none" stroke="currentColor" stroke-width="2"/> | |
| <text x="18" y="48" font-size="14" font-family="serif" fill="currentColor">EC</text> | |
| </svg> | |
| </div> | |
| <div class="text-white group-hover:text-gold transition-colors duration-300"> | |
| <span class="font-serif text-2xl font-semibold tracking-wide block">ÉLÉGANCIEL</span> | |
| <span class="text-xs tracking-[0.3em] uppercase opacity-80">Immobilier</span> | |
| </div> | |
| </a> | |
| <div class="hidden lg:flex items-center space-x-8"> | |
| <a href="index.html" class="text-white/70 hover:text-gold transition-colors text-sm tracking-widest uppercase font-medium">Accueil</a> | |
| <a href="catalogue.html" class="text-white/70 hover:text-gold transition-colors text-sm tracking-widest uppercase font-medium">Catalogue</a> | |
| <a href="estimation.html" class="text-gold text-sm tracking-widest uppercase font-medium">Estimation</a> | |
| <a href="conciergerie.html" class="text-white/70 hover:text-gold transition-colors text-sm tracking-widest uppercase font-medium">Conciergerie</a> | |
| <a href="contact.html" class="bg-gold hover:bg-gold-light text-white px-8 py-3 transition-all duration-300 text-sm tracking-widest uppercase font-medium">Contact</a> | |
| </div> | |
| <button id="mobile-menu-btn" class="lg:hidden text-white hover:text-gold transition-colors"> | |
| <i data-lucide="menu" class="w-8 h-8"></i> | |
| </button> | |
| </div> | |
| </nav> | |
| <!-- Hero --> | |
| <section class="pt-32 pb-16 px-6 lg:px-12 bg-gradient-to-br from-primary via-primary to-primary/90 relative overflow-hidden"> | |
| <div class="absolute inset-0 opacity-20"> | |
| <div class="absolute top-1/4 left-1/4 w-64 h-64 bg-gold rounded-full filter blur-3xl"></div> | |
| <div class="absolute bottom-1/4 right-1/4 w-96 h-96 bg-gold rounded-full filter blur-3xl"></div> | |
| </div> | |
| <div class="max-w-7xl mx-auto relative z-10 text-center reveal-on-scroll"> | |
| <span class="text-gold text-sm tracking-[0.3em] uppercase font-medium mb-2 block">Expertise Certifiée</span> | |
| <h1 class="font-serif text-5xl lg:text-6xl text-white font-light mb-4">Estimation Gratuite</h1> | |
| <p class="text-white/70 max-w-2xl mx-auto text-lg">Confiez-nous l'évaluation de votre bien. Notre équipe d'experts vous fournit une analyse précise basée sur les données du marché exclusif.</p> | |
| </div> | |
| </section> | |
| <!-- Estimation Form --> | |
| <section class="py-16 px-6 lg:px-12 bg-gradient-to-b from-gray-50 to-white"> | |
| <div class="max-w-5xl mx-auto"> | |
| <div class="bg-white shadow-2xl rounded-sm overflow-hidden"> | |
| <!-- Progress Steps --> | |
| <div class="bg-gradient-to-r from-primary to-primary/95 px-8 py-6"> | |
| <div class="flex justify-between items-center max-w-2xl mx-auto"> | |
| <div class="step active flex flex-col items-center"> | |
| <div class="w-10 h-10 rounded-full bg-gold text-white flex items-center justify-center font-serif text-lg mb-2">1</div> | |
| <span class="text-white/80 text-xs tracking-wider uppercase">Bien</span> | |
| </div> | |
| <div class="flex-1 h-px bg-white/20 mx-4"></div> | |
| <div class="step flex flex-col items-center"> | |
| <div class="w-10 h-10 rounded-full border-2 border-white/40 text-white/60 flex items-center justify-center font-serif text-lg mb-2">2</div> | |
| <span class="text-white/60 text-xs tracking-wider uppercase">Détails</span> | |
| </div> | |
| <div class="flex-1 h-px bg-white/20 mx-4"></div> | |
| <div class="step flex flex-col items-center"> | |
| <div class="w-10 h-10 rounded-full border-2 border-white/40 text-white/60 flex items-center justify-center font-serif text-lg mb-2">3</div> | |
| <span class="text-white/60 text-xs tracking-wider uppercase">Contact</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Form Content --> | |
| <div class="p-8 lg:p-12"> | |
| <form id="estimation-form" class="space-y-8"> | |
| <!-- Step 1 --> | |
| <div id="step-1" class="step-content"> | |
| <h2 class="font-serif text-2xl text-primary mb-6">Type de bien</h2> | |
| <div class="grid md:grid-cols-3 gap-4 mb-8"> | |
| <label class="cursor-pointer relative"> | |
| <input type="radio" name="type" value="maison" class="peer hidden" checked> | |
| <div class="border-2 border-gray-200 peer-checked:border-gold peer-checked:bg-gold/5 p-6 rounded transition-all text-center hover:border-gold/50"> | |
| <i data-lucide="home" class="w-8 h-8 mx-auto mb-3 text-gray-400 peer-checked:text-gold"></i> | |
| <span class="text-sm font-medium text-gray-700 peer-checked:text-primary">Maison</span> | |
| </div> | |
| </label> | |
| <label class="cursor-pointer relative"> | |
| <input type="radio" name="type" value="appartement" class="peer hidden"> | |
| <div class="border-2 border-gray-200 peer-checked:border-gold peer-checked:bg-gold/5 p-6 rounded transition-all text-center hover:border-gold/50"> | |
| <i data-lucide="building" class="w-8 h-8 mx-auto mb-3 text-gray-400 peer-checked:text-gold"></i> | |
| <span class="text-sm font-medium text-gray-700 peer-checked:text-primary">Appartement</span> | |
| </div> | |
| </label> | |
| <label class="cursor-pointer relative"> | |
| <input type="radio" name="type" value="chateau" class="peer hidden"> | |
| <div class="border-2 border-gray-200 peer-checked:border-gold peer-checked:bg-gold/5 p-6 rounded transition-all text-center hover:border-gold/50"> | |
| <i data-lucide="castle" class="w-8 h-8 mx-auto mb-3 text-gray-400 peer-checked:text-gold"></i> | |
| <span class="text-sm font-medium text-gray-700 peer-checked:text-primary">Château/Demeure</span> | |
| </div> | |
| </label> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-6"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Localisation</label> | |
| <div class="relative"> | |
| <i data-lucide="map-pin" class="absolute left-3 top-3 w-5 h-5 text-gray-400"></i> | |
| <input type="text" placeholder="Ville ou code postal" class="w-full pl-10 pr-4 py-3 border border-gray-200 focus:border-gold focus:outline-none transition-colors"> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Surface habitable (m²)</label> | |
| <div class="relative"> | |
| <i data-lucide="maximize" class="absolute left-3 top-3 w-5 h-5 text-gray-400"></i> | |
| <input type="number" placeholder="Ex: 250" class="w-full pl-10 pr-4 py-3 border border-gray-200 focus:border-gold focus:outline-none transition-colors"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Step 2 --> | |
| <div id="step-2" class="step-content hidden"> | |
| <h2 class="font-serif text-2xl text-primary mb-6">Caractéristiques</h2> | |
| <div class="grid md:grid-cols-2 gap-6 mb-6"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Nombre de chambres</label> | |
| <select class="w-full px-4 py-3 border border-gray-200 focus:border-gold focus:outline-none transition-colors"> | |
| <option>1-2 chambres</option> | |
| <option>3-4 chambres</option> | |
| <option>5+ chambres</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Nombre de salles de bain</label> | |
| <select class="w-full px-4 py-3 border border-gray-200 focus:border-gold focus:outline-none transition-colors"> | |
| <option>1-2</option> | |
| <option>3-4</option> | |
| <option>5+</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Année de construction</label> | |
| <input type="number" placeholder="Ex: 1890" class="w-full px-4 py-3 border border-gray-200 focus:border-gold focus:outline-none transition-colors"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">État général</label> | |
| <select class="w-full px-4 py-3 border border-gray-200 focus:border-gold focus:outline-none transition-colors"> | |
| <option>À rénover</option> | |
| <option>Bon état</option> | |
| <option>Parfait état</option> | |
| <option>Refait à neuf</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-sm font-medium text-gray-700 mb-3">Prestations spéciales</label> | |
| <div class="flex flex-wrap gap-3"> | |
| <label class="flex items-center space-x-2 cursor-pointer"> | |
| <input type="checkbox" class="w-4 h-4 text-gold border-gray-300 rounded focus:ring-gold"> | |
| <span class="text-sm text-gray-600">Piscine</span> | |
| </label> | |
| <label class="flex items-center space-x-2 cursor-pointer"> | |
| <input type="checkbox" class="w-4 h-4 text-gold border-gray-300 rounded focus:ring-gold"> | |
| <span class="text-sm text-gray-600">Jardin/Park</span> | |
| </label> | |
| <label class="flex items-center space-x-2 cursor-pointer"> | |
| <input type="checkbox" class="w-4 h-4 text-gold border-gray-300 rounded focus:ring |