Hugging Face's logo

Spaces:
flen-crypto
/
tl2
Running

App Files Community
flen-crypto commited on
Commit
36516e1
·
verified ·
1 Parent(s): 5b6721b

travelinlite.com

Browse files
Files changed (2) hide show
  1. index.html +14 -26
  2. products.html +460 -0
index.html CHANGED
@@ -4,8 +4,7 @@
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Travelin-Lite LTD | VW Transporter Parts & Accessories</title>
7
- <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
- <script src="https://cdn.tailwindcss.com"></script>
9
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
  <style>
11
  .dropdown:hover .dropdown-menu {
@@ -33,15 +32,7 @@
33
  <p>🚚 Free UK delivery on orders over £150 | ⏰ Same day dispatch before 3pm</p>
34
  </div>
35
 
36
- <!-- Trustpilot Widget -->
37
- <div class="bg-blue-600 text-white py-2">
38
- <div class="container mx-auto px-4">
39
- <div class="flex items-center justify-center space-x-4">
40
- <span class="font-medium">TrustScore 4.8 | 2,354 reviews</span>
41
- </div>
42
- </div>
43
- </div>
44
- <!-- Header -->
45
  <header class="bg-white shadow-sm sticky top-0 z-50">
46
  <div class="container mx-auto px-4">
47
  <!-- Top Header -->
@@ -178,7 +169,6 @@
178
  </ul>
179
  </nav>
180
  </div>
181
-
182
  <!-- Hero Slider -->
183
  <div class="relative bg-gray-200 h-64 md:h-96 overflow-hidden">
184
  <div class="absolute inset-0 bg-gradient-to-r from-black to-transparent opacity-50"></div>
@@ -186,12 +176,11 @@
186
  <div class="text-white max-w-lg">
187
  <h1 class="text-3xl md:text-5xl font-bold mb-4">Premium VW Transporter Parts</h1>
188
  <p class="text-lg mb-6">Upgrade your VW with our high-quality parts and accessories</p>
189
- <a href="#" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-md font-medium inline-block">Shop Now</a>
190
  </div>
191
  </div>
192
  </div>
193
-
194
- <!-- Category Icons -->
195
  <div class="bg-white py-8">
196
  <div class="container mx-auto px-4">
197
  <h2 class="text-2xl font-bold text-center mb-8">Shop By Category</h2>
@@ -234,8 +223,8 @@
234
  <div class="container mx-auto px-4">
235
  <div class="flex justify-between items-center mb-8">
236
  <h2 class="text-2xl font-bold">Featured Products</h2>
237
- <a href="#" class="text-blue-600 hover:underline">View All</a>
238
- </div>
239
 
240
  <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
241
  <!-- Product 1 -->
@@ -256,7 +245,7 @@
256
  <button class="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white py-2 rounded-md">
257
  Add to Cart
258
  </button>
259
- </div>
260
  </div>
261
 
262
  <!-- Product 2 -->
@@ -410,6 +399,7 @@
410
  <li><a href="#" class="text-gray-400 hover:text-white">Size Guide</a></li>
411
  </ul>
412
  </div>
 
413
  <!-- Categories -->
414
  <div>
415
  <h3 class="font-bold text-lg mb-4">Categories</h3>
@@ -417,11 +407,11 @@
417
  <li><a href="#" class="text-gray-400 hover:text-white">T4 Transporter</a></li>
418
  <li><a href="#" class="text-gray-400 hover:text-white">T5 Transporter</a></li>
419
  <li><a href="#" class="text-gray-400 hover:text-white">T6 Transporter</a></li>
420
- <li><a href="#" class="text-gray-400 hover:text-white">T6.1 Transporter</a></li>
421
  <li><a href="#" class="text-gray-400 hover:text-white">Wheel Packages</a></li>
422
  </ul>
423
  </div>
424
- <!-- Newsletter -->
 
425
  <div>
426
  <h3 class="font-bold text-lg mb-4">Newsletter</h3>
427
  <p class="text-gray-400 mb-4">Subscribe for updates and special offers</p>
@@ -443,12 +433,14 @@
443
  <div class="flex flex-wrap justify-center gap-4 mb-6">
444
  <img src="https://cdn.shopify.com/s/files/1/1774/9481/t/2/assets/footer_cards.png?97" alt="Payment Methods" class="h-8">
445
  </div>
 
446
  <!-- Copyright -->
447
  <div class="border-t border-gray-800 pt-6 text-center text-gray-400">
448
- <p>&copy; 2024 Travelin-Lite LTD. All rights reserved. Registered in England No. 12345678</p>
449
  </div>
450
- </div>
451
  </footer>
 
452
  <script>
453
  // Mobile menu toggle
454
  document.getElementById('mobile-menu-button').addEventListener('click', function() {
@@ -465,10 +457,6 @@
465
  });
466
  }
467
  });
468
-
469
- // Trustpilot widget initialization
470
- window.Trustpilot = window.Trustpilot || [];
471
- Trustpilot.push(['loadTrustBoxFromElement', document.getElementById('trustpilot-widget')]);
472
  </script>
473
  <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=flen-crypto/tl2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
474
  </html>
 
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Travelin-Lite LTD | VW Transporter Parts & Accessories</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
  .dropdown:hover .dropdown-menu {
 
32
  <p>🚚 Free UK delivery on orders over £150 | ⏰ Same day dispatch before 3pm</p>
33
  </div>
34
 
35
+ <!-- Header -->
 
 
 
 
 
 
 
 
36
  <header class="bg-white shadow-sm sticky top-0 z-50">
37
  <div class="container mx-auto px-4">
38
  <!-- Top Header -->
 
169
  </ul>
170
  </nav>
171
  </div>
 
172
  <!-- Hero Slider -->
173
  <div class="relative bg-gray-200 h-64 md:h-96 overflow-hidden">
174
  <div class="absolute inset-0 bg-gradient-to-r from-black to-transparent opacity-50"></div>
 
176
  <div class="text-white max-w-lg">
177
  <h1 class="text-3xl md:text-5xl font-bold mb-4">Premium VW Transporter Parts</h1>
178
  <p class="text-lg mb-6">Upgrade your VW with our high-quality parts and accessories</p>
179
+ <a href="/products.html" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-md font-medium inline-block">Shop Now</a>
180
  </div>
181
  </div>
182
  </div>
183
+ <!-- Category Icons -->
 
184
  <div class="bg-white py-8">
185
  <div class="container mx-auto px-4">
186
  <h2 class="text-2xl font-bold text-center mb-8">Shop By Category</h2>
 
223
  <div class="container mx-auto px-4">
224
  <div class="flex justify-between items-center mb-8">
225
  <h2 class="text-2xl font-bold">Featured Products</h2>
226
+ <a href="/products.html" class="text-blue-600 hover:underline">View All</a>
227
+ </div>
228
 
229
  <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
230
  <!-- Product 1 -->
 
245
  <button class="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white py-2 rounded-md">
246
  Add to Cart
247
  </button>
248
+ </div>
249
  </div>
250
 
251
  <!-- Product 2 -->
 
399
  <li><a href="#" class="text-gray-400 hover:text-white">Size Guide</a></li>
400
  </ul>
401
  </div>
402
+
403
  <!-- Categories -->
404
  <div>
405
  <h3 class="font-bold text-lg mb-4">Categories</h3>
 
407
  <li><a href="#" class="text-gray-400 hover:text-white">T4 Transporter</a></li>
408
  <li><a href="#" class="text-gray-400 hover:text-white">T5 Transporter</a></li>
409
  <li><a href="#" class="text-gray-400 hover:text-white">T6 Transporter</a></li>
 
410
  <li><a href="#" class="text-gray-400 hover:text-white">Wheel Packages</a></li>
411
  </ul>
412
  </div>
413
+
414
+ <!-- Newsletter -->
415
  <div>
416
  <h3 class="font-bold text-lg mb-4">Newsletter</h3>
417
  <p class="text-gray-400 mb-4">Subscribe for updates and special offers</p>
 
433
  <div class="flex flex-wrap justify-center gap-4 mb-6">
434
  <img src="https://cdn.shopify.com/s/files/1/1774/9481/t/2/assets/footer_cards.png?97" alt="Payment Methods" class="h-8">
435
  </div>
436
+
437
  <!-- Copyright -->
438
  <div class="border-t border-gray-800 pt-6 text-center text-gray-400">
439
+ <p>&copy; 2023 Travelin-Lite LTD. All rights reserved.</p>
440
  </div>
441
+ </div>
442
  </footer>
443
+
444
  <script>
445
  // Mobile menu toggle
446
  document.getElementById('mobile-menu-button').addEventListener('click', function() {
 
457
  });
458
  }
459
  });
 
 
 
 
460
  </script>
461
  <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=flen-crypto/tl2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
462
  </html>
products.html ADDED
@@ -0,0 +1,460 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>All Products | Travelin-Lite LTD</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
+ .dropdown:hover .dropdown-menu {
11
+ display: block;
12
+ }
13
+ .product-card:hover {
14
+ transform: translateY(-5px);
15
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
16
+ }
17
+ .category-card:hover img {
18
+ transform: scale(1.05);
19
+ }
20
+ </style>
21
+ </head>
22
+ <body class="font-sans bg-gray-50">
23
+ <!-- Top Announcement Bar -->
24
+ <div class="bg-black text-white text-center py-2 px-4 text-sm">
25
+ <p>🚚 Free UK delivery on orders over £150 | ⏰ Same day dispatch before 3pm</p>
26
+ </div>
27
+
28
+ <!-- Header -->
29
+ <header class="bg-white shadow-sm sticky top-0 z-50">
30
+ <div class="container mx-auto px-4">
31
+ <!-- Top Header -->
32
+ <div class="flex items-center justify-between py-3 border-b">
33
+ <div class="flex items-center space-x-4">
34
+ <a href="#" class="text-gray-700 hover:text-blue-600">
35
+ <i class="fas fa-phone-alt"></i> 01234 567890
36
+ </a>
37
+ <a href="#" class="text-gray-700 hover:text-blue-600">
38
+ <i class="fas fa-envelope"></i> info@travelinlite.com
39
+ </a>
40
+ </div>
41
+ <div class="flex items-center space-x-4">
42
+ <a href="#" class="text-gray-700 hover:text-blue-600">Account</a>
43
+ <a href="#" class="text-gray-700 hover:text-blue-600">Wishlist</a>
44
+ <div class="relative">
45
+ <a href="#" class="text-gray-700 hover:text-blue-600 flex items-center">
46
+ <i class="fas fa-shopping-cart"></i>
47
+ <span class="ml-1">Cart (0)</span>
48
+ </a>
49
+ </div>
50
+ </div>
51
+ </div>
52
+
53
+ <!-- Main Header -->
54
+ <div class="flex items-center justify-between py-4">
55
+ <!-- Logo -->
56
+ <div class="w-1/4">
57
+ <a href="/" class="block">
58
+ <img src="https://travelinlite-transporters.co.uk/cdn/shop/t/4/assets/logo.png?v=44385051453033833961657891895"
59
+ alt="Travelin-Lite LTD" class="h-16">
60
+ </a>
61
+ </div>
62
+
63
+ <!-- Search -->
64
+ <div class="w-2/4 px-8">
65
+ <div class="relative">
66
+ <input type="text" placeholder="Search for parts..."
67
+ class="w-full px-4 py-2 border border-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500">
68
+ <button class="absolute right-0 top-0 h-full px-4 text-gray-600 hover:text-blue-600">
69
+ <i class="fas fa-search"></i>
70
+ </button>
71
+ </div>
72
+ </div>
73
+
74
+ <!-- Paypal & Icons -->
75
+ <div class="w-1/4 flex justify-end items-center space-x-4">
76
+ <a href="#" class="hidden md:block">
77
+ <img src="https://travelinlite-transporters.co.uk/cdn/shop/t/4/assets/small-paypal.jpg?v=131092240753959694361608026327"
78
+ alt="PayPal Credit" class="h-8">
79
+ </a>
80
+ <div class="flex space-x-4">
81
+ <a href="#" class="text-gray-700 hover:text-blue-600 text-xl">
82
+ <i class="far fa-user"></i>
83
+ </a>
84
+ <a href="#" class="text-gray-700 hover:text-blue-600 text-xl">
85
+ <i class="far fa-heart"></i>
86
+ </a>
87
+ <a href="#" class="text-gray-700 hover:text-blue-600 text-xl relative">
88
+ <i class="fas fa-shopping-cart"></i>
89
+ <span class="absolute -top-2 -right-2 bg-blue-600 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">0</span>
90
+ </a>
91
+ </div>
92
+ </div>
93
+ </div>
94
+
95
+ <!-- Navigation -->
96
+ <nav class="hidden md:block border-t">
97
+ <ul class="flex justify-center space-x-8 py-3">
98
+ <li class="dropdown relative group">
99
+ <a href="#" class="text-gray-800 hover:text-blue-600 font-medium py-2 flex items-center">
100
+ T4 <i class="fas fa-chevron-down ml-1 text-xs"></i>
101
+ </a>
102
+ <div class="dropdown-menu absolute hidden group-hover:block bg-white shadow-lg rounded-md mt-1 w-48 z-50">
103
+ <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">T4 Central Locking</a>
104
+ <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">T4 Lighting</a>
105
+ <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">T4 Accessories</a>
106
+ </div>
107
+ </li>
108
+ <li class="dropdown relative group">
109
+ <a href="#" class="text-gray-800 hover:text-blue-600 font-medium py-2 flex items-center">
110
+ T5 <i class="fas fa-chevron-down ml-1 text-xs"></i>
111
+ </a>
112
+ <div class="dropdown-menu absolute hidden group-hover:block bg-white shadow-lg rounded-md mt-1 w-48 z-50">
113
+ <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">T5 Rear Styling</a>
114
+ <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">T5 Exterior Styling</a>
115
+ <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">T5 Front Lighting</a>
116
+ </div>
117
+ </li>
118
+ <li><a href="/products.html" class="text-gray-800 hover:text-blue-600 font-medium py-2">All Products</a></li>
119
+ <li><a href="#" class="text-gray-800 hover:text-blue-600 font-medium py-2">Wheels</a></li>
120
+ <li><a href="#" class="text-gray-800 hover:text-blue-600 font-medium py-2">Suspension</a></li>
121
+ <li><a href="#" class="text-gray-800 hover:text-blue-600 font-medium py-2">Clearance</a></li>
122
+ <li><a href="#" class="text-gray-800 hover:text-blue-600 font-medium py-2">Blog</a></li>
123
+ </ul>
124
+ </nav>
125
+ </div>
126
+ </header>
127
+
128
+ <!-- Mobile Menu Button -->
129
+ <div class="md:hidden bg-white py-3 px-4 flex justify-between items-center border-b">
130
+ <button id="mobile-menu-button" class="text-gray-700">
131
+ <i class="fas fa-bars text-xl"></i>
132
+ </button>
133
+ <a href="/" class="block">
134
+ <img src="https://travelinlite-transporters.co.uk/cdn/shop/t/4/assets/logo.png?v=44385051453033833961657891895"
135
+ alt="Travelin-Lite LTD" class="h-10">
136
+ </a>
137
+ <a href="#" class="text-gray-700">
138
+ <i class="fas fa-shopping-cart text-xl"></i>
139
+ </a>
140
+ </div>
141
+
142
+ <!-- Page Header -->
143
+ <div class="bg-white py-8 border-b">
144
+ <div class="container mx-auto px-4">
145
+ <h1 class="text-3xl font-bold text-gray-900 mb-2">All Products</h1>
146
+ <p class="text-gray-600">Browse our complete collection of VW Transporter parts and accessories</p>
147
+ </div>
148
+ </div>
149
+
150
+ <!-- Products Section -->
151
+ <div class="container mx-auto px-4 py-12">
152
+ <div class="flex flex-col lg:flex-row gap-8">
153
+ <!-- Filters Sidebar -->
154
+ <div class="lg:w-1/4">
155
+ <div class="bg-white rounded-lg shadow-sm p-6">
156
+ <h3 class="font-bold text-lg mb-4">Filters</h3>
157
+
158
+ <!-- Vehicle Type -->
159
+ <div class="mb-6">
160
+ <h4 class="font-medium mb-3">Vehicle Type</h4>
161
+ <div class="space-y-2">
162
+ <label class="flex items-center">
163
+ <input type="checkbox" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
164
+ <span class="ml-2 text-gray-700">T4 (90-03)</span>
165
+ </label>
166
+ <label class="flex items-center">
167
+ <input type="checkbox" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
168
+ <span class="ml-2 text-gray-700">T5 (03-09)</span>
169
+ </label>
170
+ <label class="flex items-center">
171
+ <input type="checkbox" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
172
+ <span class="ml-2 text-gray-700">T5.1 (10-15)</span>
173
+ </label>
174
+ <label class="flex items-center">
175
+ <input type="checkbox" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
176
+ <span class="ml-2 text-gray-700">T6 (15-19)</span>
177
+ </label>
178
+ <label class="flex items-center">
179
+ <input type="checkbox" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
180
+ <span class="ml-2 text-gray-700">T6.1 (19-)</span>
181
+ </label>
182
+ </div>
183
+ </div>
184
+
185
+ <!-- Category -->
186
+ <div class="mb-6">
187
+ <h4 class="font-medium mb-3">Category</h4>
188
+ <div class="space-y-2">
189
+ <label class="flex items-center">
190
+ <input type="checkbox" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
191
+ <span class="ml-2 text-gray-700">Lighting</span>
192
+ </label>
193
+ <label class="flex items-center">
194
+ <input type="checkbox" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
195
+ <span class="ml-2 text-gray-700">Suspension</span>
196
+ </label>
197
+ <label class="flex items-center">
198
+ <input type="checkbox" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
199
+ <span class="ml-2 text-gray-700">Wheels</span>
200
+ </label>
201
+ <label class="flex items-center">
202
+ <input type="checkbox" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
203
+ <span class="ml-2 text-gray-700">Styling</span>
204
+ </label>
205
+ </div>
206
+ </div>
207
+
208
+ <!-- Price Range -->
209
+ <div class="mb-6">
210
+ <h4 class="font-medium mb-3">Price Range</h4>
211
+ <div class="space-y-2">
212
+ <label class="flex items-center">
213
+ <input type="checkbox" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
214
+ <span class="ml-2 text-gray-700">Under £50</span>
215
+ </label>
216
+ <label class="flex items-center">
217
+ <input type="checkbox" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
218
+ <span class="ml-2 text-gray-700">£50 - £100</span>
219
+ </label>
220
+ <label class="flex items-center">
221
+ <input type="checkbox" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
222
+ <span class="ml-2 text-gray-700">£100 - £200</span>
223
+ </label>
224
+ <label class="flex items-center">
225
+ <input type="checkbox" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
226
+ <span class="ml-2 text-gray-700">Over £200</span>
227
+ </label>
228
+ </div>
229
+ </div>
230
+
231
+ <button class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 rounded-md">
232
+ Apply Filters
233
+ </button>
234
+ </div>
235
+ </div>
236
+
237
+ <!-- Products Grid -->
238
+ <div class="lg:w-3/4">
239
+ <!-- Sort and View Options -->
240
+ <div class="flex flex-col sm:flex-row justify-between items-center mb-6">
241
+ <p class="text-gray-600 mb-2 sm:mb-0">Showing 12 of 256 products</p>
242
+ <div class="flex items-center space-x-4">
243
+ <select class="border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
244
+ <option>Sort by: Featured</option>
245
+ <option>Price: Low to High</option>
246
+ <option>Price: High to Low</option>
247
+ <option>Newest First</option>
248
+ </select>
249
+ </div>
250
+ </div>
251
+
252
+ <!-- Products -->
253
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
254
+ <!-- Product 1 -->
255
+ <div class="product-card bg-white rounded-lg shadow-md overflow-hidden transition-transform duration-300">
256
+ <div class="relative">
257
+ <img src="https://travelinlite-transporters.co.uk/cdn/shop/products/image_a0869230-3cd0-4d94-a80f-b7cedccf81e8_large.jpg?v=1597407580"
258
+ alt="T5.1 Mystery Box" class="w-full h-48 object-cover">
259
+ <div class="absolute top-2 right-2 bg-red-600 text-white text-xs font-bold px-2 py-1 rounded">
260
+ SALE
261
+ </div>
262
+ </div>
263
+ <div class="p-4">
264
+ <h3 class="font-medium text-gray-800 mb-2">T5.1 10-15 mystery box ??? £50 worth of parts for £40</h3>
265
+ <div class="flex justify-between items-center">
266
+ <span class="text-lg font-bold text-gray-900">£40.00</span>
267
+ <span class="text-sm text-gray-500 line-through">£50.00</span>
268
+ </div>
269
+ <button class="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white py-2 rounded-md">
270
+ Add to Cart
271
+ </button>
272
+ </div>
273
+ </div>
274
+
275
+ <!-- Product 2 -->
276
+ <div class="product-card bg-white rounded-lg shadow-md overflow-hidden transition-transform duration-300">
277
+ <div class="relative">
278
+ <img src="https://travelinlite-transporters.co.uk/cdn/shop/products/image_48fe7bd7-1faa-4858-88d4-840b0a8c6f81_large.jpg?v=1750774219"
279
+ alt="T6 Tailgate LED lights" class="w-full h-48 object-cover">
280
+ </div>
281
+ <div class="p-4">
282
+ <h3 class="font-medium text-gray-800 mb-2">T6 Tailgate LED rear lights with dynamic indicator</h3>
283
+ <div class="flex justify-between items-center">
284
+ <span class="text-lg font-bold text-gray-900">£290.00</span>
285
+ </div>
286
+ <button class="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white py-2 rounded-md">
287
+ Add to Cart
288
+ </button>
289
+ </div>
290
+ </div>
291
+
292
+ <!-- Product 3 -->
293
+ <div class="product-card bg-white rounded-lg shadow-md overflow-hidden transition-transform duration-300">
294
+ <div class="relative">
295
+ <img src="https://travelinlite-transporters.co.uk/cdn/shop/files/FullSizeRender_5ec0a6f7-c208-4538-82f9-4cb1d6f292e3_large.jpg?v=1720533296"
296
+ alt="T6.1 DRL Headlights" class="w-full h-48 object-cover">
297
+ </div>
298
+ <div class="p-4">
299
+ <h3 class="font-medium text-gray-800 mb-2">T6.1 DRL Headlights With Full LED Bulbs (Audi Style)</h3>
300
+ <div class="flex justify-between items-center">
301
+ <span class="text-lg font-bold text-gray-900">£950.00</span>
302
+ </div>
303
+ <button class="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white py-2 rounded-md">
304
+ Add to Cart
305
+ </button>
306
+ </div>
307
+ </div>
308
+
309
+ <!-- Product 4 -->
310
+ <div class="product-card bg-white rounded-lg shadow-md overflow-hidden transition-transform duration-300">
311
+ <div class="relative">
312
+ <img src="https://travelinlite-transporters.co.uk/cdn/shop/products/image_368cfe95-0578-4d79-b0d1-d0c263e9889d_large.jpg?v=1654078080"
313
+ alt="T6.1 Splitter" class="w-full h-48 object-cover">
314
+ </div>
315
+ <div class="p-4">
316
+ <h3 class="font-medium text-gray-800 mb-2">T6.1 Splitter Gloss Black TL Design 20 Onwards</h3>
317
+ <div class="flex justify-between items-center">
318
+ <span class="text-lg font-bold text-gray-900">£155.00</span>
319
+ </div>
320
+ <button class="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white py-2 rounded-md">
321
+ Add to Cart
322
+ </button>
323
+ </div>
324
+ </div>
325
+
326
+ <!-- Product 5 -->
327
+ <div class="product-card bg-white rounded-lg shadow-md overflow-hidden transition-transform duration-300">
328
+ <div class="relative">
329
+ <img src="https://travelinlite-transporters.co.uk/cdn/shop/files/IMG_20240612_155926_1_large.jpg?v=1718197930"
330
+ alt="T6.1 Rear Spoiler" class="w-full h-48 object-cover">
331
+ </div>
332
+ <div class="p-4">
333
+ <h3 class="font-medium text-gray-800 mb-2">T6.1 Rear Spoiler Gloss Black TL Design</h3>
334
+ <div class="flex justify-between items-center">
335
+ <span class="text-lg font-bold text-gray-900">£180.00</span>
336
+ </div>
337
+ <button class="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white py-2 rounded-md">
338
+ Add to Cart
339
+ </button>
340
+ </div>
341
+ </div>
342
+
343
+ <!-- Product 6 -->
344
+ <div class="product-card bg-white rounded-lg shadow-md overflow-hidden transition-transform duration-300">
345
+ <div class="relative">
346
+ <img src="https://travelinlite-transporters.co.uk/cdn/shop/products/image_2f4c4f85-b3f6-4b2b-8f1e-90b8a7b7b6c5_large.jpg?v=1625147890"
347
+ alt="T5 LED Headlights" class="w-full h-48 object-cover">
348
+ </div>
349
+ <div class="p-4">
350
+ <h3 class="font-medium text-gray-800 mb-2">T5 LED Headlights With DRL</h3>
351
+ <div class="flex justify-between items-center">
352
+ <span class="text-lg font-bold text-gray-900">£650.00</span>
353
+ </div>
354
+ <button class="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white py-2 rounded-md">
355
+ Add to Cart
356
+ </button>
357
+ </div>
358
+ </div>
359
+ </div>
360
+
361
+ <!-- Pagination -->
362
+ <div class="flex justify-center mt-12">
363
+ <nav class="flex items-center space-x-2">
364
+ <a href="#" class="px-3 py-2 bg-blue-600 text-white rounded-md">1</a>
365
+ <a href="#" class="px-3 py-2 bg-white border border-gray-300 rounded-md hover:bg-gray-50">2</a>
366
+ <a href="#" class="px-3 py-2 bg-white border border-gray-300 rounded-md hover:bg-gray-50">3</a>
367
+ <a href="#" class="px-3 py-2 bg-white border border-gray-300 rounded-md hover:bg-gray-50">4</a>
368
+ <a href="#" class="px-3 py-2 bg-white border border-gray-300 rounded-md hover:bg-gray-50">Next</a>
369
+ </nav>
370
+ </div>
371
+ </div>
372
+ </div>
373
+ </div>
374
+
375
+ <!-- Footer -->
376
+ <footer class="bg-gray-900 text-white pt-12 pb-6">
377
+ <div class="container mx-auto px-4">
378
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-8">
379
+ <!-- Information -->
380
+ <div>
381
+ <h3 class="font-bold text-lg mb-4">Information</h3>
382
+ <ul class="space-y-2">
383
+ <li><a href="#" class="text-gray-400 hover:text-white">About Us</a></li>
384
+ <li><a href="#" class="text-gray-400 hover:text-white">Contact Us</a></li>
385
+ <li><a href="#" class="text-gray-400 hover:text-white">Returns Policy</a></li>
386
+ <li><a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a></li>
387
+ </ul>
388
+ </div>
389
+
390
+ <!-- Customer Service -->
391
+ <div>
392
+ <h3 class="font-bold text-lg mb-4">Customer Service</h3>
393
+ <ul class="space-y-2">
394
+ <li><a href="#" class="text-gray-400 hover:text-white">FAQs</a></li>
395
+ <li><a href="#" class="text-gray-400 hover:text-white">Shipping Info</a></li>
396
+ <li><a href="#" class="text-gray-400 hover:text-white">Track Order</a></li>
397
+ <li><a href="#" class="text-gray-400 hover:text-white">Size Guide</a></li>
398
+ </ul>
399
+ </div>
400
+
401
+ <!-- Categories -->
402
+ <div>
403
+ <h3 class="font-bold text-lg mb-4">Categories</h3>
404
+ <ul class="space-y-2">
405
+ <li><a href="#" class="text-gray-400 hover:text-white">T4 Transporter</a></li>
406
+ <li><a href="#" class="text-gray-400 hover:text-white">T5 Transporter</a></li>
407
+ <li><a href="#" class="text-gray-400 hover:text-white">T6 Transporter</a></li>
408
+ <li><a href="#" class="text-gray-400 hover:text-white">Wheel Packages</a></li>
409
+ </ul>
410
+ </div>
411
+
412
+ <!-- Newsletter -->
413
+ <div>
414
+ <h3 class="font-bold text-lg mb-4">Newsletter</h3>
415
+ <p class="text-gray-400 mb-4">Subscribe for updates and special offers</p>
416
+ <form class="flex">
417
+ <input type="email" placeholder="Your email" class="px-3 py-2 bg-gray-800 text-white rounded-l-md focus:outline-none w-full">
418
+ <button type="submit" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-r-md">
419
+ <i class="fas fa-paper-plane"></i>
420
+ </button>
421
+ </form>
422
+ <div class="flex space-x-4 mt-4">
423
+ <a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-facebook-f"></i></a>
424
+ <a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-instagram"></i></a>
425
+ <a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-youtube"></i></a>
426
+ </div>
427
+ </div>
428
+ </div>
429
+
430
+ <!-- Payment Methods -->
431
+ <div class="flex flex-wrap justify-center gap-4 mb-6">
432
+ <img src="https://cdn.shopify.com/s/files/1/1774/9481/t/2/assets/footer_cards.png?97" alt="Payment Methods" class="h-8">
433
+ </div>
434
+
435
+ <!-- Copyright -->
436
+ <div class="border-t border-gray-800 pt-6 text-center text-gray-400">
437
+ <p>&copy; 2023 Travelin-Lite LTD. All rights reserved.</p>
438
+ </div>
439
+ </div>
440
+ </footer>
441
+
442
+ <script>
443
+ // Mobile menu toggle
444
+ document.getElementById('mobile-menu-button').addEventListener('click', function() {
445
+ const menu = document.getElementById('mobile-menu');
446
+ menu.classList.toggle('hidden');
447
+ });
448
+
449
+ // Dropdown menus for mobile
450
+ document.querySelectorAll('#mobile-menu li > a').forEach(item => {
451
+ if (item.nextElementSibling && item.nextElementSibling.tagName === 'UL') {
452
+ item.addEventListener('click', function(e) {
453
+ e.preventDefault();
454
+ this.nextElementSibling.classList.toggle('hidden');
455
+ });
456
+ }
457
+ });
458
+ </script>
459
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=flen-crypto/tl2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
460
+ </html>