Hugging Face's logo

Spaces:
1111111malik
/
my-old
Running

App Files Community
1111111malik commited on
Commit
be462b9
·
verified ·
1 Parent(s): c68c53d

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +888 -269
  2. prompts.txt +1 -0
index.html CHANGED
@@ -3,28 +3,93 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>3D E-Commerce Store</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <style>
10
- .product-card {
 
11
  transform-style: preserve-3d;
12
- transition: transform 0.5s ease;
13
- box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
14
  }
15
 
16
- .product-image {
17
- transform: translateZ(30px);
 
 
 
 
 
 
 
18
  }
19
 
20
- .product-info {
21
- transform: translateZ(20px);
 
 
22
  }
23
 
24
- .hero-section {
25
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
26
  }
27
 
 
28
  .nav-link {
29
  position: relative;
30
  }
@@ -36,7 +101,7 @@
36
  height: 2px;
37
  bottom: -2px;
38
  left: 0;
39
- background-color: white;
40
  transition: width 0.3s ease;
41
  }
42
 
@@ -44,267 +109,466 @@
44
  width: 100%;
45
  }
46
 
47
- @keyframes float {
48
- 0% { transform: translateY(0px); }
49
- 50% { transform: translateY(-10px); }
50
- 100% { transform: translateY(0px); }
51
  }
52
 
53
- .floating {
54
- animation: float 3s ease-in-out infinite;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
55
  }
56
  </style>
57
  </head>
58
- <body class="bg-gray-100 font-sans">
59
- <!-- Navigation -->
60
- <nav class="bg-gray-900 text-white shadow-lg fixed w-full z-50">
61
- <div class="container mx-auto px-6 py-3 flex justify-between items-center">
62
- <div class="flex items-center space-x-4">
63
- <div class="text-2xl font-bold">
64
- <span class="text-blue-400">3D</span>Shop
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
65
  </div>
66
  </div>
67
- <div class="hidden md:flex items-center space-x-8">
68
- <a href="#" class="nav-link">Home</a>
69
- <a href="#" class="nav-link">Products</a>
70
- <a href="#" class="nav-link">Categories</a>
71
- <a href="#" class="nav-link">About</a>
72
- <a href="#" class="nav-link">Contact</a>
73
- </div>
74
- <div class="flex items-center space-x-4">
75
- <a href="#" class="text-white hover:text-blue-400">
76
- <i class="fas fa-search"></i>
77
- </a>
78
- <a href="#" class="text-white hover:text-blue-400">
79
- <i class="fas fa-shopping-cart"></i>
80
- <span class="bg-blue-500 text-xs rounded-full h-5 w-5 flex items-center justify-center -mt-2 -mr-2 relative">3</span>
81
- </a>
82
- <a href="#" class="text-white hover:text-blue-400">
83
- <i class="fas fa-user"></i>
84
- </a>
85
- <button class="md:hidden focus:outline-none">
86
- <i class="fas fa-bars"></i>
87
- </button>
88
  </div>
89
  </div>
90
  </nav>
91
 
92
- <!-- Hero Section -->
93
- <section class="hero-section text-white pt-32 pb-20">
94
- <div class="container mx-auto px-6 flex flex-col md:flex-row items-center">
95
- <div class="md:w-1/2 mb-10 md:mb-0">
96
- <h1 class="text-4xl md:text-6xl font-bold leading-tight mb-6">Explore Our <span class="text-blue-200">3D</span> Products</h1>
97
- <p class="text-xl mb-8">Discover the future of shopping with our immersive 3D product experience.</p>
98
- <button class="bg-white text-gray-800 px-8 py-3 rounded-full font-bold hover:bg-gray-200 transition duration-300 transform hover:scale-105">
99
- Shop Now
100
- </button>
101
- </div>
102
- <div class="md:w-1/2 flex justify-center">
103
- <div class="relative floating">
104
- <div class="w-64 h-64 bg-blue-400 rounded-2xl shadow-2xl transform rotate-12"></div>
105
- <div class="w-64 h-64 bg-purple-500 rounded-2xl shadow-2xl absolute top-0 left-0 transform -rotate-6"></div>
106
- <div class="w-64 h-64 bg-white rounded-2xl shadow-2xl absolute top-0 left-0 opacity-20"></div>
 
 
 
 
 
 
 
 
 
 
 
107
  </div>
108
  </div>
109
  </div>
 
110
  </section>
111
 
112
- <!-- Featured Products -->
113
- <section class="py-16 bg-white">
114
- <div class="container mx-auto px-6">
115
- <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Featured Products</h2>
116
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
117
- <!-- Product 1 -->
118
- <div class="product-card bg-white rounded-xl p-6 cursor-pointer"
119
- onmousemove="tiltCard(this, event)"
120
- onmouseleave="resetCard(this)">
121
- <div class="product-image mb-6 flex justify-center">
122
- <img src="https://images.unsplash.com/photo-1546868871-7041f2a55e12?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8c21hcnR3YXRjaHxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60"
123
- alt="Smart Watch"
124
- class="w-64 h-64 object-contain">
125
- </div>
126
- <div class="product-info">
127
- <h3 class="text-xl font-bold text-gray-800 mb-2">Pro Smart Watch</h3>
128
- <div class="flex items-center mb-4">
129
- <div class="flex text-yellow-400">
 
 
 
 
 
 
 
 
 
 
 
 
 
130
  <i class="fas fa-star"></i>
131
  <i class="fas fa-star"></i>
132
  <i class="fas fa-star"></i>
133
  <i class="fas fa-star"></i>
134
  <i class="fas fa-star-half-alt"></i>
135
  </div>
136
- <span class="text-gray-600 ml-2">(48 reviews)</span>
137
  </div>
138
- <p class="text-gray-600 mb-4">The ultimate smartwatch with health tracking and premium design.</p>
139
  <div class="flex justify-between items-center">
140
- <span class="text-2xl font-bold text-gray-800">$249.99</span>
141
- <button class="bg-blue-500 text-white px-4 py-2 rounded-full hover:bg-blue-600 transition">
142
- <i class="fas fa-cart-plus"></i> Add to Cart
143
  </button>
144
  </div>
145
  </div>
146
- </div>
147
-
148
- <!-- Product 2 -->
149
- <div class="product-card bg-white rounded-xl p-6 cursor-pointer"
150
- onmousemove="tiltCard(this, event)"
151
- onmouseleave="resetCard(this)">
152
- <div class="product-image mb-6 flex justify-center">
153
- <img src="https://images.unsplash.com/photo-1592899677977-9c10ca588bbd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8aGVhZHBob25lc3xlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60"
154
- alt="Headphones"
155
- class="w-64 h-64 object-contain">
156
- </div>
157
- <div class="product-info">
158
- <h3 class="text-xl font-bold text-gray-800 mb-2">Noise Cancelling Headphones</h3>
159
- <div class="flex items-center mb-4">
160
- <div class="flex text-yellow-400">
161
  <i class="fas fa-star"></i>
162
  <i class="fas fa-star"></i>
163
  <i class="fas fa-star"></i>
164
  <i class="fas fa-star"></i>
165
  <i class="fas fa-star"></i>
166
  </div>
167
- <span class="text-gray-600 ml-2">(112 reviews)</span>
168
  </div>
169
- <p class="text-gray-600 mb-4">Premium sound quality with active noise cancellation technology.</p>
170
  <div class="flex justify-between items-center">
171
- <span class="text-2xl font-bold text-gray-800">$179.99</span>
172
- <button class="bg-blue-500 text-white px-4 py-2 rounded-full hover:bg-blue-600 transition">
173
- <i class="fas fa-cart-plus"></i> Add to Cart
174
  </button>
175
  </div>
176
  </div>
177
- </div>
178
-
179
- <!-- Product 3 -->
180
- <div class="product-card bg-white rounded-xl p-6 cursor-pointer"
181
- onmousemove="tiltCard(this, event)"
182
- onmouseleave="resetCard(this)">
183
- <div class="product-image mb-6 flex justify-center">
184
- <img src="https://images.unsplash.com/photo-1517336714731-489689fd1ca8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8bWFjYm9va3xlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60"
185
- alt="Laptop"
186
- class="w-64 h-64 object-contain">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
187
  </div>
188
- <div class="product-info">
189
- <h3 class="text-xl font-bold text-gray-800 mb-2">Ultra Slim Laptop</h3>
190
- <div class="flex items-center mb-4">
191
- <div class="flex text-yellow-400">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
192
  <i class="fas fa-star"></i>
193
  <i class="fas fa-star"></i>
194
  <i class="fas fa-star"></i>
195
  <i class="fas fa-star"></i>
196
  <i class="far fa-star"></i>
197
  </div>
198
- <span class="text-gray-600 ml-2">(76 reviews)</span>
199
  </div>
200
- <p class="text-gray-600 mb-4">Powerful performance in an incredibly thin and light design.</p>
201
  <div class="flex justify-between items-center">
202
- <span class="text-2xl font-bold text-gray-800">$1,299.99</span>
203
- <button class="bg-blue-500 text-white px-4 py-2 rounded-full hover:bg-blue-600 transition">
204
- <i class="fas fa-cart-plus"></i> Add to Cart
205
  </button>
206
  </div>
207
  </div>
208
  </div>
209
  </div>
 
 
 
 
 
 
 
210
  </div>
211
  </section>
212
 
213
- <!-- 3D Experience Section -->
214
- <section class="py-20 bg-gray-100">
215
- <div class="container mx-auto px-6">
216
- <div class="flex flex-col md:flex-row items-center">
217
- <div class="md:w-1/2 mb-10 md:mb-0">
218
- <h2 class="text-3xl font-bold text-gray-800 mb-6">Immersive <span class="text-blue-500">3D</span> Shopping Experience</h2>
219
- <p class="text-gray-600 mb-6">Our 3D product visualization allows you to explore products from every angle, just like in real life. Rotate, zoom, and interact with products before making a purchase.</p>
220
- <ul class="space-y-3 mb-8">
221
- <li class="flex items-center">
222
- <i class="fas fa-check-circle text-green-500 mr-2"></i>
223
- <span>360° product views</span>
224
- </li>
225
- <li class="flex items-center">
226
- <i class="fas fa-check-circle text-green-500 mr-2"></i>
227
- <span>Realistic materials and textures</span>
228
- </li>
229
- <li class="flex items-center">
230
- <i class="fas fa-check-circle text-green-500 mr-2"></i>
231
- <span>Interactive product demos</span>
232
- </li>
233
- <li class="flex items-center">
234
- <i class="fas fa-check-circle text-green-500 mr-2"></i>
235
- <span>AR preview for compatible devices</span>
236
- </li>
237
- </ul>
238
- <button class="bg-gray-800 text-white px-6 py-3 rounded-full font-bold hover:bg-gray-700 transition">
239
- Try 3D Demo
240
- </button>
241
  </div>
242
- <div class="md:w-1/2 flex justify-center">
243
- <div class="relative w-full max-w-md">
244
- <div class="w-full h-80 bg-gradient-to-br from-blue-400 to-purple-500 rounded-2xl shadow-xl transform rotate-3 product-card"
245
- onmousemove="tiltCard(this, event)"
246
- onmouseleave="resetCard(this)">
247
- <div class="absolute inset-0 flex items-center justify-center">
248
- <i class="fas fa-cube text-white text-6xl opacity-30"></i>
249
- <div class="absolute bottom-6 left-6 right-6 bg-white bg-opacity-20 backdrop-blur-sm rounded-lg p-4">
250
- <h3 class="text-white font-bold">3D Product Viewer</h3>
251
- <p class="text-white text-sm">Drag to rotate • Scroll to zoom</p>
252
- </div>
253
- </div>
254
- </div>
 
255
  </div>
 
 
256
  </div>
257
  </div>
258
  </div>
259
  </section>
260
 
261
- <!-- Categories -->
262
  <section class="py-16 bg-white">
263
- <div class="container mx-auto px-6">
264
- <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Shop by Category</h2>
265
- <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6">
266
- <div class="bg-gray-100 rounded-xl p-6 text-center hover:bg-blue-50 transition cursor-pointer transform hover:scale-105">
267
- <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
268
- <i class="fas fa-mobile-alt text-blue-500 text-2xl"></i>
 
 
 
 
 
 
 
 
 
 
 
269
  </div>
270
- <h3 class="font-bold text-gray-800">Phones</h3>
271
  </div>
272
- <div class="bg-gray-100 rounded-xl p-6 text-center hover:bg-purple-50 transition cursor-pointer transform hover:scale-105">
273
- <div class="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
274
- <i class="fas fa-laptop text-purple-500 text-2xl"></i>
 
 
 
 
 
 
 
 
 
 
 
275
  </div>
276
- <h3 class="font-bold text-gray-800">Laptops</h3>
277
  </div>
278
- <div class="bg-gray-100 rounded-xl p-6 text-center hover:bg-green-50 transition cursor-pointer transform hover:scale-105">
279
- <div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
280
- <i class="fas fa-headphones text-green-500 text-2xl"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
281
  </div>
282
- <h3 class="font-bold text-gray-800">Audio</h3>
283
  </div>
284
- <div class="bg-gray-100 rounded-xl p-6 text-center hover:bg-yellow-50 transition cursor-pointer transform hover:scale-105">
285
- <div class="bg-yellow-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
286
- <i class="fas fa-clock text-yellow-500 text-2xl"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
287
  </div>
288
- <h3 class="font-bold text-gray-800">Wearables</h3>
289
  </div>
290
- <div class="bg-gray-100 rounded-xl p-6 text-center hover:bg-red-50 transition cursor-pointer transform hover:scale-105">
291
- <div class="bg-red-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
292
- <i class="fas fa-gamepad text-red-500 text-2xl"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
293
  </div>
294
- <h3 class="font-bold text-gray-800">Gaming</h3>
295
  </div>
296
  </div>
297
  </div>
298
  </section>
299
 
300
  <!-- Newsletter -->
301
- <section class="py-16 bg-gray-900 text-white">
302
- <div class="container mx-auto px-6 text-center">
303
  <h2 class="text-3xl font-bold mb-6">Stay Updated</h2>
304
- <p class="text-gray-300 mb-8 max-w-2xl mx-auto">Subscribe to our newsletter for the latest products, deals, and 3D shopping experiences.</p>
305
  <div class="flex flex-col md:flex-row justify-center max-w-md mx-auto">
306
  <input type="email" placeholder="Your email address" class="px-4 py-3 rounded-l-full md:rounded-r-none rounded-r-full mb-2 md:mb-0 w-full text-gray-800 focus:outline-none">
307
- <button class="bg-blue-500 px-6 py-3 rounded-r-full md:rounded-l-none rounded-l-full font-bold hover:bg-blue-600 transition">
308
  Subscribe
309
  </button>
310
  </div>
@@ -312,17 +576,17 @@
312
  </section>
313
 
314
  <!-- Footer -->
315
- <footer class="bg-gray-800 text-white py-12">
316
- <div class="container mx-auto px-6">
317
- <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
318
  <div>
319
- <h3 class="text-xl font-bold mb-4"><span class="text-blue-400">3D</span>Shop</h3>
320
- <p class="text-gray-400">The future of e-commerce with immersive 3D product experiences.</p>
321
- <div class="flex space-x-4 mt-4">
322
  <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a>
323
  <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
324
  <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a>
325
- <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin-in"></i></a>
326
  </div>
327
  </div>
328
  <div>
@@ -353,90 +617,445 @@
353
  </ul>
354
  </div>
355
  </div>
356
- <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
357
  <p>&copy; 2023 3DShop. All rights reserved.</p>
358
  </div>
359
  </div>
360
  </footer>
361
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
362
  <script>
363
- // 3D tilt effect for product cards
364
- function tiltCard(element, event) {
365
- const card = element;
366
- const cardWidth = card.offsetWidth;
367
- const cardHeight = card.offsetHeight;
368
- const centerX = card.offsetLeft + cardWidth/2;
369
- const centerY = card.offsetTop + cardHeight/2;
370
- const mouseX = event.clientX - centerX;
371
- const mouseY = event.clientY - centerY;
372
- const rotateX = (mouseY / cardHeight) * 10; // Reduced rotation for subtle effect
373
- const rotateY = -(mouseX / cardWidth) * 10;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
374
 
375
- card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale(1.03)`;
 
 
 
376
 
377
- // Add shadow effect based on mouse position
378
- const shadowX = (mouseX / cardWidth) * 20;
379
- const shadowY = (mouseY / cardHeight) * 20;
380
- const shadowBlur = 30;
381
- card.style.boxShadow = `${-shadowX}px ${-shadowY}px ${shadowBlur}px rgba(0, 0, 0, 0.2)`;
 
 
 
 
 
 
382
  }
383
 
384
- function resetCard(element) {
385
- element.style.transform = 'perspective(1000px) rotateX(0) rotateY(0) scale(1)';
386
- element.style.boxShadow = '0 20px 30px rgba(0, 0, 0, 0.1)';
387
- }
388
 
389
- // Add event listeners to all product cards
390
- document.addEventListener('DOMContentLoaded', function() {
391
- const productCards = document.querySelectorAll('.product-card');
392
- productCards.forEach(card => {
393
- card.addEventListener('mousemove', (e) => tiltCard(card, e));
394
- card.addEventListener('mouseleave', () => resetCard(card));
395
- });
396
-
397
- // Simple cart animation
398
- const cartButtons = document.querySelectorAll('button:has(.fa-cart-plus)');
399
- cartButtons.forEach(button => {
400
- button.addEventListener('click', function(e) {
401
- e.preventDefault();
402
- const cartIcon = document.querySelector('.fa-shopping-cart');
403
-
404
- // Create flying product animation
405
- const productImg = this.closest('.product-card').querySelector('img').cloneNode(true);
406
- productImg.style.position = 'fixed';
407
- productImg.style.width = '50px';
408
- productImg.style.height = '50px';
409
- productImg.style.borderRadius = '50%';
410
- productImg.style.objectFit = 'cover';
411
- productImg.style.zIndex = '1000';
412
- productImg.style.top = this.getBoundingClientRect().top + 'px';
413
- productImg.style.left = this.getBoundingClientRect().left + 'px';
414
- productImg.style.transition = 'all 0.5s cubic-bezier(0.5, -0.5, 0.5, 1.5)';
415
- document.body.appendChild(productImg);
416
-
417
- // Animate to cart
418
- setTimeout(() => {
419
- const cartRect = cartIcon.getBoundingClientRect();
420
- productImg.style.top = (cartRect.top + 10) + 'px';
421
- productImg.style.left = (cartRect.left + 10) + 'px';
422
- productImg.style.width = '20px';
423
- productImg.style.height = '20px';
424
- productImg.style.opacity = '0.5';
425
- }, 0);
 
 
 
 
 
 
 
 
 
426
 
427
- // Remove after animation
428
- setTimeout(() => {
429
- productImg.remove();
430
-
431
- // Update cart count with animation
432
- const cartCount = document.querySelector('.fa-shopping-cart + span');
433
- if (cartCount) {
434
- cartCount.textContent = parseInt(cartCount.textContent) + 1;
435
- cartCount.classList.add('animate-bounce');
436
- setTimeout(() => cartCount.classList.remove('animate-bounce'), 1000);
437
- }
438
- }, 500);
 
 
 
 
 
 
 
439
  });
 
 
 
440
  });
441
  });
442
  </script>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Immersive 3D Shopify Store</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
+ /* Custom 3D effects */
11
+ .product-card-3d {
12
  transform-style: preserve-3d;
13
+ transition: all 0.5s ease;
14
+ perspective: 1000px;
15
+ }
16
+
17
+ .product-card-3d:hover {
18
+ transform: translateY(-10px) scale(1.02);
19
+ }
20
+
21
+ .shelf-item {
22
+ transform-style: preserve-3d;
23
+ transition: all 0.3s ease;
24
+ }
25
+
26
+ .shelf-item:hover {
27
+ transform: translateY(-5px) rotateY(5deg);
28
+ z-index: 10;
29
+ }
30
+
31
+ /* 3D store environment */
32
+ .store-environment {
33
+ background: linear-gradient(135deg, #f5f7fa 0%, #e4e8eb 100%);
34
+ perspective: 1000px;
35
+ }
36
+
37
+ .shelf {
38
+ transform-style: preserve-3d;
39
+ background: linear-gradient(to bottom, #e2d9c7, #d4c9b1);
40
+ box-shadow: 0 10px 30px rgba(0,0,0,0.2);
41
+ border-radius: 5px;
42
+ }
43
+
44
+ .shelf::before {
45
+ content: '';
46
+ position: absolute;
47
+ bottom: -10px;
48
+ left: 0;
49
+ right: 0;
50
+ height: 10px;
51
+ background: #b8a98a;
52
+ transform: rotateX(-30deg);
53
+ transform-origin: top;
54
  }
55
 
56
+ /* Floating animation */
57
+ @keyframes float {
58
+ 0% { transform: translateY(0px); }
59
+ 50% { transform: translateY(-10px); }
60
+ 100% { transform: translateY(0px); }
61
+ }
62
+
63
+ .floating {
64
+ animation: float 3s ease-in-out infinite;
65
  }
66
 
67
+ /* Custom scrollbar */
68
+ ::-webkit-scrollbar {
69
+ width: 8px;
70
+ height: 8px;
71
  }
72
 
73
+ ::-webkit-scrollbar-track {
74
+ background: #f1f1f1;
75
+ }
76
+
77
+ ::-webkit-scrollbar-thumb {
78
+ background: #888;
79
+ border-radius: 10px;
80
+ }
81
+
82
+ ::-webkit-scrollbar-thumb:hover {
83
+ background: #555;
84
+ }
85
+
86
+ /* 3D product viewer */
87
+ .product-viewer-3d {
88
+ transform-style: preserve-3d;
89
+ transition: transform 0.5s ease;
90
  }
91
 
92
+ /* Navigation effects */
93
  .nav-link {
94
  position: relative;
95
  }
 
101
  height: 2px;
102
  bottom: -2px;
103
  left: 0;
104
+ background-color: currentColor;
105
  transition: width 0.3s ease;
106
  }
107
 
 
109
  width: 100%;
110
  }
111
 
112
+ /* Cart drawer animation */
113
+ .cart-drawer {
114
+ transition: transform 0.3s ease-out;
 
115
  }
116
 
117
+ .cart-drawer.open {
118
+ transform: translateX(0);
119
+ }
120
+
121
+ .cart-drawer:not(.open) {
122
+ transform: translateX(100%);
123
+ }
124
+
125
+ /* Responsive grid */
126
+ @media (min-width: 1024px) {
127
+ .product-grid {
128
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
129
+ }
130
+ }
131
+
132
+ /* Custom color variables */
133
+ :root {
134
+ --primary: #4f46e5;
135
+ --primary-light: #6366f1;
136
+ --primary-dark: #4338ca;
137
+ --secondary: #10b981;
138
+ --accent: #f59e0b;
139
+ --dark: #1e293b;
140
+ --light: #f8fafc;
141
  }
142
  </style>
143
  </head>
144
+ <body class="bg-gray-50 font-sans antialiased">
145
+ <!-- Top Announcement Bar -->
146
+ <div class="bg-indigo-900 text-white text-center py-2 px-4">
147
+ <p class="text-sm">✨ Free shipping on orders over $50 | <span class="font-bold">30-day returns</span> ✨</p>
148
+ </div>
149
+
150
+ <!-- Main Navigation -->
151
+ <nav class="bg-white shadow-md sticky top-0 z-50">
152
+ <div class="container mx-auto px-4">
153
+ <div class="flex justify-between items-center py-4">
154
+ <!-- Logo -->
155
+ <div class="flex items-center">
156
+ <a href="#" class="text-2xl font-bold">
157
+ <span class="text-indigo-600">3D</span><span class="text-gray-800">Shop</span>
158
+ </a>
159
+ </div>
160
+
161
+ <!-- Desktop Navigation -->
162
+ <div class="hidden md:flex items-center space-x-8">
163
+ <a href="#" class="nav-link text-gray-700 hover:text-indigo-600">Home</a>
164
+ <a href="#" class="nav-link text-gray-700 hover:text-indigo-600">Shop</a>
165
+ <a href="#" class="nav-link text-gray-700 hover:text-indigo-600">Collections</a>
166
+ <a href="#" class="nav-link text-gray-700 hover:text-indigo-600">About</a>
167
+ <a href="#" class="nav-link text-gray-700 hover:text-indigo-600">Contact</a>
168
+ </div>
169
+
170
+ <!-- Right Icons -->
171
+ <div class="flex items-center space-x-4">
172
+ <button class="p-2 text-gray-600 hover:text-indigo-600 focus:outline-none">
173
+ <i class="fas fa-search"></i>
174
+ </button>
175
+ <button id="cart-toggle" class="p-2 text-gray-600 hover:text-indigo-600 focus:outline-none relative">
176
+ <i class="fas fa-shopping-cart"></i>
177
+ <span class="absolute -top-1 -right-1 bg-indigo-600 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">3</span>
178
+ </button>
179
+ <button class="p-2 text-gray-600 hover:text-indigo-600 focus:outline-none">
180
+ <i class="fas fa-user"></i>
181
+ </button>
182
+ <button id="mobile-menu-toggle" class="md:hidden p-2 text-gray-600 hover:text-indigo-600 focus:outline-none">
183
+ <i class="fas fa-bars"></i>
184
+ </button>
185
  </div>
186
  </div>
187
+ </div>
188
+
189
+ <!-- Mobile Menu -->
190
+ <div id="mobile-menu" class="hidden md:hidden bg-white border-t">
191
+ <div class="container mx-auto px-4 py-2">
192
+ <a href="#" class="block py-2 text-gray-700 hover:text-indigo-600">Home</a>
193
+ <a href="#" class="block py-2 text-gray-700 hover:text-indigo-600">Shop</a>
194
+ <a href="#" class="block py-2 text-gray-700 hover:text-indigo-600">Collections</a>
195
+ <a href="#" class="block py-2 text-gray-700 hover:text-indigo-600">About</a>
196
+ <a href="#" class="block py-2 text-gray-700 hover:text-indigo-600">Contact</a>
 
 
 
 
 
 
 
 
 
 
 
197
  </div>
198
  </div>
199
  </nav>
200
 
201
+ <!-- Hero Section with 3D Effect -->
202
+ <section class="relative overflow-hidden bg-gradient-to-r from-indigo-500 to-purple-600 text-white">
203
+ <div class="container mx-auto px-4 py-20 md:py-28">
204
+ <div class="flex flex-col md:flex-row items-center">
205
+ <div class="md:w-1/2 mb-10 md:mb-0">
206
+ <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-6">Step Into Our <span class="text-indigo-200">3D</span> Store</h1>
207
+ <p class="text-xl mb-8 max-w-lg">Experience products like never before with our immersive 3D shopping environment.</p>
208
+ <div class="flex space-x-4">
209
+ <a href="#shop" class="bg-white text-indigo-600 px-6 py-3 rounded-full font-bold hover:bg-gray-100 transition duration-300 transform hover:scale-105">
210
+ Shop Now
211
+ </a>
212
+ <a href="#how-it-works" class="border-2 border-white text-white px-6 py-3 rounded-full font-bold hover:bg-white hover:bg-opacity-10 transition duration-300 transform hover:scale-105">
213
+ How It Works
214
+ </a>
215
+ </div>
216
+ </div>
217
+ <div class="md:w-1/2 flex justify-center">
218
+ <div class="relative floating">
219
+ <div class="w-64 h-64 md:w-80 md:h-80 bg-white bg-opacity-20 rounded-2xl shadow-2xl transform rotate-12"></div>
220
+ <div class="w-64 h-64 md:w-80 md:h-80 bg-indigo-400 bg-opacity-30 rounded-2xl shadow-2xl absolute top-0 left-0 transform -rotate-6"></div>
221
+ <div class="w-64 h-64 md:w-80 md:h-80 bg-white bg-opacity-10 rounded-2xl shadow-2xl absolute top-0 left-0">
222
+ <div class="absolute inset-0 flex items-center justify-center">
223
+ <i class="fas fa-store text-6xl opacity-30"></i>
224
+ </div>
225
+ </div>
226
+ </div>
227
  </div>
228
  </div>
229
  </div>
230
+ <div class="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-gray-50 to-transparent"></div>
231
  </section>
232
 
233
+ <!-- 3D Store Environment -->
234
+ <section id="shop" class="store-environment py-16">
235
+ <div class="container mx-auto px-4">
236
+ <h2 class="text-3xl font-bold text-center mb-12">Browse Our <span class="text-indigo-600">3D</span> Shelves</h2>
237
+
238
+ <!-- Category Selector -->
239
+ <div class="flex overflow-x-auto pb-4 mb-8 scrollbar-hide">
240
+ <div class="flex space-x-2">
241
+ <button class="category-btn px-6 py-2 rounded-full bg-indigo-600 text-white font-medium whitespace-nowrap">All Products</button>
242
+ <button class="category-btn px-6 py-2 rounded-full bg-gray-200 text-gray-800 font-medium hover:bg-gray-300 whitespace-nowrap">Electronics</button>
243
+ <button class="category-btn px-6 py-2 rounded-full bg-gray-200 text-gray-800 font-medium hover:bg-gray-300 whitespace-nowrap">Home & Living</button>
244
+ <button class="category-btn px-6 py-2 rounded-full bg-gray-200 text-gray-800 font-medium hover:bg-gray-300 whitespace-nowrap">Fashion</button>
245
+ <button class="category-btn px-6 py-2 rounded-full bg-gray-200 text-gray-800 font-medium hover:bg-gray-300 whitespace-nowrap">Beauty</button>
246
+ <button class="category-btn px-6 py-2 rounded-full bg-gray-200 text-gray-800 font-medium hover:bg-gray-300 whitespace-nowrap">Toys</button>
247
+ </div>
248
+ </div>
249
+
250
+ <!-- 3D Shelf Display -->
251
+ <div class="shelf p-6 mb-12 relative">
252
+ <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
253
+ <!-- Product 1 -->
254
+ <div class="shelf-item bg-white p-4 rounded-lg shadow-md cursor-pointer transform transition-all duration-300 hover:shadow-lg"
255
+ onclick="showProductDetails('1')">
256
+ <div class="flex justify-center mb-4">
257
+ <img src="https://images.unsplash.com/photo-1546868871-7041f2a55e12?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8c21hcnR3YXRjaHxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60"
258
+ alt="Smart Watch"
259
+ class="h-32 object-contain">
260
+ </div>
261
+ <h3 class="font-semibold text-gray-800 mb-1">Pro Smart Watch</h3>
262
+ <div class="flex items-center mb-2">
263
+ <div class="flex text-yellow-400 text-sm">
264
  <i class="fas fa-star"></i>
265
  <i class="fas fa-star"></i>
266
  <i class="fas fa-star"></i>
267
  <i class="fas fa-star"></i>
268
  <i class="fas fa-star-half-alt"></i>
269
  </div>
270
+ <span class="text-gray-500 text-xs ml-1">(48)</span>
271
  </div>
 
272
  <div class="flex justify-between items-center">
273
+ <span class="font-bold text-gray-900">$249.99</span>
274
+ <button class="text-indigo-600 hover:text-indigo-800">
275
+ <i class="fas fa-plus-circle"></i>
276
  </button>
277
  </div>
278
  </div>
279
+
280
+ <!-- Product 2 -->
281
+ <div class="shelf-item bg-white p-4 rounded-lg shadow-md cursor-pointer transform transition-all duration-300 hover:shadow-lg"
282
+ onclick="showProductDetails('2')">
283
+ <div class="flex justify-center mb-4">
284
+ <img src="https://images.unsplash.com/photo-1592899677977-9c10ca588bbd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8aGVhZHBob25lc3xlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60"
285
+ alt="Headphones"
286
+ class="h-32 object-contain">
287
+ </div>
288
+ <h3 class="font-semibold text-gray-800 mb-1">Noise Cancelling Headphones</h3>
289
+ <div class="flex items-center mb-2">
290
+ <div class="flex text-yellow-400 text-sm">
 
 
 
291
  <i class="fas fa-star"></i>
292
  <i class="fas fa-star"></i>
293
  <i class="fas fa-star"></i>
294
  <i class="fas fa-star"></i>
295
  <i class="fas fa-star"></i>
296
  </div>
297
+ <span class="text-gray-500 text-xs ml-1">(112)</span>
298
  </div>
 
299
  <div class="flex justify-between items-center">
300
+ <span class="font-bold text-gray-900">$179.99</span>
301
+ <button class="text-indigo-600 hover:text-indigo-800">
302
+ <i class="fas fa-plus-circle"></i>
303
  </button>
304
  </div>
305
  </div>
306
+
307
+ <!-- Product 3 -->
308
+ <div class="shelf-item bg-white p-4 rounded-lg shadow-md cursor-pointer transform transition-all duration-300 hover:shadow-lg"
309
+ onclick="showProductDetails('3')">
310
+ <div class="flex justify-center mb-4">
311
+ <img src="https://images.unsplash.com/photo-1517336714731-489689fd1ca8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8bWFjYm9va3xlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60"
312
+ alt="Laptop"
313
+ class="h-32 object-contain">
314
+ </div>
315
+ <h3 class="font-semibold text-gray-800 mb-1">Ultra Slim Laptop</h3>
316
+ <div class="flex items-center mb-2">
317
+ <div class="flex text-yellow-400 text-sm">
318
+ <i class="fas fa-star"></i>
319
+ <i class="fas fa-star"></i>
320
+ <i class="fas fa-star"></i>
321
+ <i class="fas fa-star"></i>
322
+ <i class="far fa-star"></i>
323
+ </div>
324
+ <span class="text-gray-500 text-xs ml-1">(76)</span>
325
+ </div>
326
+ <div class="flex justify-between items-center">
327
+ <span class="font-bold text-gray-900">$1,299.99</span>
328
+ <button class="text-indigo-600 hover:text-indigo-800">
329
+ <i class="fas fa-plus-circle"></i>
330
+ </button>
331
+ </div>
332
  </div>
333
+
334
+ <!-- Product 4 -->
335
+ <div class="shelf-item bg-white p-4 rounded-lg shadow-md cursor-pointer transform transition-all duration-300 hover:shadow-lg"
336
+ onclick="showProductDetails('4')">
337
+ <div class="flex justify-center mb-4">
338
+ <img src="https://images.unsplash.com/photo-1601784551446-66c9e1e7b96f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8c21hcnRwaG9uZXxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60"
339
+ alt="Smartphone"
340
+ class="h-32 object-contain">
341
+ </div>
342
+ <h3 class="font-semibold text-gray-800 mb-1">Premium Smartphone</h3>
343
+ <div class="flex items-center mb-2">
344
+ <div class="flex text-yellow-400 text-sm">
345
+ <i class="fas fa-star"></i>
346
+ <i class="fas fa-star"></i>
347
+ <i class="fas fa-star"></i>
348
+ <i class="fas fa-star"></i>
349
+ <i class="fas fa-star"></i>
350
+ </div>
351
+ <span class="text-gray-500 text-xs ml-1">(215)</span>
352
+ </div>
353
+ <div class="flex justify-between items-center">
354
+ <span class="font-bold text-gray-900">$899.99</span>
355
+ <button class="text-indigo-600 hover:text-indigo-800">
356
+ <i class="fas fa-plus-circle"></i>
357
+ </button>
358
+ </div>
359
+ </div>
360
+
361
+ <!-- Product 5 -->
362
+ <div class="shelf-item bg-white p-4 rounded-lg shadow-md cursor-pointer transform transition-all duration-300 hover:shadow-lg"
363
+ onclick="showProductDetails('5')">
364
+ <div class="flex justify-center mb-4">
365
+ <img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8d2F0Y2hlc3xlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60"
366
+ alt="Watch"
367
+ class="h-32 object-contain">
368
+ </div>
369
+ <h3 class="font-semibold text-gray-800 mb-1">Luxury Watch</h3>
370
+ <div class="flex items-center mb-2">
371
+ <div class="flex text-yellow-400 text-sm">
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="far fa-star"></i>
377
  </div>
378
+ <span class="text-gray-500 text-xs ml-1">(89)</span>
379
  </div>
 
380
  <div class="flex justify-between items-center">
381
+ <span class="font-bold text-gray-900">$349.99</span>
382
+ <button class="text-indigo-600 hover:text-indigo-800">
383
+ <i class="fas fa-plus-circle"></i>
384
  </button>
385
  </div>
386
  </div>
387
  </div>
388
  </div>
389
+
390
+ <!-- View All Button -->
391
+ <div class="text-center">
392
+ <button class="border-2 border-indigo-600 text-indigo-600 px-8 py-3 rounded-full font-bold hover:bg-indigo-600 hover:text-white transition duration-300">
393
+ View All Products
394
+ </button>
395
+ </div>
396
  </div>
397
  </section>
398
 
399
+ <!-- How It Works Section -->
400
+ <section id="how-it-works" class="py-16 bg-gray-100">
401
+ <div class="container mx-auto px-4">
402
+ <h2 class="text-3xl font-bold text-center mb-12">How Our <span class="text-indigo-600">3D</span> Shopping Works</h2>
403
+
404
+ <div class="grid md:grid-cols-3 gap-8">
405
+ <!-- Step 1 -->
406
+ <div class="bg-white p-6 rounded-xl shadow-md text-center">
407
+ <div class="bg-indigo-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
408
+ <span class="text-indigo-600 text-2xl font-bold">1</span>
409
+ </div>
410
+ <h3 class="text-xl font-bold mb-3">Browse in 3D</h3>
411
+ <p class="text-gray-600">Explore our virtual store shelves and view products from all angles with our interactive 3D viewer.</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
412
  </div>
413
+
414
+ <!-- Step 2 -->
415
+ <div class="bg-white p-6 rounded-xl shadow-md text-center">
416
+ <div class="bg-indigo-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
417
+ <span class="text-indigo-600 text-2xl font-bold">2</span>
418
+ </div>
419
+ <h3 class="text-xl font-bold mb-3">Customize & Preview</h3>
420
+ <p class="text-gray-600">Customize colors, materials and see how products would look in your space with AR preview.</p>
421
+ </div>
422
+
423
+ <!-- Step 3 -->
424
+ <div class="bg-white p-6 rounded-xl shadow-md text-center">
425
+ <div class="bg-indigo-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
426
+ <span class="text-indigo-600 text-2xl font-bold">3</span>
427
  </div>
428
+ <h3 class="text-xl font-bold mb-3">Purchase with Confidence</h3>
429
+ <p class="text-gray-600">Buy with confidence knowing exactly what you're getting, with our 30-day satisfaction guarantee.</p>
430
  </div>
431
  </div>
432
  </div>
433
  </section>
434
 
435
+ <!-- Featured Collections -->
436
  <section class="py-16 bg-white">
437
+ <div class="container mx-auto px-4">
438
+ <h2 class="text-3xl font-bold text-center mb-12">Featured <span class="text-indigo-600">Collections</span></h2>
439
+
440
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
441
+ <!-- Collection 1 -->
442
+ <div class="relative rounded-xl overflow-hidden shadow-lg group">
443
+ <img src="https://images.unsplash.com/photo-1555774698-0f77e0f5b96e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTB8fGVsZWN0cm9uaWNzfGVufDB8fDB8fHww&auto=format&fit=crop&w=800&q=60"
444
+ alt="Electronics"
445
+ class="w-full h-64 object-cover transition duration-500 group-hover:scale-105">
446
+ <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center">
447
+ <div class="text-center p-6">
448
+ <h3 class="text-2xl font-bold text-white mb-2">Electronics</h3>
449
+ <p class="text-white mb-4">Cutting-edge tech for modern living</p>
450
+ <button class="bg-white text-indigo-600 px-6 py-2 rounded-full font-medium hover:bg-gray-100 transition">
451
+ Shop Now
452
+ </button>
453
+ </div>
454
  </div>
 
455
  </div>
456
+
457
+ <!-- Collection 2 -->
458
+ <div class="relative rounded-xl overflow-hidden shadow-lg group">
459
+ <img src="https://images.unsplash.com/photo-1555529669-e69e7aa0ba9a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8aG9tZSUyMGRlY29yfGVufDB8fDB8fHww&auto=format&fit=crop&w=800&q=60"
460
+ alt="Home Decor"
461
+ class="w-full h-64 object-cover transition duration-500 group-hover:scale-105">
462
+ <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center">
463
+ <div class="text-center p-6">
464
+ <h3 class="text-2xl font-bold text-white mb-2">Home & Living</h3>
465
+ <p class="text-white mb-4">Transform your space with style</p>
466
+ <button class="bg-white text-indigo-600 px-6 py-2 rounded-full font-medium hover:bg-gray-100 transition">
467
+ Shop Now
468
+ </button>
469
+ </div>
470
  </div>
 
471
  </div>
472
+
473
+ <!-- Collection 3 -->
474
+ <div class="relative rounded-xl overflow-hidden shadow-lg group">
475
+ <img src="https://images.unsplash.com/photo-1489987707025-afc232f7ea0f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8ZmFzaGlvbnxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=800&q=60"
476
+ alt="Fashion"
477
+ class="w-full h-64 object-cover transition duration-500 group-hover:scale-105">
478
+ <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center">
479
+ <div class="text-center p-6">
480
+ <h3 class="text-2xl font-bold text-white mb-2">Fashion</h3>
481
+ <p class="text-white mb-4">Trendsetting styles for every occasion</p>
482
+ <button class="bg-white text-indigo-600 px-6 py-2 rounded-full font-medium hover:bg-gray-100 transition">
483
+ Shop Now
484
+ </button>
485
+ </div>
486
+ </div>
487
+ </div>
488
+ </div>
489
+ </div>
490
+ </section>
491
+
492
+ <!-- Testimonials -->
493
+ <section class="py-16 bg-gray-100">
494
+ <div class="container mx-auto px-4">
495
+ <h2 class="text-3xl font-bold text-center mb-12">What Our <span class="text-indigo-600">Customers</span> Say</h2>
496
+
497
+ <div class="grid md:grid-cols-3 gap-8">
498
+ <!-- Testimonial 1 -->
499
+ <div class="bg-white p-6 rounded-xl shadow-md">
500
+ <div class="flex items-center mb-4">
501
+ <div class="flex text-yellow-400">
502
+ <i class="fas fa-star"></i>
503
+ <i class="fas fa-star"></i>
504
+ <i class="fas fa-star"></i>
505
+ <i class="fas fa-star"></i>
506
+ <i class="fas fa-star"></i>
507
+ </div>
508
+ </div>
509
+ <p class="text-gray-600 mb-4">"The 3D shopping experience is revolutionary! I could examine the product from every angle before purchasing, and it arrived exactly as shown."</p>
510
+ <div class="flex items-center">
511
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sarah J." class="w-10 h-10 rounded-full mr-3">
512
+ <div>
513
+ <h4 class="font-bold">Sarah J.</h4>
514
+ <p class="text-gray-500 text-sm">Verified Buyer</p>
515
+ </div>
516
  </div>
 
517
  </div>
518
+
519
+ <!-- Testimonial 2 -->
520
+ <div class="bg-white p-6 rounded-xl shadow-md">
521
+ <div class="flex items-center mb-4">
522
+ <div class="flex text-yellow-400">
523
+ <i class="fas fa-star"></i>
524
+ <i class="fas fa-star"></i>
525
+ <i class="fas fa-star"></i>
526
+ <i class="fas fa-star"></i>
527
+ <i class="fas fa-star-half-alt"></i>
528
+ </div>
529
+ </div>
530
+ <p class="text-gray-600 mb-4">"I love how I can see how furniture would look in my space with the AR feature. No more guessing if something will fit or match my decor!"</p>
531
+ <div class="flex items-center">
532
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Michael T." class="w-10 h-10 rounded-full mr-3">
533
+ <div>
534
+ <h4 class="font-bold">Michael T.</h4>
535
+ <p class="text-gray-500 text-sm">Verified Buyer</p>
536
+ </div>
537
  </div>
 
538
  </div>
539
+
540
+ <!-- Testimonial 3 -->
541
+ <div class="bg-white p-6 rounded-xl shadow-md">
542
+ <div class="flex items-center mb-4">
543
+ <div class="flex text-yellow-400">
544
+ <i class="fas fa-star"></i>
545
+ <i class="fas fa-star"></i>
546
+ <i class="fas fa-star"></i>
547
+ <i class="fas fa-star"></i>
548
+ <i class="fas fa-star"></i>
549
+ </div>
550
+ </div>
551
+ <p class="text-gray-600 mb-4">"The virtual shelves make shopping so intuitive. It's like being in a physical store but with all the convenience of online shopping. Brilliant!"</p>
552
+ <div class="flex items-center">
553
+ <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Emma L." class="w-10 h-10 rounded-full mr-3">
554
+ <div>
555
+ <h4 class="font-bold">Emma L.</h4>
556
+ <p class="text-gray-500 text-sm">Verified Buyer</p>
557
+ </div>
558
  </div>
 
559
  </div>
560
  </div>
561
  </div>
562
  </section>
563
 
564
  <!-- Newsletter -->
565
+ <section class="py-16 bg-indigo-600 text-white">
566
+ <div class="container mx-auto px-4 text-center">
567
  <h2 class="text-3xl font-bold mb-6">Stay Updated</h2>
568
+ <p class="text-indigo-100 mb-8 max-w-2xl mx-auto">Subscribe to our newsletter for new product launches, exclusive deals, and the latest in 3D shopping technology.</p>
569
  <div class="flex flex-col md:flex-row justify-center max-w-md mx-auto">
570
  <input type="email" placeholder="Your email address" class="px-4 py-3 rounded-l-full md:rounded-r-none rounded-r-full mb-2 md:mb-0 w-full text-gray-800 focus:outline-none">
571
+ <button class="bg-indigo-800 px-6 py-3 rounded-r-full md:rounded-l-none rounded-l-full font-bold hover:bg-indigo-900 transition">
572
  Subscribe
573
  </button>
574
  </div>
 
576
  </section>
577
 
578
  <!-- Footer -->
579
+ <footer class="bg-gray-900 text-white pt-12 pb-6">
580
+ <div class="container mx-auto px-4">
581
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
582
  <div>
583
+ <h3 class="text-xl font-bold mb-4"><span class="text-indigo-400">3D</span>Shop</h3>
584
+ <p class="text-gray-400 mb-4">The future of e-commerce with immersive 3D product experiences.</p>
585
+ <div class="flex space-x-4">
586
  <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a>
587
  <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
588
  <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a>
589
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-pinterest"></i></a>
590
  </div>
591
  </div>
592
  <div>
 
617
  </ul>
618
  </div>
619
  </div>
620
+ <div class="border-t border-gray-800 pt-6 text-center text-gray-400">
621
  <p>&copy; 2023 3DShop. All rights reserved.</p>
622
  </div>
623
  </div>
624
  </footer>
625
 
626
+ <!-- Product Quick View Modal -->
627
+ <div id="product-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center p-4">
628
+ <div class="bg-white rounded-xl max-w-4xl w-full max-h-[90vh] overflow-y-auto">
629
+ <div class="relative">
630
+ <button id="close-modal" class="absolute top-4 right-4 bg-gray-800 text-white rounded-full w-8 h-8 flex items-center justify-center z-10">
631
+ <i class="fas fa-times"></i>
632
+ </button>
633
+
634
+ <div class="grid md:grid-cols-2 gap-8 p-6">
635
+ <!-- Product Images -->
636
+ <div class="product-viewer-3d" id="product-viewer">
637
+ <div class="relative h-64 md:h-96 bg-gray-100 rounded-lg overflow-hidden">
638
+ <img id="modal-product-image" src="" alt="" class="w-full h-full object-contain">
639
+ <div class="absolute bottom-4 left-0 right-0 flex justify-center space-x-2">
640
+ <button class="bg-white bg-opacity-80 rounded-full w-8 h-8 flex items-center justify-center shadow-md">
641
+ <i class="fas fa-rotate text-gray-700"></i>
642
+ </button>
643
+ <button class="bg-white bg-opacity-80 rounded-full w-8 h-8 flex items-center justify-center shadow-md">
644
+ <i class="fas fa-expand text-gray-700"></i>
645
+ </button>
646
+ <button class="bg-white bg-opacity-80 rounded-full w-8 h-8 flex items-center justify-center shadow-md">
647
+ <i class="fas fa-vr-cardboard text-gray-700"></i>
648
+ </button>
649
+ </div>
650
+ </div>
651
+ <div class="grid grid-cols-4 gap-2 mt-4">
652
+ <div class="bg-gray-100 rounded cursor-pointer border-2 border-transparent hover:border-indigo-400">
653
+ <img id="modal-thumb-1" src="" alt="" class="w-full h-16 object-contain">
654
+ </div>
655
+ <div class="bg-gray-100 rounded cursor-pointer border-2 border-transparent hover:border-indigo-400">
656
+ <img id="modal-thumb-2" src="" alt="" class="w-full h-16 object-contain">
657
+ </div>
658
+ <div class="bg-gray-100 rounded cursor-pointer border-2 border-transparent hover:border-indigo-400">
659
+ <img id="modal-thumb-3" src="" alt="" class="w-full h-16 object-contain">
660
+ </div>
661
+ <div class="bg-gray-100 rounded cursor-pointer border-2 border-transparent hover:border-indigo-400">
662
+ <img id="modal-thumb-4" src="" alt="" class="w-full h-16 object-contain">
663
+ </div>
664
+ </div>
665
+ </div>
666
+
667
+ <!-- Product Info -->
668
+ <div>
669
+ <h2 id="modal-product-title" class="text-2xl font-bold mb-2"></h2>
670
+ <div class="flex items-center mb-4">
671
+ <div class="flex text-yellow-400">
672
+ <i class="fas fa-star"></i>
673
+ <i class="fas fa-star"></i>
674
+ <i class="fas fa-star"></i>
675
+ <i class="fas fa-star"></i>
676
+ <i class="fas fa-star-half-alt"></i>
677
+ </div>
678
+ <span id="modal-product-reviews" class="text-gray-600 ml-2"></span>
679
+ </div>
680
+
681
+ <div class="mb-6">
682
+ <span id="modal-product-price" class="text-3xl font-bold text-gray-900"></span>
683
+ <span class="text-green-600 ml-2">In Stock</span>
684
+ </div>
685
+
686
+ <p id="modal-product-description" class="text-gray-600 mb-6"></p>
687
+
688
+ <div class="mb-6">
689
+ <h3 class="font-bold mb-2">Color</h3>
690
+ <div class="flex space-x-2">
691
+ <button class="w-8 h-8 rounded-full bg-black border-2 border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"></button>
692
+ <button class="w-8 h-8 rounded-full bg-gray-400 border-2 border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"></button>
693
+ <button class="w-8 h-8 rounded-full bg-blue-500 border-2 border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"></button>
694
+ <button class="w-8 h-8 rounded-full bg-red-500 border-2 border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"></button>
695
+ </div>
696
+ </div>
697
+
698
+ <div class="mb-6">
699
+ <h3 class="font-bold mb-2">Size</h3>
700
+ <div class="flex flex-wrap gap-2">
701
+ <button class="px-4 py-2 border border-gray-300 rounded hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-indigo-500">S</button>
702
+ <button class="px-4 py-2 border border-gray-300 rounded hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-indigo-500">M</button>
703
+ <button class="px-4 py-2 border border-gray-300 rounded hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-indigo-500">L</button>
704
+ <button class="px-4 py-2 border border-gray-300 rounded hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-indigo-500">XL</button>
705
+ </div>
706
+ </div>
707
+
708
+ <div class="flex items-center mb-6">
709
+ <div class="flex items-center border border-gray-300 rounded">
710
+ <button class="px-3 py-1 text-gray-600 hover:bg-gray-100">-</button>
711
+ <span class="px-4">1</span>
712
+ <button class="px-3 py-1 text-gray-600 hover:bg-gray-100">+</button>
713
+ </div>
714
+ <button class="ml-4 bg-indigo-600 text-white px-6 py-2 rounded hover:bg-indigo-700 transition flex items-center">
715
+ <i class="fas fa-shopping-cart mr-2"></i> Add to Cart
716
+ </button>
717
+ </div>
718
+
719
+ <div class="border-t border-gray-200 pt-4">
720
+ <div class="flex items-center mb-2">
721
+ <i class="fas fa-truck text-gray-500 mr-2"></i>
722
+ <span class="text-gray-600">Free shipping on orders over $50</span>
723
+ </div>
724
+ <div class="flex items-center mb-2">
725
+ <i class="fas fa-undo text-gray-500 mr-2"></i>
726
+ <span class="text-gray-600">30-day return policy</span>
727
+ </div>
728
+ <div class="flex items-center">
729
+ <i class="fas fa-shield-alt text-gray-500 mr-2"></i>
730
+ <span class="text-gray-600">Secure checkout</span>
731
+ </div>
732
+ </div>
733
+ </div>
734
+ </div>
735
+ </div>
736
+ </div>
737
+ </div>
738
+
739
+ <!-- Cart Drawer -->
740
+ <div id="cart-drawer" class="cart-drawer fixed top-0 right-0 h-full w-full md:w-96 bg-white shadow-lg z-50 overflow-y-auto">
741
+ <div class="p-6">
742
+ <div class="flex justify-between items-center mb-6">
743
+ <h2 class="text-xl font-bold">Your Cart (3)</h2>
744
+ <button id="close-cart" class="text-gray-500 hover:text-gray-700">
745
+ <i class="fas fa-times"></i>
746
+ </button>
747
+ </div>
748
+
749
+ <!-- Cart Items -->
750
+ <div class="space-y-4 mb-6">
751
+ <!-- Cart Item 1 -->
752
+ <div class="flex border-b pb-4">
753
+ <div class="w-20 h-20 bg-gray-100 rounded overflow-hidden flex-shrink-0">
754
+ <img src="https://images.unsplash.com/photo-1546868871-7041f2a55e12?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8c21hcnR3YXRjaHxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60"
755
+ alt="Smart Watch"
756
+ class="w-full h-full object-contain">
757
+ </div>
758
+ <div class="ml-4 flex-grow">
759
+ <h3 class="font-medium">Pro Smart Watch</h3>
760
+ <p class="text-gray-500 text-sm">Black, 42mm</p>
761
+ <div class="flex justify-between items-center mt-1">
762
+ <span class="font-bold">$249.99</span>
763
+ <div class="flex items-center border border-gray-300 rounded">
764
+ <button class="px-2 py-1 text-gray-600 hover:bg-gray-100">-</button>
765
+ <span class="px-2">1</span>
766
+ <button class="px-2 py-1 text-gray-600 hover:bg-gray-100">+</button>
767
+ </div>
768
+ </div>
769
+ </div>
770
+ <button class="ml-2 text-gray-400 hover:text-red-500">
771
+ <i class="fas fa-trash"></i>
772
+ </button>
773
+ </div>
774
+
775
+ <!-- Cart Item 2 -->
776
+ <div class="flex border-b pb-4">
777
+ <div class="w-20 h-20 bg-gray-100 rounded overflow-hidden flex-shrink-0">
778
+ <img src="https://images.unsplash.com/photo-1592899677977-9c10ca588bbd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8aGVhZHBob25lc3xlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60"
779
+ alt="Headphones"
780
+ class="w-full h-full object-contain">
781
+ </div>
782
+ <div class="ml-4 flex-grow">
783
+ <h3 class="font-medium">Noise Cancelling Headphones</h3>
784
+ <p class="text-gray-500 text-sm">Black</p>
785
+ <div class="flex justify-between items-center mt-1">
786
+ <span class="font-bold">$179.99</span>
787
+ <div class="flex items-center border border-gray-300 rounded">
788
+ <button class="px-2 py-1 text-gray-600 hover:bg-gray-100">-</button>
789
+ <span class="px-2">1</span>
790
+ <button class="px-2 py-1 text-gray-600 hover:bg-gray-100">+</button>
791
+ </div>
792
+ </div>
793
+ </div>
794
+ <button class="ml-2 text-gray-400 hover:text-red-500">
795
+ <i class="fas fa-trash"></i>
796
+ </button>
797
+ </div>
798
+
799
+ <!-- Cart Item 3 -->
800
+ <div class="flex border-b pb-4">
801
+ <div class="w-20 h-20 bg-gray-100 rounded overflow-hidden flex-shrink-0">
802
+ <img src="https://images.unsplash.com/photo-1601784551446-66c9e1e7b96f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8c21hcnRwaG9uZXxlbnDB8fDB8fHww&auto=format&fit=crop&w=500&q=60"
803
+ alt="Smartphone"
804
+ class="w-full h-full object-contain">
805
+ </div>
806
+ <div class="ml-4 flex-grow">
807
+ <h3 class="font-medium">Premium Smartphone</h3>
808
+ <p class="text-gray-500 text-sm">128GB, Midnight Black</p>
809
+ <div class="flex justify-between items-center mt-1">
810
+ <span class="font-bold">$899.99</span>
811
+ <div class="flex items-center border border-gray-300 rounded">
812
+ <button class="px-2 py-1 text-gray-600 hover:bg-gray-100">-</button>
813
+ <span class="px-2">1</span>
814
+ <button class="px-2 py-1 text-gray-600 hover:bg-gray-100">+</button>
815
+ </div>
816
+ </div>
817
+ </div>
818
+ <button class="ml-2 text-gray-400 hover:text-red-500">
819
+ <i class="fas fa-trash"></i>
820
+ </button>
821
+ </div>
822
+ </div>
823
+
824
+ <!-- Cart Summary -->
825
+ <div class="border-t border-gray-200 pt-4 mb-6">
826
+ <div class="flex justify-between mb-2">
827
+ <span class="text-gray-600">Subtotal</span>
828
+ <span class="font-bold">$1,329.97</span>
829
+ </div>
830
+ <div class="flex justify-between mb-2">
831
+ <span class="text-gray-600">Shipping</span>
832
+ <span class="font-bold">Free</span>
833
+ </div>
834
+ <div class="flex justify-between mb-2">
835
+ <span class="text-gray-600">Tax</span>
836
+ <span class="font-bold">$106.40</span>
837
+ </div>
838
+ <div class="flex justify-between text-lg font-bold mt-4">
839
+ <span>Total</span>
840
+ <span>$1,436.37</span>
841
+ </div>
842
+ </div>
843
+
844
+ <!-- Checkout Button -->
845
+ <button class="w-full bg-indigo-600 text-white py-3 rounded-lg font-bold hover:bg-indigo-700 transition mb-4">
846
+ Proceed to Checkout
847
+ </button>
848
+
849
+ <p class="text-center text-gray-500 text-sm">or <a href="#" class="text-indigo-600 hover:underline">Continue Shopping</a></p>
850
+ </div>
851
+ </div>
852
+
853
+ <!-- Overlay for modals -->
854
+ <div id="overlay" class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden"></div>
855
+
856
  <script>
857
+ // Mobile menu toggle
858
+ const mobileMenuToggle = document.getElementById('mobile-menu-toggle');
859
+ const mobileMenu = document.getElementById('mobile-menu');
860
+
861
+ mobileMenuToggle.addEventListener('click', () => {
862
+ mobileMenu.classList.toggle('hidden');
863
+ });
864
+
865
+ // Cart drawer toggle
866
+ const cartToggle = document.getElementById('cart-toggle');
867
+ const cartDrawer = document.getElementById('cart-drawer');
868
+ const closeCart = document.getElementById('close-cart');
869
+ const overlay = document.getElementById('overlay');
870
+
871
+ cartToggle.addEventListener('click', () => {
872
+ cartDrawer.classList.add('open');
873
+ overlay.classList.remove('hidden');
874
+ document.body.style.overflow = 'hidden';
875
+ });
876
+
877
+ closeCart.addEventListener('click', () => {
878
+ cartDrawer.classList.remove('open');
879
+ overlay.classList.add('hidden');
880
+ document.body.style.overflow = '';
881
+ });
882
+
883
+ overlay.addEventListener('click', () => {
884
+ cartDrawer.classList.remove('open');
885
+ document.getElementById('product-modal').classList.add('hidden');
886
+ overlay.classList.add('hidden');
887
+ document.body.style.overflow = '';
888
+ });
889
+
890
+ // Product modal functionality
891
+ const productModal = document.getElementById('product-modal');
892
+ const closeModal = document.getElementById('close-modal');
893
+
894
+ closeModal.addEventListener('click', () => {
895
+ productModal.classList.add('hidden');
896
+ overlay.classList.add('hidden');
897
+ document.body.style.overflow = '';
898
+ });
899
+
900
+ // Sample product data
901
+ const products = {
902
+ '1': {
903
+ title: 'Pro Smart Watch',
904
+ price: '$249.99',
905
+ reviews: '(48 reviews)',
906
+ description: 'The ultimate smartwatch with health tracking and premium design. Features include heart rate monitoring, GPS tracking, water resistance up to 50m, and 7-day battery life.',
907
+ images: [
908
+ 'https://images.unsplash.com/photo-1546868871-7041f2a55e12?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8c21hcnR3YXRjaHxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60',
909
+ 'https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8d2F0Y2hlc3xlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60',
910
+ 'https://images.unsplash.com/photo-1558379850-823f103f866a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8c21hcnQlMjB3YXRjaHxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60',
911
+ 'https://images.unsplash.com/photo-1523170335258-f5ed11844a49?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTB8fHdhdGNofGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60'
912
+ ]
913
+ },
914
+ '2': {
915
+ title: 'Noise Cancelling Headphones',
916
+ price: '$179.99',
917
+ reviews: '(112 reviews)',
918
+ description: 'Premium sound quality with active noise cancellation technology. Enjoy crystal-clear audio with 30-hour battery life, comfortable over-ear design, and built-in microphone for calls.',
919
+ images: [
920
+ 'https://images.unsplash.com/photo-1592899677977-9c10ca588bbd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8aGVhZHBob25lc3xlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60',
921
+ 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8aGVhZHBob25lc3xlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60',
922
+ 'https://images.unsplash.com/photo-1545127398-5a95c21f9cbe?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OHx8aGVhZHBob25lc3xlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60',
923
+ 'https://images.unsplash.com/photo-1590658268037-6bf12165ee8a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTJ8fGhlYWRwaG9uZXN8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=500&q=60'
924
+ ]
925
+ },
926
+ '3': {
927
+ title: 'Ultra Slim Laptop',
928
+ price: '$1,299.99',
929
+ reviews: '(76 reviews)',
930
+ description: 'Powerful performance in an incredibly thin and light design. Features a 13.3" Retina display, 8-core CPU, 8GB RAM, 256GB SSD, and up to 18 hours of battery life.',
931
+ images: [
932
+ 'https://images.unsplash.com/photo-1517336714731-489689fd1ca8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8bWFjYm9va3xlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60',
933
+ 'https://images.unsplash.com/photo-1496181133205-2735c39289c4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8bGFwdG9wfGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60',
934
+ 'https://images.unsplash.com/photo-1593642632823-8f785ba67e45?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTB8fGxhcHRvcHxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60',
935
+ 'https://images.unsplash.com/photo-1491933382434-500287f9b54b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTZ8fGxhcHRvcHxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60'
936
+ ]
937
+ },
938
+ '4': {
939
+ title: 'Premium Smartphone',
940
+ price: '$899.99',
941
+ reviews: '(215 reviews)',
942
+ description: 'The latest flagship smartphone with professional-grade camera system, super-fast processor, and all-day battery life. Features a 6.1" Super Retina XDR display and 5G connectivity.',
943
+ images: [
944
+ 'https://images.unsplash.com/photo-1601784551446-66c9e1e7b96f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8c21hcnRwaG9uZXxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60',
945
+ 'https://images.unsplash.com/photo-1598327105666-5b89351aff97?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8c21hcnRwaG9uZXxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60',
946
+ 'https://images.unsplash.com/photo-1592899677977-9c10ca588bbd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8aGVhZHBob25lc3xlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60',
947
+ 'https://images.unsplash.com/photo-1511707171634-5f897ff02aa9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8cGhvbmV8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=500&q=60'
948
+ ]
949
+ },
950
+ '5': {
951
+ title: 'Luxury Watch',
952
+ price: '$349.99',
953
+ reviews: '(89 reviews)',
954
+ description: 'Elegant timepiece with precision Swiss movement, sapphire crystal glass, and stainless steel case. Water resistant to 100m with genuine leather strap.',
955
+ images: [
956
+ 'https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8d2F0Y2hlc3xlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60',
957
+ 'https://images.unsplash.com/photo-1547996160-81dfa63596aa?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8N3x8d2F0Y2h8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=500&q=60',
958
+ 'https://images.unsplash.com/photo-1557531365-e8b46e1265a9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTJ8fHdhdGNofGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60',
959
+ 'https://images.unsplash.com/photo-1539874754764-5a96559165b0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTV8fHdhdGNofGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60'
960
+ ]
961
+ }
962
+ };
963
+
964
+ // Show product details in modal
965
+ function showProductDetails(productId) {
966
+ const product = products[productId];
967
 
968
+ document.getElementById('modal-product-title').textContent = product.title;
969
+ document.getElementById('modal-product-price').textContent = product.price;
970
+ document.getElementById('modal-product-reviews').textContent = product.reviews;
971
+ document.getElementById('modal-product-description').textContent = product.description;
972
 
973
+ // Set main image and thumbnails
974
+ document.getElementById('modal-product-image').src = product.images[0];
975
+ document.getElementById('modal-thumb-1').src = product.images[0];
976
+ document.getElementById('modal-thumb-2').src = product.images[1];
977
+ document.getElementById('modal-thumb-3').src = product.images[2];
978
+ document.getElementById('modal-thumb-4').src = product.images[3];
979
+
980
+ // Show modal and overlay
981
+ productModal.classList.remove('hidden');
982
+ overlay.classList.remove('hidden');
983
+ document.body.style.overflow = 'hidden';
984
  }
985
 
986
+ // 3D tilt effect for product viewer
987
+ const productViewer = document.getElementById('product-viewer');
 
 
988
 
989
+ productViewer.addEventListener('mousemove', (e) => {
990
+ const xAxis = (window.innerWidth / 2 - e.pageX) / 25;
991
+ const yAxis = (window.innerHeight / 2 - e.pageY) / 25;
992
+ productViewer.style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`;
993
+ });
994
+
995
+ productViewer.addEventListener('mouseleave', () => {
996
+ productViewer.style.transform = 'rotateY(0deg) rotateX(0deg)';
997
+ });
998
+
999
+ // Add to cart animation
1000
+ const addToCartButtons = document.querySelectorAll('.shelf-item button');
1001
+
1002
+ addToCartButtons.forEach(button => {
1003
+ button.addEventListener('click', function(e) {
1004
+ e.stopPropagation();
1005
+
1006
+ const productCard = this.closest('.shelf-item');
1007
+ const productImg = productCard.querySelector('img').cloneNode(true);
1008
+ const cartIcon = document.querySelector('.fa-shopping-cart');
1009
+
1010
+ // Style the flying product image
1011
+ productImg.style.position = 'fixed';
1012
+ productImg.style.width = '50px';
1013
+ productImg.style.height = '50px';
1014
+ productImg.style.borderRadius = '50%';
1015
+ productImg.style.objectFit = 'cover';
1016
+ productImg.style.zIndex = '1000';
1017
+ productImg.style.top = productCard.getBoundingClientRect().top + 'px';
1018
+ productImg.style.left = productCard.getBoundingClientRect().left + 'px';
1019
+ productImg.style.transition = 'all 0.5s cubic-bezier(0.5, -0.5, 0.5, 1.5)';
1020
+ document.body.appendChild(productImg);
1021
+
1022
+ // Animate to cart
1023
+ setTimeout(() => {
1024
+ const cartRect = cartIcon.getBoundingClientRect();
1025
+ productImg.style.top = (cartRect.top + 10) + 'px';
1026
+ productImg.style.left = (cartRect.left + 10) + 'px';
1027
+ productImg.style.width = '20px';
1028
+ productImg.style.height = '20px';
1029
+ productImg.style.opacity = '0.5';
1030
+ }, 0);
1031
+
1032
+ // Remove after animation
1033
+ setTimeout(() => {
1034
+ productImg.remove();
1035
 
1036
+ // Update cart count with animation
1037
+ const cartCount = document.querySelector('.fa-shopping-cart + span');
1038
+ if (cartCount) {
1039
+ cartCount.textContent = parseInt(cartCount.textContent) + 1;
1040
+ cartCount.classList.add('animate-bounce');
1041
+ setTimeout(() => cartCount.classList.remove('animate-bounce'), 1000);
1042
+ }
1043
+ }, 500);
1044
+ });
1045
+ });
1046
+
1047
+ // Category buttons
1048
+ const categoryButtons = document.querySelectorAll('.category-btn');
1049
+
1050
+ categoryButtons.forEach(button => {
1051
+ button.addEventListener('click', function() {
1052
+ categoryButtons.forEach(btn => {
1053
+ btn.classList.remove('bg-indigo-600', 'text-white');
1054
+ btn.classList.add('bg-gray-200', 'text-gray-800', 'hover:bg-gray-300');
1055
  });
1056
+
1057
+ this.classList.remove('bg-gray-200', 'text-gray-800', 'hover:bg-gray-300');
1058
+ this.classList.add('bg-indigo-600', 'text-white');
1059
  });
1060
  });
1061
  </script>
prompts.txt CHANGED
@@ -0,0 +1 @@
 
 
1
+ Build me a full customizable shopify store theme that is generic for any type of product have an awesome interactive design just like an online experience of entring in a shop and can choose products as on shelf with best ui and ux experience