Spaces:
Running
Running
File size: 14,019 Bytes
003cd93 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 | <!DOCTYPE html>
<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 |