Hugging Face's logo

Spaces:
CHBP
/
glassskin
Running

App Files Community
CHBP commited on
Commit
9af82d4
·
verified ·
1 Parent(s): e2919af

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +601 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Glassskin
3
- emoji: 🚀
4
  colorFrom: blue
5
- colorTo: gray
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: glassskin
3
+ emoji: 🐳
4
  colorFrom: blue
5
+ colorTo: yellow
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,601 @@
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="pt-br">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Glow Essence | Glass Skin Perfection</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
+ .product-card:hover .product-overlay {
11
+ opacity: 1;
12
+ transform: translateY(0);
13
+ }
14
+ .product-overlay {
15
+ transition: all 0.3s ease;
16
+ opacity: 0;
17
+ transform: translateY(20px);
18
+ }
19
+ .hero-section {
20
+ background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1596755094514-f87e34085b2c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80');
21
+ background-size: cover;
22
+ background-position: center;
23
+ }
24
+ .testimonial-card {
25
+ transition: transform 0.3s ease;
26
+ }
27
+ .testimonial-card:hover {
28
+ transform: translateY(-10px);
29
+ }
30
+ .cart-notification {
31
+ animation: slideIn 0.5s forwards, fadeOut 0.5s 2.5s forwards;
32
+ }
33
+ @keyframes slideIn {
34
+ from { right: -100%; }
35
+ to { right: 2rem; }
36
+ }
37
+ @keyframes fadeOut {
38
+ from { opacity: 1; }
39
+ to { opacity: 0; }
40
+ }
41
+ </style>
42
+ </head>
43
+ <body class="font-sans bg-gray-50">
44
+ <!-- Header -->
45
+ <header class="bg-white shadow-sm sticky top-0 z-50">
46
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
47
+ <div class="flex items-center space-x-2">
48
+ <i class="fas fa-gem text-pink-500 text-2xl"></i>
49
+ <h1 class="text-xl font-bold text-gray-800">Glow Essence</h1>
50
+ </div>
51
+
52
+ <nav class="hidden md:flex space-x-8">
53
+ <a href="#" class="text-gray-700 hover:text-pink-500 transition">Home</a>
54
+ <a href="#products" class="text-gray-700 hover:text-pink-500 transition">Produtos</a>
55
+ <a href="#about" class="text-gray-700 hover:text-pink-500 transition">Sobre</a>
56
+ <a href="#testimonials" class="text-gray-700 hover:text-pink-500 transition">Depoimentos</a>
57
+ </nav>
58
+
59
+ <div class="flex items-center space-x-4">
60
+ <button id="search-btn" class="text-gray-600 hover:text-pink-500">
61
+ <i class="fas fa-search"></i>
62
+ </button>
63
+ <button id="cart-btn" class="relative text-gray-600 hover:text-pink-500">
64
+ <i class="fas fa-shopping-cart"></i>
65
+ <span id="cart-count" class="absolute -top-2 -right-2 bg-pink-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">0</span>
66
+ </button>
67
+ <button id="menu-btn" class="md:hidden text-gray-600 hover:text-pink-500">
68
+ <i class="fas fa-bars"></i>
69
+ </button>
70
+ </div>
71
+ </div>
72
+
73
+ <!-- Mobile Menu -->
74
+ <div id="mobile-menu" class="hidden md:hidden bg-white py-2 px-4 shadow-lg">
75
+ <a href="#" class="block py-2 text-gray-700 hover:text-pink-500">Home</a>
76
+ <a href="#products" class="block py-2 text-gray-700 hover:text-pink-500">Produtos</a>
77
+ <a href="#about" class="block py-2 text-gray-700 hover:text-pink-500">Sobre</a>
78
+ <a href="#testimonials" class="block py-2 text-gray-700 hover:text-pink-500">Depoimentos</a>
79
+ </div>
80
+
81
+ <!-- Search Bar -->
82
+ <div id="search-bar" class="hidden bg-white py-3 px-4 shadow-md">
83
+ <div class="container mx-auto flex">
84
+ <input type="text" placeholder="Buscar produtos..." class="flex-grow px-4 py-2 border border-gray-300 rounded-l focus:outline-none focus:ring-2 focus:ring-pink-500">
85
+ <button class="bg-pink-500 text-white px-4 py-2 rounded-r hover:bg-pink-600 transition">
86
+ <i class="fas fa-search"></i>
87
+ </button>
88
+ </div>
89
+ </div>
90
+ </header>
91
+
92
+ <!-- Hero Section -->
93
+ <section class="hero-section text-white py-20 md:py-32">
94
+ <div class="container mx-auto px-4 text-center">
95
+ <h1 class="text-4xl md:text-6xl font-bold mb-4">Glass Skin Perfection</h1>
96
+ <p class="text-xl md:text-2xl mb-8 max-w-2xl mx-auto">Descubra os segredos da pele translúcida e radiante com nossa seleção premium de produtos coreanos</p>
97
+ <a href="#products" class="bg-pink-500 hover:bg-pink-600 text-white px-8 py-3 rounded-full font-medium transition inline-block">Explorar Produtos</a>
98
+ </div>
99
+ </section>
100
+
101
+ <!-- Featured Products -->
102
+ <section id="products" class="py-16 bg-white">
103
+ <div class="container mx-auto px-4">
104
+ <div class="text-center mb-12">
105
+ <h2 class="text-3xl font-bold text-gray-800 mb-2">Nossos Produtos Estrela</h2>
106
+ <p class="text-gray-600 max-w-2xl mx-auto">Formulados com ingredientes de última geração para alcançar a pele dos seus sonhos</p>
107
+ </div>
108
+
109
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
110
+ <!-- Product 1 -->
111
+ <div class="product-card bg-white rounded-lg shadow-md overflow-hidden relative">
112
+ <div class="relative overflow-hidden">
113
+ <img src="https://images.unsplash.com/photo-1556228578-8c0e78882583?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Glass Skin Serum" class="w-full h-64 object-cover">
114
+ <div class="product-overlay absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center">
115
+ <button class="add-to-cart bg-pink-500 hover:bg-pink-600 text-white px-6 py-2 rounded-full transition" data-id="1" data-name="Glass Skin Serum" data-price="89.90">
116
+ Adicionar ao Carrinho
117
+ </button>
118
+ </div>
119
+ </div>
120
+ <div class="p-4">
121
+ <h3 class="font-bold text-lg text-gray-800 mb-1">Glass Skin Serum</h3>
122
+ <p class="text-gray-600 text-sm mb-3">Hidratação profunda e brilho radiante</p>
123
+ <div class="flex justify-between items-center">
124
+ <span class="font-bold text-pink-500">R$ 89,90</span>
125
+ <div class="flex text-yellow-400">
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"></i>
130
+ <i class="fas fa-star-half-alt"></i>
131
+ </div>
132
+ </div>
133
+ </div>
134
+ </div>
135
+
136
+ <!-- Product 2 -->
137
+ <div class="product-card bg-white rounded-lg shadow-md overflow-hidden relative">
138
+ <div class="relative overflow-hidden">
139
+ <img src="https://images.unsplash.com/photo-1596755094514-f87e34085b2c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Dewy Moisturizer" class="w-full h-64 object-cover">
140
+ <div class="product-overlay absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center">
141
+ <button class="add-to-cart bg-pink-500 hover:bg-pink-600 text-white px-6 py-2 rounded-full transition" data-id="2" data-name="Dewy Moisturizer" data-price="79.90">
142
+ Adicionar ao Carrinho
143
+ </button>
144
+ </div>
145
+ </div>
146
+ <div class="p-4">
147
+ <h3 class="font-bold text-lg text-gray-800 mb-1">Dewy Moisturizer</h3>
148
+ <p class="text-gray-600 text-sm mb-3">Hidratante com efeito orvalho</p>
149
+ <div class="flex justify-between items-center">
150
+ <span class="font-bold text-pink-500">R$ 79,90</span>
151
+ <div class="flex text-yellow-400">
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="fas fa-star"></i>
157
+ </div>
158
+ </div>
159
+ </div>
160
+ </div>
161
+
162
+ <!-- Product 3 -->
163
+ <div class="product-card bg-white rounded-lg shadow-md overflow-hidden relative">
164
+ <div class="relative overflow-hidden">
165
+ <img src="https://images.unsplash.com/photo-1596755094514-f87e34085b2c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Snail Mucin Essence" class="w-full h-64 object-cover">
166
+ <div class="product-overlay absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center">
167
+ <button class="add-to-cart bg-pink-500 hover:bg-pink-600 text-white px-6 py-2 rounded-full transition" data-id="3" data-name="Snail Mucin Essence" data-price="119.90">
168
+ Adicionar ao Carrinho
169
+ </button>
170
+ </div>
171
+ </div>
172
+ <div class="p-4">
173
+ <h3 class="font-bold text-lg text-gray-800 mb-1">Snail Mucin Essence</h3>
174
+ <p class="text-gray-600 text-sm mb-3">Reparação e regeneração intensiva</p>
175
+ <div class="flex justify-between items-center">
176
+ <span class="font-bold text-pink-500">R$ 119,90</span>
177
+ <div class="flex text-yellow-400">
178
+ <i class="fas fa-star"></i>
179
+ <i class="fas fa-star"></i>
180
+ <i class="fas fa-star"></i>
181
+ <i class="fas fa-star"></i>
182
+ <i class="far fa-star"></i>
183
+ </div>
184
+ </div>
185
+ </div>
186
+ </div>
187
+
188
+ <!-- Product 4 -->
189
+ <div class="product-card bg-white rounded-lg shadow-md overflow-hidden relative">
190
+ <div class="relative overflow-hidden">
191
+ <img src="https://images.unsplash.com/photo-1556228578-8c0e78882583?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Glow Toner" class="w-full h-64 object-cover">
192
+ <div class="product-overlay absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center">
193
+ <button class="add-to-cart bg-pink-500 hover:bg-pink-600 text-white px-6 py-2 rounded-full transition" data-id="4" data-name="Glow Toner" data-price="65.90">
194
+ Adicionar ao Carrinho
195
+ </button>
196
+ </div>
197
+ </div>
198
+ <div class="p-4">
199
+ <h3 class="font-bold text-lg text-gray-800 mb-1">Glow Toner</h3>
200
+ <p class="text-gray-600 text-sm mb-3">Prepara a pele para absorção máxima</p>
201
+ <div class="flex justify-between items-center">
202
+ <span class="font-bold text-pink-500">R$ 65,90</span>
203
+ <div class="flex text-yellow-400">
204
+ <i class="fas fa-star"></i>
205
+ <i class="fas fa-star"></i>
206
+ <i class="fas fa-star"></i>
207
+ <i class="fas fa-star"></i>
208
+ <i class="fas fa-star-half-alt"></i>
209
+ </div>
210
+ </div>
211
+ </div>
212
+ </div>
213
+ </div>
214
+
215
+ <div class="text-center mt-12">
216
+ <a href="#" class="inline-block border-2 border-pink-500 text-pink-500 hover:bg-pink-500 hover:text-white px-8 py-3 rounded-full font-medium transition">Ver Todos os Produtos</a>
217
+ </div>
218
+ </div>
219
+ </section>
220
+
221
+ <!-- About Section -->
222
+ <section id="about" class="py-16 bg-gray-50">
223
+ <div class="container mx-auto px-4">
224
+ <div class="flex flex-col md:flex-row items-center">
225
+ <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8">
226
+ <img src="https://images.unsplash.com/photo-1522335789203-aabd1fc54bc9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="About Glow Essence" class="rounded-lg shadow-lg w-full">
227
+ </div>
228
+ <div class="md:w-1/2">
229
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">A Filosofia Glass Skin</h2>
230
+ <p class="text-gray-600 mb-4">Na Glow Essence, acreditamos que todos merecem uma pele radiante e saudável. Nossos produtos são inspirados nos segredos de beleza coreanos, combinando tradição com inovação científica.</p>
231
+ <p class="text-gray-600 mb-6">Cada fórmula é cuidadosamente desenvolvida para proporcionar hidratação profunda, brilho natural e textura aveludada - os pilares da pele glass skin.</p>
232
+ <div class="space-y-4">
233
+ <div class="flex items-start">
234
+ <i class="fas fa-check-circle text-pink-500 mt-1 mr-3"></i>
235
+ <div>
236
+ <h4 class="font-bold text-gray-800">Ingredientes Premium</h4>
237
+ <p class="text-gray-600 text-sm">Selecionamos os melhores ativos do mundo para sua pele</p>
238
+ </div>
239
+ </div>
240
+ <div class="flex items-start">
241
+ <i class="fas fa-check-circle text-pink-500 mt-1 mr-3"></i>
242
+ <div>
243
+ <h4 class="font-bold text-gray-800">Tecnologia Coreana</h4>
244
+ <p class="text-gray-600 text-sm">Fórmulas desenvolvidas com os últimos avanços em skincare</p>
245
+ </div>
246
+ </div>
247
+ <div class="flex items-start">
248
+ <i class="fas fa-check-circle text-pink-500 mt-1 mr-3"></i>
249
+ <div>
250
+ <h4 class="font-bold text-gray-800">Cruelty Free</h4>
251
+ <p class="text-gray-600 text-sm">Nenhum produto é testado em animais</p>
252
+ </div>
253
+ </div>
254
+ </div>
255
+ </div>
256
+ </div>
257
+ </div>
258
+ </section>
259
+
260
+ <!-- Testimonials -->
261
+ <section id="testimonials" class="py-16 bg-white">
262
+ <div class="container mx-auto px-4">
263
+ <div class="text-center mb-12">
264
+ <h2 class="text-3xl font-bold text-gray-800 mb-2">O Que Nossos Clientes Dizem</h2>
265
+ <p class="text-gray-600 max-w-2xl mx-auto">Depoimentos reais de pessoas que alcançaram a pele dos sonhos</p>
266
+ </div>
267
+
268
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
269
+ <!-- Testimonial 1 -->
270
+ <div class="testimonial-card bg-gray-50 p-6 rounded-lg shadow-sm">
271
+ <div class="flex items-center mb-4">
272
+ <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Ana Silva" class="w-12 h-12 rounded-full mr-4">
273
+ <div>
274
+ <h4 class="font-bold text-gray-800">Ana Silva</h4>
275
+ <div class="flex text-yellow-400 text-sm">
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"></i>
280
+ <i class="fas fa-star"></i>
281
+ </div>
282
+ </div>
283
+ </div>
284
+ <p class="text-gray-600 italic">"O Glass Skin Serum mudou minha pele completamente! Nunca achei que minha pele pudesse ficar tão radiante e uniforme. Recomendo para todas as minhas amigas!"</p>
285
+ </div>
286
+
287
+ <!-- Testimonial 2 -->
288
+ <div class="testimonial-card bg-gray-50 p-6 rounded-lg shadow-sm">
289
+ <div class="flex items-center mb-4">
290
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Juliana Santos" class="w-12 h-12 rounded-full mr-4">
291
+ <div>
292
+ <h4 class="font-bold text-gray-800">Juliana Santos</h4>
293
+ <div class="flex text-yellow-400 text-sm">
294
+ <i class="fas fa-star"></i>
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-half-alt"></i>
299
+ </div>
300
+ </div>
301
+ </div>
302
+ <p class="text-gray-600 italic">"Depois de anos lutando contra pele ressecada, finalmente encontrei no Dewy Moisturizer o hidratante perfeito. Minha pele nunca esteve tão macia e com aquele brilho saudável!"</p>
303
+ </div>
304
+
305
+ <!-- Testimonial 3 -->
306
+ <div class="testimonial-card bg-gray-50 p-6 rounded-lg shadow-sm">
307
+ <div class="flex items-center mb-4">
308
+ <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Camila Oliveira" class="w-12 h-12 rounded-full mr-4">
309
+ <div>
310
+ <h4 class="font-bold text-gray-800">Camila Oliveira</h4>
311
+ <div class="flex text-yellow-400 text-sm">
312
+ <i class="fas fa-star"></i>
313
+ <i class="fas fa-star"></i>
314
+ <i class="fas fa-star"></i>
315
+ <i class="fas fa-star"></i>
316
+ <i class="fas fa-star"></i>
317
+ </div>
318
+ </div>
319
+ </div>
320
+ <p class="text-gray-600 italic">"O Snail Mucin Essence foi um divisor de águas para minhas cicatrizes de acne. Em apenas 3 meses, minha textura melhorou incrivelmente. Vale cada centavo!"</p>
321
+ </div>
322
+ </div>
323
+ </div>
324
+ </section>
325
+
326
+ <!-- Newsletter -->
327
+ <section class="py-12 bg-pink-50">
328
+ <div class="container mx-auto px-4 text-center">
329
+ <h2 class="text-3xl font-bold text-gray-800 mb-2">Junte-se à Nossa Comunidade Glow</h2>
330
+ <p class="text-gray-600 mb-6 max-w-2xl mx-auto">Receba dicas exclusivas, ofertas especiais e novidades sobre glass skin diretamente no seu e-mail</p>
331
+ <form class="max-w-md mx-auto flex">
332
+ <input type="email" placeholder="Seu melhor e-mail" class="flex-grow px-4 py-3 border border-gray-300 rounded-l focus:outline-none focus:ring-2 focus:ring-pink-500">
333
+ <button type="submit" class="bg-pink-500 hover:bg-pink-600 text-white px-6 py-3 rounded-r font-medium transition">Inscrever</button>
334
+ </form>
335
+ </div>
336
+ </section>
337
+
338
+ <!-- Footer -->
339
+ <footer class="bg-gray-800 text-white py-12">
340
+ <div class="container mx-auto px-4">
341
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
342
+ <div>
343
+ <div class="flex items-center space-x-2 mb-4">
344
+ <i class="fas fa-gem text-pink-500 text-2xl"></i>
345
+ <h3 class="text-xl font-bold">Glow Essence</h3>
346
+ </div>
347
+ <p class="text-gray-400 mb-4">A beleza começa com uma pele saudável. Descubra o poder da glass skin.</p>
348
+ <div class="flex space-x-4">
349
+ <a href="#" class="text-gray-400 hover:text-pink-500 transition"><i class="fab fa-instagram"></i></a>
350
+ <a href="#" class="text-gray-400 hover:text-pink-500 transition"><i class="fab fa-facebook"></i></a>
351
+ <a href="#" class="text-gray-400 hover:text-pink-500 transition"><i class="fab fa-tiktok"></i></a>
352
+ <a href="#" class="text-gray-400 hover:text-pink-500 transition"><i class="fab fa-youtube"></i></a>
353
+ </div>
354
+ </div>
355
+
356
+ <div>
357
+ <h4 class="font-bold text-lg mb-4">Links Rápidos</h4>
358
+ <ul class="space-y-2">
359
+ <li><a href="#" class="text-gray-400 hover:text-pink-500 transition">Home</a></li>
360
+ <li><a href="#products" class="text-gray-400 hover:text-pink-500 transition">Produtos</a></li>
361
+ <li><a href="#about" class="text-gray-400 hover:text-pink-500 transition">Sobre Nós</a></li>
362
+ <li><a href="#testimonials" class="text-gray-400 hover:text-pink-500 transition">Depoimentos</a></li>
363
+ <li><a href="#" class="text-gray-400 hover:text-pink-500 transition">Blog</a></li>
364
+ </ul>
365
+ </div>
366
+
367
+ <div>
368
+ <h4 class="font-bold text-lg mb-4">Ajuda</h4>
369
+ <ul class="space-y-2">
370
+ <li><a href="#" class="text-gray-400 hover:text-pink-500 transition">FAQ</a></li>
371
+ <li><a href="#" class="text-gray-400 hover:text-pink-500 transition">Política de Privacidade</a></li>
372
+ <li><a href="#" class="text-gray-400 hover:text-pink-500 transition">Termos de Serviço</a></li>
373
+ <li><a href="#" class="text-gray-400 hover:text-pink-500 transition">Rastreamento</a></li>
374
+ <li><a href="#" class="text-gray-400 hover:text-pink-500 transition">Contato</a></li>
375
+ </ul>
376
+ </div>
377
+
378
+ <div>
379
+ <h4 class="font-bold text-lg mb-4">Contato</h4>
380
+ <ul class="space-y-2 text-gray-400">
381
+ <li class="flex items-start">
382
+ <i class="fas fa-map-marker-alt mt-1 mr-3 text-pink-500"></i>
383
+ <span>Av. Paulista, 1000<br>São Paulo - SP</span>
384
+ </li>
385
+ <li class="flex items-center">
386
+ <i class="fas fa-phone-alt mr-3 text-pink-500"></i>
387
+ <span>(11) 9999-9999</span>
388
+ </li>
389
+ <li class="flex items-center">
390
+ <i class="fas fa-envelope mr-3 text-pink-500"></i>
391
+ <span>contato@glowessence.com</span>
392
+ </li>
393
+ </ul>
394
+ </div>
395
+ </div>
396
+
397
+ <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
398
+ <p>&copy; 2023 Glow Essence. Todos os direitos reservados.</p>
399
+ </div>
400
+ </div>
401
+ </footer>
402
+
403
+ <!-- Shopping Cart Sidebar -->
404
+ <div id="cart-sidebar" class="fixed top-0 right-0 h-full w-full md:w-96 bg-white shadow-lg transform translate-x-full transition-transform duration-300 z-50">
405
+ <div class="p-6 h-full flex flex-col">
406
+ <div class="flex justify-between items-center mb-6">
407
+ <h3 class="text-xl font-bold">Seu Carrinho</h3>
408
+ <button id="close-cart" class="text-gray-500 hover:text-pink-500">
409
+ <i class="fas fa-times"></i>
410
+ </button>
411
+ </div>
412
+
413
+ <div id="cart-items" class="flex-grow overflow-y-auto mb-4">
414
+ <!-- Cart items will be added here dynamically -->
415
+ <p class="text-gray-500 text-center py-8">Seu carrinho está vazio</p>
416
+ </div>
417
+
418
+ <div class="border-t border-gray-200 pt-4">
419
+ <div class="flex justify-between mb-2">
420
+ <span class="font-medium">Subtotal</span>
421
+ <span id="cart-subtotal" class="font-bold">R$ 0,00</span>
422
+ </div>
423
+ <p class="text-gray-500 text-sm mb-4">Frete e impostos calculados no checkout</p>
424
+ <button class="w-full bg-pink-500 hover:bg-pink-600 text-white py-3 rounded font-medium transition">Finalizar Compra</button>
425
+ <a href="#" class="block text-center text-pink-500 hover:text-pink-600 mt-2">Continuar Comprando</a>
426
+ </div>
427
+ </div>
428
+ </div>
429
+
430
+ <!-- Cart Notification -->
431
+ <div id="cart-notification" class="fixed hidden top-20 right-8 bg-green-500 text-white px-4 py-2 rounded shadow-lg z-50">
432
+ <div class="flex items-center">
433
+ <i class="fas fa-check-circle mr-2"></i>
434
+ <span>Item adicionado ao carrinho!</span>
435
+ </div>
436
+ </div>
437
+
438
+ <!-- Backdrop -->
439
+ <div id="backdrop" class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden"></div>
440
+
441
+ <script>
442
+ // Mobile Menu Toggle
443
+ const menuBtn = document.getElementById('menu-btn');
444
+ const mobileMenu = document.getElementById('mobile-menu');
445
+
446
+ menuBtn.addEventListener('click', () => {
447
+ mobileMenu.classList.toggle('hidden');
448
+ });
449
+
450
+ // Search Bar Toggle
451
+ const searchBtn = document.getElementById('search-btn');
452
+ const searchBar = document.getElementById('search-bar');
453
+
454
+ searchBtn.addEventListener('click', () => {
455
+ searchBar.classList.toggle('hidden');
456
+ });
457
+
458
+ // Cart Functionality
459
+ const cartBtn = document.getElementById('cart-btn');
460
+ const cartSidebar = document.getElementById('cart-sidebar');
461
+ const closeCart = document.getElementById('close-cart');
462
+ const backdrop = document.getElementById('backdrop');
463
+ const cartItemsContainer = document.getElementById('cart-items');
464
+ const cartSubtotal = document.getElementById('cart-subtotal');
465
+ const cartCount = document.getElementById('cart-count');
466
+ const cartNotification = document.getElementById('cart-notification');
467
+
468
+ let cart = [];
469
+
470
+ // Open/Close Cart
471
+ cartBtn.addEventListener('click', () => {
472
+ cartSidebar.classList.remove('translate-x-full');
473
+ backdrop.classList.remove('hidden');
474
+ document.body.style.overflow = 'hidden';
475
+ });
476
+
477
+ closeCart.addEventListener('click', () => {
478
+ cartSidebar.classList.add('translate-x-full');
479
+ backdrop.classList.add('hidden');
480
+ document.body.style.overflow = 'auto';
481
+ });
482
+
483
+ backdrop.addEventListener('click', () => {
484
+ cartSidebar.classList.add('translate-x-full');
485
+ backdrop.classList.add('hidden');
486
+ document.body.style.overflow = 'auto';
487
+ });
488
+
489
+ // Add to Cart
490
+ document.querySelectorAll('.add-to-cart').forEach(button => {
491
+ button.addEventListener('click', (e) => {
492
+ const id = e.target.getAttribute('data-id');
493
+ const name = e.target.getAttribute('data-name');
494
+ const price = parseFloat(e.target.getAttribute('data-price'));
495
+
496
+ // Check if item already in cart
497
+ const existingItem = cart.find(item => item.id === id);
498
+
499
+ if (existingItem) {
500
+ existingItem.quantity += 1;
501
+ } else {
502
+ cart.push({
503
+ id,
504
+ name,
505
+ price,
506
+ quantity: 1
507
+ });
508
+ }
509
+
510
+ updateCart();
511
+ showNotification();
512
+ });
513
+ });
514
+
515
+ // Update Cart UI
516
+ function updateCart() {
517
+ // Update count
518
+ const totalItems = cart.reduce((total, item) => total + item.quantity, 0);
519
+ cartCount.textContent = totalItems;
520
+
521
+ // Update items list
522
+ if (cart.length === 0) {
523
+ cartItemsContainer.innerHTML = '<p class="text-gray-500 text-center py-8">Seu carrinho está vazio</p>';
524
+ cartSubtotal.textContent = 'R$ 0,00';
525
+ return;
526
+ }
527
+
528
+ cartItemsContainer.innerHTML = '';
529
+
530
+ cart.forEach(item => {
531
+ const itemElement = document.createElement('div');
532
+ itemElement.className = 'flex justify-between items-center py-4 border-b border-gray-200';
533
+ itemElement.innerHTML = `
534
+ <div>
535
+ <h4 class="font-medium">${item.name}</h4>
536
+ <p class="text-sm text-gray-500">R$ ${item.price.toFixed(2)}</p>
537
+ </div>
538
+ <div class="flex items-center">
539
+ <button class="decrease-quantity text-gray-500 hover:text-pink-500 px-2" data-id="${item.id}">
540
+ <i class="fas fa-minus"></i>
541
+ </button>
542
+ <span class="quantity mx-2">${item.quantity}</span>
543
+ <button class="increase-quantity text-gray-500 hover:text-pink-500 px-2" data-id="${item.id}">
544
+ <i class="fas fa-plus"></i>
545
+ </button>
546
+ <button class="remove-item text-gray-500 hover:text-pink-500 ml-4" data-id="${item.id}">
547
+ <i class="fas fa-trash"></i>
548
+ </button>
549
+ </div>
550
+ `;
551
+ cartItemsContainer.appendChild(itemElement);
552
+ });
553
+
554
+ // Update subtotal
555
+ const subtotal = cart.reduce((total, item) => total + (item.price * item.quantity), 0);
556
+ cartSubtotal.textContent = `R$ ${subtotal.toFixed(2)}`;
557
+
558
+ // Add event listeners to new buttons
559
+ document.querySelectorAll('.decrease-quantity').forEach(button => {
560
+ button.addEventListener('click', (e) => {
561
+ const id = e.target.closest('button').getAttribute('data-id');
562
+ const item = cart.find(item => item.id === id);
563
+
564
+ if (item.quantity > 1) {
565
+ item.quantity -= 1;
566
+ } else {
567
+ cart = cart.filter(item => item.id !== id);
568
+ }
569
+
570
+ updateCart();
571
+ });
572
+ });
573
+
574
+ document.querySelectorAll('.increase-quantity').forEach(button => {
575
+ button.addEventListener('click', (e) => {
576
+ const id = e.target.closest('button').getAttribute('data-id');
577
+ const item = cart.find(item => item.id === id);
578
+ item.quantity += 1;
579
+ updateCart();
580
+ });
581
+ });
582
+
583
+ document.querySelectorAll('.remove-item').forEach(button => {
584
+ button.addEventListener('click', (e) => {
585
+ const id = e.target.closest('button').getAttribute('data-id');
586
+ cart = cart.filter(item => item.id !== id);
587
+ updateCart();
588
+ });
589
+ });
590
+ }
591
+
592
+ // Show notification
593
+ function showNotification() {
594
+ cartNotification.classList.remove('hidden');
595
+ setTimeout(() => {
596
+ cartNotification.classList.add('hidden');
597
+ }, 3000);
598
+ }
599
+ </script>
600
+ <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=CHBP/glassskin" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
601
+ </html>