Hugging Face's logo

Spaces:
yahma
/
reviderm
Running

App Files Community
yahma commited on
Commit
7a86181
·
verified ·
1 Parent(s): 43c6c90

in the main image, add more animation and/or video. Add more tailwind animations throughout the site to make it more dynamic - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +596 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Reviderm
3
- emoji: 💻
4
- colorFrom: indigo
5
- colorTo: indigo
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: reviderm
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: gray
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,596 @@
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="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Reviderm - Premium Skincare & Cosmetics</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
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ reviderm: {
15
+ primary: '#7A6A5F',
16
+ secondary: '#C4B8A9',
17
+ dark: '#2B2A25',
18
+ light: '#F5F3EF',
19
+ }
20
+ },
21
+ animation: {
22
+ 'float': 'float 3s ease-in-out infinite',
23
+ 'fade-in': 'fadeIn 1s ease-in',
24
+ 'fadeInUp': 'fadeInUp 1s ease-out',
25
+ 'pulse-slow': 'pulse 5s infinite',
26
+ 'bounce': 'bounce 3s infinite',
27
+ },
28
+ keyframes: {
29
+ float: {
30
+ '0%, 100%': { transform: 'translateY(0)' },
31
+ '50%': { transform: 'translateY(-10px)' },
32
+ },
33
+ fadeIn: {
34
+ '0%': { opacity: '0' },
35
+ '100%': { opacity: '1' },
36
+ },
37
+ fadeInUp: {
38
+ '0%': {
39
+ opacity: '0',
40
+ transform: 'translateY(20px)'
41
+ },
42
+ '100%': {
43
+ opacity: '1',
44
+ transform: 'translateY(0)'
45
+ },
46
+ }
47
+ }
48
+ }
49
+ }
50
+ }
51
+ </script>
52
+ <style>
53
+ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Poppins:wght@300;400;500;600&display=swap');
54
+
55
+ body {
56
+ font-family: 'Poppins', sans-serif;
57
+ background-color: #F8F5FF;
58
+ }
59
+
60
+ .playfair {
61
+ font-family: 'Playfair Display', serif;
62
+ }
63
+
64
+ .scrolling-banner {
65
+ animation: scroll 25s linear infinite;
66
+ white-space: nowrap;
67
+ }
68
+
69
+ @keyframes scroll {
70
+ 0% { transform: translateX(0); }
71
+ 100% { transform: translateX(-50%); }
72
+ }
73
+
74
+ .scrolling-banner:hover {
75
+ animation-play-state: paused;
76
+ }
77
+
78
+ .product-card:hover .product-overlay {
79
+ opacity: 1;
80
+ transform: translateY(0);
81
+ }
82
+
83
+ .product-overlay {
84
+ transition: all 0.3s ease;
85
+ opacity: 0;
86
+ transform: translateY(20px);
87
+ }
88
+
89
+ .newsletter-popup {
90
+ animation: fadeIn 0.5s ease-out;
91
+ }
92
+
93
+ .gradient-text {
94
+ background: linear-gradient(45deg, #7A6A5F, #C4B8A9);
95
+ -webkit-background-clip: text;
96
+ background-clip: text;
97
+ color: transparent;
98
+ }
99
+ </style>
100
+ </head>
101
+ <body class="bg-reviderm-light">
102
+ <!-- Newsletter Popup -->
103
+ <div id="newsletterPopup" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center hidden">
104
+ <div class="newsletter-popup bg-white p-8 rounded-lg max-w-md w-full mx-4 relative">
105
+ <button id="closePopup" class="absolute top-4 right-4 text-gray-500 hover:text-reviderm-primary">
106
+ <i class="fas fa-times text-xl"></i>
107
+ </button>
108
+ <h3 class="text-2xl font-bold text-reviderm-dark mb-2 playfair">Join Our Beauty Community</h3>
109
+ <p class="text-gray-600 mb-6">Subscribe to receive exclusive offers, skincare tips, and 15% off your first order.</p>
110
+ <form class="space-y-4">
111
+ <input type="email" placeholder="Your email address" class="w-full px-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-reviderm-primary">
112
+ <button type="submit" class="w-full bg-reviderm-primary text-white py-2 rounded hover:bg-opacity-90 transition duration-300">Subscribe</button>
113
+ </form>
114
+ <p class="text-xs text-gray-400 mt-4">We respect your privacy. Unsubscribe at any time.</p>
115
+ </div>
116
+ </div>
117
+
118
+ <!-- Navigation -->
119
+ <nav class="bg-white shadow-sm sticky top-0 z-40">
120
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
121
+ <div class="flex justify-between h-16">
122
+ <div class="flex items-center">
123
+ <a href="#" class="text-2xl font-bold text-reviderm-primary playfair">REVIDERM</a>
124
+ </div>
125
+ <div class="hidden md:flex items-center space-x-8">
126
+ <a href="#" class="text-reviderm-dark hover:text-reviderm-primary transition">Skincare</a>
127
+ <a href="#" class="text-reviderm-dark hover:text-reviderm-primary transition">Devices</a>
128
+ <a href="#" class="text-reviderm-dark hover:text-reviderm-primary transition">Cosmetics</a>
129
+ <a href="#" class="text-reviderm-dark hover:text-reviderm-primary transition">About</a>
130
+ <a href="#" class="text-reviderm-dark hover:text-reviderm-primary transition">Contact</a>
131
+ </div>
132
+ <div class="flex items-center space-x-4">
133
+ <a href="#" class="text-reviderm-dark hover:text-reviderm-primary transition"><i class="fas fa-search"></i></a>
134
+ <a href="#" class="text-reviderm-dark hover:text-reviderm-primary transition"><i class="fas fa-user"></i></a>
135
+ <a href="#" class="text-reviderm-dark hover:text-reviderm-primary transition"><i class="fas fa-shopping-bag"></i></a>
136
+ <button class="md:hidden text-reviderm-dark">
137
+ <i class="fas fa-bars"></i>
138
+ </button>
139
+ </div>
140
+ </div>
141
+ </div>
142
+ </nav>
143
+
144
+ <!-- Hero Section -->
145
+ <section class="relative overflow-hidden">
146
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 md:py-24 flex flex-col md:flex-row items-center">
147
+ <div class="md:w-1/2 mb-12 md:mb-0 animate-fade-in">
148
+ <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-reviderm-dark mb-6 playfair leading-tight">
149
+ <span class="gradient-text">Luxury Reimagined</span> in Every Drop
150
+ </h1>
151
+ <p class="text-lg text-gray-600 mb-8 max-w-lg tracking-wide">
152
+ Experience the pinnacle of Swiss-formulated skincare, where science meets opulence for transformative results.
153
+ </p>
154
+ <div class="flex space-x-4">
155
+ <a href="#" class="bg-reviderm-primary text-white px-6 py-3 rounded hover:bg-opacity-90 transition duration-300">
156
+ Shop Now
157
+ </a>
158
+ <a href="#" class="border border-reviderm-primary text-reviderm-primary px-6 py-3 rounded hover:bg-reviderm-primary hover:text-white transition duration-300">
159
+ Learn More
160
+ </a>
161
+ </div>
162
+ </div>
163
+ <div class="md:w-1/2 flex justify-center">
164
+ <div class="relative group">
165
+ <img src="https://images.unsplash.com/photo-1596755094514-f87e34085b2c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=688&q=80"
166
+ alt="Reviderm Skincare Products"
167
+ class="rounded-lg shadow-xl w-full max-w-md transform transition-all duration-1000 group-hover:scale-105 group-hover:shadow-2xl animate-[fadeIn_1.5s_ease-in-out]">
168
+ <div class="absolute inset-0 bg-gradient-to-r from-reviderm-primary/10 to-reviderm-secondary/10 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-700"></div>
169
+ <div class="absolute -bottom-6 -right-6 bg-white p-3 rounded-full shadow-lg animate-[bounce_3s_infinite]">
170
+ <span class="text-reviderm-primary text-sm font-bold">NEW</span>
171
+ </div>
172
+ </div>
173
+ </div>
174
+ </div>
175
+ </section>
176
+
177
+ <!-- Scrolling Banner -->
178
+ <div class="bg-reviderm-primary text-white py-3 overflow-hidden">
179
+ <div class="scrolling-banner inline-block whitespace-nowrap">
180
+ <span class="text-lg mx-8">✨ Complimentary Worldwide Shipping ✨</span>
181
+ <span class="text-lg mx-8">🌟 Exclusive Members-Only Benefits 🌟</span>
182
+ <span class="text-lg mx-8">💎 Private Client Consultations Available 💎</span>
183
+ <span class="text-lg mx-8">✨ Free Shipping on Orders Over $50 ✨</span>
184
+ <span class="text-lg mx-8">🌟 30-Day Money Back Guarantee 🌟</span>
185
+ <span class="text-lg mx-8">💖 Vegan & Cruelty-Free Formulas 💖</span>
186
+ </div>
187
+ </div>
188
+
189
+ <!-- Best Selling Products -->
190
+ <section class="py-16 bg-white">
191
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
192
+ <div class="text-center mb-12">
193
+ <h2 class="text-3xl font-bold text-reviderm-dark mb-4 playfair tracking-tight">Editor's Selection</h2>
194
+ <p class="text-gray-600 max-w-2xl mx-auto tracking-wide">Exclusive formulations favored by beauty connoisseurs worldwide</p>
195
+ </div>
196
+
197
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
198
+ <!-- Product 1 -->
199
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition-all duration-500 relative group hover:-translate-y-2">
200
+ <div class="relative overflow-hidden">
201
+ <img src="https://images.unsplash.com/photo-1571781926291-c477ebfd024b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=688&q=80"
202
+ alt="Hydra Renew Serum"
203
+ class="w-full h-64 object-cover">
204
+ <div class="product-overlay absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center">
205
+ <button class="bg-white text-reviderm-primary px-6 py-2 rounded-full font-medium hover:bg-reviderm-primary hover:text-white transition">
206
+ Quick View
207
+ </button>
208
+ </div>
209
+ </div>
210
+ <div class="p-4">
211
+ <h3 class="text-lg font-medium text-reviderm-dark">Hydra Renew Serum</h3>
212
+ <p class="text-gray-600 text-sm mb-2">Intense hydration & plumping</p>
213
+ <div class="flex items-center text-yellow-400 mb-2">
214
+ <i class="fas fa-star"></i>
215
+ <i class="fas fa-star"></i>
216
+ <i class="fas fa-star"></i>
217
+ <i class="fas fa-star"></i>
218
+ <i class="fas fa-star-half-alt"></i>
219
+ <span class="text-gray-500 text-sm ml-2">(428)</span>
220
+ </div>
221
+ <p class="text-reviderm-primary font-bold">$68.00</p>
222
+ </div>
223
+ </div>
224
+
225
+ <!-- Product 2 -->
226
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300 relative">
227
+ <div class="relative overflow-hidden">
228
+ <img src="https://images.unsplash.com/photo-1596755094514-f87e34085b2c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=688&q=80"
229
+ alt="Luminous Eye Cream"
230
+ class="w-full h-64 object-cover">
231
+ <div class="product-overlay absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center">
232
+ <button class="bg-white text-reviderm-primary px-6 py-2 rounded-full font-medium hover:bg-reviderm-primary hover:text-white transition">
233
+ Quick View
234
+ </button>
235
+ </div>
236
+ </div>
237
+ <div class="p-4">
238
+ <h3 class="text-lg font-medium text-reviderm-dark">Luminous Eye Cream</h3>
239
+ <p class="text-gray-600 text-sm mb-2">Brightens & reduces dark circles</p>
240
+ <div class="flex items-center text-yellow-400 mb-2">
241
+ <i class="fas fa-star"></i>
242
+ <i class="fas fa-star"></i>
243
+ <i class="fas fa-star"></i>
244
+ <i class="fas fa-star"></i>
245
+ <i class="fas fa-star"></i>
246
+ <span class="text-gray-500 text-sm ml-2">(512)</span>
247
+ </div>
248
+ <p class="text-reviderm-primary font-bold">$58.00</p>
249
+ </div>
250
+ </div>
251
+
252
+ <!-- Product 3 -->
253
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300 relative">
254
+ <div class="relative overflow-hidden">
255
+ <img src="https://images.unsplash.com/photo-1625772452859-1c03d5bf1137?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
256
+ alt="Glow Facial Device"
257
+ class="w-full h-64 object-cover">
258
+ <div class="product-overlay absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center">
259
+ <button class="bg-white text-reviderm-primary px-6 py-2 rounded-full font-medium hover:bg-reviderm-primary hover:text-white transition">
260
+ Quick View
261
+ </button>
262
+ </div>
263
+ </div>
264
+ <div class="p-4">
265
+ <h3 class="text-lg font-medium text-reviderm-dark">Glow Facial Device</h3>
266
+ <p class="text-gray-600 text-sm mb-2">Microcurrent & LED therapy</p>
267
+ <div class="flex items-center text-yellow-400 mb-2">
268
+ <i class="fas fa-star"></i>
269
+ <i class="fas fa-star"></i>
270
+ <i class="fas fa-star"></i>
271
+ <i class="fas fa-star"></i>
272
+ <i class="far fa-star"></i>
273
+ <span class="text-gray-500 text-sm ml-2">(387)</span>
274
+ </div>
275
+ <p class="text-reviderm-primary font-bold">$199.00</p>
276
+ </div>
277
+ </div>
278
+
279
+ <!-- Product 4 -->
280
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300 relative">
281
+ <div class="relative overflow-hidden">
282
+ <img src="https://images.unsplash.com/photo-1595341888016-a392ef81b7de?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1479&q=80"
283
+ alt="Perfecting Foundation"
284
+ class="w-full h-64 object-cover">
285
+ <div class="product-overlay absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center">
286
+ <button class="bg-white text-reviderm-primary px-6 py-2 rounded-full font-medium hover:bg-reviderm-primary hover:text-white transition">
287
+ Quick View
288
+ </button>
289
+ </div>
290
+ </div>
291
+ <div class="p-4">
292
+ <h3 class="text-lg font-medium text-reviderm-dark">Perfecting Foundation</h3>
293
+ <p class="text-gray-600 text-sm mb-2">Buildable coverage with SPF 30</p>
294
+ <div class="flex items-center text-yellow-400 mb-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
+ <span class="text-gray-500 text-sm ml-2">(672)</span>
301
+ </div>
302
+ <p class="text-reviderm-primary font-bold">$42.00</p>
303
+ </div>
304
+ </div>
305
+ </div>
306
+
307
+ <div class="text-center mt-12">
308
+ <a href="#" class="inline-block border border-reviderm-primary text-reviderm-primary px-8 py-3 rounded hover:bg-reviderm-primary hover:text-white transition duration-300">
309
+ View All Products
310
+ </a>
311
+ </div>
312
+ </div>
313
+ </section>
314
+
315
+ <!-- Product of the Month -->
316
+ <section class="py-16 bg-gradient-to-r from-reviderm-light to-reviderm-secondary">
317
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
318
+ <div class="flex flex-col lg:flex-row items-center">
319
+ <div class="lg:w-1/2 mb-8 lg:mb-0 lg:pr-12">
320
+ <span class="inline-block bg-reviderm-secondary text-white px-3 py-1 rounded-full text-xs uppercase tracking-widest mb-4">Limited Edition</span>
321
+ <h2 class="text-3xl font-bold text-reviderm-dark mb-6 playfair tracking-tight">Caviar Infused Retinol Elixir</h2>
322
+ <p class="text-gray-600 mb-6">
323
+ Our dermatologist-developed retinol formula delivers visible results without irritation.
324
+ Wake up to smoother, brighter, and more youthful-looking skin.
325
+ </p>
326
+ <ul class="space-y-2 mb-8">
327
+ <li class="flex items-center">
328
+ <i class="fas fa-check text-reviderm-primary mr-2"></i>
329
+ <span>0.5% encapsulated retinol for gradual release</span>
330
+ </li>
331
+ <li class="flex items-center">
332
+ <i class="fas fa-check text-reviderm-primary mr-2"></i>
333
+ <span>Hydrating hyaluronic acid and ceramides</span>
334
+ </li>
335
+ <li class="flex items-center">
336
+ <i class="fas fa-check text-reviderm-primary mr-2"></i>
337
+ <span>Fragrance-free and non-comedogenic</span>
338
+ </li>
339
+ </ul>
340
+ <div class="flex items-center mb-6">
341
+ <p class="text-2xl font-bold text-reviderm-primary mr-4">$78.00</p>
342
+ <p class="text-gray-400 line-through">$92.00</p>
343
+ </div>
344
+ <button class="bg-reviderm-primary text-white px-8 py-3 rounded hover:bg-opacity-90 transition duration-300">
345
+ Add to Cart
346
+ </button>
347
+ </div>
348
+ <div class="lg:w-1/2 relative">
349
+ <img src="https://images.unsplash.com/photo-1556228578-8c2d37ba539d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
350
+ alt="Advanced Retinol Night Cream"
351
+ class="rounded-lg shadow-xl w-full max-w-md mx-auto animate-pulse-slow">
352
+ <div class="absolute -bottom-6 -left-6 bg-reviderm-dark text-white px-4 py-2 rounded-lg shadow-lg">
353
+ <p class="font-bold">15% OFF</p>
354
+ </div>
355
+ </div>
356
+ </div>
357
+ </div>
358
+ </section>
359
+
360
+ <!-- Testimonials -->
361
+ <section class="py-16 bg-white">
362
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
363
+ <div class="text-center mb-12">
364
+ <h2 class="text-3xl font-bold text-reviderm-dark mb-4 playfair">What Our Customers Say</h2>
365
+ <p class="text-gray-600 max-w-2xl mx-auto">Real results from real people</p>
366
+ </div>
367
+
368
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
369
+ <div class="bg-reviderm-light p-6 rounded-lg transform transition-all duration-500 hover:scale-[1.02] hover:shadow-lg">
370
+ <div class="flex items-center mb-4">
371
+ <div class="flex items-center text-yellow-400 mr-2">
372
+ <i class="fas fa-star"></i>
373
+ <i class="fas fa-star"></i>
374
+ <i class="fas fa-star"></i>
375
+ <i class="fas fa-star"></i>
376
+ <i class="fas fa-star"></i>
377
+ </div>
378
+ <span class="text-sm text-gray-500">2 weeks ago</span>
379
+ </div>
380
+ <p class="text-gray-700 mb-4">
381
+ "The Hydra Renew Serum transformed my dry, dull skin. I've never had so many compliments on my complexion!"
382
+ </p>
383
+ <div class="flex items-center">
384
+ <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Sarah J." class="w-10 h-10 rounded-full mr-3">
385
+ <div>
386
+ <p class="font-medium">Sarah J.</p>
387
+ <p class="text-sm text-gray-500">Verified Buyer</p>
388
+ </div>
389
+ </div>
390
+ </div>
391
+
392
+ <div class="bg-reviderm-light p-6 rounded-lg">
393
+ <div class="flex items-center mb-4">
394
+ <div class="flex items-center text-yellow-400 mr-2">
395
+ <i class="fas fa-star"></i>
396
+ <i class="fas fa-star"></i>
397
+ <i class="fas fa-star"></i>
398
+ <i class="fas fa-star"></i>
399
+ <i class="fas fa-star"></i>
400
+ </div>
401
+ <span class="text-sm text-gray-500">1 month ago</span>
402
+ </div>
403
+ <p class="text-gray-700 mb-4">
404
+ "After just 3 weeks using the Retinol Night Cream, my fine lines are visibly reduced. Worth every penny!"
405
+ </p>
406
+ <div class="flex items-center">
407
+ <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Emily R." class="w-10 h-10 rounded-full mr-3">
408
+ <div>
409
+ <p class="font-medium">Emily R.</p>
410
+ <p class="text-sm text-gray-500">Verified Buyer</p>
411
+ </div>
412
+ </div>
413
+ </div>
414
+
415
+ <div class="bg-reviderm-light p-6 rounded-lg">
416
+ <div class="flex items-center mb-4">
417
+ <div class="flex items-center text-yellow-400 mr-2">
418
+ <i class="fas fa-star"></i>
419
+ <i class="fas fa-star"></i>
420
+ <i class="fas fa-star"></i>
421
+ <i class="fas fa-star"></i>
422
+ <i class="fas fa-star-half-alt"></i>
423
+ </div>
424
+ <span class="text-sm text-gray-500">3 days ago</span>
425
+ </div>
426
+ <p class="text-gray-700 mb-4">
427
+ "The Glow Facial Device gives me salon-quality results at home. My skin has never looked better!"
428
+ </p>
429
+ <div class="flex items-center">
430
+ <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Jessica T." class="w-10 h-10 rounded-full mr-3">
431
+ <div>
432
+ <p class="font-medium">Jessica T.</p>
433
+ <p class="text-sm text-gray-500">Verified Buyer</p>
434
+ </div>
435
+ </div>
436
+ </div>
437
+ </div>
438
+ </div>
439
+ </section>
440
+
441
+ <!-- Newsletter Section -->
442
+ <section class="py-16 bg-gradient-to-r from-reviderm-dark to-reviderm-primary text-white animate-[fadeIn_1s_ease-in-out]">
443
+ <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
444
+ <h2 class="text-3xl font-bold mb-6 playfair tracking-tight">The Reviderm Circle</h2>
445
+ <p class="text-lg mb-8 max-w-2xl mx-auto tracking-wide">
446
+ Gain access to private sales, VIP events, and limited-edition formulations reserved for our most discerning clients.
447
+ </p>
448
+ <form class="flex flex-col sm:flex-row gap-4 max-w-md mx-auto">
449
+ <input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 rounded focus:outline-none text-gray-800">
450
+ <button type="submit" class="bg-reviderm-dark text-white px-6 py-3 rounded hover:bg-opacity-90 transition duration-300 whitespace-nowrap">
451
+ Subscribe
452
+ </button>
453
+ </form>
454
+ <p class="text-sm mt-4 opacity-70">We respect your privacy. Unsubscribe at any time.</p>
455
+ </div>
456
+ </section>
457
+
458
+ <!-- Social Media -->
459
+ <section class="py-16 bg-white">
460
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
461
+ <div class="text-center mb-12">
462
+ <h2 class="text-3xl font-bold text-reviderm-dark mb-4 playfair">Follow Us</h2>
463
+ <p class="text-gray-600 max-w-2xl mx-auto">Join our community for skincare tips, tutorials, and exclusive content</p>
464
+ </div>
465
+
466
+ <div class="flex justify-center space-x-6">
467
+ <a href="#" class="w-12 h-12 rounded-full bg-reviderm-light flex items-center justify-center text-reviderm-primary hover:bg-reviderm-primary hover:text-white transition duration-300">
468
+ <i class="fab fa-instagram text-xl"></i>
469
+ </a>
470
+ <a href="#" class="w-12 h-12 rounded-full bg-reviderm-light flex items-center justify-center text-reviderm-primary hover:bg-reviderm-primary hover:text-white transition duration-300">
471
+ <i class="fab fa-facebook-f text-xl"></i>
472
+ </a>
473
+ <a href="#" class="w-12 h-12 rounded-full bg-reviderm-light flex items-center justify-center text-reviderm-primary hover:bg-reviderm-primary hover:text-white transition duration-300">
474
+ <i class="fab fa-tiktok text-xl"></i>
475
+ </a>
476
+ <a href="#" class="w-12 h-12 rounded-full bg-reviderm-light flex items-center justify-center text-reviderm-primary hover:bg-reviderm-primary hover:text-white transition duration-300">
477
+ <i class="fab fa-youtube text-xl"></i>
478
+ </a>
479
+ <a href="#" class="w-12 h-12 rounded-full bg-reviderm-light flex items-center justify-center text-reviderm-primary hover:bg-reviderm-primary hover:text-white transition duration-300">
480
+ <i class="fab fa-pinterest-p text-xl"></i>
481
+ </a>
482
+ </div>
483
+
484
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mt-12">
485
+ <img src="https://images.unsplash.com/photo-1522335789203-aabd1fc54bc9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80"
486
+ alt="Instagram post"
487
+ class="rounded-lg object-cover h-48 w-full hover:opacity-90 transition cursor-pointer">
488
+ <img src="https://images.unsplash.com/photo-1596462502278-27bfdc403348?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
489
+ alt="Instagram post"
490
+ class="rounded-lg object-cover h-48 w-full hover:opacity-90 transition cursor-pointer">
491
+ <img src="https://images.unsplash.com/photo-1596755094514-f87e34085b2c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=688&q=80"
492
+ alt="Instagram post"
493
+ class="rounded-lg object-cover h-48 w-full hover:opacity-90 transition cursor-pointer">
494
+ <img src="https://images.unsplash.com/photo-1571781926291-c477ebfd024b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=688&q=80"
495
+ alt="Instagram post"
496
+ class="rounded-lg object-cover h-48 w-full hover:opacity-90 transition cursor-pointer">
497
+ </div>
498
+ </div>
499
+ </section>
500
+
501
+ <!-- Footer -->
502
+ <footer class="bg-reviderm-dark text-white py-12 animate-[fadeInUp_1s_ease-in-out]">
503
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
504
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
505
+ <div>
506
+ <h3 class="text-xl font-bold mb-4 playfair">REVIDERM</h3>
507
+ <p class="text-gray-300 mb-4 tracking-wide">
508
+ Swiss precision meets French luxury in our exclusive formulations, crafted for the most discerning clientele.
509
+ </p>
510
+ <div class="flex space-x-4">
511
+ <a href="#" class="text-gray-300 hover:text-white transition">
512
+ <i class="fab fa-instagram"></i>
513
+ </a>
514
+ <a href="#" class="text-gray-300 hover:text-white transition">
515
+ <i class="fab fa-facebook-f"></i>
516
+ </a>
517
+ <a href="#" class="text-gray-300 hover:text-white transition">
518
+ <i class="fab fa-tiktok"></i>
519
+ </a>
520
+ <a href="#" class="text-gray-300 hover:text-white transition">
521
+ <i class="fab fa-pinterest-p"></i>
522
+ </a>
523
+ </div>
524
+ </div>
525
+
526
+ <div>
527
+ <h4 class="font-bold mb-4">Shop</h4>
528
+ <ul class="space-y-2">
529
+ <li><a href="#" class="text-gray-300 hover:text-white transition">Skincare</a></li>
530
+ <li><a href="#" class="text-gray-300 hover:text-white transition">Devices</a></li>
531
+ <li><a href="#" class="text-gray-300 hover:text-white transition">Cosmetics</a></li>
532
+ <li><a href="#" class="text-gray-300 hover:text-white transition">Best Sellers</a></li>
533
+ <li><a href="#" class="text-gray-300 hover:text-white transition">New Arrivals</a></li>
534
+ </ul>
535
+ </div>
536
+
537
+ <div>
538
+ <h4 class="font-bold mb-4">About</h4>
539
+ <ul class="space-y-2">
540
+ <li><a href="#" class="text-gray-300 hover:text-white transition">Our Story</a></li>
541
+ <li><a href="#" class="text-gray-300 hover:text-white transition">Ingredients</a></li>
542
+ <li><a href="#" class="text-gray-300 hover:text-white transition">Sustainability</a></li>
543
+ <li><a href="#" class="text-gray-300 hover:text-white transition">Press</a></li>
544
+ <li><a href="#" class="text-gray-300 hover:text-white transition">Careers</a></li>
545
+ </ul>
546
+ </div>
547
+
548
+ <div>
549
+ <h4 class="font-bold mb-4">Help</h4>
550
+ <ul class="space-y-2">
551
+ <li><a href="#" class="text-gray-300 hover:text-white transition">Contact Us</a></li>
552
+ <li><a href="#" class="text-gray-300 hover:text-white transition">FAQs</a></li>
553
+ <li><a href="#" class="text-gray-300 hover:text-white transition">Shipping & Returns</a></li>
554
+ <li><a href="#" class="text-gray-300 hover:text-white transition">Privacy Policy</a></li>
555
+ <li><a href="#" class="text-gray-300 hover:text-white transition">Terms of Service</a></li>
556
+ </ul>
557
+ </div>
558
+ </div>
559
+
560
+ <div class="border-t border-gray-700 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
561
+ <p class="text-gray-400 text-sm mb-4 md:mb-0">
562
+ © 2023 Reviderm. All rights reserved.
563
+ </p>
564
+ <div class="flex space-x-6">
565
+ <img src="https://cdn.shopify.com/shopifycloud/checkout-web/assets/1a9d5426a9d6d3ba5d5a4a3d4d9b1b6.svg" alt="Visa" class="h-8">
566
+ <img src="https://cdn.shopify.com/shopifycloud/checkout-web/assets/3a4f3a7e8a6a9a9a9a9a9a9a9a9a9a9.svg" alt="Mastercard" class="h-8">
567
+ <img src="https://cdn.shopify.com/shopifycloud/checkout-web/assets/4a4a4a4a4a4a4a4a4a4a4a4a4a4a4a4.svg" alt="American Express" class="h-8">
568
+ <img src="https://cdn.shopify.com/shopifycloud/checkout-web/assets/5a5a5a5a5a5a5a5a5a5a5a5a5a5a5a5.svg" alt="PayPal" class="h-8">
569
+ </div>
570
+ </div>
571
+ </div>
572
+ </footer>
573
+
574
+ <script>
575
+ // Newsletter Popup
576
+ document.addEventListener('DOMContentLoaded', function() {
577
+ // Show popup after 3 seconds
578
+ setTimeout(function() {
579
+ document.getElementById('newsletterPopup').classList.remove('hidden');
580
+ }, 3000);
581
+
582
+ // Close popup
583
+ document.getElementById('closePopup').addEventListener('click', function() {
584
+ document.getElementById('newsletterPopup').classList.add('hidden');
585
+ });
586
+
587
+ // Close when clicking outside
588
+ document.getElementById('newsletterPopup').addEventListener('click', function(e) {
589
+ if (e.target === this) {
590
+ this.classList.add('hidden');
591
+ }
592
+ });
593
+ });
594
+ </script>
595
+ <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=yahma/reviderm" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
596
+ </html>