Hugging Face's logo

Spaces:
Stephane63
/
test-space
Running

App Files Community
Stephane63 commited on
Commit
35f894a
·
verified ·
1 Parent(s): f530163

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +472 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Test Space
3
- emoji: 🏃
4
- colorFrom: green
5
- colorTo: blue
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: test-space
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: purple
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,472 @@
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>Grain d'Or - Café en grain d'exception</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
+ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Poppins:wght@300;400;600&display=swap');
11
+
12
+ body {
13
+ font-family: 'Poppins', sans-serif;
14
+ background-color: #FFF9F2;
15
+ }
16
+
17
+ .title-font {
18
+ font-family: 'Playfair Display', serif;
19
+ }
20
+
21
+ .hero-gradient {
22
+ background: linear-gradient(135deg, #F8E1C5 0%, #E7B98A 100%);
23
+ }
24
+
25
+ .coffee-card:hover {
26
+ transform: translateY(-5px);
27
+ box-shadow: 0 10px 25px rgba(120, 60, 20, 0.15);
28
+ }
29
+
30
+ .nav-link:hover {
31
+ color: #C97D4A;
32
+ }
33
+
34
+ .btn-primary {
35
+ background-color: #C97D4A;
36
+ transition: all 0.3s ease;
37
+ }
38
+
39
+ .btn-primary:hover {
40
+ background-color: #B56A3A;
41
+ transform: translateY(-2px);
42
+ }
43
+
44
+ .flavor-note {
45
+ background-color: #F8E1C5;
46
+ border-left: 3px solid #C97D4A;
47
+ }
48
+
49
+ .footer-divider {
50
+ border-top: 1px solid rgba(201, 125, 74, 0.2);
51
+ }
52
+ </style>
53
+ </head>
54
+ <body>
55
+ <!-- Header -->
56
+ <header class="bg-white shadow-sm">
57
+ <div class="container mx-auto px-4 py-4 flex justify-between items-center">
58
+ <div class="flex items-center">
59
+ <i class="fas fa-coffee text-3xl text-amber-900 mr-2"></i>
60
+ <h1 class="title-font text-2xl font-bold text-amber-900">Grain d'Or</h1>
61
+ </div>
62
+
63
+ <nav class="hidden md:flex space-x-8">
64
+ <a href="#" class="nav-link text-amber-900 hover:text-amber-700 font-medium">Nos cafés</a>
65
+ <a href="#" class="nav-link text-amber-900 hover:text-amber-700 font-medium">Origines</a>
66
+ <a href="#" class="nav-link text-amber-900 hover:text-amber-700 font-medium">Méthodes</a>
67
+ <a href="#" class="nav-link text-amber-900 hover:text-amber-700 font-medium">Notre histoire</a>
68
+ </nav>
69
+
70
+ <div class="flex items-center space-x-4">
71
+ <button class="p-2 text-amber-900 hover:text-amber-700">
72
+ <i class="fas fa-search text-lg"></i>
73
+ </button>
74
+ <button class="p-2 text-amber-900 hover:text-amber-700 relative">
75
+ <i class="fas fa-shopping-cart text-lg"></i>
76
+ <span class="absolute -top-1 -right-1 bg-amber-700 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">3</span>
77
+ </button>
78
+ <button class="md:hidden p-2 text-amber-900">
79
+ <i class="fas fa-bars text-xl"></i>
80
+ </button>
81
+ </div>
82
+ </div>
83
+ </header>
84
+
85
+ <!-- Hero Section -->
86
+ <section class="hero-gradient py-16 md:py-24">
87
+ <div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
88
+ <div class="md:w-1/2 mb-10 md:mb-0">
89
+ <h2 class="title-font text-4xl md:text-5xl font-bold text-amber-900 mb-4">Découvrez l'âme du café</h2>
90
+ <p class="text-amber-800 text-lg mb-8">Des grains d'exception torréfiés avec passion pour révéler des arômes uniques et des saveurs mémorables.</p>
91
+ <button class="btn-primary text-white font-medium py-3 px-8 rounded-full shadow-md">Explorer notre sélection</button>
92
+ </div>
93
+ <div class="md:w-1/2 flex justify-center">
94
+ <img src="https://images.unsplash.com/photo-1517705008128-361805f42e86?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1080&q=80" alt="Café en grain de qualité" class="rounded-lg shadow-xl w-full max-w-md">
95
+ </div>
96
+ </div>
97
+ </section>
98
+
99
+ <!-- Featured Products -->
100
+ <section class="py-16 bg-white">
101
+ <div class="container mx-auto px-4">
102
+ <div class="text-center mb-12">
103
+ <h3 class="title-font text-3xl font-bold text-amber-900 mb-2">Nos cafés d'exception</h3>
104
+ <p class="text-amber-800 max-w-2xl mx-auto">Sélectionnés parmi les meilleures plantations du monde et torréfiés artisanalement en France.</p>
105
+ </div>
106
+
107
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
108
+ <!-- Product 1 -->
109
+ <div class="coffee-card bg-white rounded-lg overflow-hidden shadow-md transition-all duration-300">
110
+ <div class="relative">
111
+ <img src="https://images.unsplash.com/photo-1511920170033-f839b4c1d0dc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1080&q=80" alt="Café Ethiopie Yirgacheffe" class="w-full h-64 object-cover">
112
+ <div class="absolute top-4 right-4 bg-amber-700 text-white text-xs font-bold px-3 py-1 rounded-full">NOUVEAUTÉ</div>
113
+ </div>
114
+ <div class="p-6">
115
+ <div class="flex justify-between items-start mb-2">
116
+ <h4 class="title-font text-xl font-bold text-amber-900">Ethiopie Yirgacheffe</h4>
117
+ <span class="text-amber-700 font-bold">24,90€</span>
118
+ </div>
119
+ <p class="text-gray-600 text-sm mb-4">Notes florales et fruitées avec une touche de bergamote et de miel.</p>
120
+
121
+ <div class="flavor-note px-4 py-2 mb-4 rounded">
122
+ <p class="text-amber-900 text-sm font-medium"><i class="fas fa-mug-hot mr-2"></i> Torréfaction: Clair</p>
123
+ </div>
124
+
125
+ <div class="flex justify-between items-center">
126
+ <div class="flex text-amber-500">
127
+ <i class="fas fa-star"></i>
128
+ <i class="fas fa-star"></i>
129
+ <i class="fas fa-star"></i>
130
+ <i class="fas fa-star"></i>
131
+ <i class="fas fa-star-half-alt"></i>
132
+ <span class="text-gray-600 text-sm ml-2">(48)</span>
133
+ </div>
134
+ <button class="btn-primary text-white text-sm font-medium py-2 px-4 rounded-full">Ajouter au panier</button>
135
+ </div>
136
+ </div>
137
+ </div>
138
+
139
+ <!-- Product 2 -->
140
+ <div class="coffee-card bg-white rounded-lg overflow-hidden shadow-md transition-all duration-300">
141
+ <div class="relative">
142
+ <img src="https://images.unsplash.com/photo-1536244881128-91c3b8b3a9b5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1080&q=80" alt="Café Colombie Huila" class="w-full h-64 object-cover">
143
+ </div>
144
+ <div class="p-6">
145
+ <div class="flex justify-between items-start mb-2">
146
+ <h4 class="title-font text-xl font-bold text-amber-900">Colombie Huila</h4>
147
+ <span class="text-amber-700 font-bold">22,50€</span>
148
+ </div>
149
+ <p class="text-gray-600 text-sm mb-4">Équilibre parfait entre douceur et acidité, avec des notes de caramel et de noix.</p>
150
+
151
+ <div class="flavor-note px-4 py-2 mb-4 rounded">
152
+ <p class="text-amber-900 text-sm font-medium"><i class="fas fa-mug-hot mr-2"></i> Torréfaction: Moyenne</p>
153
+ </div>
154
+
155
+ <div class="flex justify-between items-center">
156
+ <div class="flex text-amber-500">
157
+ <i class="fas fa-star"></i>
158
+ <i class="fas fa-star"></i>
159
+ <i class="fas fa-star"></i>
160
+ <i class="fas fa-star"></i>
161
+ <i class="fas fa-star"></i>
162
+ <span class="text-gray-600 text-sm ml-2">(62)</span>
163
+ </div>
164
+ <button class="btn-primary text-white text-sm font-medium py-2 px-4 rounded-full">Ajouter au panier</button>
165
+ </div>
166
+ </div>
167
+ </div>
168
+
169
+ <!-- Product 3 -->
170
+ <div class="coffee-card bg-white rounded-lg overflow-hidden shadow-md transition-all duration-300">
171
+ <div class="relative">
172
+ <img src="https://images.unsplash.com/photo-1551033401-9a8be525c809?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1080&q=80" alt="Café Brésil Cerrado" class="w-full h-64 object-cover">
173
+ <div class="absolute top-4 right-4 bg-amber-700 text-white text-xs font-bold px-3 py-1 rounded-full">BEST-SELLER</div>
174
+ </div>
175
+ <div class="p-6">
176
+ <div class="flex justify-between items-start mb-2">
177
+ <h4 class="title-font text-xl font-bold text-amber-900">Brésil Cerrado</h4>
178
+ <span class="text-amber-700 font-bold">19,90€</span>
179
+ </div>
180
+ <p class="text-gray-600 text-sm mb-4">Corps généreux avec des arômes de chocolat noir et de fruits secs.</p>
181
+
182
+ <div class="flavor-note px-4 py-2 mb-4 rounded">
183
+ <p class="text-amber-900 text-sm font-medium"><i class="fas fa-mug-hot mr-2"></i> Torréfaction: Corsée</p>
184
+ </div>
185
+
186
+ <div class="flex justify-between items-center">
187
+ <div class="flex text-amber-500">
188
+ <i class="fas fa-star"></i>
189
+ <i class="fas fa-star"></i>
190
+ <i class="fas fa-star"></i>
191
+ <i class="fas fa-star"></i>
192
+ <i class="fas fa-star"></i>
193
+ <span class="text-gray-600 text-sm ml-2">(127)</span>
194
+ </div>
195
+ <button class="btn-primary text-white text-sm font-medium py-2 px-4 rounded-full">Ajouter au panier</button>
196
+ </div>
197
+ </div>
198
+ </div>
199
+ </div>
200
+
201
+ <div class="text-center mt-12">
202
+ <button class="border-2 border-amber-700 text-amber-700 font-medium py-2 px-8 rounded-full hover:bg-amber-700 hover:text-white transition-all">Voir toute la collection</button>
203
+ </div>
204
+ </div>
205
+ </section>
206
+
207
+ <!-- Brewing Methods -->
208
+ <section class="py-16 bg-amber-50">
209
+ <div class="container mx-auto px-4">
210
+ <div class="text-center mb-12">
211
+ <h3 class="title-font text-3xl font-bold text-amber-900 mb-2">L'art de préparer votre café</h3>
212
+ <p class="text-amber-800 max-w-2xl mx-auto">Découvrez nos conseils pour sublimer vos grains et révéler tout leur potentiel.</p>
213
+ </div>
214
+
215
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
216
+ <div class="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition-shadow">
217
+ <div class="w-16 h-16 bg-amber-100 rounded-full flex items-center justify-center mb-4 mx-auto">
218
+ <i class="fas fa-filter text-amber-700 text-2xl"></i>
219
+ </div>
220
+ <h4 class="title-font text-xl font-bold text-amber-900 text-center mb-2">Pour Over</h4>
221
+ <p class="text-gray-600 text-center">Méthode douce qui met en valeur les notes aromatiques complexes des cafés de spécialité.</p>
222
+ </div>
223
+
224
+ <div class="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition-shadow">
225
+ <div class="w-16 h-16 bg-amber-100 rounded-full flex items-center justify-center mb-4 mx-auto">
226
+ <i class="fas fa-coffee-pot text-amber-700 text-2xl"></i>
227
+ </div>
228
+ <h4 class="title-font text-xl font-bold text-amber-900 text-center mb-2">French Press</h4>
229
+ <p class="text-gray-600 text-center">Idéale pour des cafés riches en corps et en arômes, parfaite pour nos mélanges corsés.</p>
230
+ </div>
231
+
232
+ <div class="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition-shadow">
233
+ <div class="w-16 h-16 bg-amber-100 rounded-full flex items-center justify-center mb-4 mx-auto">
234
+ <i class="fas fa-bolt text-amber-700 text-2xl"></i>
235
+ </div>
236
+ <h4 class="title-font text-xl font-bold text-amber-900 text-center mb-2">Expresso</h4>
237
+ <p class="text-gray-600 text-center">Pour une expérience intense, révélant toute la puissance et la complexité de nos grains.</p>
238
+ </div>
239
+ </div>
240
+ </div>
241
+ </section>
242
+
243
+ <!-- Subscription -->
244
+ <section class="py-16 bg-amber-900 text-white">
245
+ <div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
246
+ <div class="md:w-1/2 mb-10 md:mb-0">
247
+ <h3 class="title-font text-3xl font-bold mb-4">L'abonnement qui vous ressemble</h3>
248
+ <p class="mb-6 opacity-90">Recevez chaque mois une sélection de nos meilleurs cafés, adaptée à vos préférences et découvertes.</p>
249
+ <ul class="space-y-3 mb-8">
250
+ <li class="flex items-center">
251
+ <i class="fas fa-check-circle text-amber-300 mr-3"></i>
252
+ <span>Livraison gratuite et flexible</span>
253
+ </li>
254
+ <li class="flex items-center">
255
+ <i class="fas fa-check-circle text-amber-300 mr-3"></i>
256
+ <span>Découvertes exclusives</span>
257
+ </li>
258
+ <li class="flex items-center">
259
+ <i class="fas fa-check-circle text-amber-300 mr-3"></i>
260
+ <span>10% de réduction sur tous vos achats</span>
261
+ </li>
262
+ </ul>
263
+ <button class="bg-white text-amber-900 font-medium py-3 px-8 rounded-full shadow-md hover:bg-amber-100 transition-all">Démarrer l'abonnement</button>
264
+ </div>
265
+ <div class="md:w-1/2 flex justify-center">
266
+ <div class="bg-white p-6 rounded-lg shadow-lg max-w-md">
267
+ <img src="https://images.unsplash.com/photo-1550583720-4fb2172b7590?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1080&q=80" alt="Abonnement café" class="rounded mb-4">
268
+ <h4 class="title-font text-xl font-bold text-amber-900 mb-2">Découverte du mois</h4>
269
+ <p class="text-gray-600 mb-4">Chaque mois, notre torréfacteur expert sélectionne pour vous un café rare et exceptionnel, accompagné de notes de dégustation et de conseils de préparation.</p>
270
+ <div class="flex items-center text-amber-700">
271
+ <i class="fas fa-gift text-xl mr-2"></i>
272
+ <span class="font-medium">Offert pour tout nouvel abonnement</span>
273
+ </div>
274
+ </div>
275
+ </div>
276
+ </div>
277
+ </section>
278
+
279
+ <!-- Testimonials -->
280
+ <section class="py-16 bg-white">
281
+ <div class="container mx-auto px-4">
282
+ <div class="text-center mb-12">
283
+ <h3 class="title-font text-3xl font-bold text-amber-900 mb-2">Ils ont adoré</h3>
284
+ <p class="text-amber-800 max-w-2xl mx-auto">Découvrez ce que nos clients passionnés pensent de nos cafés.</p>
285
+ </div>
286
+
287
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
288
+ <div class="bg-amber-50 p-6 rounded-lg">
289
+ <div class="flex text-amber-500 mb-4">
290
+ <i class="fas fa-star"></i>
291
+ <i class="fas fa-star"></i>
292
+ <i class="fas fa-star"></i>
293
+ <i class="fas fa-star"></i>
294
+ <i class="fas fa-star"></i>
295
+ </div>
296
+ <p class="text-gray-700 italic mb-6">"Le Yirgacheffe est une révélation ! Des notes florales incroyables que je n'avais jamais retrouvées dans un café auparavant."</p>
297
+ <div class="flex items-center">
298
+ <div class="w-10 h-10 rounded-full bg-amber-200 mr-3 overflow-hidden">
299
+ <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Client" class="w-full h-full object-cover">
300
+ </div>
301
+ <div>
302
+ <p class="font-medium text-amber-900">Sophie L.</p>
303
+ <p class="text-gray-500 text-sm">Abonnée depuis 8 mois</p>
304
+ </div>
305
+ </div>
306
+ </div>
307
+
308
+ <div class="bg-amber-50 p-6 rounded-lg">
309
+ <div class="flex text-amber-500 mb-4">
310
+ <i class="fas fa-star"></i>
311
+ <i class="fas fa-star"></i>
312
+ <i class="fas fa-star"></i>
313
+ <i class="fas fa-star"></i>
314
+ <i class="fas fa-star"></i>
315
+ </div>
316
+ <p class="text-gray-700 italic mb-6">"La qualité des grains est exceptionnelle. Je ne peux plus me passer de mon Brésil Cerrado du matin, un régal !"</p>
317
+ <div class="flex items-center">
318
+ <div class="w-10 h-10 rounded-full bg-amber-200 mr-3 overflow-hidden">
319
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Client" class="w-full h-full object-cover">
320
+ </div>
321
+ <div>
322
+ <p class="font-medium text-amber-900">Thomas R.</p>
323
+ <p class="text-gray-500 text-sm">Client depuis 1 an</p>
324
+ </div>
325
+ </div>
326
+ </div>
327
+
328
+ <div class="bg-amber-50 p-6 rounded-lg">
329
+ <div class="flex text-amber-500 mb-4">
330
+ <i class="fas fa-star"></i>
331
+ <i class="fas fa-star"></i>
332
+ <i class="fas fa-star"></i>
333
+ <i class="fas fa-star"></i>
334
+ <i class="fas fa-star-half-alt"></i>
335
+ </div>
336
+ <p class="text-gray-700 italic mb-6">"L'abonnement est parfaitement adapté à mes goûts. Chaque mois, une nouvelle découverte qui m'émerveille."</p>
337
+ <div class="flex items-center">
338
+ <div class="w-10 h-10 rounded-full bg-amber-200 mr-3 overflow-hidden">
339
+ <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Client" class="w-full h-full object-cover">
340
+ </div>
341
+ <div>
342
+ <p class="font-medium text-amber-900">Élodie M.</p>
343
+ <p class="text-gray-500 text-sm">Abonnée depuis 5 mois</p>
344
+ </div>
345
+ </div>
346
+ </div>
347
+ </div>
348
+ </div>
349
+ </section>
350
+
351
+ <!-- Newsletter -->
352
+ <section class="py-16 bg-amber-100">
353
+ <div class="container mx-auto px-4 max-w-4xl text-center">
354
+ <h3 class="title-font text-3xl font-bold text-amber-900 mb-2">Restez informés</h3>
355
+ <p class="text-amber-800 mb-8">Abonnez-vous à notre newsletter pour recevoir nos nouveautés, conseils et offres exclusives.</p>
356
+
357
+ <form class="flex flex-col sm:flex-row gap-4 max-w-xl mx-auto">
358
+ <input type="email" placeholder="Votre email" class="flex-grow px-4 py-3 rounded-full border border-amber-300 focus:outline-none focus:ring-2 focus:ring-amber-500">
359
+ <button type="submit" class="btn-primary text-white font-medium py-3 px-8 rounded-full whitespace-nowrap">S'abonner</button>
360
+ </form>
361
+
362
+ <p class="text-amber-800 text-sm mt-4">Nous ne partagerons jamais votre email. Désabonnez-vous à tout moment.</p>
363
+ </div>
364
+ </section>
365
+
366
+ <!-- Footer -->
367
+ <footer class="bg-amber-900 text-white pt-16 pb-8">
368
+ <div class="container mx-auto px-4">
369
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12">
370
+ <div>
371
+ <div class="flex items-center mb-4">
372
+ <i class="fas fa-coffee text-2xl text-amber-300 mr-2"></i>
373
+ <h4 class="title-font text-xl font-bold">Grain d'Or</h4>
374
+ </div>
375
+ <p class="text-amber-200 mb-4">Des cafés d'exception, torréfiés avec passion pour les amateurs exigeants.</p>
376
+ <div class="flex space-x-4">
377
+ <a href="#" class="text-amber-300 hover:text-white text-xl"><i class="fab fa-instagram"></i></a>
378
+ <a href="#" class="text-amber-300 hover:text-white text-xl"><i class="fab fa-facebook"></i></a>
379
+ <a href="#" class="text-amber-300 hover:text-white text-xl"><i class="fab fa-pinterest"></i></a>
380
+ </div>
381
+ </div>
382
+
383
+ <div>
384
+ <h5 class="title-font font-bold text-lg mb-4">Navigation</h5>
385
+ <ul class="space-y-2">
386
+ <li><a href="#" class="text-amber-200 hover:text-white">Nos cafés</a></li>
387
+ <li><a href="#" class="text-amber-200 hover:text-white">Origines</a></li>
388
+ <li><a href="#" class="text-amber-200 hover:text-white">Méthodes de préparation</a></li>
389
+ <li><a href="#" class="text-amber-200 hover:text-white">Notre histoire</a></li>
390
+ <li><a href="#" class="text-amber-200 hover:text-white">Blog</a></li>
391
+ </ul>
392
+ </div>
393
+
394
+ <div>
395
+ <h5 class="title-font font-bold text-lg mb-4">Informations</h5>
396
+ <ul class="space-y-2">
397
+ <li><a href="#" class="text-amber-200 hover:text-white">Livraison & retours</a></li>
398
+ <li><a href="#" class="text-amber-200 hover:text-white">FAQ</a></li>
399
+ <li><a href="#" class="text-amber-200 hover:text-white">Contact</a></li>
400
+ <li><a href="#" class="text-amber-200 hover:text-white">Boutiques</a></li>
401
+ <li><a href="#" class="text-amber-200 hover:text-white">CGV</a></li>
402
+ </ul>
403
+ </div>
404
+
405
+ <div>
406
+ <h5 class="title-font font-bold text-lg mb-4">Contact</h5>
407
+ <ul class="space-y-2">
408
+ <li class="flex items-start">
409
+ <i class="fas fa-map-marker-alt text-amber-300 mt-1 mr-3"></i>
410
+ <span class="text-amber-200">12 Rue des Torréfacteurs<br>75011 Paris</span>
411
+ </li>
412
+ <li class="flex items-center">
413
+ <i class="fas fa-phone-alt text-amber-300 mr-3"></i>
414
+ <span class="text-amber-200">01 23 45 67 89</span>
415
+ </li>
416
+ <li class="flex items-center">
417
+ <i class="fas fa-envelope text-amber-300 mr-3"></i>
418
+ <span class="text-amber-200">contact@graindor.com</span>
419
+ </li>
420
+ </ul>
421
+ </div>
422
+ </div>
423
+
424
+ <div class="footer-divider pt-8">
425
+ <div class="flex flex-col md:flex-row justify-between items-center">
426
+ <p class="text-amber-200 text-sm mb-4 md:mb-0">© 2023 Grain d'Or. Tous droits réservés.</p>
427
+ <div class="flex space-x-6">
428
+ <a href="#" class="text-amber-200 hover:text-white text-sm">Politique de confidentialité</a>
429
+ <a href="#" class="text-amber-200 hover:text-white text-sm">Mentions légales</a>
430
+ <a href="#" class="text-amber-200 hover:text-white text-sm">Cookies</a>
431
+ </div>
432
+ </div>
433
+ </div>
434
+ </div>
435
+ </footer>
436
+
437
+ <script>
438
+ // Simple cart functionality for demo purposes
439
+ document.querySelectorAll('.btn-primary').forEach(button => {
440
+ button.addEventListener('click', function() {
441
+ const productName = this.closest('.coffee-card').querySelector('h4').textContent;
442
+ const price = this.closest('.coffee-card').querySelector('span').textContent;
443
+
444
+ // Update cart count
445
+ const cartCount = document.querySelector('.fa-shopping-cart').nextElementSibling;
446
+ let count = parseInt(cartCount.textContent);
447
+ cartCount.textContent = count + 1;
448
+
449
+ // Show notification
450
+ const notification = document.createElement('div');
451
+ notification.className = 'fixed bottom-4 right-4 bg-green-500 text-white px-4 py-2 rounded-lg shadow-lg flex items-center animate-fade-in';
452
+ notification.innerHTML = `
453
+ <i class="fas fa-check-circle mr-2"></i>
454
+ ${productName} ajouté au panier (${price})
455
+ `;
456
+ document.body.appendChild(notification);
457
+
458
+ // Remove notification after 3 seconds
459
+ setTimeout(() => {
460
+ notification.classList.add('animate-fade-out');
461
+ setTimeout(() => notification.remove(), 500);
462
+ }, 3000);
463
+ });
464
+ });
465
+
466
+ // Mobile menu toggle (would need proper implementation)
467
+ document.querySelector('.fa-bars').addEventListener('click', function() {
468
+ alert('Menu mobile à implémenter');
469
+ });
470
+ </script>
471
+ <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=Stephane63/test-space" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
472
+ </html>