Hugging Face's logo

Spaces:
taufikai
/
marketplace
Running

App Files Community
taufikai commited on
Commit
96f0d2f
·
verified ·
1 Parent(s): 4f396c4

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +711 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Marketplace
3
- emoji: 📊
4
- colorFrom: gray
5
- colorTo: purple
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: marketplace
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: pink
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,711 @@
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="id">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>PasarSehat - Marketplace Alat Rumah Tangga & Kesehatan</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=Poppins:wght@300;400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Poppins', sans-serif;
14
+ }
15
+
16
+ .category-card:hover {
17
+ transform: translateY(-5px);
18
+ box-shadow: 0 10px 20px rgba(0,0,0,0.1);
19
+ }
20
+
21
+ .product-card:hover {
22
+ transform: scale(1.02);
23
+ }
24
+
25
+ .search-bar:focus {
26
+ outline: none;
27
+ box-shadow: 0 0 0 2px #3b82f6;
28
+ }
29
+
30
+ .nav-item:hover {
31
+ color: #3b82f6;
32
+ }
33
+
34
+ .hero {
35
+ background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://images.unsplash.com/photo-1556911220-bff31c812dba?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80');
36
+ background-size: cover;
37
+ background-position: center;
38
+ }
39
+ </style>
40
+ </head>
41
+ <body class="bg-gray-50">
42
+ <!-- Header/Navbar -->
43
+ <header class="bg-white shadow-sm sticky top-0 z-50">
44
+ <div class="container mx-auto px-4 py-3 flex items-center justify-between">
45
+ <!-- Logo -->
46
+ <div class="flex items-center">
47
+ <i class="fas fa-store-alt text-blue-500 text-2xl mr-2"></i>
48
+ <h1 class="text-xl font-bold text-blue-600">Pasar<span class="text-green-500">Sehat</span></h1>
49
+ </div>
50
+
51
+ <!-- Search Bar (hidden on mobile) -->
52
+ <div class="hidden md:flex flex-1 mx-6">
53
+ <div class="relative w-full max-w-xl">
54
+ <input type="text" placeholder="Cari alat masak, kesehatan, karpet..."
55
+ class="w-full py-2 px-4 border border-gray-300 rounded-full focus:border-blue-500 search-bar">
56
+ <button class="absolute right-0 top-0 h-full px-4 text-gray-600">
57
+ <i class="fas fa-search"></i>
58
+ </button>
59
+ </div>
60
+ </div>
61
+
62
+ <!-- Navigation Icons -->
63
+ <div class="flex items-center space-x-4">
64
+ <a href="#" class="text-gray-700 hover:text-blue-500">
65
+ <i class="fas fa-heart text-xl"></i>
66
+ </a>
67
+ <a href="#" class="text-gray-700 hover:text-blue-500">
68
+ <i class="fas fa-shopping-cart text-xl"></i>
69
+ </a>
70
+ <a href="#" class="text-gray-700 hover:text-blue-500">
71
+ <i class="fas fa-user text-xl"></i>
72
+ </a>
73
+
74
+ <!-- Mobile Menu Button -->
75
+ <button class="md:hidden text-gray-700 focus:outline-none">
76
+ <i class="fas fa-bars text-xl"></i>
77
+ </button>
78
+ </div>
79
+ </div>
80
+
81
+ <!-- Mobile Search Bar -->
82
+ <div class="md:hidden px-4 pb-3">
83
+ <div class="relative">
84
+ <input type="text" placeholder="Cari produk..."
85
+ class="w-full py-2 px-4 border border-gray-300 rounded-full focus:border-blue-500 search-bar">
86
+ <button class="absolute right-0 top-0 h-full px-4 text-gray-600">
87
+ <i class="fas fa-search"></i>
88
+ </button>
89
+ </div>
90
+ </div>
91
+
92
+ <!-- Categories Navigation -->
93
+ <nav class="hidden md:block bg-blue-600 text-white">
94
+ <div class="container mx-auto px-4">
95
+ <ul class="flex space-x-6 py-3 overflow-x-auto">
96
+ <li><a href="#" class="nav-item hover:bg-blue-700 px-3 py-1 rounded transition">Alat Masak</a></li>
97
+ <li><a href="#" class="nav-item hover:bg-blue-700 px-3 py-1 rounded transition">Alat Kesehatan</a></li>
98
+ <li><a href="#" class="nav-item hover:bg-blue-700 px-3 py-1 rounded transition">Karpet</a></li>
99
+ <li><a href="#" class="nav-item hover:bg-blue-700 px-3 py-1 rounded transition">Regulator</a></li>
100
+ <li><a href="#" class="nav-item hover:bg-blue-700 px-3 py-1 rounded transition">Alat Pijat</a></li>
101
+ <li><a href="#" class="nav-item hover:bg-blue-700 px-3 py-1 rounded transition">Promo</a></li>
102
+ <li><a href="#" class="nav-item hover:bg-blue-700 px-3 py-1 rounded transition">Baru</a></li>
103
+ </ul>
104
+ </div>
105
+ </nav>
106
+ </header>
107
+
108
+ <!-- Hero Section -->
109
+ <section class="hero text-white py-16 md:py-24">
110
+ <div class="container mx-auto px-4 text-center">
111
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Temukan Kebutuhan Rumah & Kesehatan Terbaik</h2>
112
+ <p class="text-lg md:text-xl mb-8 max-w-2xl mx-auto">Alat masak berkualitas, peralatan kesehatan lengkap, karpet nyaman, dan alat pijat profesional dengan harga terjangkau.</p>
113
+ <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-3 px-8 rounded-full transition duration-300 transform hover:scale-105">
114
+ Belanja Sekarang
115
+ </button>
116
+ </div>
117
+ </section>
118
+
119
+ <!-- Categories Section -->
120
+ <section class="py-8 bg-white">
121
+ <div class="container mx-auto px-4">
122
+ <h3 class="text-2xl font-bold mb-6 text-gray-800">Kategori Produk</h3>
123
+ <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-4">
124
+ <!-- Category 1 -->
125
+ <div class="bg-white rounded-lg shadow-md p-4 text-center category-card transition duration-300">
126
+ <div class="bg-blue-50 rounded-full p-4 w-20 h-20 flex items-center justify-center mx-auto mb-3">
127
+ <i class="fas fa-utensils text-blue-500 text-3xl"></i>
128
+ </div>
129
+ <h4 class="font-semibold text-gray-800">Alat Masak</h4>
130
+ </div>
131
+
132
+ <!-- Category 2 -->
133
+ <div class="bg-white rounded-lg shadow-md p-4 text-center category-card transition duration-300">
134
+ <div class="bg-green-50 rounded-full p-4 w-20 h-20 flex items-center justify-center mx-auto mb-3">
135
+ <i class="fas fa-heartbeat text-green-500 text-3xl"></i>
136
+ </div>
137
+ <h4 class="font-semibold text-gray-800">Alat Kesehatan</h4>
138
+ </div>
139
+
140
+ <!-- Category 3 -->
141
+ <div class="bg-white rounded-lg shadow-md p-4 text-center category-card transition duration-300">
142
+ <div class="bg-yellow-50 rounded-full p-4 w-20 h-20 flex items-center justify-center mx-auto mb-3">
143
+ <i class="fas fa-rug text-yellow-500 text-3xl"></i>
144
+ </div>
145
+ <h4 class="font-semibold text-gray-800">Karpet</h4>
146
+ </div>
147
+
148
+ <!-- Category 4 -->
149
+ <div class="bg-white rounded-lg shadow-md p-4 text-center category-card transition duration-300">
150
+ <div class="bg-red-50 rounded-full p-4 w-20 h-20 flex items-center justify-center mx-auto mb-3">
151
+ <i class="fas fa-tachometer-alt text-red-500 text-3xl"></i>
152
+ </div>
153
+ <h4 class="font-semibold text-gray-800">Regulator</h4>
154
+ </div>
155
+
156
+ <!-- Category 5 -->
157
+ <div class="bg-white rounded-lg shadow-md p-4 text-center category-card transition duration-300">
158
+ <div class="bg-purple-50 rounded-full p-4 w-20 h-20 flex items-center justify-center mx-auto mb-3">
159
+ <i class="fas fa-spa text-purple-500 text-3xl"></i>
160
+ </div>
161
+ <h4 class="font-semibold text-gray-800">Alat Pijat</h4>
162
+ </div>
163
+ </div>
164
+ </div>
165
+ </section>
166
+
167
+ <!-- Featured Products -->
168
+ <section class="py-12 bg-gray-50">
169
+ <div class="container mx-auto px-4">
170
+ <div class="flex justify-between items-center mb-8">
171
+ <h3 class="text-2xl font-bold text-gray-800">Produk Unggulan</h3>
172
+ <a href="#" class="text-blue-500 hover:text-blue-700 font-medium">Lihat Semua <i class="fas fa-chevron-right ml-1"></i></a>
173
+ </div>
174
+
175
+ <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6">
176
+ <!-- Product 1 -->
177
+ <div class="bg-white rounded-lg overflow-hidden shadow-md product-card transition duration-300">
178
+ <div class="relative">
179
+ <img src="https://images.unsplash.com/photo-1588514899099-e2d691b0bf24?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80"
180
+ alt="Panci Masak" class="w-full h-48 object-cover">
181
+ <span class="absolute top-2 right-2 bg-red-500 text-white text-xs font-bold px-2 py-1 rounded-full">HOT</span>
182
+ </div>
183
+ <div class="p-4">
184
+ <h4 class="font-semibold text-gray-800 mb-1 truncate">Panci Masak Stainless Steel 5L</h4>
185
+ <div class="flex items-center mb-2">
186
+ <div class="flex text-yellow-400">
187
+ <i class="fas fa-star"></i>
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-half-alt"></i>
192
+ </div>
193
+ <span class="text-gray-500 text-xs ml-1">(128)</span>
194
+ </div>
195
+ <div class="flex justify-between items-center">
196
+ <span class="font-bold text-blue-600">Rp 289.000</span>
197
+ <button class="text-blue-500 hover:text-blue-700">
198
+ <i class="fas fa-cart-plus text-xl"></i>
199
+ </button>
200
+ </div>
201
+ </div>
202
+ </div>
203
+
204
+ <!-- Product 2 -->
205
+ <div class="bg-white rounded-lg overflow-hidden shadow-md product-card transition duration-300">
206
+ <div class="relative">
207
+ <img src="https://images.unsplash.com/photo-1579684385127-1ef15d508118?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80"
208
+ alt="Tensimeter Digital" class="w-full h-48 object-cover">
209
+ </div>
210
+ <div class="p-4">
211
+ <h4 class="font-semibold text-gray-800 mb-1 truncate">Tensimeter Digital Omron</h4>
212
+ <div class="flex items-center mb-2">
213
+ <div class="flex text-yellow-400">
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="far fa-star"></i>
219
+ </div>
220
+ <span class="text-gray-500 text-xs ml-1">(95)</span>
221
+ </div>
222
+ <div class="flex justify-between items-center">
223
+ <span class="font-bold text-blue-600">Rp 650.000</span>
224
+ <button class="text-blue-500 hover:text-blue-700">
225
+ <i class="fas fa-cart-plus text-xl"></i>
226
+ </button>
227
+ </div>
228
+ </div>
229
+ </div>
230
+
231
+ <!-- Product 3 -->
232
+ <div class="bg-white rounded-lg overflow-hidden shadow-md product-card transition duration-300">
233
+ <div class="relative">
234
+ <img src="https://images.unsplash.com/photo-1556905055-c5f6a89d4b14?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80"
235
+ alt="Karpet Bulu" class="w-full h-48 object-cover">
236
+ <span class="absolute top-2 right-2 bg-green-500 text-white text-xs font-bold px-2 py-1 rounded-full">NEW</span>
237
+ </div>
238
+ <div class="p-4">
239
+ <h4 class="font-semibold text-gray-800 mb-1 truncate">Karpet Bulu Premium 120x180</h4>
240
+ <div class="flex items-center mb-2">
241
+ <div class="flex text-yellow-400">
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
+ <i class="fas fa-star"></i>
247
+ </div>
248
+ <span class="text-gray-500 text-xs ml-1">(210)</span>
249
+ </div>
250
+ <div class="flex justify-between items-center">
251
+ <span class="font-bold text-blue-600">Rp 399.000</span>
252
+ <button class="text-blue-500 hover:text-blue-700">
253
+ <i class="fas fa-cart-plus text-xl"></i>
254
+ </button>
255
+ </div>
256
+ </div>
257
+ </div>
258
+
259
+ <!-- Product 4 -->
260
+ <div class="bg-white rounded-lg overflow-hidden shadow-md product-card transition duration-300">
261
+ <div class="relative">
262
+ <img src="https://images.unsplash.com/photo-1584308666744-5b68b0d0ac39?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80"
263
+ alt="Regulator Oksigen" class="w-full h-48 object-cover">
264
+ </div>
265
+ <div class="p-4">
266
+ <h4 class="font-semibold text-gray-800 mb-1 truncate">Regulator Oksigen Medis</h4>
267
+ <div class="flex items-center mb-2">
268
+ <div class="flex text-yellow-400">
269
+ <i class="fas fa-star"></i>
270
+ <i class="fas fa-star"></i>
271
+ <i class="fas fa-star"></i>
272
+ <i class="fas fa-star"></i>
273
+ <i class="fas fa-star-half-alt"></i>
274
+ </div>
275
+ <span class="text-gray-500 text-xs ml-1">(76)</span>
276
+ </div>
277
+ <div class="flex justify-between items-center">
278
+ <span class="font-bold text-blue-600">Rp 850.000</span>
279
+ <button class="text-blue-500 hover:text-blue-700">
280
+ <i class="fas fa-cart-plus text-xl"></i>
281
+ </button>
282
+ </div>
283
+ </div>
284
+ </div>
285
+
286
+ <!-- Product 5 -->
287
+ <div class="bg-white rounded-lg overflow-hidden shadow-md product-card transition duration-300">
288
+ <div class="relative">
289
+ <img src="https://images.unsplash.com/photo-1591348278863-a8fb3887e2aa?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80"
290
+ alt="Alat Pijat Elektrik" class="w-full h-48 object-cover">
291
+ <span class="absolute top-2 right-2 bg-orange-500 text-white text-xs font-bold px-2 py-1 rounded-full">SALE</span>
292
+ </div>
293
+ <div class="p-4">
294
+ <h4 class="font-semibold text-gray-800 mb-1 truncate">Alat Pijat Elektrik Shiatsu</h4>
295
+ <div class="flex items-center mb-2">
296
+ <div class="flex text-yellow-400">
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="far fa-star"></i>
302
+ </div>
303
+ <span class="text-gray-500 text-xs ml-1">(182)</span>
304
+ </div>
305
+ <div class="flex justify-between items-center">
306
+ <div>
307
+ <span class="font-bold text-blue-600">Rp 1.250.000</span>
308
+ <span class="text-xs text-gray-500 line-through ml-1">Rp 1.499.000</span>
309
+ </div>
310
+ <button class="text-blue-500 hover:text-blue-700">
311
+ <i class="fas fa-cart-plus text-xl"></i>
312
+ </button>
313
+ </div>
314
+ </div>
315
+ </div>
316
+ </div>
317
+ </div>
318
+ </section>
319
+
320
+ <!-- Special Offers -->
321
+ <section class="py-12 bg-white">
322
+ <div class="container mx-auto px-4">
323
+ <div class="flex justify-between items-center mb-8">
324
+ <h3 class="text-2xl font-bold text-gray-800">Penawaran Spesial</h3>
325
+ <a href="#" class="text-blue-500 hover:text-blue-700 font-medium">Lihat Semua <i class="fas fa-chevron-right ml-1"></i></a>
326
+ </div>
327
+
328
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
329
+ <!-- Offer 1 -->
330
+ <div class="bg-gradient-to-r from-blue-500 to-blue-600 rounded-lg overflow-hidden shadow-lg">
331
+ <div class="flex flex-col md:flex-row">
332
+ <div class="md:w-1/2 p-6 flex flex-col justify-center">
333
+ <span class="text-white bg-blue-700 px-3 py-1 rounded-full text-sm font-bold inline-block mb-3">DISKON 30%</span>
334
+ <h3 class="text-2xl font-bold text-white mb-3">Alat Masak Premium</h3>
335
+ <p class="text-blue-100 mb-4">Dapatkan diskon hingga 30% untuk semua produk alat masak stainless steel.</p>
336
+ <a href="#" class="text-white font-semibold hover:underline">Beli Sekarang <i class="fas fa-arrow-right ml-1"></i></a>
337
+ </div>
338
+ <div class="md:w-1/2">
339
+ <img src="https://images.unsplash.com/photo-1603105037880-880cd4edfb0d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80"
340
+ alt="Alat Masak" class="w-full h-full object-cover">
341
+ </div>
342
+ </div>
343
+ </div>
344
+
345
+ <!-- Offer 2 -->
346
+ <div class="bg-gradient-to-r from-green-500 to-green-600 rounded-lg overflow-hidden shadow-lg">
347
+ <div class="flex flex-col md:flex-row">
348
+ <div class="md:w-1/2 p-6 flex flex-col justify-center">
349
+ <span class="text-white bg-green-700 px-3 py-1 rounded-full text-sm font-bold inline-block mb-3">GRATIS ONGKIR</span>
350
+ <h3 class="text-2xl font-bold text-white mb-3">Alat Kesehatan</h3>
351
+ <p class="text-green-100 mb-4">Gratis ongkir ke seluruh Indonesia untuk pembelian alat kesehatan di atas Rp 500.000.</p>
352
+ <a href="#" class="text-white font-semibold hover:underline">Beli Sekarang <i class="fas fa-arrow-right ml-1"></i></a>
353
+ </div>
354
+ <div class="md:w-1/2">
355
+ <img src="https://images.unsplash.com/photo-1588776814546-1ffcf47267a5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80"
356
+ alt="Alat Kesehatan" class="w-full h-full object-cover">
357
+ </div>
358
+ </div>
359
+ </div>
360
+ </div>
361
+ </div>
362
+ </section>
363
+
364
+ <!-- New Arrivals -->
365
+ <section class="py-12 bg-gray-50">
366
+ <div class="container mx-auto px-4">
367
+ <div class="flex justify-between items-center mb-8">
368
+ <h3 class="text-2xl font-bold text-gray-800">Produk Baru</h3>
369
+ <a href="#" class="text-blue-500 hover:text-blue-700 font-medium">Lihat Semua <i class="fas fa-chevron-right ml-1"></i></a>
370
+ </div>
371
+
372
+ <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6">
373
+ <!-- Product 6 -->
374
+ <div class="bg-white rounded-lg overflow-hidden shadow-md product-card transition duration-300">
375
+ <div class="relative">
376
+ <img src="https://images.unsplash.com/photo-1592078615290-033ee584e267?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80"
377
+ alt="Blender Multifungsi" class="w-full h-48 object-cover">
378
+ <span class="absolute top-2 right-2 bg-blue-500 text-white text-xs font-bold px-2 py-1 rounded-full">NEW</span>
379
+ </div>
380
+ <div class="p-4">
381
+ <h4 class="font-semibold text-gray-800 mb-1 truncate">Blender Multifungsi 5in1</h4>
382
+ <div class="flex items-center mb-2">
383
+ <div class="flex text-yellow-400">
384
+ <i class="fas fa-star"></i>
385
+ <i class="fas fa-star"></i>
386
+ <i class="fas fa-star"></i>
387
+ <i class="fas fa-star"></i>
388
+ <i class="far fa-star"></i>
389
+ </div>
390
+ <span class="text-gray-500 text-xs ml-1">(42)</span>
391
+ </div>
392
+ <div class="flex justify-between items-center">
393
+ <span class="font-bold text-blue-600">Rp 550.000</span>
394
+ <button class="text-blue-500 hover:text-blue-700">
395
+ <i class="fas fa-cart-plus text-xl"></i>
396
+ </button>
397
+ </div>
398
+ </div>
399
+ </div>
400
+
401
+ <!-- Product 7 -->
402
+ <div class="bg-white rounded-lg overflow-hidden shadow-md product-card transition duration-300">
403
+ <div class="relative">
404
+ <img src="https://images.unsplash.com/photo-1576091160550-2173dba999ef?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80"
405
+ alt="Nebulizer" class="w-full h-48 object-cover">
406
+ </div>
407
+ <div class="p-4">
408
+ <h4 class="font-semibold text-gray-800 mb-1 truncate">Nebulizer Ultrasonic</h4>
409
+ <div class="flex items-center mb-2">
410
+ <div class="flex text-yellow-400">
411
+ <i class="fas fa-star"></i>
412
+ <i class="fas fa-star"></i>
413
+ <i class="fas fa-star"></i>
414
+ <i class="fas fa-star"></i>
415
+ <i class="fas fa-star-half-alt"></i>
416
+ </div>
417
+ <span class="text-gray-500 text-xs ml-1">(67)</span>
418
+ </div>
419
+ <div class="flex justify-between items-center">
420
+ <span class="font-bold text-blue-600">Rp 725.000</span>
421
+ <button class="text-blue-500 hover:text-blue-700">
422
+ <i class="fas fa-cart-plus text-xl"></i>
423
+ </button>
424
+ </div>
425
+ </div>
426
+ </div>
427
+
428
+ <!-- Product 8 -->
429
+ <div class="bg-white rounded-lg overflow-hidden shadow-md product-card transition duration-300">
430
+ <div class="relative">
431
+ <img src="https://images.unsplash.com/photo-1579656592043-9f85243a3a0e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80"
432
+ alt="Karpet Motif" class="w-full h-48 object-cover">
433
+ </div>
434
+ <div class="p-4">
435
+ <h4 class="font-semibold text-gray-800 mb-1 truncate">Karpet Motif Persia 160x230</h4>
436
+ <div class="flex items-center mb-2">
437
+ <div class="flex text-yellow-400">
438
+ <i class="fas fa-star"></i>
439
+ <i class="fas fa-star"></i>
440
+ <i class="fas fa-star"></i>
441
+ <i class="fas fa-star"></i>
442
+ <i class="far fa-star"></i>
443
+ </div>
444
+ <span class="text-gray-500 text-xs ml-1">(38)</span>
445
+ </div>
446
+ <div class="flex justify-between items-center">
447
+ <span class="font-bold text-blue-600">Rp 1.199.000</span>
448
+ <button class="text-blue-500 hover:text-blue-700">
449
+ <i class="fas fa-cart-plus text-xl"></i>
450
+ </button>
451
+ </div>
452
+ </div>
453
+ </div>
454
+
455
+ <!-- Product 9 -->
456
+ <div class="bg-white rounded-lg overflow-hidden shadow-md product-card transition duration-300">
457
+ <div class="relative">
458
+ <img src="https://images.unsplash.com/photo-1631729371254-43d3db0fb1b3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80"
459
+ alt="Regulator Gas" class="w-full h-48 object-cover">
460
+ <span class="absolute top-2 right-2 bg-yellow-500 text-white text-xs font-bold px-2 py-1 rounded-full">BEST</span>
461
+ </div>
462
+ <div class="p-4">
463
+ <h4 class="font-semibold text-gray-800 mb-1 truncate">Regulator Gas Medis</h4>
464
+ <div class="flex items-center mb-2">
465
+ <div class="flex text-yellow-400">
466
+ <i class="fas fa-star"></i>
467
+ <i class="fas fa-star"></i>
468
+ <i class="fas fa-star"></i>
469
+ <i class="fas fa-star"></i>
470
+ <i class="fas fa-star"></i>
471
+ </div>
472
+ <span class="text-gray-500 text-xs ml-1">(124)</span>
473
+ </div>
474
+ <div class="flex justify-between items-center">
475
+ <span class="font-bold text-blue-600">Rp 1.050.000</span>
476
+ <button class="text-blue-500 hover:text-blue-700">
477
+ <i class="fas fa-cart-plus text-xl"></i>
478
+ </button>
479
+ </div>
480
+ </div>
481
+ </div>
482
+
483
+ <!-- Product 10 -->
484
+ <div class="bg-white rounded-lg overflow-hidden shadow-md product-card transition duration-300">
485
+ <div class="relative">
486
+ <img src="https://images.unsplash.com/photo-1544161515-4ab6ce6db874?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80"
487
+ alt="Pijat Refleksi" class="w-full h-48 object-cover">
488
+ </div>
489
+ <div class="p-4">
490
+ <h4 class="font-semibold text-gray-800 mb-1 truncate">Alat Pijat Refleksi Kaki</h4>
491
+ <div class="flex items-center mb-2">
492
+ <div class="flex text-yellow-400">
493
+ <i class="fas fa-star"></i>
494
+ <i class="fas fa-star"></i>
495
+ <i class="fas fa-star"></i>
496
+ <i class="fas fa-star-half-alt"></i>
497
+ <i class="far fa-star"></i>
498
+ </div>
499
+ <span class="text-gray-500 text-xs ml-1">(89)</span>
500
+ </div>
501
+ <div class="flex justify-between items-center">
502
+ <div>
503
+ <span class="font-bold text-blue-600">Rp 899.000</span>
504
+ <span class="text-xs text-gray-500 line-through ml-1">Rp 1.100.000</span>
505
+ </div>
506
+ <button class="text-blue-500 hover:text-blue-700">
507
+ <i class="fas fa-cart-plus text-xl"></i>
508
+ </button>
509
+ </div>
510
+ </div>
511
+ </div>
512
+ </div>
513
+ </div>
514
+ </section>
515
+
516
+ <!-- Testimonials -->
517
+ <section class="py-12 bg-white">
518
+ <div class="container mx-auto px-4">
519
+ <h3 class="text-2xl font-bold text-center mb-12 text-gray-800">Apa Kata Pelanggan Kami</h3>
520
+
521
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
522
+ <!-- Testimonial 1 -->
523
+ <div class="bg-gray-50 rounded-lg p-6 shadow-sm">
524
+ <div class="flex items-center mb-4">
525
+ <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Customer" class="w-12 h-12 rounded-full object-cover">
526
+ <div class="ml-4">
527
+ <h4 class="font-semibold text-gray-800">Dewi Anggraeni</h4>
528
+ <div class="flex text-yellow-400 text-sm">
529
+ <i class="fas fa-star"></i>
530
+ <i class="fas fa-star"></i>
531
+ <i class="fas fa-star"></i>
532
+ <i class="fas fa-star"></i>
533
+ <i class="fas fa-star"></i>
534
+ </div>
535
+ </div>
536
+ </div>
537
+ <p class="text-gray-600">"Alat masak yang saya beli sangat berkualitas, pengiriman cepat dan packing rapi. Terima kasih PasarSehat!"</p>
538
+ </div>
539
+
540
+ <!-- Testimonial 2 -->
541
+ <div class="bg-gray-50 rounded-lg p-6 shadow-sm">
542
+ <div class="flex items-center mb-4">
543
+ <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Customer" class="w-12 h-12 rounded-full object-cover">
544
+ <div class="ml-4">
545
+ <h4 class="font-semibold text-gray-800">Budi Santoso</h4>
546
+ <div class="flex text-yellow-400 text-sm">
547
+ <i class="fas fa-star"></i>
548
+ <i class="fas fa-star"></i>
549
+ <i class="fas fa-star"></i>
550
+ <i class="fas fa-star"></i>
551
+ <i class="fas fa-star-half-alt"></i>
552
+ </div>
553
+ </div>
554
+ </div>
555
+ <p class="text-gray-600">"Tensimeter digital yang saya beli untuk orang tua sangat akurat dan mudah digunakan. Pelayanan CS juga ramah."</p>
556
+ </div>
557
+
558
+ <!-- Testimonial 3 -->
559
+ <div class="bg-gray-50 rounded-lg p-6 shadow-sm">
560
+ <div class="flex items-center mb-4">
561
+ <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Customer" class="w-12 h-12 rounded-full object-cover">
562
+ <div class="ml-4">
563
+ <h4 class="font-semibold text-gray-800">Siti Rahayu</h4>
564
+ <div class="flex text-yellow-400 text-sm">
565
+ <i class="fas fa-star"></i>
566
+ <i class="fas fa-star"></i>
567
+ <i class="fas fa-star"></i>
568
+ <i class="fas fa-star"></i>
569
+ <i class="fas fa-star"></i>
570
+ </div>
571
+ </div>
572
+ </div>
573
+ <p class="text-gray-600">"Karpet yang saya beli sangat nyaman dan lembut. Anak-anak suka bermain di atasnya. Pengiriman tepat waktu!"</p>
574
+ </div>
575
+ </div>
576
+ </div>
577
+ </section>
578
+
579
+ <!-- Newsletter -->
580
+ <section class="py-12 bg-blue-600 text-white">
581
+ <div class="container mx-auto px-4 text-center">
582
+ <h3 class="text-2xl font-bold mb-4">Dapatkan Promo & Penawaran Spesial</h3>
583
+ <p class="mb-6 max-w-2xl mx-auto text-blue-100">Berlangganan newsletter kami untuk mendapatkan informasi produk baru, diskon, dan tips kesehatan langsung ke email Anda.</p>
584
+
585
+ <div class="max-w-md mx-auto flex">
586
+ <input type="email" placeholder="Masukkan email Anda"
587
+ class="flex-1 py-3 px-4 rounded-l-full focus:outline-none text-gray-800">
588
+ <button class="bg-blue-800 hover:bg-blue-900 py-3 px-6 rounded-r-full font-semibold transition">
589
+ Berlangganan
590
+ </button>
591
+ </div>
592
+ </div>
593
+ </section>
594
+
595
+ <!-- Footer -->
596
+ <footer class="bg-gray-900 text-white pt-12 pb-6">
597
+ <div class="container mx-auto px-4">
598
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
599
+ <!-- About -->
600
+ <div>
601
+ <h4 class="text-lg font-bold mb-4">Tentang PasarSehat</h4>
602
+ <p class="text-gray-400 mb-4">PasarSehat adalah marketplace terpercaya untuk alat rumah tangga, kesehatan, dan kebutuhan sehari-hari dengan kualitas terbaik.</p>
603
+ <div class="flex space-x-4">
604
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a>
605
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
606
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a>
607
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-youtube"></i></a>
608
+ </div>
609
+ </div>
610
+
611
+ <!-- Quick Links -->
612
+ <div>
613
+ <h4 class="text-lg font-bold mb-4">Tautan Cepat</h4>
614
+ <ul class="space-y-2">
615
+ <li><a href="#" class="text-gray-400 hover:text-white">Beranda</a></li>
616
+ <li><a href="#" class="text-gray-400 hover:text-white">Produk</a></li>
617
+ <li><a href="#" class="text-gray-400 hover:text-white">Promo</a></li>
618
+ <li><a href="#" class="text-gray-400 hover:text-white">Tentang Kami</a></li>
619
+ <li><a href="#" class="text-gray-400 hover:text-white">Kontak</a></li>
620
+ </ul>
621
+ </div>
622
+
623
+ <!-- Categories -->
624
+ <div>
625
+ <h4 class="text-lg font-bold mb-4">Kategori</h4>
626
+ <ul class="space-y-2">
627
+ <li><a href="#" class="text-gray-400 hover:text-white">Alat Masak</a></li>
628
+ <li><a href="#" class="text-gray-400 hover:text-white">Alat Kesehatan</a></li>
629
+ <li><a href="#" class="text-gray-400 hover:text-white">Karpet</a></li>
630
+ <li><a href="#" class="text-gray-400 hover:text-white">Regulator</a></li>
631
+ <li><a href="#" class="text-gray-400 hover:text-white">Alat Pijat</a></li>
632
+ </ul>
633
+ </div>
634
+
635
+ <!-- Contact -->
636
+ <div>
637
+ <h4 class="text-lg font-bold mb-4">Hubungi Kami</h4>
638
+ <ul class="space-y-2 text-gray-400">
639
+ <li class="flex items-start">
640
+ <i class="fas fa-map-marker-alt mt-1 mr-3 text-blue-500"></i>
641
+ <span>Jl. Kesehatan No. 123, Jakarta Selatan, Indonesia</span>
642
+ </li>
643
+ <li class="flex items-center">
644
+ <i class="fas fa-phone-alt mr-3 text-blue-500"></i>
645
+ <span>021-12345678</span>
646
+ </li>
647
+ <li class="flex items-center">
648
+ <i class="fas fa-envelope mr-3 text-blue-500"></i>
649
+ <span>[email protected]</span>
650
+ </li>
651
+ </ul>
652
+ </div>
653
+ </div>
654
+
655
+ <div class="border-t border-gray-800 pt-6 flex flex-col md:flex-row justify-between items-center">
656
+ <p class="text-gray-400 mb-4 md:mb-0">© 2023 PasarSehat. All rights reserved.</p>
657
+ <div class="flex space-x-6">
658
+ <a href="#" class="text-gray-400 hover:text-white">Kebijakan Privasi</a>
659
+ <a href="#" class="text-gray-400 hover:text-white">Syarat & Ketentuan</a>
660
+ <a href="#" class="text-gray-400 hover:text-white">FAQ</a>
661
+ </div>
662
+ </div>
663
+ </div>
664
+ </footer>
665
+
666
+ <!-- Floating WhatsApp Button -->
667
+ <div class="fixed bottom-6 right-6 z-50">
668
+ <a href="https://wa.me/6281234567890" 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-transform transform hover:scale-110">
669
+ <i class="fab fa-whatsapp text-2xl"></i>
670
+ </a>
671
+ </div>
672
+
673
+ <script>
674
+ // Simple JavaScript for mobile menu toggle (can be expanded)
675
+ document.addEventListener('DOMContentLoaded', function() {
676
+ const mobileMenuButton = document.querySelector('button.md\\:hidden');
677
+ const mobileMenu = document.querySelector('.mobile-menu');
678
+
679
+ if(mobileMenuButton) {
680
+ mobileMenuButton.addEventListener('click', function() {
681
+ if(mobileMenu.classList.contains('hidden')) {
682
+ mobileMenu.classList.remove('hidden');
683
+ } else {
684
+ mobileMenu.classList.add('hidden');
685
+ }
686
+ });
687
+ }
688
+
689
+ // Random product rating generator for demo purposes
690
+ const ratings = document.querySelectorAll('.flex.text-yellow-400');
691
+ ratings.forEach(rating => {
692
+ const stars = rating.querySelectorAll('i');
693
+ const randomRating = Math.random() * 5;
694
+
695
+ stars.forEach((star, index) => {
696
+ if(index < Math.floor(randomRating)) {
697
+ star.classList.add('fas', 'fa-star');
698
+ star.classList.remove('far', 'fa-star', 'fa-star-half-alt');
699
+ } else if(index === Math.floor(randomRating) && randomRating % 1 >= 0.5) {
700
+ star.classList.add('fas', 'fa-star-half-alt');
701
+ star.classList.remove('far', 'fa-star');
702
+ } else {
703
+ star.classList.add('far', 'fa-star');
704
+ star.classList.remove('fas', 'fa-star-half-alt');
705
+ }
706
+ });
707
+ });
708
+ });
709
+ </script>
710
+ <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=taufikai/marketplace" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
711
+ </html>