Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ElectroStyle Pro - Distribution Premium Électricité & Peinture</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Poppins:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| fontFamily: { | |
| 'display': ['Poppins', 'sans-serif'], | |
| 'body': ['Inter', 'sans-serif'], | |
| }, | |
| colors: { | |
| primary: { | |
| 50: '#f0f9ff', | |
| 100: '#e0f2fe', | |
| 500: '#0ea5e9', | |
| 600: '#0284c7', | |
| 700: '#0369a1', | |
| 900: '#0c4a6e' | |
| }, | |
| secondary: { | |
| 50: '#fdf2f8', | |
| 100: '#fce7f3', | |
| 500: '#ec4899', | |
| 600: '#db2777', | |
| 700: '#be185d', | |
| 900: '#831843' | |
| }, | |
| accent: { | |
| 50: '#f8fafc', | |
| 100: '#f1f5f9', | |
| 500: '#64748b', | |
| 600: '#475569', | |
| 700: '#334155', | |
| 900: '#0f172a' | |
| } | |
| }, | |
| animation: { | |
| 'float': 'float 6s ease-in-out infinite', | |
| 'glow': 'glow 2s ease-in-out infinite alternate', | |
| 'slide-up': 'slideUp 0.6s ease-out', | |
| 'fade-in': 'fadeIn 0.8s ease-out', | |
| 'scale-in': 'scaleIn 0.5s ease-out', | |
| }, | |
| keyframes: { | |
| float: { | |
| '0%, 100%': { transform: 'translateY(0px)' }, | |
| '50%': { transform: 'translateY(-20px)' } | |
| }, | |
| glow: { | |
| '0%': { boxShadow: '0 0 20px rgba(14, 165, 233, 0.4)' }, | |
| '100%': { boxShadow: '0 0 30px rgba(14, 165, 233, 0.8)' } | |
| }, | |
| slideUp: { | |
| '0%': { opacity: '0', transform: 'translateY(60px)' }, | |
| '100%': { opacity: '1', transform: 'translateY(0)' } | |
| }, | |
| fadeIn: { | |
| '0%': { opacity: '0' }, | |
| '100%': { opacity: '1' } | |
| }, | |
| scaleIn: { | |
| '0%': { opacity: '0', transform: 'scale(0.9)' }, | |
| '100%': { opacity: '1', transform: 'scale(1)' } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="bg-accent-50 font-body overflow-x-hidden"> | |
| <custom-header></custom-header> | |
| <main> | |
| <!-- Hero Section - Modern Glass Morphism --> | |
| <section class="relative min-h-screen flex items-center justify-center bg-gradient-to-br from-primary-900 via-primary-700 to-primary-500 overflow-hidden"> | |
| <!-- Animated Background Elements --> | |
| <div class="absolute inset-0"> | |
| <div class="absolute top-1/4 left-1/4 w-96 h-96 bg-primary-500/20 rounded-full blur-3xl animate-float"></div> | |
| <div class="absolute top-3/4 right-1/4 w-80 h-80 bg-secondary-500/20 rounded-full blur-3xl animate-float" style="animation-delay: -3s;"></div> | |
| <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-64 h-64 bg-accent-500/10 rounded-full blur-2xl animate-pulse"></div> | |
| </div> | |
| <div class="relative z-10 container mx-auto px-4"> | |
| <div class="max-w-6xl mx-auto text-center"> | |
| <div class="animate-fade-in"> | |
| <h1 class="font-display text-5xl md:text-7xl lg:text-8xl font-bold text-white mb-8 leading-tight"> | |
| Excellence en | |
| <span class="relative inline-block"> | |
| <span class="bg-gradient-to-r from-secondary-400 to-secondary-200 bg-clip-text text-transparent"> | |
| Distribution | |
| </span> | |
| <div class="absolute -bottom-2 left-0 w-full h-1 bg-gradient-to-r from-secondary-400 to-secondary-200 rounded-full animate-glow"></div> | |
| </span> | |
| </h1> | |
| <p class="text-xl md:text-2xl lg:text-3xl text-primary-100 mb-12 max-w-4xl mx-auto leading-relaxed font-light"> | |
| Votre partenaire privilégié pour l'<strong class="text-white">électricité</strong> et la <strong class="text-white">peinture</strong> professionnelle | |
| </p> | |
| </div> | |
| <div class="flex flex-col sm:flex-row gap-6 justify-center items-center animate-slide-up" style="animation-delay: 0.3s;"> | |
| <a href="/catalogue.html" class="group relative overflow-hidden bg-white text-primary-700 px-10 py-5 rounded-2xl font-semibold text-lg transition-all duration-500 hover:scale-105 hover:shadow-2xl"> | |
| <span class="relative z-10">Découvrir notre catalogue</span> | |
| <div class="absolute inset-0 bg-gradient-to-r from-primary-500 to-primary-600 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-500 origin-left"></div> | |
| </a> | |
| <a href="/contact.html" class="group border-2 border-white text-white px-10 py-5 rounded-2xl font-semibold text-lg transition-all duration-500 hover:bg-white hover:text-primary-700 hover:scale-105"> | |
| Nous contacter | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Scroll Indicator --> | |
| <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 animate-bounce"> | |
| <div class="w-6 h-10 border-2 border-white rounded-full flex justify-center"> | |
| <div class="w-1 h-3 bg-white rounded-full mt-2 animate-pulse"></div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Modern Services Section --> | |
| <section class="py-24 bg-white relative"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-20"> | |
| <h2 class="font-display text-4xl md:text-5xl font-bold text-accent-900 mb-6"> | |
| Services Premium | |
| </h2> | |
| <p class="text-xl text-accent-600 max-w-3xl mx-auto"> | |
| Des solutions sur-mesure pour les professionnels exigeants | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| <div class="group bg-gradient-to-br from-white to-accent-50 rounded-3xl p-8 shadow-lg hover:shadow-2xl transition-all duration-500 hover:-translate-y-2 border border-accent-100"> | |
| <div class="relative"> | |
| <div class="w-16 h-16 bg-gradient-to-br from-primary-500 to-primary-600 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-500"> | |
| <i data-feather="truck" class="text-white w-8 h-8"></i> | |
| </div> | |
| <div class="absolute -top-2 -right-2 w-6 h-6 bg-secondary-500 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div> | |
| </div> | |
| <h3 class="font-display text-xl font-bold mb-4 text-accent-900">Livraison Express</h3> | |
| <p class="text-accent-600 leading-relaxed">Livraison gratuite dès 350€, sous 24-48h partout en France métropolitaine</p> | |
| </div> | |
| <div class="group bg-gradient-to-br from-white to-accent-50 rounded-3xl p-8 shadow-lg hover:shadow-2xl transition-all duration-500 hover:-translate-y-2 border border-accent-100"> | |
| <div class="relative"> | |
| <div class="w-16 h-16 bg-gradient-to-br from-secondary-500 to-secondary-600 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-500"> | |
| <i data-feather="headphones" class="text-white w-8 h-8"></i> | |
| </div> | |
| <div class="absolute -top-2 -right-2 w-6 h-6 bg-primary-500 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div> | |
| </div> | |
| <h3 class="font-display text-xl font-bold mb-4 text-accent-900">Support Expert</h3> | |
| <p class="text-accent-600 leading-relaxed">Équipe d'experts à votre disposition pour conseils techniques et devis personnalisés</p> | |
| </div> | |
| <div class="group bg-gradient-to-br from-white to-accent-50 rounded-3xl p-8 shadow-lg hover:shadow-2xl transition-all duration-500 hover:-translate-y-2 border border-accent-100"> | |
| <div class="relative"> | |
| <div class="w-16 h-16 bg-gradient-to-br from-accent-500 to-accent-600 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-500"> | |
| <i data-feather="shield-check" class="text-white w-8 h-8"></i> | |
| </div> | |
| <div class="absolute -top-2 -right-2 w-6 h-6 bg-primary-500 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div> | |
| </div> | |
| <h3 class="font-display text-xl font-bold mb-4 text-accent-900">Paiement Sécurisé</h3> | |
| <p class="text-accent-600 leading-relaxed">Paiement à la livraison, virement ou Click & Collect dans notre showroom</p> | |
| </div> | |
| <div class="group bg-gradient-to-br from-white to-accent-50 rounded-3xl p-8 shadow-lg hover:shadow-2xl transition-all duration-500 hover:-translate-y-2 border border-accent-100"> | |
| <div class="relative"> | |
| <div class="w-16 h-16 bg-gradient-to-br from-primary-600 to-secondary-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-500"> | |
| <i data-feather="map-pin" class="text-white w-8 h-8"></i> | |
| </div> | |
| <div class="absolute -top-2 -right-2 w-6 h-6 bg-secondary-500 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div> | |
| </div> | |
| <h3 class="font-display text-xl font-bold mb-4 text-accent-900">Showroom Premium</h3> | |
| <p class="text-accent-600 leading-relaxed">Venez découvrir nos produits dans notre espace d'exposition moderne à Sarcelles</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Categories Section - Modern Card Design --> | |
| <section class="py-24 bg-gradient-to-br from-accent-50 to-white relative overflow-hidden"> | |
| <div class="absolute inset-0 opacity-5"> | |
| <div class="absolute top-0 left-0 w-full h-full bg-[url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%23000" fill-opacity="0.1"%3E%3Ccircle cx="30" cy="30" r="4"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E')]"></div> | |
| </div> | |
| <div class="container mx-auto px-4 relative"> | |
| <div class="text-center mb-20"> | |
| <h2 class="font-display text-4xl md:text-5xl font-bold text-accent-900 mb-6"> | |
| Nos Spécialités | |
| </h2> | |
| <p class="text-xl text-accent-600 max-w-3xl mx-auto"> | |
| Explorez nos gammes professionnelles d'équipements et fournitures | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 max-w-6xl mx-auto"> | |
| <div class="group relative overflow-hidden rounded-3xl shadow-2xl hover:shadow-3xl transition-all duration-700 hover:scale-105"> | |
| <div class="aspect-[4/3] bg-gradient-to-br from-primary-500 to-primary-700 relative"> | |
| <img src="https://images.unsplash.com/photo-1621905252507-b35492cc74b4?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80" alt="Électricité Professionnelle" class="w-full h-full object-cover mix-blend-overlay"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-primary-900/90 via-primary-700/50 to-transparent"></div> | |
| <div class="absolute inset-0 bg-primary-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-700"></div> | |
| </div> | |
| <div class="absolute bottom-0 left-0 right-0 p-8 text-white"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 bg-white/20 rounded-full flex items-center justify-center mr-4"> | |
| <i data-feather="zap" class="w-6 h-6"></i> | |
| </div> | |
| <span class="text-primary-200 font-medium">Domaine Électrique</span> | |
| </div> | |
| <h3 class="font-display text-3xl font-bold mb-3">Électricité</h3> | |
| <p class="text-primary-100 mb-6 leading-relaxed">Solutions électriques haut de gamme : Legrand, Schneider Electric, Gewiss</p> | |
| <a href="/catalogue.html?category=electricite" class="inline-flex items-center text-white font-semibold group-hover:text-primary-200 transition-colors duration-300"> | |
| Découvrir la gamme | |
| <i data-feather="arrow-right" class="ml-2 w-5 h-5 transform group-hover:translate-x-1 transition-transform duration-300"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="group relative overflow-hidden rounded-3xl shadow-2xl hover:shadow-3xl transition-all duration-700 hover:scale-105"> | |
| <div class="aspect-[4/3] bg-gradient-to-br from-secondary-500 to-secondary-700 relative"> | |
| <img src="https://images.unsplash.com/photo-1586023492125-27b2c045efd7?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80" alt="Peinture Professionnelle" class="w-full h-full object-cover mix-blend-overlay"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-secondary-900/90 via-secondary-700/50 to-transparent"></div> | |
| <div class="absolute inset-0 bg-secondary-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-700"></div> | |
| </div> | |
| <div class="absolute bottom-0 left-0 right-0 p-8 text-white"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 bg-white/20 rounded-full flex items-center justify-center mr-4"> | |
| <i data-feather="droplet" class="w-6 h-6"></i> | |
| </div> | |
| <span class="text-secondary-200 font-medium">Domaine Peinture</span> | |
| </div> | |
| <h3 class="font-display text-3xl font-bold mb-3">Peinture</h3> | |
| <p class="text-secondary-100 mb-6 leading-relaxed">Peintures et revêtements premium : Guittet, Soframap, Théodore</p> | |
| <a href="/catalogue.html?category=peinture" class="inline-flex items-center text-white font-semibold group-hover:text-secondary-200 transition-colors duration-300"> | |
| Découvrir la gamme | |
| <i data-feather="arrow-right" class="ml-2 w-5 h-5 transform group-hover:translate-x-1 transition-transform duration-300"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Premium Brands Section --> | |
| <section class="py-24 bg-white relative"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-20"> | |
| <h2 class="font-display text-4xl md:text-5xl font-bold text-accent-900 mb-6"> | |
| Marques d'Excellence | |
| </h2> | |
| <p class="text-xl text-accent-600 max-w-3xl mx-auto"> | |
| Nous distribuons uniquement les marques leaders du marché | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6"> | |
| <div class="group bg-gradient-to-br from-accent-50 to-white rounded-2xl p-6 shadow-md hover:shadow-xl transition-all duration-500 hover:scale-105 border border-accent-100"> | |
| <div class="aspect-square bg-gradient-to-br from-primary-100 to-primary-200 rounded-xl flex items-center justify-center group-hover:from-primary-200 group-hover:to-primary-300 transition-all duration-500"> | |
| <span class="font-display font-bold text-primary-700 text-lg">LEGRAND</span> | |
| </div> | |
| </div> | |
| <div class="group bg-gradient-to-br from-accent-50 to-white rounded-2xl p-6 shadow-md hover:shadow-xl transition-all duration-500 hover:scale-105 border border-accent-100"> | |
| <div class="aspect-square bg-gradient-to-br from-primary-100 to-primary-200 rounded-xl flex items-center justify-center group-hover:from-primary-200 group-hover:to-primary-300 transition-all duration-500"> | |
| <span class="font-display font-bold text-primary-700 text-lg">SCHNEIDER</span> | |
| </div> | |
| </div> | |
| <div class="group bg-gradient-to-br from-accent-50 to-white rounded-2xl p-6 shadow-md hover:shadow-xl transition-all duration-500 hover:scale-105 border border-accent-100"> | |
| <div class="aspect-square bg-gradient-to-br from-primary-100 to-primary-200 rounded-xl flex items-center justify-center group-hover:from-primary-200 group-hover:to-primary-300 transition-all duration-500"> | |
| <span class="font-display font-bold text-primary-700 text-lg">GEWISS</span> | |
| </div> | |
| </div> | |
| <div class="group bg-gradient-to-br from-accent-50 to-white rounded-2xl p-6 shadow-md hover:shadow-xl transition-all duration-500 hover:scale-105 border border-accent-100"> | |
| <div class="aspect-square bg-gradient-to-br from-secondary-100 to-secondary-200 rounded-xl flex items-center justify-center group-hover:from-secondary-200 group-hover:to-secondary-300 transition-all duration-500"> | |
| <span class="font-display font-bold text-secondary-700 text-lg">GUITTET</span> | |
| </div> | |
| </div> | |
| <div class="group bg-gradient-to-br from-accent-50 to-white rounded-2xl p-6 shadow-md hover:shadow-xl transition-all duration-500 hover:scale-105 border border-accent-100"> | |
| <div class="aspect-square bg-gradient-to-br from-secondary-100 to-secondary-200 rounded-xl flex items-center justify-center group-hover:from-secondary-200 group-hover:to-secondary-300 transition-all duration-500"> | |
| <span class="font-display font-bold text-secondary-700 text-lg">SOFRAMAP</span> | |
| </div> | |
| </div> | |
| <div class="group bg-gradient-to-br from-accent-50 to-white rounded-2xl p-6 shadow-md hover:shadow-xl transition-all duration-500 hover:scale-105 border border-accent-100"> | |
| <div class="aspect-square bg-gradient-to-br from-secondary-100 to-secondary-200 rounded-xl flex items-center justify-center group-hover:from-secondary-200 group-hover:to-secondary-300 transition-all duration-500"> | |
| <span class="font-display font-bold text-secondary-700 text-lg">THÉODORE</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <custom-footer></custom-footer> | |
| <script src="components/header.js"></script> | |
| <script src="components/footer.js"></script> | |
| <script src="script.js"></script> | |
| <script> | |
| // Enhanced feather icons initialization with staggered animations | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Replace icons | |
| if (window.feather) { | |
| feather.replace(); | |
| } | |
| // Add staggered animations to service cards | |
| const serviceCards = document.querySelectorAll('.group'); | |
| serviceCards.forEach((card, index) => { | |
| card.style.animationDelay = `${index * 0.1}s`; | |
| }); | |
| // Add scroll-triggered animations | |
| const observerOptions = { | |
| threshold: 0.1, | |
| rootMargin: '0px 0px -50px 0px' | |
| }; | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.classList.add('animate-scale-in'); | |
| } | |
| }); | |
| }, observerOptions); | |
| // Observe all sections for scroll animations | |
| document.querySelectorAll('section').forEach(section => { | |
| observer.observe(section); | |
| }); | |
| }); | |
| </script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> | |