Hugging Face's logo

Spaces:
gregorybots
/
electrostyle-pro
Running

App Files Community
gregorybots commited on
Commit
3003df9
·
verified ·
1 Parent(s): 61bf8ce

peux tu reproduire ce site https://jpconseilcentre.fr/

Browse files
Files changed (8) hide show
  1. README.md +7 -4
  2. catalogue.html +145 -0
  3. components/footer.js +121 -0
  4. components/header.js +121 -0
  5. contact.html +9 -0
  6. index.html +341 -18
  7. script.js +211 -0
  8. style.css +82 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Electrostyle Pro
3
- emoji: 🐨
4
  colorFrom: yellow
5
- colorTo: red
 
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: ElectroStyle Pro ✨
 
3
  colorFrom: yellow
4
+ colorTo: purple
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://huggingface.co/deepsite).
catalogue.html ADDED
@@ -0,0 +1,145 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="fr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Catalogue - ÉlecPeinture Distribution</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <link rel="stylesheet" href="style.css">
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://unpkg.com/feather-icons"></script>
12
+ <script>
13
+ tailwind.config = {
14
+ theme: {
15
+ extend: {
16
+ colors: {
17
+ primary: '#1E3A8A',
18
+ secondary: '#F97316',
19
+ accent: '#64748B'
20
+ }
21
+ }
22
+ }
23
+ }
24
+ </script>
25
+ </head>
26
+ <body class="bg-gray-50">
27
+ <custom-header></custom-header>
28
+
29
+ <main class="min-h-screen">
30
+ <div class="container mx-auto px-4 py-8">
31
+ <!-- Breadcrumb -->
32
+ <nav class="mb-6">
33
+ <div class="flex items-center space-x-2 text-sm text-gray-600">
34
+ <a href="/" class="hover:text-primary transition-colors duration-300">Accueil</a>
35
+ <span>></span>
36
+ <span class="text-primary font-medium">Catalogue</span>
37
+ </div>
38
+ </nav>
39
+
40
+ <!-- Page Header -->
41
+ <div class="mb-8">
42
+ <h1 class="text-3xl md:text-4xl font-bold text-gray-800">Notre Catalogue Complet</h1>
43
+ <p class="text-gray-600 mt-2">Découvrez notre sélection de produits professionnels</p>
44
+ </div>
45
+
46
+ <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
47
+ <!-- Sidebar Filters -->
48
+ <aside class="lg:col-span-1">
49
+ <div class="bg-white rounded-xl shadow-lg p-6">
50
+ <h3 class="font-semibold text-lg mb-4">Filtrer par</h3>
51
+
52
+ <!-- Categories -->
53
+ <div class="mb-6">
54
+ <h4 class="font-medium mb-3">Catégories</h4>
55
+ <div class="space-y-2">
56
+ <label class="flex items-center">
57
+ <input type="checkbox" class="rounded text-primary focus:ring-primary">
58
+ Électricité
59
+ </label>
60
+ <label class="flex items-center">
61
+ <input type="checkbox" class="rounded text-primary focus:ring-primary">
62
+ Peinture
63
+ </label>
64
+ <label class="flex items-center">
65
+ <input type="checkbox" class="rounded text-primary focus:ring-primary">
66
+ Outillage
67
+ </label>
68
+ <label class="flex items-center">
69
+ <input type="checkbox" class="rounded text-primary focus:ring-primary">
70
+ Préparation
71
+ </label>
72
+ </div>
73
+ </div>
74
+
75
+ <!-- Brands -->
76
+ <div class="mb-6">
77
+ <h4 class="font-medium mb-3">Marques</h4>
78
+ <div class="space-y-2">
79
+ <label class="flex items-center">
80
+ <input type="checkbox" class="rounded text-primary focus:ring-primary">
81
+ Legrand
82
+ </label>
83
+ <label class="flex items-center">
84
+ <input type="checkbox" class="rounded text-primary focus:ring-primary">
85
+ Schneider
86
+ </label>
87
+ <label class="flex items-center">
88
+ <input type="checkbox" class="rounded text-primary focus:ring-primary">
89
+ Gewiss
90
+ </label>
91
+ <label class="flex items-center">
92
+ <input type="checkbox" class="rounded text-primary focus:ring-primary">
93
+ Guittet
94
+ </label>
95
+ </div>
96
+ </div>
97
+
98
+ <!-- Price Range -->
99
+ <div class="mb-6">
100
+ <h4 class="font-medium mb-3">Prix</h4>
101
+ <div class="space-y-2">
102
+ <input type="range" min="0" max="1000" class="w-full">
103
+ <div class="flex justify-between text-sm text-gray-600">
104
+ <span>0€</span>
105
+ <span>1000€</span>
106
+ </div>
107
+ </div>
108
+ </div>
109
+ </div>
110
+ </aside>
111
+
112
+ <!-- Products Grid -->
113
+ <section class="lg:col-span-3">
114
+ <div class="mb-6">
115
+ <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
116
+ <p class="text-gray-600">Affichage de <span class="font-semibold">12</span> produits</p>
117
+ <select class="border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary">
118
+ <option>Trier par : Pertinence</option>
119
+ <option>Prix croissant</option>
120
+ <option>Prix décroissant</option>
121
+ </select>
122
+ </div>
123
+
124
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
125
+ <!-- Product cards will be dynamically loaded -->
126
+ <div id="products-grid" class="col-span-full">
127
+ <div class="text-center py-12">
128
+ <i data-feather="package" class="w-12 h-12 text-gray-400 mx-auto mb-4"></i>
129
+ <p class="text-gray-600">Chargement des produits...</p>
130
+ </div>
131
+ </div>
132
+ </div>
133
+ </section>
134
+ </div>
135
+ </div>
136
+ </main>
137
+
138
+ <custom-footer></custom-footer>
139
+
140
+ <script src="components/header.js"></script>
141
+ <script src="components/footer.js"></script>
142
+ <script src="script.js"></script>
143
+ <script>feather.replace();</script>
144
+ </body>
145
+ </html>
components/footer.js ADDED
@@ -0,0 +1,121 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomFooter extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ :host {
7
+ display: block;
8
+ background: #1f2937;
9
+ color: white;
10
+ }
11
+ .footer-section {
12
+ padding: 40px 0;
13
+ }
14
+ .footer-links a {
15
+ color: #d1d5db;
16
+ transition: color 0.3s ease;
17
+ }
18
+ .footer-links a:hover {
19
+ color: white;
20
+ }
21
+ .social-icon {
22
+ width: 40px;
23
+ height: 40px;
24
+ background: #374151;
25
+ border-radius: 50%;
26
+ display: flex;
27
+ align-items: center;
28
+ justify-content: center;
29
+ transition: all 0.3s ease;
30
+ }
31
+ .social-icon:hover {
32
+ background: #F97316;
33
+ transform: scale(1.1);
34
+ }
35
+ </style>
36
+ <footer class="footer-section">
37
+ <div class="container mx-auto px-4">
38
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
39
+ <!-- Company Info -->
40
+ <div>
41
+ <h3 class="text-xl font-bold mb-4">ÉLECPEINTURE</h3>
42
+ <p class="text-gray-400 mb-4">
43
+ Votre partenaire professionnel en électricité et peinture
44
+ </p>
45
+ <div class="flex space-x-4">
46
+ <a href="#" class="social-icon">
47
+ <i data-feather="facebook"></i>
48
+ </a>
49
+ <a href="#" class="social-icon">
50
+ <i data-feather="instagram"></i>
51
+ </a>
52
+ <a href="#" class="social-icon">
53
+ <i data-feather="linkedin"></i>
54
+ </a>
55
+ </div>
56
+ </div>
57
+
58
+ <!-- Quick Links -->
59
+ <div>
60
+ <h4 class="font-semibold mb-4">Navigation</h4>
61
+ <div class="footer-links space-y-2">
62
+ <a href="/">Accueil</a>
63
+ <a href="/catalogue.html">Catalogue</a>
64
+ <a href="/electricite.html">Électricité</a>
65
+ <a href="/peinture.html">Peinture</a>
66
+ <a href="/promotions.html">Promotions</a>
67
+ </div>
68
+ </div>
69
+
70
+ <!-- Services -->
71
+ <div>
72
+ <h4 class="font-semibold mb-4">Services</h4>
73
+ <div class="footer-links space-y-2">
74
+ <a href="/livraison.html">Livraison</a>
75
+ <a href="/magasin.html">Notre Magasin</a>
76
+ <a href="/contact.html">Contact</a>
77
+ </div>
78
+
79
+ <!-- Contact Info -->
80
+ <div>
81
+ <h4 class="font-semibold mb-4">Contact</h4>
82
+ <div class="footer-links space-y-2">
83
+ <a href="tel:0139912304">📞 01 39 91 23 04</h4>
84
+ <p class="text-gray-400">Sarcelles, 95200</p>
85
+ <p class="text-gray-400">Lun-Ven: 8h-18h</p>
86
+ <a href="mailto:contact@elecpeinture.fr">✉️ contact@elecpeinture.fr</a>
87
+ </div>
88
+ </div>
89
+
90
+ <!-- Bottom Bar -->
91
+ <div class="border-t border-gray-600 mt-8 pt-8">
92
+ <div class="flex flex-col md:flex-row justify-between items-center">
93
+ <p class="text-gray-400 text-sm">
94
+ © 2024 ÉLECPEINTURE. Tous droits réservés.
95
+ </p>
96
+ <div class="flex space-x-6 mt-4 md:mt-0">
97
+ <a href="/mentions-legales.html" class="text-gray-400 hover:text-white text-sm transition-colors duration-300">
98
+ Mentions Légales
99
+ </a>
100
+ <a href="/cgv.html" class="text-gray-400 hover:text-white text-sm transition-colors duration-300">
101
+ CGV
102
+ </a>
103
+ <a href="/confidentialite.html" class="text-gray-400 hover:text-white text-sm transition-colors duration-300">
104
+ Confidentialité
105
+ </a>
106
+ </div>
107
+ </div>
108
+ </div>
109
+ </div>
110
+ </footer>
111
+ `;
112
+ // Initialize feather icons in shadow DOM
113
+ setTimeout(() => {
114
+ if (window.feather) {
115
+ window.feather.replace();
116
+ }
117
+ }, 200);
118
+ }
119
+ }
120
+
121
+ customElements.define('custom-footer', CustomFooter);
components/header.js ADDED
@@ -0,0 +1,121 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomHeader extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ :host {
7
+ display: block;
8
+ position: sticky;
9
+ top: 0;
10
+ z-index: 1000;
11
+ }
12
+ .top-bar {
13
+ background: linear-gradient(135deg, #1E3A8A 0%, #1e40af 100%);
14
+ color: white;
15
+ padding: 8px 0;
16
+ font-size: 14px;
17
+ }
18
+ .header-main {
19
+ background: white;
20
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
21
+ }
22
+ .nav-link {
23
+ color: #374151;
24
+ transition: color 0.3s ease;
25
+ }
26
+ .nav-link:hover {
27
+ color: #1E3A8A;
28
+ }
29
+ .mobile-menu {
30
+ background: white;
31
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
32
+ }
33
+ @media (max-width: 768px) {
34
+ .desktop-nav {
35
+ display: none;
36
+ }
37
+ }
38
+ </style>
39
+ <div class="header-container">
40
+ <!-- Top Bar -->
41
+ <div class="top-bar">
42
+ <div class="container mx-auto px-4">
43
+ <div class="flex justify-between items-center">
44
+ <span>🛒 Livraison gratuite à partir de 350€ | 📞 01 39 91 23 04</span>
45
+ <div class="hidden md:flex items-center space-x-4">
46
+ <a href="/contact.html" class="hover:underline">Contact</a>
47
+ <a href="/magasin.html" class="hover:underline">Notre Magasin</a>
48
+ </div>
49
+ </div>
50
+ </div>
51
+
52
+ <!-- Main Header -->
53
+ <div class="header-main">
54
+ <div class="container mx-auto px-4 py-4">
55
+ <div class="flex items-center justify-between">
56
+ <!-- Logo -->
57
+ <a href="/" class="flex items-center space-x-3">
58
+ <div class="w-10 h-10 bg-primary rounded-lg flex items-center justify-center">
59
+ <i data-feather="zap"></i>
60
+ </div>
61
+ <span class="text-xl font-bold text-primary">ÉLECPEINTURE</span>
62
+ </a>
63
+
64
+ <!-- Desktop Navigation -->
65
+ <nav class="desktop-nav hidden md:flex items-center space-x-8">
66
+ <a href="/catalogue.html" class="nav-link font-medium">Catalogue</a>
67
+ <a href="/electricite.html" class="nav-link font-medium">Électricité</a>
68
+ <a href="/peinture.html" class="nav-link font-medium">Peinture</a>
69
+ <a href="/promotions.html" class="nav-link font-medium">Promotions</a>
70
+ <a href="/magasin.html" class="nav-link font-medium">Magasin</a>
71
+ </nav>
72
+
73
+ <!-- Search and Actions -->
74
+ <div class="flex items-center space-x-4">
75
+ <div class="relative">
76
+ <input type="text" placeholder="Rechercher un produit..."
77
+ class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
78
+ <div class="absolute left-3 top-1/2 transform -translate-y-1/2">
79
+ <i data-feather="search"></i>
80
+ </div>
81
+ </div>
82
+
83
+ <!-- Phone Button -->
84
+ <a href="tel:0139912304"
85
+ class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg font-medium transition-all duration-300">
86
+ 📞 01 39 91 23 04
87
+ </a>
88
+
89
+ <!-- Mobile Menu Toggle -->
90
+ <button id="menu-toggle" class="md:hidden">
91
+ <i data-feather="menu"></i>
92
+ </button>
93
+ </div>
94
+ </div>
95
+
96
+ <!-- Mobile Menu -->
97
+ <div id="mobile-menu" class="mobile-menu hidden md:hidden absolute top-full left-0 right-0">
98
+ <div class="container mx-auto px-4 py-4">
99
+ <a href="/catalogue.html" class="block py-2 nav-link">Catalogue</a>
100
+ <a href="/electricite.html" class="block py-2 nav-link">Électricité</a>
101
+ <a href="/peinture.html" class="block py-2 nav-link">Peinture</a>
102
+ <a href="/promotions.html" class="block py-2 nav-link">Promotions</a>
103
+ <a href="/magasin.html" class="block py-2 nav-link">Magasin</a>
104
+ <a href="/contact.html" class="block py-2 nav-link">Contact</a>
105
+ </div>
106
+ </div>
107
+ </div>
108
+ </div>
109
+ </div>
110
+ </div>
111
+ `;
112
+ // Initialize feather icons in shadow DOM
113
+ setTimeout(() => {
114
+ if (window.feather) {
115
+ window.feather.replace();
116
+ }
117
+ }, 200);
118
+ }
119
+ }
120
+
121
+ customElements.define('custom-header', CustomHeader);
contact.html ADDED
@@ -0,0 +1,9 @@
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="fr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Contact - ÉlecPeinture Distribution</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon
8
+ </head>
9
+ </html>
index.html CHANGED
@@ -1,19 +1,342 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="fr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>ElectroStyle Pro - Distribution Premium Électricité & Peinture</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <link rel="stylesheet" href="style.css">
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <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">
12
+ <script>
13
+ tailwind.config = {
14
+ theme: {
15
+ extend: {
16
+ fontFamily: {
17
+ 'display': ['Poppins', 'sans-serif'],
18
+ 'body': ['Inter', 'sans-serif'],
19
+ },
20
+ colors: {
21
+ primary: {
22
+ 50: '#f0f9ff',
23
+ 100: '#e0f2fe',
24
+ 500: '#0ea5e9',
25
+ 600: '#0284c7',
26
+ 700: '#0369a1',
27
+ 900: '#0c4a6e'
28
+ },
29
+ secondary: {
30
+ 50: '#fdf2f8',
31
+ 100: '#fce7f3',
32
+ 500: '#ec4899',
33
+ 600: '#db2777',
34
+ 700: '#be185d',
35
+ 900: '#831843'
36
+ },
37
+ accent: {
38
+ 50: '#f8fafc',
39
+ 100: '#f1f5f9',
40
+ 500: '#64748b',
41
+ 600: '#475569',
42
+ 700: '#334155',
43
+ 900: '#0f172a'
44
+ }
45
+ },
46
+ animation: {
47
+ 'float': 'float 6s ease-in-out infinite',
48
+ 'glow': 'glow 2s ease-in-out infinite alternate',
49
+ 'slide-up': 'slideUp 0.6s ease-out',
50
+ 'fade-in': 'fadeIn 0.8s ease-out',
51
+ 'scale-in': 'scaleIn 0.5s ease-out',
52
+ },
53
+ keyframes: {
54
+ float: {
55
+ '0%, 100%': { transform: 'translateY(0px)' },
56
+ '50%': { transform: 'translateY(-20px)' }
57
+ },
58
+ glow: {
59
+ '0%': { boxShadow: '0 0 20px rgba(14, 165, 233, 0.4)' },
60
+ '100%': { boxShadow: '0 0 30px rgba(14, 165, 233, 0.8)' }
61
+ },
62
+ slideUp: {
63
+ '0%': { opacity: '0', transform: 'translateY(60px)' },
64
+ '100%': { opacity: '1', transform: 'translateY(0)' }
65
+ },
66
+ fadeIn: {
67
+ '0%': { opacity: '0' },
68
+ '100%': { opacity: '1' }
69
+ },
70
+ scaleIn: {
71
+ '0%': { opacity: '0', transform: 'scale(0.9)' },
72
+ '100%': { opacity: '1', transform: 'scale(1)' }
73
+ }
74
+ }
75
+ }
76
+ }
77
+ }
78
+ </script>
79
+ </head>
80
+ <body class="bg-accent-50 font-body overflow-x-hidden">
81
+ <custom-header></custom-header>
82
+
83
+ <main>
84
+ <!-- Hero Section - Modern Glass Morphism -->
85
+ <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">
86
+ <!-- Animated Background Elements -->
87
+ <div class="absolute inset-0">
88
+ <div class="absolute top-1/4 left-1/4 w-96 h-96 bg-primary-500/20 rounded-full blur-3xl animate-float"></div>
89
+ <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>
90
+ <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>
91
+ </div>
92
+
93
+ <div class="relative z-10 container mx-auto px-4">
94
+ <div class="max-w-6xl mx-auto text-center">
95
+ <div class="animate-fade-in">
96
+ <h1 class="font-display text-5xl md:text-7xl lg:text-8xl font-bold text-white mb-8 leading-tight">
97
+ Excellence en
98
+ <span class="relative inline-block">
99
+ <span class="bg-gradient-to-r from-secondary-400 to-secondary-200 bg-clip-text text-transparent">
100
+ Distribution
101
+ </span>
102
+ <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>
103
+ </span>
104
+ </h1>
105
+ <p class="text-xl md:text-2xl lg:text-3xl text-primary-100 mb-12 max-w-4xl mx-auto leading-relaxed font-light">
106
+ Votre partenaire privilégié pour l'<strong class="text-white">électricité</strong> et la <strong class="text-white">peinture</strong> professionnelle
107
+ </p>
108
+ </div>
109
+
110
+ <div class="flex flex-col sm:flex-row gap-6 justify-center items-center animate-slide-up" style="animation-delay: 0.3s;">
111
+ <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">
112
+ <span class="relative z-10">Découvrir notre catalogue</span>
113
+ <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>
114
+ </a>
115
+ <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">
116
+ Nous contacter
117
+ </a>
118
+ </div>
119
+ </div>
120
+ </div>
121
+
122
+ <!-- Scroll Indicator -->
123
+ <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 animate-bounce">
124
+ <div class="w-6 h-10 border-2 border-white rounded-full flex justify-center">
125
+ <div class="w-1 h-3 bg-white rounded-full mt-2 animate-pulse"></div>
126
+ </div>
127
+ </div>
128
+ </section>
129
+
130
+ <!-- Modern Services Section -->
131
+ <section class="py-24 bg-white relative">
132
+ <div class="container mx-auto px-4">
133
+ <div class="text-center mb-20">
134
+ <h2 class="font-display text-4xl md:text-5xl font-bold text-accent-900 mb-6">
135
+ Services Premium
136
+ </h2>
137
+ <p class="text-xl text-accent-600 max-w-3xl mx-auto">
138
+ Des solutions sur-mesure pour les professionnels exigeants
139
+ </p>
140
+ </div>
141
+
142
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
143
+ <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">
144
+ <div class="relative">
145
+ <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">
146
+ <i data-feather="truck" class="text-white w-8 h-8"></i>
147
+ </div>
148
+ <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>
149
+ </div>
150
+ <h3 class="font-display text-xl font-bold mb-4 text-accent-900">Livraison Express</h3>
151
+ <p class="text-accent-600 leading-relaxed">Livraison gratuite dès 350€, sous 24-48h partout en France métropolitaine</p>
152
+ </div>
153
+
154
+ <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">
155
+ <div class="relative">
156
+ <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">
157
+ <i data-feather="headphones" class="text-white w-8 h-8"></i>
158
+ </div>
159
+ <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>
160
+ </div>
161
+ <h3 class="font-display text-xl font-bold mb-4 text-accent-900">Support Expert</h3>
162
+ <p class="text-accent-600 leading-relaxed">Équipe d'experts à votre disposition pour conseils techniques et devis personnalisés</p>
163
+ </div>
164
+
165
+ <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">
166
+ <div class="relative">
167
+ <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">
168
+ <i data-feather="shield-check" class="text-white w-8 h-8"></i>
169
+ </div>
170
+ <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>
171
+ </div>
172
+ <h3 class="font-display text-xl font-bold mb-4 text-accent-900">Paiement Sécurisé</h3>
173
+ <p class="text-accent-600 leading-relaxed">Paiement à la livraison, virement ou Click & Collect dans notre showroom</p>
174
+ </div>
175
+
176
+ <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">
177
+ <div class="relative">
178
+ <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">
179
+ <i data-feather="map-pin" class="text-white w-8 h-8"></i>
180
+ </div>
181
+ <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>
182
+ </div>
183
+ <h3 class="font-display text-xl font-bold mb-4 text-accent-900">Showroom Premium</h3>
184
+ <p class="text-accent-600 leading-relaxed">Venez découvrir nos produits dans notre espace d'exposition moderne à Sarcelles</p>
185
+ </div>
186
+ </div>
187
+ </div>
188
+ </section>
189
+
190
+ <!-- Categories Section - Modern Card Design -->
191
+ <section class="py-24 bg-gradient-to-br from-accent-50 to-white relative overflow-hidden">
192
+ <div class="absolute inset-0 opacity-5">
193
+ <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>
194
+ </div>
195
+
196
+ <div class="container mx-auto px-4 relative">
197
+ <div class="text-center mb-20">
198
+ <h2 class="font-display text-4xl md:text-5xl font-bold text-accent-900 mb-6">
199
+ Nos Spécialités
200
+ </h2>
201
+ <p class="text-xl text-accent-600 max-w-3xl mx-auto">
202
+ Explorez nos gammes professionnelles d'équipements et fournitures
203
+ </p>
204
+ </div>
205
+
206
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 max-w-6xl mx-auto">
207
+ <div class="group relative overflow-hidden rounded-3xl shadow-2xl hover:shadow-3xl transition-all duration-700 hover:scale-105">
208
+ <div class="aspect-[4/3] bg-gradient-to-br from-primary-500 to-primary-700 relative">
209
+ <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">
210
+ <div class="absolute inset-0 bg-gradient-to-t from-primary-900/90 via-primary-700/50 to-transparent"></div>
211
+ <div class="absolute inset-0 bg-primary-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-700"></div>
212
+ </div>
213
+ <div class="absolute bottom-0 left-0 right-0 p-8 text-white">
214
+ <div class="flex items-center mb-4">
215
+ <div class="w-12 h-12 bg-white/20 rounded-full flex items-center justify-center mr-4">
216
+ <i data-feather="zap" class="w-6 h-6"></i>
217
+ </div>
218
+ <span class="text-primary-200 font-medium">Domaine Électrique</span>
219
+ </div>
220
+ <h3 class="font-display text-3xl font-bold mb-3">Électricité</h3>
221
+ <p class="text-primary-100 mb-6 leading-relaxed">Solutions électriques haut de gamme : Legrand, Schneider Electric, Gewiss</p>
222
+ <a href="/catalogue.html?category=electricite" class="inline-flex items-center text-white font-semibold group-hover:text-primary-200 transition-colors duration-300">
223
+ Découvrir la gamme
224
+ <i data-feather="arrow-right" class="ml-2 w-5 h-5 transform group-hover:translate-x-1 transition-transform duration-300"></i>
225
+ </a>
226
+ </div>
227
+ </div>
228
+
229
+ <div class="group relative overflow-hidden rounded-3xl shadow-2xl hover:shadow-3xl transition-all duration-700 hover:scale-105">
230
+ <div class="aspect-[4/3] bg-gradient-to-br from-secondary-500 to-secondary-700 relative">
231
+ <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">
232
+ <div class="absolute inset-0 bg-gradient-to-t from-secondary-900/90 via-secondary-700/50 to-transparent"></div>
233
+ <div class="absolute inset-0 bg-secondary-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-700"></div>
234
+ </div>
235
+ <div class="absolute bottom-0 left-0 right-0 p-8 text-white">
236
+ <div class="flex items-center mb-4">
237
+ <div class="w-12 h-12 bg-white/20 rounded-full flex items-center justify-center mr-4">
238
+ <i data-feather="droplet" class="w-6 h-6"></i>
239
+ </div>
240
+ <span class="text-secondary-200 font-medium">Domaine Peinture</span>
241
+ </div>
242
+ <h3 class="font-display text-3xl font-bold mb-3">Peinture</h3>
243
+ <p class="text-secondary-100 mb-6 leading-relaxed">Peintures et revêtements premium : Guittet, Soframap, Théodore</p>
244
+ <a href="/catalogue.html?category=peinture" class="inline-flex items-center text-white font-semibold group-hover:text-secondary-200 transition-colors duration-300">
245
+ Découvrir la gamme
246
+ <i data-feather="arrow-right" class="ml-2 w-5 h-5 transform group-hover:translate-x-1 transition-transform duration-300"></i>
247
+ </a>
248
+ </div>
249
+ </div>
250
+ </div>
251
+ </div>
252
+ </section>
253
+
254
+ <!-- Premium Brands Section -->
255
+ <section class="py-24 bg-white relative">
256
+ <div class="container mx-auto px-4">
257
+ <div class="text-center mb-20">
258
+ <h2 class="font-display text-4xl md:text-5xl font-bold text-accent-900 mb-6">
259
+ Marques d'Excellence
260
+ </h2>
261
+ <p class="text-xl text-accent-600 max-w-3xl mx-auto">
262
+ Nous distribuons uniquement les marques leaders du marché
263
+ </p>
264
+ </div>
265
+
266
+ <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6">
267
+ <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">
268
+ <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">
269
+ <span class="font-display font-bold text-primary-700 text-lg">LEGRAND</span>
270
+ </div>
271
+ </div>
272
+ <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">
273
+ <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">
274
+ <span class="font-display font-bold text-primary-700 text-lg">SCHNEIDER</span>
275
+ </div>
276
+ </div>
277
+ <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">
278
+ <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">
279
+ <span class="font-display font-bold text-primary-700 text-lg">GEWISS</span>
280
+ </div>
281
+ </div>
282
+ <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">
283
+ <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">
284
+ <span class="font-display font-bold text-secondary-700 text-lg">GUITTET</span>
285
+ </div>
286
+ </div>
287
+ <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">
288
+ <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">
289
+ <span class="font-display font-bold text-secondary-700 text-lg">SOFRAMAP</span>
290
+ </div>
291
+ </div>
292
+ <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">
293
+ <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">
294
+ <span class="font-display font-bold text-secondary-700 text-lg">THÉODORE</span>
295
+ </div>
296
+ </div>
297
+ </div>
298
+ </div>
299
+ </section>
300
+ </main>
301
+
302
+ <custom-footer></custom-footer>
303
+ <script src="components/header.js"></script>
304
+ <script src="components/footer.js"></script>
305
+ <script src="script.js"></script>
306
+ <script>
307
+ // Enhanced feather icons initialization with staggered animations
308
+ document.addEventListener('DOMContentLoaded', function() {
309
+ // Replace icons
310
+ if (window.feather) {
311
+ feather.replace();
312
+ }
313
+
314
+ // Add staggered animations to service cards
315
+ const serviceCards = document.querySelectorAll('.group');
316
+ serviceCards.forEach((card, index) => {
317
+ card.style.animationDelay = `${index * 0.1}s`;
318
+ });
319
+
320
+ // Add scroll-triggered animations
321
+ const observerOptions = {
322
+ threshold: 0.1,
323
+ rootMargin: '0px 0px -50px 0px'
324
+ };
325
+
326
+ const observer = new IntersectionObserver((entries) => {
327
+ entries.forEach(entry => {
328
+ if (entry.isIntersecting) {
329
+ entry.target.classList.add('animate-scale-in');
330
+ }
331
+ });
332
+ }, observerOptions);
333
+
334
+ // Observe all sections for scroll animations
335
+ document.querySelectorAll('section').forEach(section => {
336
+ observer.observe(section);
337
+ });
338
+ });
339
+ </script>
340
+ <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
341
+ </body>
342
  </html>
script.js ADDED
@@ -0,0 +1,211 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ // Global configuration and utilities
2
+ const CONFIG = {
3
+ apiBaseUrl: 'https://fakestoreapi.com',
4
+ phoneNumber: '+33139912304',
5
+ whatsappNumber: '+33139912304',
6
+ companyName: 'FRANCE ÉLECTRICITÉ & PEINTURE DISTRIBUTION',
7
+ address: 'Sarcelles, 95200, France'
8
+ };
9
+ // Initialize the application
10
+ document.addEventListener('DOMContentLoaded', function() {
11
+ console.log('DOM Content Loaded - Initializing App');
12
+ initializeApp();
13
+ setupEventListeners();
14
+ loadInitialData();
15
+
16
+ // Force re-render of feather icons
17
+ setTimeout(() => {
18
+ if (window.feather) {
19
+ feather.replace();
20
+ }
21
+ }, 100);
22
+ });
23
+ function initializeApp() {
24
+ // Set up service worker for PWA functionality
25
+ if ('serviceWorker' in navigator) {
26
+ navigator.serviceWorker.register('/sw.js')
27
+ .then(registration => {
28
+ console.log('SW registered: ', registration);
29
+ })
30
+ .catch(registrationError => {
31
+ console.log('SW registration failed: ', registrationError);
32
+ });
33
+ }
34
+
35
+ // Initialize animations
36
+ initAnimations();
37
+ }
38
+
39
+ function setupEventListeners() {
40
+ // Search functionality
41
+ const searchInput = document.querySelector('#search-input');
42
+ if (searchInput) {
43
+ searchInput.addEventListener('input', debounce(handleSearch, 300));
44
+ }
45
+
46
+ // Phone click handlers
47
+ const phoneLinks = document.querySelectorAll('[data-phone]');
48
+ phoneLinks.forEach(link => {
49
+ link.addEventListener('click', function(e) {
50
+ e.preventDefault();
51
+ window.open(`tel:${CONFIG.phoneNumber}`, '_self');
52
+ });
53
+ }
54
+
55
+ // WhatsApp click handlers
56
+ const whatsappLinks = document.querySelectorAll('[data-whatsapp]');
57
+ whatsappLinks.forEach(link => {
58
+ link.addEventListener('click', function(e) {
59
+ e.preventDefault();
60
+ window.open(`https://wa.me/${CONFIG.whatsappNumber}`, '_blank');
61
+ });
62
+ }
63
+
64
+ // Mobile menu toggle
65
+ const menuToggle = document.querySelector('#menu-toggle');
66
+ const mobileMenu = document.querySelector('#mobile-menu');
67
+
68
+ if (menuToggle && mobileMenu) {
69
+ menuToggle.addEventListener('click', function() {
70
+ mobileMenu.classList.toggle('hidden');
71
+ menuToggle.querySelector('i').setAttribute('data-feather',
72
+ mobileMenu.classList.contains('hidden') ? 'menu' : 'x'
73
+ );
74
+ feather.replace();
75
+ });
76
+ }
77
+ }
78
+
79
+ function loadInitialData() {
80
+ // Load featured products for homepage
81
+ fetchFeaturedProducts();
82
+
83
+ // Load categories for navigation
84
+ fetchCategories();
85
+ }
86
+
87
+ function fetchFeaturedProducts() {
88
+ // Mock API call for featured products
89
+ fetch(`${CONFIG.apiBaseUrl}/products?limit=8`)
90
+ .then(response => response.json())
91
+ .then(products => {
92
+ displayFeaturedProducts(products);
93
+ })
94
+ .catch(error => {
95
+ console.error('Error fetching featured products:', error);
96
+ });
97
+ }
98
+
99
+ function fetchCategories() {
100
+ // Mock API call for categories
101
+ const categories = [
102
+ { name: 'Électricité', slug: 'electricite', icon: 'zap' },
103
+ { name: 'Peinture', slug: 'peinture', icon: 'droplet' },
104
+ { name: 'Outillage', slug: 'outillage', icon: 'tool' },
105
+ { name: 'Préparation', slug: 'preparation', icon: 'settings' },
106
+ { name: 'Promotions', slug: 'promotions', icon: 'tag' }
107
+ ];
108
+
109
+ updateNavigationCategories(categories);
110
+ }
111
+
112
+ function handleSearch(event) {
113
+ const query = event.target.value.trim();
114
+ if (query.length > 2) {
115
+ performSearch(query);
116
+ }
117
+ }
118
+
119
+ function performSearch(query) {
120
+ fetch(`${CONFIG.apiBaseUrl}/products`)
121
+ .then(response => response.json())
122
+ .then(products => {
123
+ const filteredProducts = products.filter(product =>
124
+ product.title.toLowerCase().includes(query.toLowerCase())
125
+ );
126
+ displaySearchResults(filteredProducts);
127
+ })
128
+ .catch(error => {
129
+ console.error('Search error:', error);
130
+ });
131
+ }
132
+
133
+ function displayFeaturedProducts(products) {
134
+ const container = document.querySelector('#featured-products');
135
+ if (!container) return;
136
+
137
+ container.innerHTML = products.map(product => `
138
+ <div class="bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 card-hover">
139
+ <img src="${product.image}" alt="${product.title}" class="w-full h-48 object-cover rounded-t-xl">
140
+ <div class="p-4">
141
+ <h3 class="font-semibold text-lg mb-2 text-gray-800">${product.title}</h3>
142
+ <p class="text-gray-600 text-sm mb-4">${product.description.substring(0, 80)}...</p>
143
+ <div class="flex justify-between items-center">
144
+ <span class="text-primary font-bold text-lg">${product.price}€</span>
145
+ <button class="bg-secondary hover:bg-secondary/90 text-white px-4 py-2 rounded-lg transition-all duration-300">
146
+ Demander un devis
147
+ </button>
148
+ </div>
149
+ </div>
150
+ </div>
151
+ `).join('');
152
+ }
153
+
154
+ function displaySearchResults(products) {
155
+ const resultsContainer = document.querySelector('#search-results');
156
+ if (!resultsContainer) return;
157
+
158
+ resultsContainer.innerHTML = products.map(product => `
159
+ <div class="bg-white rounded-lg shadow-md p-4 mb-4">
160
+ <h4 class="font-semibold">${product.title}</h4>
161
+ <p class="text-gray-600">${product.description.substring(0, 120)}...</p>
162
+ </div>
163
+ `).join('');
164
+ }
165
+
166
+ function updateNavigationCategories(categories) {
167
+ const navContainer = document.querySelector('#main-navigation');
168
+ if (!navContainer) return;
169
+
170
+ navContainer.innerHTML = categories.map(category => `
171
+ <a href="/catalogue.html?category=${category.slug}" class="text-gray-700 hover:text-primary transition-colors duration-300">
172
+ <i data-feather="${category.icon}"></i>
173
+ ${category.name}
174
+ </a>
175
+ `).join('');
176
+ }
177
+ function initAnimations() {
178
+ // Initialize intersection observer for scroll animations
179
+ const observerOptions = {
180
+ threshold: 0.1,
181
+ rootMargin: '0px 0px -50px 0px'
182
+ };
183
+
184
+ const observer = new IntersectionObserver((entries) => {
185
+ entries.forEach(entry => {
186
+ if (entry.isIntersecting) {
187
+ entry.target.classList.add('fade-in-up');
188
+ }
189
+ });
190
+ }, observerOptions);
191
+
192
+ // Observe elements for animation
193
+ document.querySelectorAll('.animate-on-scroll').forEach(element => {
194
+ observer.observe(element);
195
+ });
196
+ }
197
+ // Utility functions
198
+ function debounce(func, wait) {
199
+ let timeout;
200
+ return function executedFunction(...args) {
201
+ const later = () => {
202
+ clearTimeout(timeout);
203
+ func(...args);
204
+ };
205
+ clearTimeout(timeout);
206
+ timeout = setTimeout(later, wait);
207
+ };
208
+ }
209
+
210
+ // Export for use in components if needed
211
+ window.APP_CONFIG = CONFIG;
style.css CHANGED
@@ -1,28 +1,92 @@
 
 
 
 
 
 
 
 
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4
  }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
 
28
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Open+Sans:wght@400;500;600&display=swap');
2
+
3
+ * {
4
+ margin: 0;
5
+ padding: 0;
6
+ box-sizing: border-box;
7
+ }
8
+
9
  body {
10
+ font-family: 'Open Sans', sans-serif;
11
+ line-height: 1.6;
12
+ }
13
+
14
+ h1, h2, h3, h4, h5, h6 {
15
+ font-family: 'Inter', sans-serif;
16
+ font-weight: 600;
17
+ }
18
+
19
+ .container {
20
+ max-width: 1200px;
21
+ }
22
+
23
+ /* Custom scrollbar */
24
+ ::-webkit-scrollbar {
25
+ width: 8px;
26
+ }
27
+
28
+ ::-webkit-scrollbar-track {
29
+ background: #f1f1f1;
30
  }
31
 
32
+ ::-webkit-scrollbar-thumb {
33
+ background: #1E3A8A;
34
+ border-radius: 4px;
35
  }
36
 
37
+ ::-webkit-scrollbar-thumb:hover {
38
+ background: #1e40af;
39
+ }
40
+ /* Loading animation */
41
+ @keyframes fadeInUp {
42
+ from {
43
+ opacity: 0;
44
+ transform: translateY(30px);
45
+ }
46
+ to {
47
+ opacity: 1;
48
+ transform: translateY(0);
49
+ }
50
+ }
51
+ .fade-in-up {
52
+ animation: fadeInUp 0.6s ease-out;
53
+ }
54
+
55
+ /* Button hover effects */
56
+ .btn-primary {
57
+ background: linear-gradient(135deg, #1E3A8A 0%, #1e40af 100%);
58
+ transition: all 0.3s ease;
59
+ }
60
+
61
+ .btn-primary:hover {
62
+ transform: translateY(-2px);
63
+ box-shadow: 0 10px 25px -5px rgba(30, 58, 138, 0.4);
64
  }
65
 
66
+ /* Card hover effects */
67
+ .card-hover {
68
+ transition: all 0.3s ease;
 
 
 
69
  }
70
 
71
+ .card-hover:hover {
72
+ transform: translateY(-5px);
73
+ box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1);
74
  }
75
+
76
+ /* Gradient backgrounds */
77
+ .gradient-primary {
78
+ background: linear-gradient(135deg, #1E3A8A 0%, #1e40af 100%);
79
+ }
80
+
81
+ /* Responsive text sizing */
82
+ @media (max-width: 640px) {
83
+ .responsive-text {
84
+ font-size: 0.875rem;
85
+ }
86
+ }
87
+
88
+ /* Custom focus styles */
89
+ .focus-primary:focus {
90
+ outline: 2px solid #1E3A8A;
91
+ outline-offset: 2px;
92
+ }