Hugging Face's logo

Spaces:
renierd6
/
cafe-eccomeerce
Running

App Files Community
renierd6 commited on
Commit
0aeb5ec
·
verified ·
1 Parent(s): e94568d

Crea una landing page para un E-commerce, de venta de café - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +465 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Cafe Eccomeerce
3
- emoji: 💻
4
  colorFrom: yellow
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: cafe-eccomeerce
3
+ emoji: 🐳
4
  colorFrom: yellow
5
+ colorTo: green
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,465 @@
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="es">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Café Delicia - El mejor café artesanal</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
+ .hero-bg {
11
+ background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1445112098124-3e76dd67983c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
12
+ background-size: cover;
13
+ background-position: center;
14
+ }
15
+ .product-card:hover {
16
+ transform: translateY(-5px);
17
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
18
+ }
19
+ .testimonial-card {
20
+ transition: all 0.3s ease;
21
+ }
22
+ .testimonial-card:hover {
23
+ transform: scale(1.03);
24
+ }
25
+ </style>
26
+ </head>
27
+ <body class="font-sans bg-gray-50">
28
+ <!-- Header/Navbar -->
29
+ <header class="bg-white shadow-md sticky top-0 z-50">
30
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
31
+ <div class="flex items-center space-x-2">
32
+ <i class="fas fa-coffee text-amber-700 text-2xl"></i>
33
+ <span class="text-xl font-bold text-amber-900">Café Delicia</span>
34
+ </div>
35
+ <nav class="hidden md:flex space-x-8">
36
+ <a href="#inicio" class="text-amber-900 hover:text-amber-700 font-medium">Inicio</a>
37
+ <a href="#productos" class="text-amber-900 hover:text-amber-700 font-medium">Productos</a>
38
+ <a href="#nosotros" class="text-amber-900 hover:text-amber-700 font-medium">Nosotros</a>
39
+ <a href="#testimonios" class="text-amber-900 hover:text-amber-700 font-medium">Testimonios</a>
40
+ <a href="#contacto" class="text-amber-900 hover:text-amber-700 font-medium">Contacto</a>
41
+ </nav>
42
+ <div class="flex items-center space-x-4">
43
+ <button class="text-amber-900 hover:text-amber-700">
44
+ <i class="fas fa-search text-xl"></i>
45
+ </button>
46
+ <button class="text-amber-900 hover:text-amber-700 relative">
47
+ <i class="fas fa-shopping-cart text-xl"></i>
48
+ <span class="absolute -top-2 -right-2 bg-amber-600 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">3</span>
49
+ </button>
50
+ <button class="md:hidden text-amber-900">
51
+ <i class="fas fa-bars text-xl"></i>
52
+ </button>
53
+ </div>
54
+ </div>
55
+ </header>
56
+
57
+ <!-- Hero Section -->
58
+ <section id="inicio" class="hero-bg text-white py-20 md:py-32 px-4">
59
+ <div class="container mx-auto text-center">
60
+ <h1 class="text-4xl md:text-6xl font-bold mb-6">Descubre el auténtico sabor del café</h1>
61
+ <p class="text-xl md:text-2xl mb-8 max-w-2xl mx-auto">Café 100% orgánico tostado artesanalmente para ofrecerte la mejor experiencia de sabor.</p>
62
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
63
+ <button class="bg-amber-700 hover:bg-amber-800 text-white font-bold py-3 px-8 rounded-full transition duration-300">
64
+ Ver productos
65
+ </button>
66
+ <button class="bg-transparent hover:bg-white hover:text-amber-900 text-white font-bold py-3 px-8 border-2 border-white rounded-full transition duration-300">
67
+ Conócenos
68
+ </button>
69
+ </div>
70
+ </div>
71
+ </section>
72
+
73
+ <!-- Features Section -->
74
+ <section class="py-16 bg-white">
75
+ <div class="container mx-auto px-4">
76
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8 text-center">
77
+ <div class="p-6">
78
+ <div class="bg-amber-100 rounded-full w-20 h-20 flex items-center justify-center mx-auto mb-4">
79
+ <i class="fas fa-leaf text-amber-700 text-3xl"></i>
80
+ </div>
81
+ <h3 class="text-xl font-bold mb-2 text-amber-900">100% Orgánico</h3>
82
+ <p class="text-gray-600">Cultivado sin pesticidas ni químicos en las montañas de Colombia.</p>
83
+ </div>
84
+ <div class="p-6">
85
+ <div class="bg-amber-100 rounded-full w-20 h-20 flex items-center justify-center mx-auto mb-4">
86
+ <i class="fas fa-fire text-amber-700 text-3xl"></i>
87
+ </div>
88
+ <h3 class="text-xl font-bold mb-2 text-amber-900">Tostado Artesanal</h3>
89
+ <p class="text-gray-600">Tostado a mano en pequeños lotes para garantizar calidad y frescura.</p>
90
+ </div>
91
+ <div class="p-6">
92
+ <div class="bg-amber-100 rounded-full w-20 h-20 flex items-center justify-center mx-auto mb-4">
93
+ <i class="fas fa-truck text-amber-700 text-3xl"></i>
94
+ </div>
95
+ <h3 class="text-xl font-bold mb-2 text-amber-900">Envío Gratis</h3>
96
+ <p class="text-gray-600">Envío gratuito en pedidos superiores a $50 en todo el país.</p>
97
+ </div>
98
+ </div>
99
+ </div>
100
+ </section>
101
+
102
+ <!-- Featured Products -->
103
+ <section id="productos" class="py-16 bg-gray-50">
104
+ <div class="container mx-auto px-4">
105
+ <div class="text-center mb-12">
106
+ <h2 class="text-3xl md:text-4xl font-bold text-amber-900 mb-4">Nuestros Cafés Destacados</h2>
107
+ <p class="text-gray-600 max-w-2xl mx-auto">Selecciona entre nuestra exclusiva variedad de cafés premium.</p>
108
+ </div>
109
+
110
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
111
+ <!-- Product 1 -->
112
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300">
113
+ <div class="relative">
114
+ <img src="https://images.unsplash.com/photo-1517705008128-361805f42e86?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Café Arábica" class="w-full h-64 object-cover">
115
+ <span class="absolute top-2 right-2 bg-amber-600 text-white text-xs font-bold px-2 py-1 rounded-full">NUEVO</span>
116
+ </div>
117
+ <div class="p-6">
118
+ <div class="flex justify-between items-start mb-2">
119
+ <h3 class="text-xl font-bold text-amber-900">Arábica Premium</h3>
120
+ <span class="text-amber-700 font-bold">$12.99</span>
121
+ </div>
122
+ <p class="text-gray-600 mb-4">Café suave con notas de chocolate y frutos rojos. Ideal para empezar el día.</p>
123
+ <div class="flex justify-between items-center">
124
+ <div class="flex items-center text-amber-500">
125
+ <i class="fas fa-star"></i>
126
+ <i class="fas fa-star"></i>
127
+ <i class="fas fa-star"></i>
128
+ <i class="fas fa-star"></i>
129
+ <i class="fas fa-star-half-alt"></i>
130
+ <span class="text-gray-500 ml-1">(48)</span>
131
+ </div>
132
+ <button class="bg-amber-700 hover:bg-amber-800 text-white py-2 px-4 rounded-full text-sm transition duration-300">
133
+ Añadir al carrito
134
+ </button>
135
+ </div>
136
+ </div>
137
+ </div>
138
+
139
+ <!-- Product 2 -->
140
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300">
141
+ <div class="relative">
142
+ <img src="https://images.unsplash.com/photo-1511920170033-f8396924c348?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Café Robusta" 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
+ <h3 class="text-xl font-bold text-amber-900">Robusta Especial</h3>
147
+ <span class="text-amber-700 font-bold">$10.99</span>
148
+ </div>
149
+ <p class="text-gray-600 mb-4">Café intenso con cuerpo y aroma pronunciado. Perfecto para después del almuerzo.</p>
150
+ <div class="flex justify-between items-center">
151
+ <div class="flex items-center text-amber-500">
152
+ <i class="fas fa-star"></i>
153
+ <i class="fas fa-star"></i>
154
+ <i class="fas fa-star"></i>
155
+ <i class="fas fa-star"></i>
156
+ <i class="far fa-star"></i>
157
+ <span class="text-gray-500 ml-1">(36)</span>
158
+ </div>
159
+ <button class="bg-amber-700 hover:bg-amber-800 text-white py-2 px-4 rounded-full text-sm transition duration-300">
160
+ Añadir al carrito
161
+ </button>
162
+ </div>
163
+ </div>
164
+ </div>
165
+
166
+ <!-- Product 3 -->
167
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300">
168
+ <div class="relative">
169
+ <img src="https://images.unsplash.com/photo-1515442261605-65987783cb6a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Café Descafeinado" class="w-full h-64 object-cover">
170
+ <span class="absolute top-2 right-2 bg-green-600 text-white text-xs font-bold px-2 py-1 rounded-full">MÁS VENDIDO</span>
171
+ </div>
172
+ <div class="p-6">
173
+ <div class="flex justify-between items-start mb-2">
174
+ <h3 class="text-xl font-bold text-amber-900">Descafeinado Natural</h3>
175
+ <span class="text-amber-700 font-bold">$14.99</span>
176
+ </div>
177
+ <p class="text-gray-600 mb-4">Mismo sabor, sin cafeína. Proceso natural de descafeinado que preserva el aroma.</p>
178
+ <div class="flex justify-between items-center">
179
+ <div class="flex items-center text-amber-500">
180
+ <i class="fas fa-star"></i>
181
+ <i class="fas fa-star"></i>
182
+ <i class="fas fa-star"></i>
183
+ <i class="fas fa-star"></i>
184
+ <i class="fas fa-star"></i>
185
+ <span class="text-gray-500 ml-1">(72)</span>
186
+ </div>
187
+ <button class="bg-amber-700 hover:bg-amber-800 text-white py-2 px-4 rounded-full text-sm transition duration-300">
188
+ Añadir al carrito
189
+ </button>
190
+ </div>
191
+ </div>
192
+ </div>
193
+ </div>
194
+
195
+ <div class="text-center mt-12">
196
+ <button class="border-2 border-amber-700 text-amber-700 hover:bg-amber-700 hover:text-white font-bold py-3 px-8 rounded-full transition duration-300">
197
+ Ver todos los productos
198
+ </button>
199
+ </div>
200
+ </div>
201
+ </section>
202
+
203
+ <!-- About Us -->
204
+ <section id="nosotros" class="py-16 bg-white">
205
+ <div class="container mx-auto px-4">
206
+ <div class="flex flex-col lg:flex-row items-center gap-12">
207
+ <div class="lg:w-1/2">
208
+ <img src="https://images.unsplash.com/photo-1461023058949-07a1aa812667?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1632&q=80" alt="Nuestra historia" class="rounded-lg shadow-xl w-full">
209
+ </div>
210
+ <div class="lg:w-1/2">
211
+ <h2 class="text-3xl md:text-4xl font-bold text-amber-900 mb-6">Nuestra Historia</h2>
212
+ <p class="text-gray-600 mb-4">Desde 1985, en Café Delicia nos dedicamos a seleccionar los mejores granos de café de las fincas más exclusivas de Latinoamérica. Nuestro fundador, Juan Pérez, comenzó este proyecto con la simple idea de compartir el auténtico sabor del café colombiano.</p>
213
+ <p class="text-gray-600 mb-6">Hoy, tres generaciones después, mantenemos el mismo compromiso con la calidad y el proceso artesanal que nos distingue. Cada taza de Café Delicia es el resultado de años de experiencia y pasión por el buen café.</p>
214
+ <div class="grid grid-cols-2 gap-4 mb-6">
215
+ <div class="flex items-center">
216
+ <i class="fas fa-check-circle text-amber-700 mr-2"></i>
217
+ <span class="text-gray-700">Granos seleccionados a mano</span>
218
+ </div>
219
+ <div class="flex items-center">
220
+ <i class="fas fa-check-circle text-amber-700 mr-2"></i>
221
+ <span class="text-gray-700">Tostado tradicional</span>
222
+ </div>
223
+ <div class="flex items-center">
224
+ <i class="fas fa-check-circle text-amber-700 mr-2"></i>
225
+ <span class="text-gray-700">Comercio justo</span>
226
+ </div>
227
+ <div class="flex items-center">
228
+ <i class="fas fa-check-circle text-amber-700 mr-2"></i>
229
+ <span class="text-gray-700">Empaque sustentable</span>
230
+ </div>
231
+ </div>
232
+ <button class="bg-amber-700 hover:bg-amber-800 text-white font-bold py-3 px-8 rounded-full transition duration-300">
233
+ Conoce más
234
+ </button>
235
+ </div>
236
+ </div>
237
+ </div>
238
+ </section>
239
+
240
+ <!-- Testimonials -->
241
+ <section id="testimonios" class="py-16 bg-amber-50">
242
+ <div class="container mx-auto px-4">
243
+ <div class="text-center mb-12">
244
+ <h2 class="text-3xl md:text-4xl font-bold text-amber-900 mb-4">Lo que dicen nuestros clientes</h2>
245
+ <p class="text-gray-600 max-w-2xl mx-auto">Más de 10,000 clientes satisfechos en todo el país.</p>
246
+ </div>
247
+
248
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
249
+ <!-- Testimonial 1 -->
250
+ <div class="testimonial-card bg-white p-6 rounded-lg shadow-md">
251
+ <div class="flex items-center mb-4">
252
+ <div class="flex items-center text-amber-500 mr-2">
253
+ <i class="fas fa-star"></i>
254
+ <i class="fas fa-star"></i>
255
+ <i class="fas fa-star"></i>
256
+ <i class="fas fa-star"></i>
257
+ <i class="fas fa-star"></i>
258
+ </div>
259
+ <span class="text-gray-500 text-sm">Hace 2 semanas</span>
260
+ </div>
261
+ <p class="text-gray-700 mb-4">"El mejor café que he probado en mi vida. El aroma al abrir el paquete es increíble y el sabor supera todas mis expectativas. ¡Totalmente recomendado!"</p>
262
+ <div class="flex items-center">
263
+ <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="María González" class="w-10 h-10 rounded-full mr-3">
264
+ <div>
265
+ <h4 class="font-bold text-amber-900">María González</h4>
266
+ <p class="text-gray-500 text-sm">Barcelona, España</p>
267
+ </div>
268
+ </div>
269
+ </div>
270
+
271
+ <!-- Testimonial 2 -->
272
+ <div class="testimonial-card bg-white p-6 rounded-lg shadow-md">
273
+ <div class="flex items-center mb-4">
274
+ <div class="flex items-center text-amber-500 mr-2">
275
+ <i class="fas fa-star"></i>
276
+ <i class="fas fa-star"></i>
277
+ <i class="fas fa-star"></i>
278
+ <i class="fas fa-star"></i>
279
+ <i class="fas fa-star-half-alt"></i>
280
+ </div>
281
+ <span class="text-gray-500 text-sm">Hace 1 mes</span>
282
+ </div>
283
+ <p class="text-gray-700 mb-4">"Como barista profesional, puedo decir que la calidad de estos granos es excepcional. El tueste es perfecto y resalta todas las notas de sabor. Mis clientes lo aman."</p>
284
+ <div class="flex items-center">
285
+ <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Carlos Martínez" class="w-10 h-10 rounded-full mr-3">
286
+ <div>
287
+ <h4 class="font-bold text-amber-900">Carlos Martínez</h4>
288
+ <p class="text-gray-500 text-sm">Madrid, España</p>
289
+ </div>
290
+ </div>
291
+ </div>
292
+
293
+ <!-- Testimonial 3 -->
294
+ <div class="testimonial-card bg-white p-6 rounded-lg shadow-md">
295
+ <div class="flex items-center mb-4">
296
+ <div class="flex items-center text-amber-500 mr-2">
297
+ <i class="fas fa-star"></i>
298
+ <i class="fas fa-star"></i>
299
+ <i class="fas fa-star"></i>
300
+ <i class="fas fa-star"></i>
301
+ <i class="fas fa-star"></i>
302
+ </div>
303
+ <span class="text-gray-500 text-sm">Hace 3 días</span>
304
+ </div>
305
+ <p class="text-gray-700 mb-4">"Pedí el descafeinado por recomendación y quedé encantada. Tiene todo el sabor del café normal pero sin la cafeína. El servicio de entrega fue rápido y el empaque muy cuidado."</p>
306
+ <div class="flex items-center">
307
+ <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Laura Sánchez" class="w-10 h-10 rounded-full mr-3">
308
+ <div>
309
+ <h4 class="font-bold text-amber-900">Laura Sánchez</h4>
310
+ <p class="text-gray-500 text-sm">Valencia, España</p>
311
+ </div>
312
+ </div>
313
+ </div>
314
+ </div>
315
+ </div>
316
+ </section>
317
+
318
+ <!-- Newsletter -->
319
+ <section class="py-16 bg-amber-700 text-white">
320
+ <div class="container mx-auto px-4 text-center">
321
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">Únete a nuestra comunidad cafetera</h2>
322
+ <p class="text-xl mb-8 max-w-2xl mx-auto">Suscríbete a nuestro newsletter y recibe descuentos exclusivos, recetas y contenido especial.</p>
323
+ <div class="max-w-md mx-auto flex flex-col sm:flex-row gap-2">
324
+ <input type="email" placeholder="Tu correo electrónico" class="flex-grow px-4 py-3 rounded-full text-gray-900 focus:outline-none focus:ring-2 focus:ring-amber-900">
325
+ <button class="bg-amber-900 hover:bg-amber-800 text-white font-bold py-3 px-6 rounded-full transition duration-300 whitespace-nowrap">
326
+ Suscribirme
327
+ </button>
328
+ </div>
329
+ </div>
330
+ </section>
331
+
332
+ <!-- Footer -->
333
+ <footer id="contacto" class="bg-gray-900 text-white pt-16 pb-8">
334
+ <div class="container mx-auto px-4">
335
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-12 mb-12">
336
+ <div>
337
+ <div class="flex items-center space-x-2 mb-4">
338
+ <i class="fas fa-coffee text-amber-600 text-2xl"></i>
339
+ <span class="text-xl font-bold">Café Delicia</span>
340
+ </div>
341
+ <p class="text-gray-400 mb-4">El mejor café artesanal, directamente de las montañas colombianas a tu taza.</p>
342
+ <div class="flex space-x-4">
343
+ <a href="#" class="text-gray-400 hover:text-amber-600 transition duration-300">
344
+ <i class="fab fa-facebook-f text-xl"></i>
345
+ </a>
346
+ <a href="#" class="text-gray-400 hover:text-amber-600 transition duration-300">
347
+ <i class="fab fa-instagram text-xl"></i>
348
+ </a>
349
+ <a href="#" class="text-gray-400 hover:text-amber-600 transition duration-300">
350
+ <i class="fab fa-twitter text-xl"></i>
351
+ </a>
352
+ <a href="#" class="text-gray-400 hover:text-amber-600 transition duration-300">
353
+ <i class="fab fa-pinterest text-xl"></i>
354
+ </a>
355
+ </div>
356
+ </div>
357
+
358
+ <div>
359
+ <h3 class="text-lg font-bold mb-4">Enlaces rápidos</h3>
360
+ <ul class="space-y-2">
361
+ <li><a href="#" class="text-gray-400 hover:text-amber-600 transition duration-300">Inicio</a></li>
362
+ <li><a href="#" class="text-gray-400 hover:text-amber-600 transition duration-300">Tienda</a></li>
363
+ <li><a href="#" class="text-gray-400 hover:text-amber-600 transition duration-300">Sobre nosotros</a></li>
364
+ <li><a href="#" class="text-gray-400 hover:text-amber-600 transition duration-300">Blog</a></li>
365
+ <li><a href="#" class="text-gray-400 hover:text-amber-600 transition duration-300">Contacto</a></li>
366
+ </ul>
367
+ </div>
368
+
369
+ <div>
370
+ <h3 class="text-lg font-bold mb-4">Categorías</h3>
371
+ <ul class="space-y-2">
372
+ <li><a href="#" class="text-gray-400 hover:text-amber-600 transition duration-300">Café en grano</a></li>
373
+ <li><a href="#" class="text-gray-400 hover:text-amber-600 transition duration-300">Café molido</a></li>
374
+ <li><a href="#" class="text-gray-400 hover:text-amber-600 transition duration-300">Café descafeinado</a></li>
375
+ <li><a href="#" class="text-gray-400 hover:text-amber-600 transition duration-300">Café orgánico</a></li>
376
+ <li><a href="#" class="text-gray-400 hover:text-amber-600 transition duration-300">Accesorios</a></li>
377
+ </ul>
378
+ </div>
379
+
380
+ <div>
381
+ <h3 class="text-lg font-bold mb-4">Contacto</h3>
382
+ <ul class="space-y-3 text-gray-400">
383
+ <li class="flex items-start">
384
+ <i class="fas fa-map-marker-alt text-amber-600 mt-1 mr-3"></i>
385
+ <span>Calle del Café 123, Madrid, España</span>
386
+ </li>
387
+ <li class="flex items-center">
388
+ <i class="fas fa-phone-alt text-amber-600 mr-3"></i>
389
+ <span>+34 912 345 678</span>
390
+ </li>
391
+ <li class="flex items-center">
392
+ <i class="fas fa-envelope text-amber-600 mr-3"></i>
393
+ <span>[email protected]</span>
394
+ </li>
395
+ <li class="flex items-center">
396
+ <i class="fas fa-clock text-amber-600 mr-3"></i>
397
+ <span>Lun-Vie: 9:00 - 18:00</span>
398
+ </li>
399
+ </ul>
400
+ </div>
401
+ </div>
402
+
403
+ <div class="border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center">
404
+ <p class="text-gray-400 mb-4 md:mb-0">© 2023 Café Delicia. Todos los derechos reservados.</p>
405
+ <div class="flex space-x-6">
406
+ <a href="#" class="text-gray-400 hover:text-amber-600 transition duration-300">Términos y condiciones</a>
407
+ <a href="#" class="text-gray-400 hover:text-amber-600 transition duration-300">Política de privacidad</a>
408
+ <a href="#" class="text-gray-400 hover:text-amber-600 transition duration-300">Política de cookies</a>
409
+ </div>
410
+ </div>
411
+ </div>
412
+ </footer>
413
+
414
+ <!-- Floating WhatsApp Button -->
415
+ <div class="fixed bottom-6 right-6 z-50">
416
+ <a href="https://wa.me/34123456789" target="_blank" class="bg-green-500 hover:bg-green-600 text-white w-14 h-14 rounded-full flex items-center justify-center shadow-lg transition duration-300">
417
+ <i class="fab fa-whatsapp text-2xl"></i>
418
+ </a>
419
+ </div>
420
+
421
+ <script>
422
+ // Simple JavaScript for mobile menu toggle (could be expanded)
423
+ document.addEventListener('DOMContentLoaded', function() {
424
+ const mobileMenuButton = document.querySelector('.md\\:hidden');
425
+ const navMenu = document.querySelector('nav');
426
+
427
+ mobileMenuButton.addEventListener('click', function() {
428
+ navMenu.classList.toggle('hidden');
429
+ navMenu.classList.toggle('flex');
430
+ navMenu.classList.toggle('flex-col');
431
+ navMenu.classList.toggle('absolute');
432
+ navMenu.classList.toggle('top-16');
433
+ navMenu.classList.toggle('left-0');
434
+ navMenu.classList.toggle('right-0');
435
+ navMenu.classList.toggle('bg-white');
436
+ navMenu.classList.toggle('p-4');
437
+ navMenu.classList.toggle('shadow-md');
438
+ navMenu.classList.toggle('space-y-4');
439
+ });
440
+
441
+ // Smooth scrolling for anchor links
442
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
443
+ anchor.addEventListener('click', function (e) {
444
+ e.preventDefault();
445
+
446
+ const targetId = this.getAttribute('href');
447
+ if (targetId === '#') return;
448
+
449
+ const targetElement = document.querySelector(targetId);
450
+ if (targetElement) {
451
+ targetElement.scrollIntoView({
452
+ behavior: 'smooth'
453
+ });
454
+
455
+ // Close mobile menu if open
456
+ if (!navMenu.classList.contains('hidden')) {
457
+ mobileMenuButton.click();
458
+ }
459
+ }
460
+ });
461
+ });
462
+ });
463
+ </script>
464
+ <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=renierd6/cafe-eccomeerce" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
465
+ </html>