Hugging Face's logo

Spaces:
Jacky-9
/
batchana
Running

App Files Community
Jacky-9 commited on
Commit
5baf44a
·
verified ·
1 Parent(s): 7b6aef9

ajoute une page nomé admin ou l'administrateur peut ajouter ou modifier des articles - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +1021 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Batchana
3
- emoji: 👀
4
- colorFrom: gray
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: batchana
3
+ emoji: 🐳
4
+ colorFrom: red
5
  colorTo: red
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1021 @@
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>Abdoul Shop - Votre boutique en ligne</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ /* Custom CSS */
11
+ .hero {
12
+ background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1555529669-e69e7aa0ba9a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1600&q=80');
13
+ background-size: cover;
14
+ background-position: center;
15
+ }
16
+
17
+ .product-card:hover {
18
+ transform: translateY(-5px);
19
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
20
+ }
21
+
22
+ .transition-all {
23
+ transition: all 0.3s ease;
24
+ }
25
+
26
+ .page {
27
+ display: none;
28
+ }
29
+
30
+ .page.active {
31
+ display: block;
32
+ animation: fadeIn 0.5s ease;
33
+ }
34
+
35
+ @keyframes fadeIn {
36
+ from { opacity: 0; }
37
+ to { opacity: 1; }
38
+ }
39
+
40
+ .cart-panel {
41
+ transform: translateX(100%);
42
+ transition: transform 0.3s ease;
43
+ }
44
+
45
+ .cart-panel.open {
46
+ transform: translateX(0);
47
+ }
48
+ </style>
49
+ </head>
50
+ <body class="font-sans bg-gray-50">
51
+ <!-- Header -->
52
+ <header class="bg-white shadow-md sticky top-0 z-50">
53
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
54
+ <div class="flex items-center">
55
+ <a href="#" onclick="showPage('home')" class="text-2xl font-bold text-indigo-600">Abdoul Shop</a>
56
+ </div>
57
+
58
+ <nav class="hidden md:flex space-x-8">
59
+ <a href="#" onclick="showPage('home')" class="text-gray-700 hover:text-indigo-600 transition-all">Accueil</a>
60
+ <a href="#" onclick="showPage('shop')" class="text-gray-700 hover:text-indigo-600 transition-all">Boutique</a>
61
+ <a href="#" onclick="showPage('about')" class="text-gray-700 hover:text-indigo-600 transition-all">À propos</a>
62
+ <a href="#" onclick="showPage('contact')" class="text-gray-700 hover:text-indigo-600 transition-all">Contact</a>
63
+ </nav>
64
+
65
+ <div class="flex items-center space-x-4">
66
+ <button onclick="toggleCart()" class="relative text-gray-700 hover:text-indigo-600">
67
+ <i class="fas fa-shopping-cart text-xl"></i>
68
+ <span id="cart-count" class="absolute -top-2 -right-2 bg-indigo-600 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">0</span>
69
+ </button>
70
+ <button class="md:hidden text-gray-700" onclick="toggleMobileMenu()">
71
+ <i class="fas fa-bars text-xl"></i>
72
+ </button>
73
+ </div>
74
+ </div>
75
+
76
+ <!-- Mobile Menu -->
77
+ <div id="mobile-menu" class="md:hidden hidden bg-white py-2 px-4 shadow-lg">
78
+ <a href="#" onclick="showPage('home')" class="block py-2 text-gray-700 hover:text-indigo-600">Accueil</a>
79
+ <a href="#" onclick="showPage('shop')" class="block py-2 text-gray-700 hover:text-indigo-600">Boutique</a>
80
+ <a href="#" onclick="showPage('about')" class="block py-2 text-gray-700 hover:text-indigo-600">À propos</a>
81
+ <a href="#" onclick="showPage('contact')" class="block py-2 text-gray-700 hover:text-indigo-600">Contact</a>
82
+ </div>
83
+ </header>
84
+
85
+ <!-- Cart Panel -->
86
+ <div id="cart-panel" class="cart-panel fixed top-0 right-0 h-full w-full md:w-96 bg-white shadow-lg z-50 overflow-y-auto">
87
+ <div class="p-4">
88
+ <div class="flex justify-between items-center border-b pb-3">
89
+ <h3 class="text-xl font-bold">Votre Panier</h3>
90
+ <button onclick="toggleCart()" class="text-gray-500 hover:text-gray-700">
91
+ <i class="fas fa-times"></i>
92
+ </button>
93
+ </div>
94
+
95
+ <div id="cart-items" class="py-4">
96
+ <!-- Cart items will be added here dynamically -->
97
+ <p class="text-gray-500 text-center py-8">Votre panier est vide</p>
98
+ </div>
99
+
100
+ <div class="border-t pt-4">
101
+ <div class="flex justify-between mb-4">
102
+ <span class="font-semibold">Total:</span>
103
+ <span id="cart-total" class="font-bold">0 FCFA</span>
104
+ </div>
105
+ <button class="w-full bg-indigo-600 text-white py-2 rounded hover:bg-indigo-700 transition-all">
106
+ Passer la commande
107
+ </button>
108
+ </div>
109
+ </div>
110
+ </div>
111
+
112
+ <!-- Overlay -->
113
+ <div id="overlay" class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden" onclick="toggleCart()"></div>
114
+
115
+ <!-- Main Content -->
116
+ <main>
117
+ <!-- Home Page -->
118
+ <div id="home-page" class="page active">
119
+ <!-- Hero Section -->
120
+ <section class="hero text-white py-20 md:py-32">
121
+ <div class="container mx-auto px-4 text-center">
122
+ <h1 class="text-4xl md:text-6xl font-bold mb-6">Bienvenue chez Abdoul Shop</h1>
123
+ <p class="text-xl md:text-2xl mb-8">Découvrez notre sélection exclusive d'articles de qualité</p>
124
+ <a href="#" onclick="showPage('shop')" class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-8 rounded-full inline-block transition-all">
125
+ Voir la boutique
126
+ </a>
127
+ </div>
128
+ </section>
129
+
130
+ <!-- Featured Categories -->
131
+ <section class="py-16 bg-white">
132
+ <div class="container mx-auto px-4">
133
+ <h2 class="text-3xl font-bold text-center mb-12">Nos Catégories</h2>
134
+
135
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
136
+ <div class="bg-gray-100 rounded-lg overflow-hidden shadow-md hover:shadow-xl transition-all">
137
+ <img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Électronique" class="w-full h-48 object-cover">
138
+ <div class="p-6">
139
+ <h3 class="text-xl font-semibold mb-2">Électronique</h3>
140
+ <p class="text-gray-600 mb-4">Découvrez nos derniers gadgets électroniques</p>
141
+ <a href="#" onclick="showPage('shop')" class="text-indigo-600 font-medium hover:text-indigo-800">Voir les produits</a>
142
+ </div>
143
+ </div>
144
+
145
+ <div class="bg-gray-100 rounded-lg overflow-hidden shadow-md hover:shadow-xl transition-all">
146
+ <img src="https://images.unsplash.com/photo-1490114538077-0a7f8cb49891?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Mode" class="w-full h-48 object-cover">
147
+ <div class="p-6">
148
+ <h3 class="text-xl font-semibold mb-2">Mode & Accessoires</h3>
149
+ <p class="text-gray-600 mb-4">Restez élégant avec nos collections tendance</p>
150
+ <a href="#" onclick="showPage('shop')" class="text-indigo-600 font-medium hover:text-indigo-800">Voir les produits</a>
151
+ </div>
152
+ </div>
153
+
154
+ <div class="bg-gray-100 rounded-lg overflow-hidden shadow-md hover:shadow-xl transition-all">
155
+ <img src="https://images.unsplash.com/photo-1555529669-e69e7aa0ba9a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Maison" class="w-full h-48 object-cover">
156
+ <div class="p-6">
157
+ <h3 class="text-xl font-semibold mb-2">Maison & Déco</h3>
158
+ <p class="text-gray-600 mb-4">Embellissez votre intérieur avec style</p>
159
+ <a href="#" onclick="showPage('shop')" class="text-indigo-600 font-medium hover:text-indigo-800">Voir les produits</a>
160
+ </div>
161
+ </div>
162
+ </div>
163
+ </div>
164
+ </section>
165
+
166
+ <!-- Featured Products -->
167
+ <section class="py-16 bg-gray-50">
168
+ <div class="container mx-auto px-4">
169
+ <h2 class="text-3xl font-bold text-center mb-12">Produits Populaires</h2>
170
+
171
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
172
+ <!-- Product 1 -->
173
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition-all">
174
+ <div class="relative">
175
+ <img src="https://images.unsplash.com/photo-1546868871-7041f2a55e12?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Montre intelligente" class="w-full h-48 object-cover">
176
+ <div class="absolute top-2 right-2 bg-indigo-600 text-white text-xs px-2 py-1 rounded">Nouveau</div>
177
+ </div>
178
+ <div class="p-4">
179
+ <h3 class="font-semibold text-lg mb-1">Montre Intelligente Pro</h3>
180
+ <div class="flex items-center mb-2">
181
+ <div class="flex text-yellow-400">
182
+ <i class="fas fa-star"></i>
183
+ <i class="fas fa-star"></i>
184
+ <i class="fas fa-star"></i>
185
+ <i class="fas fa-star"></i>
186
+ <i class="fas fa-star-half-alt"></i>
187
+ </div>
188
+ <span class="text-gray-600 text-sm ml-2">(42 avis)</span>
189
+ </div>
190
+ <div class="flex justify-between items-center">
191
+ <span class="font-bold text-lg">45,000 FCFA</span>
192
+ <button onclick="addToCart('Montre Intelligente Pro', 45000, 'https://images.unsplash.com/photo-1546868871-7041f2a55e12?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80')" class="bg-indigo-600 text-white p-2 rounded-full hover:bg-indigo-700 transition-all">
193
+ <i class="fas fa-plus"></i>
194
+ </button>
195
+ </div>
196
+ </div>
197
+ </div>
198
+
199
+ <!-- Product 2 -->
200
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition-all">
201
+ <img src="https://images.unsplash.com/photo-1526170375885-4d8ecf77b99f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Appareil photo" class="w-full h-48 object-cover">
202
+ <div class="p-4">
203
+ <h3 class="font-semibold text-lg mb-1">Appareil Photo Compact</h3>
204
+ <div class="flex items-center mb-2">
205
+ <div class="flex text-yellow-400">
206
+ <i class="fas fa-star"></i>
207
+ <i class="fas fa-star"></i>
208
+ <i class="fas fa-star"></i>
209
+ <i class="fas fa-star"></i>
210
+ <i class="far fa-star"></i>
211
+ </div>
212
+ <span class="text-gray-600 text-sm ml-2">(28 avis)</span>
213
+ </div>
214
+ <div class="flex justify-between items-center">
215
+ <span class="font-bold text-lg">85,000 FCFA</span>
216
+ <button onclick="addToCart('Appareil Photo Compact', 85000, 'https://images.unsplash.com/photo-1526170375885-4d8ecf77b99f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80')" class="bg-indigo-600 text-white p-2 rounded-full hover:bg-indigo-700 transition-all">
217
+ <i class="fas fa-plus"></i>
218
+ </button>
219
+ </div>
220
+ </div>
221
+ </div>
222
+
223
+ <!-- Product 3 -->
224
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition-all">
225
+ <div class="relative">
226
+ <img src="https://images.unsplash.com/photo-1594035910387-fea47794261f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Sac à dos" class="w-full h-48 object-cover">
227
+ <div class="absolute top-2 right-2 bg-red-500 text-white text-xs px-2 py-1 rounded">Promo</div>
228
+ </div>
229
+ <div class="p-4">
230
+ <h3 class="font-semibold text-lg mb-1">Sac à Dos Élégant</h3>
231
+ <div class="flex items-center mb-2">
232
+ <div class="flex text-yellow-400">
233
+ <i class="fas fa-star"></i>
234
+ <i class="fas fa-star"></i>
235
+ <i class="fas fa-star"></i>
236
+ <i class="fas fa-star"></i>
237
+ <i class="fas fa-star"></i>
238
+ </div>
239
+ <span class="text-gray-600 text-sm ml-2">(56 avis)</span>
240
+ </div>
241
+ <div class="flex justify-between items-center">
242
+ <div>
243
+ <span class="font-bold text-lg">25,000 FCFA</span>
244
+ <span class="text-sm text-gray-500 line-through ml-2">32,000 FCFA</span>
245
+ </div>
246
+ <button onclick="addToCart('Sac à Dos Élégant', 25000, 'https://images.unsplash.com/photo-1594035910387-fea47794261f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80')" class="bg-indigo-600 text-white p-2 rounded-full hover:bg-indigo-700 transition-all">
247
+ <i class="fas fa-plus"></i>
248
+ </button>
249
+ </div>
250
+ </div>
251
+ </div>
252
+
253
+ <!-- Product 4 -->
254
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition-all">
255
+ <img src="https://images.unsplash.com/photo-1585386959984-a4155224a1ad?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Parfum" class="w-full h-48 object-cover">
256
+ <div class="p-4">
257
+ <h3 class="font-semibold text-lg mb-1">Parfum Élégance</h3>
258
+ <div class="flex items-center mb-2">
259
+ <div class="flex text-yellow-400">
260
+ <i class="fas fa-star"></i>
261
+ <i class="fas fa-star"></i>
262
+ <i class="fas fa-star"></i>
263
+ <i class="fas fa-star"></i>
264
+ <i class="far fa-star"></i>
265
+ </div>
266
+ <span class="text-gray-600 text-sm ml-2">(34 avis)</span>
267
+ </div>
268
+ <div class="flex justify-between items-center">
269
+ <span class="font-bold text-lg">18,000 FCFA</span>
270
+ <button onclick="addToCart('Parfum Élégance', 18000, 'https://images.unsplash.com/photo-1585386959984-a4155224a1ad?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80')" class="bg-indigo-600 text-white p-2 rounded-full hover:bg-indigo-700 transition-all">
271
+ <i class="fas fa-plus"></i>
272
+ </button>
273
+ </div>
274
+ </div>
275
+ </div>
276
+ </div>
277
+
278
+ <div class="text-center mt-10">
279
+ <a href="#" onclick="showPage('shop')" class="inline-block border-2 border-indigo-600 text-indigo-600 font-semibold py-2 px-6 rounded-full hover:bg-indigo-600 hover:text-white transition-all">
280
+ Voir tous les produits
281
+ </a>
282
+ </div>
283
+ </div>
284
+ </section>
285
+
286
+ <!-- Testimonials -->
287
+ <section class="py-16 bg-white">
288
+ <div class="container mx-auto px-4">
289
+ <h2 class="text-3xl font-bold text-center mb-12">Ce que disent nos clients</h2>
290
+
291
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
292
+ <div class="bg-gray-50 p-6 rounded-lg shadow-sm">
293
+ <div class="flex items-center mb-4">
294
+ <div class="flex text-yellow-400 mr-2">
295
+ <i class="fas fa-star"></i>
296
+ <i class="fas fa-star"></i>
297
+ <i class="fas fa-star"></i>
298
+ <i class="fas fa-star"></i>
299
+ <i class="fas fa-star"></i>
300
+ </div>
301
+ </div>
302
+ <p class="text-gray-600 mb-4">"J'ai reçu ma commande rapidement et l'article était exactement comme sur la photo. Service client très réactif. Je recommande!"</p>
303
+ <div class="flex items-center">
304
+ <div class="w-10 h-10 rounded-full bg-gray-300 mr-3 overflow-hidden">
305
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Client" class="w-full h-full object-cover">
306
+ </div>
307
+ <div>
308
+ <h4 class="font-semibold">Aïssatou D.</h4>
309
+ <p class="text-gray-500 text-sm">Dakar</p>
310
+ </div>
311
+ </div>
312
+ </div>
313
+
314
+ <div class="bg-gray-50 p-6 rounded-lg shadow-sm">
315
+ <div class="flex items-center mb-4">
316
+ <div class="flex text-yellow-400 mr-2">
317
+ <i class="fas fa-star"></i>
318
+ <i class="fas fa-star"></i>
319
+ <i class="fas fa-star"></i>
320
+ <i class="fas fa-star"></i>
321
+ <i class="fas fa-star-half-alt"></i>
322
+ </div>
323
+ </div>
324
+ <p class="text-gray-600 mb-4">"Excellent rapport qualité-prix. La livraison a pris un peu de temps mais le produit en valait la peine. Je reviendrai."</p>
325
+ <div class="flex items-center">
326
+ <div class="w-10 h-10 rounded-full bg-gray-300 mr-3 overflow-hidden">
327
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Client" class="w-full h-full object-cover">
328
+ </div>
329
+ <div>
330
+ <h4 class="font-semibold">Mamadou K.</h4>
331
+ <p class="text-gray-500 text-sm">Bamako</p>
332
+ </div>
333
+ </div>
334
+ </div>
335
+
336
+ <div class="bg-gray-50 p-6 rounded-lg shadow-sm">
337
+ <div class="flex items-center mb-4">
338
+ <div class="flex text-yellow-400 mr-2">
339
+ <i class="fas fa-star"></i>
340
+ <i class="fas fa-star"></i>
341
+ <i class="fas fa-star"></i>
342
+ <i class="fas fa-star"></i>
343
+ <i class="fas fa-star"></i>
344
+ </div>
345
+ </div>
346
+ <p class="text-gray-600 mb-4">"Commande facile et livraison rapide. Le produit est de très bonne qualité. Service après-vente disponible et efficace."</p>
347
+ <div class="flex items-center">
348
+ <div class="w-10 h-10 rounded-full bg-gray-300 mr-3 overflow-hidden">
349
+ <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Client" class="w-full h-full object-cover">
350
+ </div>
351
+ <div>
352
+ <h4 class="font-semibold">Fatou B.</h4>
353
+ <p class="text-gray-500 text-sm">Abidjan</p>
354
+ </div>
355
+ </div>
356
+ </div>
357
+ </div>
358
+ </div>
359
+ </section>
360
+
361
+ <!-- Newsletter -->
362
+ <section class="py-16 bg-indigo-600 text-white">
363
+ <div class="container mx-auto px-4 text-center">
364
+ <h2 class="text-3xl font-bold mb-4">Abonnez-vous à notre newsletter</h2>
365
+ <p class="text-xl mb-8">Recevez nos offres exclusives et nouveautés directement dans votre boîte mail</p>
366
+
367
+ <form class="max-w-md mx-auto flex">
368
+ <input type="email" placeholder="Votre adresse email" class="flex-grow px-4 py-3 rounded-l focus:outline-none text-gray-800">
369
+ <button type="submit" class="bg-indigo-800 hover:bg-indigo-900 px-6 py-3 rounded-r transition-all">
370
+ S'abonner
371
+ </button>
372
+ </form>
373
+ </div>
374
+ </section>
375
+ </div>
376
+
377
+ <!-- Shop Page -->
378
+ <div id="shop-page" class="page">
379
+ <!-- Hero Section for Shop -->
380
+ <section class="bg-gradient-to-r from-indigo-500 to-purple-600 text-white py-16">
381
+ <div class="container mx-auto px-4 text-center">
382
+ <h1 class="text-4xl font-bold mb-4">Tous nos articles</h1>
383
+ <p class="text-xl max-w-2xl mx-auto">Découvrez notre vaste sélection de produits de qualité dans toutes les catégories</p>
384
+ </div>
385
+ </section>
386
+
387
+ <section class="py-12 bg-white">
388
+ <div class="container mx-auto px-4">
389
+ <div class="flex flex-col md:flex-row justify-between items-center mb-8">
390
+ <h2 class="text-2xl font-bold">Nos Produits</h2>
391
+ <div class="mt-4 md:mt-0">
392
+ <select class="border border-gray-300 rounded px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
393
+ <option>Trier par: Pertinence</option>
394
+ <option>Prix croissant</option>
395
+ <option>Prix décroissant</option>
396
+ <option>Nouveautés</option>
397
+ <option>Meilleures ventes</option>
398
+ </select>
399
+ </div>
400
+ </div>
401
+
402
+ <div class="flex flex-col md:flex-row">
403
+ <!-- Filters -->
404
+ <div class="w-full md:w-64 mb-8 md:mb-0 md:mr-8">
405
+ <div class="bg-gray-50 p-4 rounded-lg shadow-sm">
406
+ <h3 class="font-semibold text-lg mb-4">Catégories</h3>
407
+ <ul class="space-y-2">
408
+ <li><a href="#" class="text-gray-600 hover:text-indigo-600">Tous les produits</a></li>
409
+ <li><a href="#" class="text-gray-600 hover:text-indigo-600">Électronique</a></li>
410
+ <li><a href="#" class="text-gray-600 hover:text-indigo-600">Mode & Accessoires</a></li>
411
+ <li><a href="#" class="text-gray-600 hover:text-indigo-600">Maison & Déco</a></li>
412
+ <li><a href="#" class="text-gray-600 hover:text-indigo-600">Beauté & Santé</a></li>
413
+ <li><a href="#" class="text-gray-600 hover:text-indigo-600">Sports & Loisirs</a></li>
414
+ <li><a href="#" class="text-gray-600 hover:text-indigo-600">Enfants</a></li>
415
+ <li><a href="#" class="text-gray-600 hover:text-indigo-600">Bureau</a></li>
416
+ </ul>
417
+
418
+ <h3 class="font-semibold text-lg mt-6 mb-4">Filtrer par prix</h3>
419
+ <div class="mb-4">
420
+ <input type="range" min="0" max="100000" step="5000" class="w-full">
421
+ </div>
422
+ <div class="flex justify-between text-sm text-gray-600">
423
+ <span>0 FCFA</span>
424
+ <span>150,000 FCFA</span>
425
+ </div>
426
+
427
+ <button class="w-full mt-6 bg-indigo-600 text-white py-2 rounded hover:bg-indigo-700 transition-all">
428
+ Appliquer les filtres
429
+ </button>
430
+ </div>
431
+ </div>
432
+
433
+ <!-- Products Grid -->
434
+ <div class="flex-grow">
435
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
436
+ <!-- Product 1 -->
437
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition-all">
438
+ <div class="relative">
439
+ <img src="https://images.unsplash.com/photo-1546868871-7041f2a55e12?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Montre intelligente" class="w-full h-48 object-cover">
440
+ <div class="absolute top-2 right-2 bg-indigo-600 text-white text-xs px-2 py-1 rounded">Nouveau</div>
441
+ </div>
442
+ <div class="p-4">
443
+ <h3 class="font-semibold text-lg mb-1">Montre Intelligente Pro</h3>
444
+ <div class="flex items-center mb-2">
445
+ <div class="flex text-yellow-400">
446
+ <i class="fas fa-star"></i>
447
+ <i class="fas fa-star"></i>
448
+ <i class="fas fa-star"></i>
449
+ <i class="fas fa-star"></i>
450
+ <i class="fas fa-star-half-alt"></i>
451
+ </div>
452
+ <span class="text-gray-600 text-sm ml-2">(42 avis)</span>
453
+ </div>
454
+ <div class="flex justify-between items-center">
455
+ <span class="font-bold text-lg">45,000 FCFA</span>
456
+ <button onclick="addToCart('Montre Intelligente Pro', 45000, 'https://images.unsplash.com/photo-1546868871-7041f2a55e12?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80')" class="bg-indigo-600 text-white p-2 rounded-full hover:bg-indigo-700 transition-all">
457
+ <i class="fas fa-plus"></i>
458
+ </button>
459
+ </div>
460
+ </div>
461
+ </div>
462
+
463
+ <!-- Product 2 -->
464
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition-all">
465
+ <img src="https://images.unsplash.com/photo-1526170375885-4d8ecf77b99f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Appareil photo" class="w-full h-48 object-cover">
466
+ <div class="p-4">
467
+ <h3 class="font-semibold text-lg mb-1">Appareil Photo Compact</h3>
468
+ <div class="flex items-center mb-2">
469
+ <div class="flex text-yellow-400">
470
+ <i class="fas fa-star"></i>
471
+ <i class="fas fa-star"></i>
472
+ <i class="fas fa-star"></i>
473
+ <i class="fas fa-star"></i>
474
+ <i class="far fa-star"></i>
475
+ </div>
476
+ <span class="text-gray-600 text-sm ml-2">(28 avis)</span>
477
+ </div>
478
+ <div class="flex justify-between items-center">
479
+ <span class="font-bold text-lg">85,000 FCFA</span>
480
+ <button onclick="addToCart('Appareil Photo Compact', 85000, 'https://images.unsplash.com/photo-1526170375885-4d8ecf77b99f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80')" class="bg-indigo-600 text-white p-2 rounded-full hover:bg-indigo-700 transition-all">
481
+ <i class="fas fa-plus"></i>
482
+ </button>
483
+ </div>
484
+ </div>
485
+ </div>
486
+
487
+ <!-- Product 3 -->
488
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition-all">
489
+ <div class="relative">
490
+ <img src="https://images.unsplash.com/photo-1594035910387-fea47794261f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Sac à dos" class="w-full h-48 object-cover">
491
+ <div class="absolute top-2 right-2 bg-red-500 text-white text-xs px-2 py-1 rounded">Promo</div>
492
+ </div>
493
+ <div class="p-4">
494
+ <h3 class="font-semibold text-lg mb-1">Sac à Dos Élégant</h3>
495
+ <div class="flex items-center mb-2">
496
+ <div class="flex text-yellow-400">
497
+ <i class="fas fa-star"></i>
498
+ <i class="fas fa-star"></i>
499
+ <i class="fas fa-star"></i>
500
+ <i class="fas fa-star"></i>
501
+ <i class="fas fa-star"></i>
502
+ </div>
503
+ <span class="text-gray-600 text-sm ml-2">(56 avis)</span>
504
+ </div>
505
+ <div class="flex justify-between items-center">
506
+ <div>
507
+ <span class="font-bold text-lg">25,000 FCFA</span>
508
+ <span class="text-sm text-gray-500 line-through ml-2">32,000 FCFA</span>
509
+ </div>
510
+ <button onclick="addToCart('Sac à Dos Élégant', 25000, 'https://images.unsplash.com/photo-1594035910387-fea47794261f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80')" class="bg-indigo-600 text-white p-2 rounded-full hover:bg-indigo-700 transition-all">
511
+ <i class="fas fa-plus"></i>
512
+ </button>
513
+ </div>
514
+ </div>
515
+ </div>
516
+
517
+ <!-- Product 4 -->
518
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition-all">
519
+ <img src="https://images.unsplash.com/photo-1585386959984-a4155224a1ad?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Parfum" class="w-full h-48 object-cover">
520
+ <div class="p-4">
521
+ <h3 class="font-semibold text-lg mb-1">Parfum Élégance</h3>
522
+ <div class="flex items-center mb-2">
523
+ <div class="flex text-yellow-400">
524
+ <i class="fas fa-star"></i>
525
+ <i class="fas fa-star"></i>
526
+ <i class="fas fa-star"></i>
527
+ <i class="fas fa-star"></i>
528
+ <i class="far fa-star"></i>
529
+ </div>
530
+ <span class="text-gray-600 text-sm ml-2">(34 avis)</span>
531
+ </div>
532
+ <div class="flex justify-between items-center">
533
+ <span class="font-bold text-lg">18,000 FCFA</span>
534
+ <button onclick="addToCart('Parfum Élégance', 18000, 'https://images.unsplash.com/photo-1585386959984-a4155224a1ad?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80')" class="bg-indigo-600 text-white p-2 rounded-full hover:bg-indigo-700 transition-all">
535
+ <i class="fas fa-plus"></i>
536
+ </button>
537
+ </div>
538
+ </div>
539
+ </div>
540
+
541
+ <!-- Product 5 -->
542
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition-all">
543
+ <img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Chaussures" class="w-full h-48 object-cover">
544
+ <div class="p-4">
545
+ <h3 class="font-semibold text-lg mb-1">Chaussures de Sport</h3>
546
+ <div class="flex items-center mb-2">
547
+ <div class="flex text-yellow-400">
548
+ <i class="fas fa-star"></i>
549
+ <i class="fas fa-star"></i>
550
+ <i class="fas fa-star"></i>
551
+ <i class="fas fa-star"></i>
552
+ <i class="far fa-star"></i>
553
+ </div>
554
+ <span class="text-gray-600 text-sm ml-2">(39 avis)</span>
555
+ </div>
556
+ <div class="flex justify-between items-center">
557
+ <span class="font-bold text-lg">22,000 FCFA</span>
558
+ <button onclick="addToCart('Chaussures de Sport', 22000, 'https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80')" class="bg-indigo-600 text-white p-2 rounded-full hover:bg-indigo-700 transition-all">
559
+ <i class="fas fa-plus"></i>
560
+ </button>
561
+ </div>
562
+ </div>
563
+ </div>
564
+
565
+ <!-- Product 6 -->
566
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition-all">
567
+ <div class="relative">
568
+ <img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Montre" class="w-full h-48 object-cover">
569
+ <div class="absolute top-2 right-2 bg-indigo-600 text-white text-xs px-2 py-1 rounded">Nouveau</div>
570
+ </div>
571
+ <div class="p-4">
572
+ <h3 class="font-semibold text-lg mb-1">Montre Classique</h3>
573
+ <div class="flex items-center mb-2">
574
+ <div class="flex text-yellow-400">
575
+ <i class="fas fa-star"></i>
576
+ <i class="fas fa-star"></i>
577
+ <i class="fas fa-star"></i>
578
+ <i class="fas fa-star"></i>
579
+ <i class="fas fa-star"></i>
580
+ </div>
581
+ <span class="text-gray-600 text-sm ml-2">(47 avis)</span>
582
+ </div>
583
+ <div class="flex justify-between items-center">
584
+ <span class="font-bold text-lg">35,000 FCFA</span>
585
+ <button onclick="addToCart('Montre Classique', 35000, 'https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80')" class="bg-indigo-600 text-white p-2 rounded-full hover:bg-indigo-700 transition-all">
586
+ <i class="fas fa-plus"></i>
587
+ </button>
588
+ </div>
589
+ </div>
590
+ </div>
591
+ </div>
592
+
593
+ <!-- Pagination -->
594
+ <div class="mt-10 flex justify-center">
595
+ <nav class="flex items-center space-x-2">
596
+ <a href="#" class="px-3 py-1 rounded border border-gray-300 text-gray-500 hover:bg-gray-100">&laquo;</a>
597
+ <a href="#" class="px-3 py-1 rounded border border-indigo-600 bg-indigo-600 text-white">1</a>
598
+ <a href="#" class="px-3 py-1 rounded border border-gray-300 text-gray-700 hover:bg-gray-100">2</a>
599
+ <a href="#" class="px-3 py-1 rounded border border-gray-300 text-gray-700 hover:bg-gray-100">3</a>
600
+ <a href="#" class="px-3 py-1 rounded border border-gray-300 text-gray-700 hover:bg-gray-100">4</a>
601
+ <a href="#" class="px-3 py-1 rounded border border-gray-300 text-gray-700 hover:bg-gray-100">5</a>
602
+ <a href="#" class="px-3 py-1 rounded border border-gray-300 text-gray-500 hover:bg-gray-100">&raquo;</a>
603
+ </nav>
604
+ </div>
605
+ </div>
606
+ </div>
607
+ </div>
608
+ </section>
609
+ </div>
610
+
611
+ <!-- About Page -->
612
+ <div id="about-page" class="page">
613
+ <section class="py-16 bg-white">
614
+ <div class="container mx-auto px-4">
615
+ <div class="text-center mb-16">
616
+ <h1 class="text-4xl font-bold mb-4">À propos de Abdoul Shop</h1>
617
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">Notre engagement envers la qualité et le service client</p>
618
+ </div>
619
+
620
+ <div class="flex flex-col lg:flex-row items-center mb-16">
621
+ <div class="lg:w-1/2 mb-8 lg:mb-0 lg:pr-12">
622
+ <h2 class="text-3xl font-bold mb-6">Notre Histoire</h2>
623
+ <p class="text-gray-600 mb-4">Abdoul Shop a été fondé en 2015 avec une vision simple: fournir des produits de qualité à des prix abordables pour la communauté locale.</p>
624
+ <p class="text-gray-600 mb-4">Ce qui a commencé comme une petite boutique physique s'est rapidement transformé en une entreprise florissante avec une présence en ligne importante.</p>
625
+ <p class="text-gray-600">Aujourd'hui, nous sommes fiers de servir des milliers de clients satisfaits à travers toute la région, avec une sélection soigneusement choisie de produits dans diverses catégories.</p>
626
+ </div>
627
+ <div class="lg:w-1/2">
628
+ <img src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Notre équipe" class="rounded-lg shadow-lg w-full">
629
+ </div>
630
+ </div>
631
+
632
+ <div class="flex flex-col lg:flex-row items-center mb-16">
633
+ <div class="lg:w-1/2 order-last lg:order-first">
634
+ <img src="https://images.unsplash.com/photo-1521791136064-7986c2920216?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Notre mission" class="rounded-lg shadow-lg w-full">
635
+ </div>
636
+ <div class="lg:w-1/2 mb-8 lg:mb-0 lg:pl-12">
637
+ <h2 class="text-3xl font-bold mb-6">Notre Mission</h2>
638
+ <p class="text-gray-600 mb-4">Notre mission est de rendre les produits de qualité accessibles à tous, tout en fournissant un service client exceptionnel.</p>
639
+ <p class="text-gray-600 mb-4">Nous croyons que chaque client mérite:</p>
640
+ <ul class="text-gray-600 mb-4 space-y-2">
641
+ <li class="flex items-start">
642
+ <i class="fas fa-check text-indigo-600 mt-1 mr-2"></i>
643
+ <span>Des produits authentiques et de haute qualité</span>
644
+ </li>
645
+ <li class="flex items-start">
646
+ <i class="fas fa-check text-indigo-600 mt-1 mr-2"></i>
647
+ <span>Des prix compétitifs et transparents</span>
648
+ </li>
649
+ <li class="flex items-start">
650
+ <i class="fas fa-check text-indigo-600 mt-1 mr-2"></i>
651
+ <span>Une expérience d'achat simple et agréable</span>
652
+ </li>
653
+ <li class="flex items-start">
654
+ <i class="fas fa-check text-indigo-600 mt-1 mr-2"></i>
655
+ <span>Un service après-vente réactif et efficace</span>
656
+ </li>
657
+ </ul>
658
+ </div>
659
+ </div>
660
+
661
+ <div class="text-center">
662
+ <h2 class="text-3xl font-bold mb-8">Notre Équipe</h2>
663
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
664
+ <div class="bg-gray-50 p-6 rounded-lg">
665
+ <div class="w-32 h-32 mx-auto rounded-full overflow-hidden mb-4">
666
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Abdoul" class="w-full h-full object-cover">
667
+ </div>
668
+ <h3 class="text-xl font-semibold mb-1">Abdoul Diop</h3>
669
+ <p class="text-indigo-600 mb-3">Fondateur & PDG</p>
670
+ <p class="text-gray-600">Abdoul a fondé l'entreprise avec la vision de créer une boutique fiable pour la communauté locale.</p>
671
+ </div>
672
+
673
+ <div class="bg-gray-50 p-6 rounded-lg">
674
+ <div class="w-32 h-32 mx-auto rounded-full overflow-hidden mb-4">
675
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Aminata" class="w-full h-full object-cover">
676
+ </div>
677
+ <h3 class="text-xl font-semibold mb-1">Aminata Ndiaye</h3>
678
+ <p class="text-indigo-600 mb-3">Directrice Commerciale</p>
679
+ <p class="text-gray-600">Aminata supervise les opérations quotidiennes et s'assure que chaque client est satisfait.</p>
680
+ </div>
681
+
682
+ <div class="bg-gray-50 p-6 rounded-lg">
683
+ <div class="w-32 h-32 mx-auto rounded-full overflow-hidden mb-4">
684
+ <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Moussa" class="w-full h-full object-cover">
685
+ </div>
686
+ <h3 class="text-xl font-semibold mb-1">Moussa Fall</h3>
687
+ <p class="text-indigo-600 mb-3">Responsable Logistique</p>
688
+ <p class="text-gray-600">Moussa gère la chaîne d'approvisionnement et s'assure que les produits arrivent à temps.</p>
689
+ </div>
690
+ </div>
691
+ </div>
692
+ </div>
693
+ </section>
694
+ </div>
695
+
696
+ <!-- Contact Page -->
697
+ <div id="contact-page" class="page">
698
+ <section class="py-16 bg-white">
699
+ <div class="container mx-auto px-4">
700
+ <div class="text-center mb-16">
701
+ <h1 class="text-4xl font-bold mb-4">Contactez-nous</h1>
702
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">Nous sommes là pour répondre à toutes vos questions</p>
703
+ </div>
704
+
705
+ <div class="flex flex-col lg:flex-row gap-12">
706
+ <div class="lg:w-1/2">
707
+ <div class="bg-gray-50 p-8 rounded-lg shadow-sm">
708
+ <h2 class="text-2xl font-bold mb-6">Envoyez-nous un message</h2>
709
+ <form>
710
+ <div class="mb-4">
711
+ <label for="name" class="block text-gray-700 mb-2">Votre nom</label>
712
+ <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-indigo-500">
713
+ </div>
714
+ <div class="mb-4">
715
+ <label for="email" class="block text-gray-700 mb-2">Votre email</label>
716
+ <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-indigo-500">
717
+ </div>
718
+ <div class="mb-4">
719
+ <label for="subject" class="block text-gray-700 mb-2">Sujet</label>
720
+ <input type="text" id="subject" class="w-full px-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-indigo-500">
721
+ </div>
722
+ <div class="mb-6">
723
+ <label for="message" class="block text-gray-700 mb-2">Message</label>
724
+ <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-indigo-500"></textarea>
725
+ </div>
726
+ <button type="submit" class="w-full bg-indigo-600 text-white py-3 rounded hover:bg-indigo-700 transition-all font-semibold">
727
+ Envoyer le message
728
+ </button>
729
+ </form>
730
+ </div>
731
+ </div>
732
+
733
+ <div class="lg:w-1/2">
734
+ <div class="bg-gray-50 p-8 rounded-lg shadow-sm h-full">
735
+ <h2 class="text-2xl font-bold mb-6">Nos coordonnées</h2>
736
+
737
+ <div class="space-y-6">
738
+ <div class="flex items-start">
739
+ <div class="bg-indigo-100 p-3 rounded-full mr-4">
740
+ <i class="fas fa-map-marker-alt text-indigo-600"></i>
741
+ </div>
742
+ <div>
743
+ <h3 class="font-semibold text-lg mb-1">Adresse</h3>
744
+ <p class="text-gray-600">123 Avenue de la Liberté, Dakar, Sénégal</p>
745
+ </div>
746
+ </div>
747
+
748
+ <div class="flex items-start">
749
+ <div class="bg-indigo-100 p-3 rounded-full mr-4">
750
+ <i class="fas fa-phone-alt text-indigo-600"></i>
751
+ </div>
752
+ <div>
753
+ <h3 class="font-semibold text-lg mb-1">Téléphone</h3>
754
+ <p class="text-gray-600">+221 33 123 45 67</p>
755
+ <p class="text-gray-600">+221 77 890 12 34 (WhatsApp)</p>
756
+ </div>
757
+ </div>
758
+
759
+ <div class="flex items-start">
760
+ <div class="bg-indigo-100 p-3 rounded-full mr-4">
761
+ <i class="fas fa-envelope text-indigo-600"></i>
762
+ </div>
763
+ <div>
764
+ <h3 class="font-semibold text-lg mb-1">Email</h3>
765
+ <p class="text-gray-600">contact@abdoulshop.com</p>
766
+ <p class="text-gray-600">support@abdoulshop.com</p>
767
+ </div>
768
+ </div>
769
+
770
+ <div class="flex items-start">
771
+ <div class="bg-indigo-100 p-3 rounded-full mr-4">
772
+ <i class="fas fa-clock text-indigo-600"></i>
773
+ </div>
774
+ <div>
775
+ <h3 class="font-semibold text-lg mb-1">Heures d'ouverture</h3>
776
+ <p class="text-gray-600">Lundi - Vendredi: 8h00 - 18h00</p>
777
+ <p class="text-gray-600">Samedi: 9h00 - 16h00</p>
778
+ <p class="text-gray-600">Dimanche: Fermé</p>
779
+ </div>
780
+ </div>
781
+ </div>
782
+
783
+ <div class="mt-8">
784
+ <h3 class="font-semibold text-lg mb-4">Suivez-nous</h3>
785
+ <div class="flex space-x-4">
786
+ <a href="#" class="bg-gray-200 p-3 rounded-full text-gray-700 hover:bg-indigo-600 hover:text-white transition-all">
787
+ <i class="fab fa-facebook-f"></i>
788
+ </a>
789
+ <a href="#" class="bg-gray-200 p-3 rounded-full text-gray-700 hover:bg-indigo-600 hover:text-white transition-all">
790
+ <i class="fab fa-twitter"></i>
791
+ </a>
792
+ <a href="#" class="bg-gray-200 p-3 rounded-full text-gray-700 hover:bg-indigo-600 hover:text-white transition-all">
793
+ <i class="fab fa-instagram"></i>
794
+ </a>
795
+ <a href="#" class="bg-gray-200 p-3 rounded-full text-gray-700 hover:bg-indigo-600 hover:text-white transition-all">
796
+ <i class="fab fa-linkedin-in"></i>
797
+ </a>
798
+ </div>
799
+ </div>
800
+ </div>
801
+ </div>
802
+ </div>
803
+
804
+ <div class="mt-16">
805
+ <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3859.227465736822!2d-17.443788924683!3d14.69223048576163!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xec1725a5b5a7e9b%3A0x5d5e5e5e5e5e5e5e!2sDakar%2C%20Senegal!5e0!3m2!1sen!2sus!4v1620000000000!5m2!1sen!2sus" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" class="rounded-lg shadow-lg"></iframe>
806
+ </div>
807
+ </div>
808
+ </section>
809
+ </div>
810
+ </main>
811
+
812
+ <!-- Footer -->
813
+ <footer class="bg-gray-900 text-white pt-16 pb-8">
814
+ <div class="container mx-auto px-4">
815
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12">
816
+ <div>
817
+ <h3 class="text-xl font-bold mb-4">Abdoul Shop</h3>
818
+ <p class="text-gray-400 mb-4">Votre boutique en ligne préférée pour tous vos besoins quotidiens.</p>
819
+ <div class="flex space-x-4">
820
+ <a href="#" class="text-gray-400 hover:text-white transition-all"><i class="fab fa-facebook-f"></i></a>
821
+ <a href="#" class="text-gray-400 hover:text-white transition-all"><i class="fab fa-twitter"></i></a>
822
+ <a href="#" class="text-gray-400 hover:text-white transition-all"><i class="fab fa-instagram"></i></a>
823
+ <a href="#" class="text-gray-400 hover:text-white transition-all"><i class="fab fa-linkedin-in"></i></a>
824
+ </div>
825
+ </div>
826
+
827
+ <div>
828
+ <h4 class="font-semibold text-lg mb-4">Liens rapides</h4>
829
+ <ul class="space-y-2">
830
+ <li><a href="#" onclick="showPage('home')" class="text-gray-400 hover:text-white transition-all">Accueil</a></li>
831
+ <li><a href="#" onclick="showPage('shop')" class="text-gray-400 hover:text-white transition-all">Boutique</a></li>
832
+ <li><a href="#" onclick="showPage('about')" class="text-gray-400 hover:text-white transition-all">À propos</a></li>
833
+ <li><a href="#" onclick="showPage('contact')" class="text-gray-400 hover:text-white transition-all">Contact</a></li>
834
+ </ul>
835
+ </div>
836
+
837
+ <div>
838
+ <h4 class="font-semibold text-lg mb-4">Catégories</h4>
839
+ <ul class="space-y-2">
840
+ <li><a href="#" class="text-gray-400 hover:text-white transition-all">Électronique</a></li>
841
+ <li><a href="#" class="text-gray-400 hover:text-white transition-all">Mode</a></li>
842
+ <li><a href="#" class="text-gray-400 hover:text-white transition-all">Maison & Déco</a></li>
843
+ <li><a href="#" class="text-gray-400 hover:text-white transition-all">Beauté</a></li>
844
+ <li><a href="#" class="text-gray-400 hover:text-white transition-all">Sports & Loisirs</a></li>
845
+ </ul>
846
+ </div>
847
+
848
+ <div>
849
+ <h4 class="font-semibold text-lg mb-4">Newsletter</h4>
850
+ <p class="text-gray-400 mb-4">Abonnez-vous pour recevoir nos offres spéciales et nouveautés.</p>
851
+ <form class="flex">
852
+ <input type="email" placeholder="Votre email" class="px-4 py-2 rounded-l focus:outline-none text-gray-800 w-full">
853
+ <button type="submit" class="bg-indigo-600 hover:bg-indigo-700 px-4 py-2 rounded-r transition-all">
854
+ <i class="fas fa-paper-plane"></i>
855
+ </button>
856
+ </form>
857
+ </div>
858
+ </div>
859
+
860
+ <div class="border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center">
861
+ <p class="text-gray-400 mb-4 md:mb-0">© 2023 Abdoul Shop. Tous droits réservés.</p>
862
+ <div class="flex space-x-6">
863
+ <a href="#" class="text-gray-400 hover:text-white transition-all">Conditions générales</a>
864
+ <a href="#" class="text-gray-400 hover:text-white transition-all">Politique de confidentialité</a>
865
+ <a href="#" class="text-gray-400 hover:text-white transition-all">Mentions légales</a>
866
+ </div>
867
+ </div>
868
+ </div>
869
+ </footer>
870
+
871
+ <script>
872
+ // Cart functionality
873
+ let cart = [];
874
+ let cartTotal = 0;
875
+
876
+ function toggleCart() {
877
+ const cartPanel = document.getElementById('cart-panel');
878
+ const overlay = document.getElementById('overlay');
879
+
880
+ cartPanel.classList.toggle('open');
881
+ overlay.classList.toggle('hidden');
882
+
883
+ // Prevent scrolling when cart is open
884
+ if (cartPanel.classList.contains('open')) {
885
+ document.body.style.overflow = 'hidden';
886
+ } else {
887
+ document.body.style.overflow = '';
888
+ }
889
+ }
890
+
891
+ function addToCart(name, price, image) {
892
+ // Check if item already exists in cart
893
+ const existingItem = cart.find(item => item.name === name);
894
+
895
+ if (existingItem) {
896
+ existingItem.quantity += 1;
897
+ } else {
898
+ cart.push({
899
+ name: name,
900
+ price: price,
901
+ image: image,
902
+ quantity: 1
903
+ });
904
+ }
905
+
906
+ // Update cart total
907
+ cartTotal += price;
908
+
909
+ // Update cart UI
910
+ updateCartUI();
911
+
912
+ // Show notification
913
+ showNotification(`${name} ajouté au panier`);
914
+ }
915
+
916
+ function updateCartUI() {
917
+ const cartItemsContainer = document.getElementById('cart-items');
918
+ const cartCount = document.getElementById('cart-count');
919
+ const cartTotalElement = document.getElementById('cart-total');
920
+
921
+ // Update cart count
922
+ const totalItems = cart.reduce((total, item) => total + item.quantity, 0);
923
+ cartCount.textContent = totalItems;
924
+
925
+ // Update cart items
926
+ if (cart.length === 0) {
927
+ cartItemsContainer.innerHTML = '<p class="text-gray-500 text-center py-8">Votre panier est vide</p>';
928
+ } else {
929
+ let html = '';
930
+
931
+ cart.forEach(item => {
932
+ html += `
933
+ <div class="flex items-center py-4 border-b">
934
+ <div class="w-16 h-16 rounded overflow-hidden mr-4">
935
+ <img src="${item.image}" alt="${item.name}" class="w-full h-full object-cover">
936
+ </div>
937
+ <div class="flex-grow">
938
+ <h4 class="font-medium">${item.name}</h4>
939
+ <p class="text-gray-600">${item.price.toLocaleString()} FCFA x ${item.quantity}</p>
940
+ </div>
941
+ <div class="flex items-center">
942
+ <span class="font-semibold mr-4">${(item.price * item.quantity).toLocaleString()} FCFA</span>
943
+ <button onclick="removeFromCart('${item.name}')" class="text-red-500 hover:text-red-700">
944
+ <i class="fas fa-trash"></i>
945
+ </button>
946
+ </div>
947
+ </div>
948
+ `;
949
+ });
950
+
951
+ cartItemsContainer.innerHTML = html;
952
+ }
953
+
954
+ // Update cart total
955
+ cartTotalElement.textContent = cartTotal.toLocaleString() + ' FCFA';
956
+ }
957
+
958
+ function removeFromCart(name) {
959
+ const itemIndex = cart.findIndex(item => item.name === name);
960
+
961
+ if (itemIndex !== -1) {
962
+ const item = cart[itemIndex];
963
+ cartTotal -= item.price * item.quantity;
964
+
965
+ // Remove item from cart
966
+ cart.splice(itemIndex, 1);
967
+
968
+ // Update cart UI
969
+ updateCartUI();
970
+
971
+ // Show notification
972
+ showNotification(`${name} retiré du panier`);
973
+ }
974
+ }
975
+
976
+ function showNotification(message) {
977
+ const notification = document.createElement('div');
978
+ notification.className = 'fixed bottom-4 right-4 bg-gray-800 text-white px-6 py-3 rounded shadow-lg flex items-center';
979
+ notification.innerHTML = `
980
+ <i class="fas fa-check-circle mr-2"></i>
981
+ <span>${message}</span>
982
+ `;
983
+
984
+ document.body.appendChild(notification);
985
+
986
+ // Remove notification after 3 seconds
987
+ setTimeout(() => {
988
+ notification.classList.add('opacity-0', 'transition-all', 'duration-300');
989
+ setTimeout(() => notification.remove(), 300);
990
+ }, 3000);
991
+ }
992
+
993
+ // Page navigation
994
+ function showPage(pageId) {
995
+ // Hide all pages
996
+ document.querySelectorAll('.page').forEach(page => {
997
+ page.classList.remove('active');
998
+ });
999
+
1000
+ // Show selected page
1001
+ document.getElementById(`${pageId}-page`).classList.add('active');
1002
+
1003
+ // Close mobile menu if open
1004
+ document.getElementById('mobile-menu').classList.add('hidden');
1005
+
1006
+ // Scroll to top
1007
+ window.scrollTo(0, 0);
1008
+ }
1009
+
1010
+ function toggleMobileMenu() {
1011
+ document.getElementById('mobile-menu').classList.toggle('hidden');
1012
+ }
1013
+
1014
+ // Initialize the page
1015
+ document.addEventListener('DOMContentLoaded', function() {
1016
+ // Set home page as active by default
1017
+ showPage('home');
1018
+ });
1019
+ </script>
1020
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Jacky-9/batchana" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1021
+ </html>