Hugging Face's logo

Spaces:
Azimiwizard
/
webstore
Running

App Files Community
Azimiwizard commited on
Commit
82d041e
·
verified ·
1 Parent(s): 0cececc

undefined - Follow Up Deployment

Browse files
Files changed (1) hide show
  1. index.html +762 -18
index.html CHANGED
@@ -1,20 +1,764 @@
1
  <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <title>My app</title>
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
- <meta charset="utf-8">
7
- <script src="https://cdn.tailwindcss.com"></script>
8
- </head>
9
- <body class="flex justify-center items-center h-screen overflow-hidden bg-white font-sans text-center px-6">
10
- <div class="w-full">
11
- <span class="text-xs rounded-full mb-2 inline-block px-2 py-1 border border-amber-500/15 bg-amber-500/15 text-amber-500">🔥 New version dropped!</span>
12
- <h1 class="text-4xl lg:text-6xl font-bold font-sans">
13
- <span class="text-2xl lg:text-4xl text-gray-400 block font-medium">I'm ready to work,</span>
14
- Ask me anything.
15
- </h1>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
16
  </div>
17
- <img src="https://enzostvs-deepsite.hf.space/arrow.svg" class="absolute bottom-8 left-0 w-[100px] transform rotate-[30deg]" />
18
- <script></script>
19
- </body>
20
- </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>DeepStore - Premium Products</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <style>
9
+ :root {
10
+ --primary: #3a86ff;
11
+ --secondary: #ff006e;
12
+ --accent: #8338ec;
13
+ --dark: #1a1a2e;
14
+ --light: #f8f9fa;
15
+ --success: #38b000;
16
+ --warning: #ffbe0b;
17
+ --text: #333333;
18
+ --transition-slow: 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
19
+ --transition-fast: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
20
+ }
21
+
22
+ * {
23
+ margin: 0;
24
+ padding: 0;
25
+ box-sizing: border-box;
26
+ font-family: 'Poppins', sans-serif;
27
+ }
28
+
29
+ body {
30
+ background-color: var(--light);
31
+ color: var(--text);
32
+ overflow-x: hidden;
33
+ }
34
+
35
+ /* Header & Navigation */
36
+ header {
37
+ background: linear-gradient(135deg, var(--primary), var(--accent));
38
+ padding: 1rem 2rem;
39
+ position: fixed;
40
+ width: 100%;
41
+ top: 0;
42
+ z-index: 1000;
43
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
44
+ }
45
+
46
+ nav {
47
+ display: flex;
48
+ justify-content: space-between;
49
+ align-items: center;
50
+ }
51
+
52
+ .logo {
53
+ font-size: 1.8rem;
54
+ font-weight: 700;
55
+ color: white;
56
+ display: flex;
57
+ align-items: center;
58
+ }
59
+
60
+ .logo i {
61
+ margin-right: 10px;
62
+ color: var(--warning);
63
+ }
64
+
65
+ .nav-links {
66
+ display: flex;
67
+ list-style: none;
68
+ }
69
+
70
+ .nav-links li {
71
+ margin: 0 1rem;
72
+ }
73
+
74
+ .nav-links a {
75
+ color: white;
76
+ text-decoration: none;
77
+ font-weight: 500;
78
+ padding: 0.5rem 1rem;
79
+ border-radius: 30px;
80
+ transition: var(--transition-fast);
81
+ position: relative;
82
+ }
83
+
84
+ .nav-links a:after {
85
+ content: '';
86
+ position: absolute;
87
+ width: 0;
88
+ height: 2px;
89
+ bottom: 0;
90
+ left: 50%;
91
+ background-color: var(--warning);
92
+ transition: var(--transition-fast);
93
+ }
94
+
95
+ .nav-links a:hover:after {
96
+ width: 80%;
97
+ left: 10%;
98
+ }
99
+
100
+ .nav-links a.active {
101
+ background: rgba(255, 255, 255, 0.2);
102
+ }
103
+
104
+ .nav-links a.active:after {
105
+ width: 80%;
106
+ left: 10%;
107
+ }
108
+
109
+ .cart-btn {
110
+ background: var(--warning);
111
+ color: var(--dark);
112
+ border: none;
113
+ padding: 0.7rem 1.5rem;
114
+ border-radius: 30px;
115
+ font-weight: 600;
116
+ cursor: pointer;
117
+ transition: var(--transition-fast);
118
+ display: flex;
119
+ align-items: center;
120
+ }
121
+
122
+ .cart-btn:hover {
123
+ transform: translateY(-3px);
124
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
125
+ }
126
+
127
+ .cart-btn i {
128
+ margin-right: 8px;
129
+ }
130
+
131
+ /* Page Container */
132
+ .page-container {
133
+ margin-top: 80px;
134
+ min-height: calc(100vh - 80px);
135
+ padding: 2rem;
136
+ }
137
+
138
+ /* Page Transitions */
139
+ .page {
140
+ display: none;
141
+ opacity: 0;
142
+ transform: translateY(20px);
143
+ transition: var(--transition-slow);
144
+ }
145
+
146
+ .page.active {
147
+ display: block;
148
+ opacity: 1;
149
+ transform: translateY(0);
150
+ }
151
+
152
+ /* Hero Section */
153
+ .hero {
154
+ background: linear-gradient(rgba(58, 134, 255, 0.9), rgba(131, 56, 236, 0.9)), url('https://images.unsplash.com/photo-1552664730-d307ca884978?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');
155
+ background-size: cover;
156
+ background-position: center;
157
+ height: 500px;
158
+ border-radius: 20px;
159
+ display: flex;
160
+ flex-direction: column;
161
+ justify-content: center;
162
+ align-items: center;
163
+ text-align: center;
164
+ color: white;
165
+ margin-bottom: 3rem;
166
+ position: relative;
167
+ overflow: hidden;
168
+ }
169
+
170
+ .hero:before {
171
+ content: '';
172
+ position: absolute;
173
+ top: 0;
174
+ left: 0;
175
+ width: 100%;
176
+ height: 100%;
177
+ background: linear-gradient(45deg, var(--primary) 0%, transparent 100%);
178
+ opacity: 0.8;
179
+ }
180
+
181
+ .hero-content {
182
+ position: relative;
183
+ z-index: 2;
184
+ max-width: 800px;
185
+ padding: 0 2rem;
186
+ }
187
+
188
+ .hero h1 {
189
+ font-size: 3.5rem;
190
+ margin-bottom: 1rem;
191
+ text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
192
+ }
193
+
194
+ .hero p {
195
+ font-size: 1.2rem;
196
+ margin-bottom: 2rem;
197
+ line-height: 1.6;
198
+ }
199
+
200
+ .cta-button {
201
+ background: var(--warning);
202
+ color: var(--dark);
203
+ border: none;
204
+ padding: 1rem 2.5rem;
205
+ border-radius: 50px;
206
+ font-size: 1.1rem;
207
+ font-weight: 600;
208
+ cursor: pointer;
209
+ transition: var(--transition-fast);
210
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
211
+ }
212
+
213
+ .cta-button:hover {
214
+ transform: translateY(-5px);
215
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
216
+ }
217
+
218
+ /* Features Section */
219
+ .features {
220
+ display: grid;
221
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
222
+ gap: 2rem;
223
+ margin-bottom: 3rem;
224
+ }
225
+
226
+ .feature-card {
227
+ background: white;
228
+ border-radius: 15px;
229
+ padding: 2rem;
230
+ box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
231
+ transition: var(--transition-fast);
232
+ text-align: center;
233
+ }
234
+
235
+ .feature-card:hover {
236
+ transform: translateY(-10px);
237
+ box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
238
+ }
239
+
240
+ .feature-icon {
241
+ font-size: 3rem;
242
+ margin-bottom: 1.5rem;
243
+ color: var(--primary);
244
+ }
245
+
246
+ .feature-card h3 {
247
+ font-size: 1.5rem;
248
+ margin-bottom: 1rem;
249
+ color: var(--dark);
250
+ }
251
+
252
+ .feature-card p {
253
+ color: #666;
254
+ line-height: 1.6;
255
+ }
256
+
257
+ /* Product Categories */
258
+ .categories {
259
+ display: grid;
260
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
261
+ gap: 2rem;
262
+ margin-bottom: 3rem;
263
+ }
264
+
265
+ .category-card {
266
+ height: 300px;
267
+ border-radius: 15px;
268
+ overflow: hidden;
269
+ position: relative;
270
+ cursor: pointer;
271
+ box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
272
+ transition: var(--transition-slow);
273
+ }
274
+
275
+ .category-card:hover {
276
+ transform: translateY(-10px) scale(1.02);
277
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
278
+ }
279
+
280
+ .category-card img {
281
+ width: 100%;
282
+ height: 100%;
283
+ object-fit: cover;
284
+ transition: var(--transition-slow);
285
+ }
286
+
287
+ .category-card:hover img {
288
+ transform: scale(1.1);
289
+ }
290
+
291
+ .category-overlay {
292
+ position: absolute;
293
+ bottom: 0;
294
+ left: 0;
295
+ width: 100%;
296
+ background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
297
+ padding: 2rem;
298
+ color: white;
299
+ }
300
+
301
+ .category-overlay h3 {
302
+ font-size: 1.8rem;
303
+ margin-bottom: 0.5rem;
304
+ }
305
+
306
+ .category-overlay p {
307
+ opacity: 0.9;
308
+ }
309
+
310
+ /* Products Grid */
311
+ .products-grid {
312
+ display: grid;
313
+ grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
314
+ gap: 2rem;
315
+ }
316
+
317
+ .product-card {
318
+ background: white;
319
+ border-radius: 15px;
320
+ overflow: hidden;
321
+ box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
322
+ transition: var(--transition-fast);
323
+ }
324
+
325
+ .product-card:hover {
326
+ transform: translateY(-10px);
327
+ box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
328
+ }
329
+
330
+ .product-image {
331
+ height: 200px;
332
+ overflow: hidden;
333
+ }
334
+
335
+ .product-image img {
336
+ width: 100%;
337
+ height: 100%;
338
+ object-fit: cover;
339
+ transition: var(--transition-slow);
340
+ }
341
+
342
+ .product-card:hover .product-image img {
343
+ transform: scale(1.1);
344
+ }
345
+
346
+ .product-info {
347
+ padding: 1.5rem;
348
+ }
349
+
350
+ .product-info h3 {
351
+ font-size: 1.2rem;
352
+ margin-bottom: 0.5rem;
353
+ }
354
+
355
+ .product-price {
356
+ font-size: 1.3rem;
357
+ font-weight: 700;
358
+ color: var(--primary);
359
+ margin-bottom: 1rem;
360
+ }
361
+
362
+ .add-to-cart {
363
+ background: var(--primary);
364
+ color: white;
365
+ border: none;
366
+ padding: 0.7rem 1.5rem;
367
+ border-radius: 30px;
368
+ font-weight: 500;
369
+ cursor: pointer;
370
+ transition: var(--transition-fast);
371
+ width: 100%;
372
+ }
373
+
374
+ .add-to-cart:hover {
375
+ background: var(--accent);
376
+ }
377
+
378
+ /* Page Title */
379
+ .page-title {
380
+ font-size: 2.5rem;
381
+ margin-bottom: 2rem;
382
+ padding-bottom: 1rem;
383
+ border-bottom: 3px solid var(--primary);
384
+ display: inline-block;
385
+ }
386
+
387
+ /* Footer */
388
+ footer {
389
+ background: var(--dark);
390
+ color: white;
391
+ padding: 3rem 2rem;
392
+ margin-top: 4rem;
393
+ }
394
+
395
+ .footer-content {
396
+ display: grid;
397
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
398
+ gap: 2rem;
399
+ }
400
+
401
+ .footer-section h3 {
402
+ font-size: 1.5rem;
403
+ margin-bottom: 1.5rem;
404
+ color: var(--warning);
405
+ }
406
+
407
+ .footer-section p {
408
+ line-height: 1.6;
409
+ margin-bottom: 1rem;
410
+ }
411
+
412
+ .footer-links {
413
+ list-style: none;
414
+ }
415
+
416
+ .footer-links li {
417
+ margin-bottom: 0.8rem;
418
+ }
419
+
420
+ .footer-links a {
421
+ color: #ddd;
422
+ text-decoration: none;
423
+ transition: var(--transition-fast);
424
+ }
425
+
426
+ .footer-links a:hover {
427
+ color: var(--warning);
428
+ margin-left: 5px;
429
+ }
430
+
431
+ .social-icons {
432
+ display: flex;
433
+ gap: 1rem;
434
+ margin-top: 1.5rem;
435
+ }
436
+
437
+ .social-icons a {
438
+ color: white;
439
+ font-size: 1.5rem;
440
+ transition: var(--transition-fast);
441
+ }
442
+
443
+ .social-icons a:hover {
444
+ color: var(--warning);
445
+ transform: translateY(-5px);
446
+ }
447
+
448
+ .copyright {
449
+ text-align: center;
450
+ margin-top: 3rem;
451
+ padding-top: 1.5rem;
452
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
453
+ }
454
+
455
+ /* Responsive Design */
456
+ @media (max-width: 768px) {
457
+ .nav-links {
458
+ display: none;
459
+ }
460
+
461
+ .hero h1 {
462
+ font-size: 2.5rem;
463
+ }
464
+
465
+ .hero p {
466
+ font-size: 1rem;
467
+ }
468
+
469
+ .page-title {
470
+ font-size: 2rem;
471
+ }
472
+ }
473
+ </style>
474
+ </head>
475
+ <body>
476
+ <!-- Header & Navigation -->
477
+ <header>
478
+ <nav>
479
+ <div class="logo">
480
+ <i class="fas fa-store"></i>
481
+ <span>DeepStore</span>
482
+ </div>
483
+ <ul class="nav-links">
484
+ <li><a href="#" class="active" data-page="home">Home</a></li>
485
+ <li><a href="#" data-page="kitchen">Kitchen</a></li>
486
+ <li><a href="#" data-page="accessories">Accessories</a></li>
487
+ <li><a href="#" data-page="clothing">Clothing</a></li>
488
+ <li><a href="#" data-page="electronics">Electronics</a></li>
489
+ </ul>
490
+ <button class="cart-btn">
491
+ <i class="fas fa-shopping-cart"></i>
492
+ <span>Cart (0)</span>
493
+ </button>
494
+ </nav>
495
+ </header>
496
+
497
+ <!-- Page Container -->
498
+ <div class="page-container">
499
+ <!-- Home Page -->
500
+ <div id="home" class="page active">
501
+ <div class="hero">
502
+ <div class="hero-content">
503
+ <h1>Welcome to DeepStore</h1>
504
+ <p>Discover premium products with exceptional quality and unbeatable prices. We carefully curate our collection to bring you the best items for your home, wardrobe, and lifestyle.</p>
505
+ <button class="cta-button">Shop Now</button>
506
+ </div>
507
+ </div>
508
+
509
+ <div class="features">
510
+ <div class="feature-card">
511
+ <div class="feature-icon">
512
+ <i class="fas fa-truck"></i>
513
+ </div>
514
+ <h3>Free Shipping</h3>
515
+ <p>Enjoy free shipping on all orders over $50. Fast delivery to your doorstep.</p>
516
+ </div>
517
+ <div class="feature-card">
518
+ <div class="feature-icon">
519
+ <i class="fas fa-shield-alt"></i>
520
+ </div>
521
+ <h3>Secure Payment</h3>
522
+ <p>Your payments are secure with our encrypted checkout process.</p>
523
+ </div>
524
+ <div class="feature-card">
525
+ <div class="feature-icon">
526
+ <i class="fas fa-undo"></i>
527
+ </div>
528
+ <h3>Easy Returns</h3>
529
+ <p>Not satisfied? Return within 30 days for a full refund, no questions asked.</p>
530
+ </div>
531
+ </div>
532
+
533
+ <h2 class="page-title">Shop by Category</h2>
534
+ <div class="categories">
535
+ <div class="category-card" data-page="kitchen">
536
+ <img src="https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Kitchen Supplies">
537
+ <div class="category-overlay">
538
+ <h3>Kitchen</h3>
539
+ <p>Upgrade your culinary experience</p>
540
+ </div>
541
+ </div>
542
+ <div class="category-card" data-page="accessories">
543
+ <img src="https://images.unsplash.com/photo-1591565244552-a5a85b5c911d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Accessories">
544
+ <div class="category-overlay">
545
+ <h3>Accessories</h3>
546
+ <p>Complete your look</p>
547
+ </div>
548
+ </div>
549
+ <div class="category-card" data-page="clothing">
550
+ <img src="https://images.unsplash.com/photo-1445205170230-053b83016050?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2071&q=80" alt="Clothing">
551
+ <div class="category-overlay">
552
+ <h3>Clothing</h3>
553
+ <p>Style and comfort combined</p>
554
+ </div>
555
+ </div>
556
+ <div class="category-card" data-page="electronics">
557
+ <img src="https://images.unsplash.com/photo-1468495244123-6c6c332eeece?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2072&q=80" alt="Electronics">
558
+ <div class="category-overlay">
559
+ <h3>Electronics</h3>
560
+ <p>Cutting-edge technology</p>
561
+ </div>
562
+ </div>
563
+ </div>
564
+ </div>
565
+
566
+ <!-- Kitchen Page -->
567
+ <div id="kitchen" class="page">
568
+ <h2 class="page-title">Kitchen Supplies</h2>
569
+ <div class="products-grid">
570
+ <div class="product-card">
571
+ <div class="product-image">
572
+ <img src="https://images.unsplash.com/photo-1583778176475-6c7f6d38f6a9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Premium Knife Set">
573
+ </div>
574
+ <div class="product-info">
575
+ <h3>Premium Knife Set</h3>
576
+ <p>Professional grade knives for the home chef</p>
577
+ <div class="product-price">$129.99</div>
578
+ <button class="add-to-cart">Add to Cart</button>
579
+ </div>
580
+ </div>
581
+ <div class="product-card">
582
+ <div class="product-image">
583
+ <img src="https://images.unsplash.com/photo-1594736797933-d0401ba2fe65?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" alt="Non-Stick Cookware">
584
+ </div>
585
+ <div class="product-info">
586
+ <h3>Non-Stick Cookware</h3>
587
+ <p>10-piece set for all your cooking needs</p>
588
+ <div class="product-price">$199.99</div>
589
+ <button class="add-to-cart">Add to Cart</button>
590
+ </div>
591
+ </div>
592
+ <div class="product-card">
593
+ <div class="product-image">
594
+ <img src="https://images.unsplash.com/photo-1596038250181-7c2dfa5e5db6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Smart Blender">
595
+ </div>
596
+ <div class="product-info">
597
+ <h3>Smart Blender</h3>
598
+ <p>With 10 speed settings and wireless connectivity</p>
599
+ <div class="product-price">$89.99</div>
600
+ <button class="add-to-cart">Add to Cart</button>
601
+ </div>
602
+ </div>
603
+ <div class="product-card">
604
+ <div class="product-image">
605
+ <img src="https://images.unsplash.com/photo-1556906781-2f0520405b71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Coffee Maker">
606
+ </div>
607
+ <div class="product-info">
608
+ <h3>Premium Coffee Maker</h3>
609
+ <p>Brew the perfect cup every time</p>
610
+ <div class="product-price">$149.99</div>
611
+ <button class="add-to-cart">Add to Cart</button>
612
+ </div>
613
+ </div>
614
+ </div>
615
+ </div>
616
+
617
+ <!-- Other category pages would follow similar structure -->
618
+ <!-- For brevity, I'll include just one more category page -->
619
+
620
+ <!-- Electronics Page -->
621
+ <div id="electronics" class="page">
622
+ <h2 class="page-title">Electronics</h2>
623
+ <div class="products-grid">
624
+ <div class="product-card">
625
+ <div class="product-image">
626
+ <img src="https://images.unsplash.com/photo-1510557880182-3d4d3cba35a5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Gaming Console">
627
+ </div>
628
+ <div class="product-info">
629
+ <h3>Next-Gen Gaming Console</h3>
630
+ <p>Experience gaming like never before</p>
631
+ <div class="product-price">$499.99</div>
632
+ <button class="add-to-cart">Add to Cart</button>
633
+ </div>
634
+ </div>
635
+ <div class="product-card">
636
+ <div class="product-image">
637
+ <img src="https://images.unsplash.com/photo-1546868871-7041f2a55e12?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1964&q=80" alt="Wireless Earbuds">
638
+ </div>
639
+ <div class="product-info">
640
+ <h3>Wireless Earbuds</h3>
641
+ <p>Premium sound quality with noise cancellation</p>
642
+ <div class="product-price">$159.99</div>
643
+ <button class="add-to-cart">Add to Cart</button>
644
+ </div>
645
+ </div>
646
+ <div class="product-card">
647
+ <div class="product-image">
648
+ <img src="https://images.unsplash.com/photo-1530893609608-32a9af3aa95c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2064&q=80" alt="Smart Watch">
649
+ </div>
650
+ <div class="product-info">
651
+ <h3>Smart Watch</h3>
652
+ <p>Track your health and stay connected</p>
653
+ <div class="product-price">$249.99</div>
654
+ <button class="add-to-cart">Add to Cart</button>
655
+ </div>
656
+ </div>
657
+ <div class="product-card">
658
+ <div class="product-image">
659
+ <img src="https://images.unsplash.com/photo-1585298723682-7115561c51b7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1964&q=80" alt="4K Monitor">
660
+ </div>
661
+ <div class="product-info">
662
+ <h3>27" 4K Monitor</h3>
663
+ <p>Crystal clear display for work and play</p>
664
+ <div class="product-price">$349.99</div>
665
+ <button class="add-to-cart">Add to Cart</button>
666
+ </div>
667
+ </div>
668
+ </div>
669
+ </div>
670
+
671
+ <!-- Additional category pages would be here -->
672
+ <!-- For this example, I've only included Home, Kitchen, and Electronics -->
673
  </div>
674
+
675
+ <!-- Footer -->
676
+ <footer>
677
+ <div class="footer-content">
678
+ <div class="footer-section">
679
+ <h3>About DeepStore</h3>
680
+ <p>We are committed to providing high-quality products with exceptional customer service. Our team carefully selects each item in our collection to ensure the best shopping experience.</p>
681
+ </div>
682
+ <div class="footer-section">
683
+ <h3>Quick Links</h3>
684
+ <ul class="footer-links">
685
+ <li><a href="#" data-page="home">Home</a></li>
686
+ <li><a href="#" data-page="kitchen">Kitchen Supplies</a></li>
687
+ <li><a href="#" data-page="accessories">Accessories</a></li>
688
+ <li><a href="#" data-page="clothing">Clothing</a></li>
689
+ <li><a href="#" data-page="electronics">Electronics</a></li>
690
+ </ul>
691
+ </div>
692
+ <div class="footer-section">
693
+ <h3>Contact Us</h3>
694
+ <p><i class="fas fa-map-marker-alt"></i> 123 Commerce St, City, Country</p>
695
+ <p><i class="fas fa-phone"></i> +1 234 567 8900</p>
696
+ <p><i class="fas fa-envelope"></i> support@deepstore.com</p>
697
+ <div class="social-icons">
698
+ <a href="#"><i class="fab fa-facebook"></i></a>
699
+ <a href="#"><i class="fab fa-twitter"></i></a>
700
+ <a href="#"><i class="fab fa-instagram"></i></a>
701
+ <a href="#"><i class="fab fa-pinterest"></i></a>
702
+ </div>
703
+ </div>
704
+ </div>
705
+ <div class="copyright">
706
+ <p>&copy; 2023 DeepStore. All rights reserved.</p>
707
+ </div>
708
+ </footer>
709
+
710
+ <script>
711
+ // Page Navigation
712
+ document.addEventListener('DOMContentLoaded', function() {
713
+ const navLinks = document.querySelectorAll('.nav-links a, .footer-links a, .category-card');
714
+ const pages = document.querySelectorAll('.page');
715
+
716
+ // Function to switch pages
717
+ function switchPage(pageId) {
718
+ pages.forEach(page => {
719
+ page.classList.remove('active');
720
+ });
721
+ document.getElementById(pageId).classList.add('active');
722
+
723
+ // Update active nav link
724
+ navLinks.forEach(link => {
725
+ link.classList.remove('active');
726
+ if (link.getAttribute('data-page') === pageId) {
727
+ link.classList.add('active');
728
+ }
729
+ });
730
+ }
731
+
732
+ // Add click event to all navigation links
733
+ navLinks.forEach(link => {
734
+ link.addEventListener('click', function(e) {
735
+ e.preventDefault();
736
+ const pageId = this.getAttribute('data-page');
737
+ switchPage(pageId);
738
+ });
739
+ });
740
+
741
+ // Add to cart functionality
742
+ const addToCartButtons = document.querySelectorAll('.add-to-cart');
743
+ const cartCount = document.querySelector('.cart-btn span');
744
+ let count = 0;
745
+
746
+ addToCartButtons.forEach(button => {
747
+ button.addEventListener('click', function() {
748
+ count++;
749
+ cartCount.textContent = `Cart (${count})`;
750
+
751
+ // Animation for button
752
+ this.textContent = 'Added!';
753
+ this.style.background = 'var(--success)';
754
+
755
+ setTimeout(() => {
756
+ this.textContent = 'Add to Cart';
757
+ this.style.background = '';
758
+ }, 1500);
759
+ });
760
+ });
761
+ });
762
+ </script>
763
+ </body>
764
+ </html>