Hugging Face's logo

Spaces:
DhruvinDI
/
deepsite
Running

App Files Community
DhruvinDI commited on
Commit
0646459
·
verified ·
1 Parent(s): 59b576a

Add 1 files

Browse files
Files changed (1) hide show
  1. index.html +106 -7
index.html CHANGED
@@ -49,6 +49,18 @@
49
  transform: translateY(-5px);
50
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
51
  }
 
 
 
 
 
 
 
 
 
 
 
 
52
  </style>
53
  </head>
54
  <body class="bg-gray-50 font-sans">
@@ -93,7 +105,7 @@
93
  <!-- Hero Section -->
94
  <section class="bg-gradient-to-r from-indigo-500 to-purple-600 text-white py-12">
95
  <div class="container mx-auto px-4 text-center">
96
- <h2 class="text-4xl font-bold mb-4">Summer Collection 2023</h2>
97
  <p class="text-xl mb-8 max-w-2xl mx-auto">Discover our latest arrivals with up to 30% off on selected items</p>
98
  <button class="bg-white text-indigo-600 px-6 py-2 rounded-full font-medium hover:bg-gray-100 transition shadow-lg">Shop Now</button>
99
  </div>
@@ -210,7 +222,7 @@
210
  <div>
211
  <span class="font-bold text-indigo-600">$149.99</span>
212
  </div>
213
- <button class="add-to-cart bg-indigo-600 text-white p-2 rounded-full hover:bg-indigo-700 transition" data-id="3" data-name="Wireless Headphones" data-price="149.99" data-image="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80">
214
  <i class="fas fa-cart-plus"></i>
215
  </button>
216
  </div>
@@ -225,6 +237,17 @@
225
  <div class="p-4">
226
  <h3 class="font-bold text-gray-800 mb-1">Travel Backpack</h3>
227
  <p class="text-gray-600 text-sm mb-2">Waterproof with USB charging port</p>
 
 
 
 
 
 
 
 
 
 
 
228
  </div>
229
  </main>
230
 
@@ -247,11 +270,11 @@
247
  </div>
248
  <div class="p-6">
249
  <div class="flex items-center text-sm text-gray-500 mb-2">
250
- <span>June 15, 2023</span>
251
  <span class="mx-2">•</span>
252
  <span>5 min read</span>
253
  </div>
254
- <h3 class="text-xl font-bold text-gray-800 mb-3">Top Summer Fashion Trends for 2023</h3>
255
  <p class="text-gray-600 mb-4">Discover the must-have styles and colors that will dominate this summer season...</p>
256
  <a href="#" class="text-indigo-600 font-medium hover:text-indigo-700 transition flex items-center">
257
  Read More
@@ -270,7 +293,7 @@
270
  </div>
271
  <div class="p-6">
272
  <div class="flex items-center text-sm text-gray-500 mb-2">
273
- <span>June 10, 2023</span>
274
  <span class="mx-2">•</span>
275
  <span>7 min read</span>
276
  </div>
@@ -293,7 +316,7 @@
293
  </div>
294
  <div class="p-6">
295
  <div class="flex items-center text-sm text-gray-500 mb-2">
296
- <span>June 5, 2023</span>
297
  <span class="mx-2">•</span>
298
  <span>4 min read</span>
299
  </div>
@@ -315,6 +338,82 @@
315
  </div>
316
  </section>
317
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
318
  <!-- Newsletter -->
319
  <section class="bg-gray-100 py-12">
320
  <div class="container mx-auto px-4 text-center">
@@ -366,7 +465,7 @@
366
  </div>
367
  </div>
368
  <div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-400">
369
- <p>&copy; 2023 ShopEase. All rights reserved.</p>
370
  </div>
371
  </div>
372
  </footer>
 
49
  transform: translateY(-5px);
50
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
51
  }
52
+
53
+ /* Review card styling */
54
+ .review-card {
55
+ transition: all 0.3s ease;
56
+ }
57
+ .review-card:hover {
58
+ transform: translateY(-5px);
59
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
60
+ }
61
+ .rating-stars {
62
+ color: #f59e0b;
63
+ }
64
  </style>
65
  </head>
66
  <body class="bg-gray-50 font-sans">
 
105
  <!-- Hero Section -->
106
  <section class="bg-gradient-to-r from-indigo-500 to-purple-600 text-white py-12">
107
  <div class="container mx-auto px-4 text-center">
108
+ <h2 class="text-4xl font-bold mb-4">Summer Collection 2025</h2>
109
  <p class="text-xl mb-8 max-w-2xl mx-auto">Discover our latest arrivals with up to 30% off on selected items</p>
110
  <button class="bg-white text-indigo-600 px-6 py-2 rounded-full font-medium hover:bg-gray-100 transition shadow-lg">Shop Now</button>
111
  </div>
 
222
  <div>
223
  <span class="font-bold text-indigo-600">$149.99</span>
224
  </div>
225
+ <button class="add-to-cart bg-indigo-600 text-white p-2 rounded-full hover:bg-indigo-700 transition, data-id="3" data-name="Wireless Headphones" data-price="149.99" data-image="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80">
226
  <i class="fas fa-cart-plus"></i>
227
  </button>
228
  </div>
 
237
  <div class="p-4">
238
  <h3 class="font-bold text-gray-800 mb-1">Travel Backpack</h3>
239
  <p class="text-gray-600 text-sm mb-2">Waterproof with USB charging port</p>
240
+ <div class="flex justify-between items-center">
241
+ <div>
242
+ <span class="font-bold text-indigo-600">$79.99</span>
243
+ </div>
244
+ <button class="add-to-cart bg-indigo-600 text-white p-2 rounded-full hover:bg-indigo-700 transition" data-id="4" data-name="Travel Backpack" data-price="79.99" data-image="https://images.unsplash.com/photo-1546868871-7041f2a55e12?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1064&q=80">
245
+ <i class="fas fa-cart-plus"></i>
246
+ </button>
247
+ </div>
248
+ </div>
249
+ </div>
250
+ </div>
251
  </div>
252
  </main>
253
 
 
270
  </div>
271
  <div class="p-6">
272
  <div class="flex items-center text-sm text-gray-500 mb-2">
273
+ <span>June 15, 2025</span>
274
  <span class="mx-2">•</span>
275
  <span>5 min read</span>
276
  </div>
277
+ <h3 class="text-xl font-bold text-gray-800 mb-3">Top Summer Fashion Trends for 2025</h3>
278
  <p class="text-gray-600 mb-4">Discover the must-have styles and colors that will dominate this summer season...</p>
279
  <a href="#" class="text-indigo-600 font-medium hover:text-indigo-700 transition flex items-center">
280
  Read More
 
293
  </div>
294
  <div class="p-6">
295
  <div class="flex items-center text-sm text-gray-500 mb-2">
296
+ <span>June 10, 2025</span>
297
  <span class="mx-2">•</span>
298
  <span>7 min read</span>
299
  </div>
 
316
  </div>
317
  <div class="p-6">
318
  <div class="flex items-center text-sm text-gray-500 mb-2">
319
+ <span>June 5, 2025</span>
320
  <span class="mx-2">•</span>
321
  <span>4 min read</span>
322
  </div>
 
338
  </div>
339
  </section>
340
 
341
+ <!-- Client Reviews Section -->
342
+ <section class="py-16 bg-white">
343
+ <div class="container mx-auto px-4">
344
+ <div class="text-center mb-12">
345
+ <h2 class="text-3xl font-bold text-gray-800 mb-2">What Our Clients Say</h2>
346
+ <p class="text-gray-600 max-w-2xl mx-auto">Trusted by thousands of customers worldwide</p>
347
+ </div>
348
+
349
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
350
+ <!-- Review 1 -->
351
+ <div class="bg-gray-50 p-6 rounded-lg review-card">
352
+ <div class="flex items-center mb-4">
353
+ <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Sarah Johnson" class="w-12 h-12 rounded-full object-cover">
354
+ <div class="ml-4">
355
+ <h4 class="font-bold">Sarah Johnson</h4>
356
+ <div class="flex rating-stars">
357
+ <i class="fas fa-star"></i>
358
+ <i class="fas fa-star"></i>
359
+ <i class="fas fa-star"></i>
360
+ <i class="fas fa-star"></i>
361
+ <i class="fas fa-star"></i>
362
+ </div>
363
+ </div>
364
+ </div>
365
+ <p class="text-gray-600 mb-4">"I've been shopping with ShopEase for over a year now and I'm consistently impressed with their product quality and customer service. The shipping is always fast and the items arrive exactly as described."</p>
366
+ <div class="text-sm text-gray-500">June 12, 2025</div>
367
+ </div>
368
+
369
+ <!-- Review 2 -->
370
+ <div class="bg-gray-50 p-6 rounded-lg review-card">
371
+ <div class="flex items-center mb-4">
372
+ <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Michael Chen" class="w-12 h-12 rounded-full object-cover">
373
+ <div class="ml-4">
374
+ <h4 class="font-bold">Michael Chen</h4>
375
+ <div class="flex rating-stars">
376
+ <i class="fas fa-star"></i>
377
+ <i class="fas fa-star"></i>
378
+ <i class="fas fa-star"></i>
379
+ <i class="fas fa-star"></i>
380
+ <i class="fas fa-star-half-alt"></i>
381
+ </div>
382
+ </div>
383
+ </div>
384
+ <p class="text-gray-600 mb-4">"The selection of electronics at ShopEase is unmatched. I recently purchased a smartwatch and it's been working perfectly. Their return policy is also very customer-friendly, though I haven't needed to use it yet!"</p>
385
+ <div class="text-sm text-gray-500">May 28, 2025</div>
386
+ </div>
387
+
388
+ <!-- Review 3 -->
389
+ <div class="bg-gray-50 p-6 rounded-lg review-card">
390
+ <div class="flex items-center mb-4">
391
+ <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Emma Rodriguez" class="w-12 h-12 rounded-full object-cover">
392
+ <div class="ml-4">
393
+ <h4 class="font-bold">Emma Rodriguez</h4>
394
+ <div class="flex rating-stars">
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
+ </div>
402
+ </div>
403
+ <p class="text-gray-600 mb-4">"I ordered a travel backpack for my upcoming trip and it exceeded all my expectations. The quality is outstanding and it has so many useful compartments. ShopEase is now my go-to for all travel essentials."</p>
404
+ <div class="text-sm text-gray-500">April 15, 2025</div>
405
+ </div>
406
+ </div>
407
+
408
+ <div class="mt-10 text-center">
409
+ <button class="inline-flex items-center px-6 py-2 border border-indigo-600 text-indigo-600 rounded-lg hover:bg-indigo-600 hover:text-white transition">
410
+ <i class="fas fa-plus mr-2"></i>
411
+ Add Your Review
412
+ </button>
413
+ </div>
414
+ </div>
415
+ </section>
416
+
417
  <!-- Newsletter -->
418
  <section class="bg-gray-100 py-12">
419
  <div class="container mx-auto px-4 text-center">
 
465
  </div>
466
  </div>
467
  <div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-400">
468
+ <p>&copy; 2025 ShopEase. All rights reserved.</p>
469
  </div>
470
  </div>
471
  </footer>