Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>À Propos | É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-white/70 hover:text-gold transition-colors 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="about.html" class="text-gold text-sm tracking-widest uppercase font-medium">À Propos</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> | |
| <div id="mobile-menu" class="lg:hidden hidden absolute top-full left-0 w-full bg-primary/95 backdrop-blur-xl border-t border-gold/30 py-6 px-6"> | |
| <div class="flex flex-col space-y-4 text-center"> | |
| <a href="index.html" class="text-white hover:text-gold py-2 text-sm tracking-widest uppercase">Accueil</a> | |
| <a href="catalogue.html" class="text-white hover:text-gold py-2 text-sm tracking-widest uppercase">Catalogue</a> | |
| <a href="estimation.html" class="text-white hover:text-gold py-2 text-sm tracking-widest uppercase">Estimation</a> | |
| <a href="conciergerie.html" class="text-white hover:text-gold py-2 text-sm tracking-widest uppercase">Conciergerie</a> | |
| <a href="about.html" class="text-gold py-2 text-sm tracking-widest uppercase">À Propos</a> | |
| <a href="contact.html" class="text-gold font-semibold py-2 text-sm tracking-widest uppercase">Contact</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Header --> | |
| <section class="pt-32 pb-12 px-6 lg:px-12 bg-gradient-to-br from-primary to-primary/90"> | |
| <div class="max-w-7xl mx-auto"> | |
| <span class="text-gold text-sm tracking-[0.3em] uppercase font-medium mb-2 block">Notre Histoire</span> | |
| <h1 class="font-serif text-5xl lg:text-6xl text-white font-light mb-4">À Propos d’ÉléganCiel</h1> | |
| <p class="text-white/70 max-w-2xl">Depuis plus de quinze ans, nous redéfinissons l’immobilier de prestige par une approche sur mesure, alliant discrétion, expertise et passion de l’exception.</p> | |
| </div> | |
| </section> | |
| <!-- Values Section --> | |
| <section class="py-24 px-6 lg:px-12 bg-white"> | |
| <div class="max-w-7xl mx-auto grid lg:grid-cols-2 gap-16 items-center"> | |
| <div class="reveal-on-scroll"> | |
| <span class="text-gold text-sm tracking-[0.3em] uppercase font-medium mb-2 block">Nos Valeurs</span> | |
| <h2 class="font-serif text-4xl lg:text-5xl text-primary font-light mb-6">L’exigence comme signature</h2> | |
| <p class="text-gray-600 leading-relaxed mb-6">ÉléganCiel Immobilier est né de la volonté de créer une agence où chaque détail compte. Nous croyons en une relation de confiance absolue, une confidentialité totale et une capacité à dénicher les biens les plus rares.</p> | |
| <p class="text-gray-600 leading-relaxed">Notre équipe pluridisciplinaire – experts en marché, juristes, décorateurs, concierges – travaille en symbiose pour offrir une expérience sans équivalent.</p> | |
| </div> | |
| <div class="relative reveal-on-scroll"> | |
| <div class="aspect-[4/5] rounded overflow-hidden shadow-2xl"> | |
| <img src="https://static.photos/indoor/640x800/18" alt="Bureau luxueux" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="absolute -bottom-6 -right-6 w-32 h-32 bg-gold/20 rounded-full filter blur-2xl"></div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Team Preview --> | |
| <section class="py-24 px-6 lg:px-12 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16 reveal-on-scroll"> | |
| <span class="text-gold text-sm tracking-[0.3em] uppercase font-medium mb-2 block">Notre Équipe</span> | |
| <h2 class="font-serif text-4xl lg:text-5xl text-primary font-light">Des experts passionnés</h2> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-12"> | |
| <div class="text-center group reveal-on-scroll"> | |
| <div class="w-40 h-40 mx-auto mb-6 rounded-full overflow-hidden shadow-lg"> | |
| <img src="https://static.photos/people/200x200/25" alt="Expert" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"> | |
| </div> | |
| <h3 class="font-serif text-xl text-primary mb-2">Alexandre Dumont</h3> | |
| <p class="text-gold text-sm tracking-widest uppercase mb-2">Fondateur</p> | |
| <p class="text-gray-500 text-sm">Visionnaire et expert en biens d’exception</p> | |
| </div> | |
| <div class="text-center group reveal-on-scroll"> | |
| <div class="w-40 h-40 mx-auto mb-6 rounded-full overflow-hidden shadow-lg"> | |
| <img src="https://static.photos/people/200x200/26" alt="Experte" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"> | |
| </div> | |
| <h3 class="font-serif text-xl text-primary mb-2">Claire Beaumont</h3> | |
| <p class="text-gold text-sm tracking-widest uppercase mb-2">Directrice de clientèle</p> | |
| <p class="text-gray-500 text-sm">Discrétion et accompagnement personnalisé</p> | |
| </div> | |
| <div class="text-center group reveal-on-scroll"> | |
| <div class="w-40 h-40 mx-auto mb-6 rounded-full overflow-hidden shadow-lg"> | |
| <img src="https://static.photos/people/200x200/27" alt="Expert" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"> | |
| </div> | |
| <h3 class="font-serif text-xl text-primary mb-2">Louis Moreau</h3> | |
| <p class="text-gold text-sm tracking-widest uppercase mb-2">Expert en estimation</p> | |
| <p class="text-gray-500 text-sm">Analyse pointue du marché du luxe</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA --> | |
| <section class="py-24 px-6 lg:px-12 bg-primary relative overflow-hidden"> | |
| <div class="max-w-4xl mx-auto text-center relative z-10 reveal-on-scroll"> | |
| <h2 class="font-serif text-4xl text-white font-light mb-6">Rejoignez notre cercle exclusif</h2> | |
| <p class="text-white/70 mb-10">Discutons de vos projets immobiliers en toute confidentialité.</p> | |
| <a href="contact.html" class="inline-block bg-gold hover:bg-gold-light text-white px-12 py-4 transition-all duration-300 text-sm tracking-widest uppercase font-medium shadow-lg"> | |
| Prendre rendez-vous | |
| </a> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-primary text-white py-16 px-6 lg:px-12 border-t border-white/10"> | |
| <div class="max-w-7xl mx-auto text-center"> | |
| <div class="flex items-center justify-center space-x-3 mb-6"> | |
| <svg viewBox="0 0 60 60" class="w-12 h-12 fill-current text-gold"> | |
| <path d="M10 25 L30 10 L50 25 L50 50 L10 50 Z" fill="none" stroke="currentColor" stroke-width="2"/> | |
| <text x="18" y="48" font-size="14" font-family="serif" fill="currentColor">EC</text> | |
| </svg> | |
| </div> | |
| <p class="text-white/60 text-sm">© 2024 ÉléganCiel Immobilier. L’Excellence à votre service.</p> | |
| </div> | |
| </footer> | |
| <!-- Chatbot --> | |
| <div id="chatbot" class="fixed bottom-6 right-6 z-50"> | |
| <button id="chatbot-toggle" class="w-14 h-14 bg-gold hover:bg-gold-light rounded-full shadow-lg flex items-center justify-center transition-all duration-300 group"> | |
| <i data-lucide="message-circle" class="w-6 h-6 text-white"></i> | |
| </button> | |
| <div id="chatbot-window" class="hidden absolute bottom-16 right-0 w-80 bg-white rounded-lg shadow-2xl border border-gray-100 overflow-hidden"> | |
| <div class="bg-primary p-4 flex justify-between items-center"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-8 h-8 bg-gold rounded-full flex items-center justify-center"> | |
| <i data-lucide="crown" class="w-4 h-4 text-white"></i> | |
| </div> | |
| <span class="text-white font-serif">Concierge</span> | |
| </div> | |
| <button id="chatbot-close" class="text-white/70 hover:text-white"> | |
| <i data-lucide="x" class="w-5 h-5"></i> | |
| </button> | |
| </div> | |
| <div class="p-4 h-64 overflow-y-auto bg-gray-50" id="chatbot-messages"> | |
| <div class="mb-4"> | |
| <div class="bg-white p-3 rounded-lg shadow-sm text-sm text-gray-700 inline-block max-w-[85%]"> | |
| Bonjour, je suis votre concierge virtuel. Comment puis-je vous aider aujourd’hui ? | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4 border-t border-gray-100 bg-white"> | |
| <div class="flex space-x-2"> | |
| <input type="text" placeholder="Votre message..." class="flex-1 text-sm px-3 py-2 border border-gray-200 rounded focus:outline-none focus:border-gold"> | |
| <button class="bg-gold text-white px-3 py-2 rounded hover:bg-gold-light transition-colors"> | |
| <i data-lucide="send" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="script.js"></script> | |
| <script> | |
| lucide.createIcons(); | |
| </script> | |
| </body> | |
| </html> |