File size: 26,723 Bytes
e92d74d
 
 
 
 
 
36516e1
e92d74d
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
36516e1
e92d74d
 
 
 
 
5b6721b
 
 
 
e92d74d
5b6721b
e92d74d
 
5b6721b
 
 
 
e92d74d
 
 
5b6721b
e92d74d
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
5b6721b
e92d74d
 
 
5b6721b
 
e92d74d
 
5b6721b
e92d74d
 
5b6721b
e92d74d
 
 
5b6721b
e92d74d
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
5b6721b
 
e92d74d
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
5b6721b
e92d74d
5b6721b
e92d74d
 
5b6721b
e92d74d
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
36516e1
5b6721b
e92d74d
 
36516e1
e92d74d
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
36516e1
 
e92d74d
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
36516e1
e92d74d
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
5b6721b
e92d74d
 
 
 
5b6721b
e92d74d
 
 
 
 
5b6721b
e92d74d
 
 
 
5b6721b
e92d74d
 
 
 
 
 
 
 
 
5b6721b
 
 
e92d74d
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
5b6721b
 
 
 
 
e92d74d
 
 
 
 
 
5b6721b
 
 
 
 
e92d74d
36516e1
e92d74d
 
 
 
5b6721b
 
 
 
 
e92d74d
36516e1
 
e92d74d
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
36516e1
e92d74d
 
36516e1
e92d74d
36516e1
e92d74d
36516e1
e92d74d
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Travelin-Lite LTD | VW Transporter Parts & Accessories</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        .dropdown:hover .dropdown-menu {
            display: block;
        }
        .product-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }
        .category-card:hover img {
            transform: scale(1.05);
        }
        .marquee {
            animation: marquee 20s linear infinite;
        }
        @keyframes marquee {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }
    </style>
</head>
<body class="font-sans bg-gray-50">
    <!-- Top Announcement Bar -->
    <div class="bg-black text-white text-center py-2 px-4 text-sm">
        <p>🚚 Free UK delivery on orders over £150 | ⏰ Same day dispatch before 3pm</p>
    </div>

    <!-- Header -->
    <header class="bg-white shadow-sm sticky top-0 z-50">
        <div class="container mx-auto px-4">
            <!-- Top Header -->
            <div class="flex items-center justify-between py-3 border-b">
                <div class="flex items-center space-x-4">
                    <a href="#" class="text-gray-700 hover:text-blue-600">
                        <i class="fas fa-phone-alt"></i> 01234 567890
                    </a>
                    <a href="#" class="text-gray-700 hover:text-blue-600">
                        <i class="fas fa-envelope"></i> info@travelinlite.com
                    </a>
                </div>
                <div class="flex items-center space-x-4">
                    <a href="#" class="text-gray-700 hover:text-blue-600">Account</a>
                    <a href="#" class="text-gray-700 hover:text-blue-600">Wishlist</a>
                    <div class="relative">
                        <a href="#" class="text-gray-700 hover:text-blue-600 flex items-center">
                            <i class="fas fa-shopping-cart"></i>
                            <span class="ml-1">Cart (0)</span>
                        </a>
                    </div>
                </div>
            </div>

            <!-- Main Header -->
            <div class="flex items-center justify-between py-4">
                <!-- Logo -->
                <div class="w-1/4">
                    <a href="/" class="block">
                        <img src="https://travelinlite-transporters.co.uk/cdn/shop/t/4/assets/logo.png?v=44385051453033833961657891895" 
                             alt="Travelin-Lite LTD" class="h-16">
                    </a>
                </div>

                <!-- Search -->
                <div class="w-2/4 px-8">
                    <div class="relative">
                        <input type="text" placeholder="Search for parts..." 
                               class="w-full px-4 py-2 border border-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <button class="absolute right-0 top-0 h-full px-4 text-gray-600 hover:text-blue-600">
                            <i class="fas fa-search"></i>
                        </button>
                    </div>
                </div>

                <!-- Paypal & Icons -->
                <div class="w-1/4 flex justify-end items-center space-x-4">
                    <a href="#" class="hidden md:block">
                        <img src="https://travelinlite-transporters.co.uk/cdn/shop/t/4/assets/small-paypal.jpg?v=131092240753959694361608026327" 
                             alt="PayPal Credit" class="h-8">
                    </a>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-700 hover:text-blue-600 text-xl">
                            <i class="far fa-user"></i>
                        </a>
                        <a href="#" class="text-gray-700 hover:text-blue-600 text-xl">
                            <i class="far fa-heart"></i>
                        </a>
                        <a href="#" class="text-gray-700 hover:text-blue-600 text-xl relative">
                            <i class="fas fa-shopping-cart"></i>
                            <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>
                        </a>
                    </div>
                </div>
            </div>

            <!-- Navigation -->
            <nav class="hidden md:block border-t">
                <ul class="flex justify-center space-x-8 py-3">
                    <li class="dropdown relative group">
                        <a href="#" class="text-gray-800 hover:text-blue-600 font-medium py-2 flex items-center">
                            T4 <i class="fas fa-chevron-down ml-1 text-xs"></i>
                        </a>
                        <div class="dropdown-menu absolute hidden group-hover:block bg-white shadow-lg rounded-md mt-1 w-48 z-50">
                            <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">T4 Central Locking</a>
                            <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">T4 Lighting</a>
                            <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">T4 Accessories</a>
                        </div>
                    </li>
                    <li class="dropdown relative group">
                        <a href="#" class="text-gray-800 hover:text-blue-600 font-medium py-2 flex items-center">
                            T5 <i class="fas fa-chevron-down ml-1 text-xs"></i>
                        </a>
                        <div class="dropdown-menu absolute hidden group-hover:block bg-white shadow-lg rounded-md mt-1 w-48 z-50">
                            <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">T5 Rear Styling</a>
                            <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">T5 Exterior Styling</a>
                            <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">T5 Front Lighting</a>
                        </div>
                    </li>
                    <!-- More navigation items would go here -->
                    <li><a href="#" class="text-gray-800 hover:text-blue-600 font-medium py-2">Wheels</a></li>
                    <li><a href="#" class="text-gray-800 hover:text-blue-600 font-medium py-2">Suspension</a></li>
                    <li><a href="#" class="text-gray-800 hover:text-blue-600 font-medium py-2">Clearance</a></li>
                    <li><a href="#" class="text-gray-800 hover:text-blue-600 font-medium py-2">Blog</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <!-- Mobile Menu Button -->
    <div class="md:hidden bg-white py-3 px-4 flex justify-between items-center border-b">
        <button id="mobile-menu-button" class="text-gray-700">
            <i class="fas fa-bars text-xl"></i>
        </button>
        <a href="/" class="block">
            <img src="https://travelinlite-transporters.co.uk/cdn/shop/t/4/assets/logo.png?v=44385051453033833961657891895" 
                 alt="Travelin-Lite LTD" class="h-10">
        </a>
        <a href="#" class="text-gray-700">
            <i class="fas fa-shopping-cart text-xl"></i>
        </a>
    </div>

    <!-- Mobile Menu -->
    <div id="mobile-menu" class="hidden md:hidden bg-white shadow-lg absolute w-full z-50">
        <div class="px-4 py-3 border-b">
            <input type="text" placeholder="Search..." class="w-full px-3 py-2 border rounded">
        </div>
        <nav>
            <ul>
                <li class="border-b">
                    <a href="#" class="block px-4 py-3 text-gray-800 hover:bg-gray-100">Home</a>
                </li>
                <li class="border-b">
                    <a href="#" class="block px-4 py-3 text-gray-800 hover:bg-gray-100 flex justify-between items-center">
                        T4 <i class="fas fa-chevron-down"></i>
                    </a>
                    <ul class="hidden bg-gray-50">
                        <li><a href="#" class="block px-6 py-2 text-gray-700 hover:bg-gray-100">T4 Central Locking</a></li>
                        <li><a href="#" class="block px-6 py-2 text-gray-700 hover:bg-gray-100">T4 Lighting</a></li>
                    </ul>
                </li>
                <!-- More mobile menu items would go here -->
            </ul>
        </nav>
    </div>
    <!-- Hero Slider -->
    <div class="relative bg-gray-200 h-64 md:h-96 overflow-hidden">
        <div class="absolute inset-0 bg-gradient-to-r from-black to-transparent opacity-50"></div>
        <div class="relative h-full flex items-center container mx-auto px-4">
            <div class="text-white max-w-lg">
                <h1 class="text-3xl md:text-5xl font-bold mb-4">Premium VW Transporter Parts</h1>
                <p class="text-lg mb-6">Upgrade your VW with our high-quality parts and accessories</p>
        <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>
            </div>
        </div>
    </div>
<!-- Category Icons -->
    <div class="bg-white py-8">
        <div class="container mx-auto px-4">
            <h2 class="text-2xl font-bold text-center mb-8">Shop By Category</h2>
            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
                <a href="#" class="category-card block text-center group">
                    <div class="bg-gray-100 rounded-full p-4 mb-2 overflow-hidden">
                        <img src="https://travelinlite-transporters.co.uk/cdn/shop/files/clearance2_150x150.jpg?v=1708084195" 
                             alt="Clearance" class="w-full h-auto transition-transform duration-300">
                    </div>
                    <span class="font-medium text-gray-800 group-hover:text-blue-600">Clearance</span>
                </a>
                <a href="#" class="category-card block text-center group">
                    <div class="bg-gray-100 rounded-full p-4 mb-2 overflow-hidden">
                        <img src="https://travelinlite-transporters.co.uk/cdn/shop/files/TL_FACELIFT_151515FF_2_150x150.jpg?v=1708083691" 
                             alt="Face Lift" class="w-full h-auto transition-transform duration-300">
                    </div>
                    <span class="font-medium text-gray-800 group-hover:text-blue-600">Face Lift</span>
                </a>
                <!-- More category items would go here -->
                <a href="#" class="category-card block text-center group">
                    <div class="bg-gray-100 rounded-full p-4 mb-2 overflow-hidden">
                        <img src="https://travelinlite-transporters.co.uk/cdn/shop/files/koni_151515ff_150x150.jpg?v=1614328127" 
                             alt="Koni Suspension" class="w-full h-auto transition-transform duration-300">
                    </div>
                    <span class="font-medium text-gray-800 group-hover:text-blue-600">Suspension</span>
                </a>
                <a href="#" class="category-card block text-center group">
                    <div class="bg-gray-100 rounded-full p-4 mb-2 overflow-hidden">
                        <img src="https://travelinlite-transporters.co.uk/cdn/shop/files/WOLFRACE_TL_150x150.jpg?v=1614328331" 
                             alt="Wolfrace Wheels" class="w-full h-auto transition-transform duration-300">
                    </div>
                    <span class="font-medium text-gray-800 group-hover:text-blue-600">Wheels</span>
                </a>
            </div>
        </div>
    </div>

    <!-- Featured Products -->
    <div class="bg-gray-50 py-12">
        <div class="container mx-auto px-4">
            <div class="flex justify-between items-center mb-8">
                <h2 class="text-2xl font-bold">Featured Products</h2>
                <a href="/products.html" class="text-blue-600 hover:underline">View All</a>
</div>
            
            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
                <!-- Product 1 -->
                <div class="product-card bg-white rounded-lg shadow-md overflow-hidden transition-transform duration-300">
                    <div class="relative">
                        <img src="https://travelinlite-transporters.co.uk/cdn/shop/products/image_a0869230-3cd0-4d94-a80f-b7cedccf81e8_large.jpg?v=1597407580" 
                             alt="T5.1 Mystery Box" class="w-full h-48 object-cover">
                        <div class="absolute top-2 right-2 bg-red-600 text-white text-xs font-bold px-2 py-1 rounded">
                            SALE
                        </div>
                    </div>
                    <div class="p-4">
                        <h3 class="font-medium text-gray-800 mb-2">T5.1 10-15 mystery box ??? £50 worth of parts for £40</h3>
                        <div class="flex justify-between items-center">
                            <span class="text-lg font-bold text-gray-900">£40.00</span>
                            <span class="text-sm text-gray-500 line-through">£50.00</span>
                        </div>
                        <button class="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white py-2 rounded-md">
                            Add to Cart
                        </button>
</div>
                </div>
                
                <!-- Product 2 -->
                <div class="product-card bg-white rounded-lg shadow-md overflow-hidden transition-transform duration-300">
                    <div class="relative">
                        <img src="https://travelinlite-transporters.co.uk/cdn/shop/products/image_48fe7bd7-1faa-4858-88d4-840b0a8c6f81_large.jpg?v=1750774219" 
                             alt="T6 Tailgate LED lights" class="w-full h-48 object-cover">
                    </div>
                    <div class="p-4">
                        <h3 class="font-medium text-gray-800 mb-2">T6 Tailgate LED rear lights with dynamic indicator</h3>
                        <div class="flex justify-between items-center">
                            <span class="text-lg font-bold text-gray-900">£290.00</span>
                        </div>
                        <button class="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white py-2 rounded-md">
                            Add to Cart
                        </button>
                    </div>
                </div>
                
                <!-- More products would go here -->
                <div class="product-card bg-white rounded-lg shadow-md overflow-hidden transition-transform duration-300">
                    <div class="relative">
                        <img src="https://travelinlite-transporters.co.uk/cdn/shop/files/FullSizeRender_5ec0a6f7-c208-4538-82f9-4cb1d6f292e3_large.jpg?v=1720533296" 
                             alt="T6.1 DRL Headlights" class="w-full h-48 object-cover">
                    </div>
                    <div class="p-4">
                        <h3 class="font-medium text-gray-800 mb-2">T6.1 DRL Headlights With Full LED Bulbs (Audi Style)</h3>
                        <div class="flex justify-between items-center">
                            <span class="text-lg font-bold text-gray-900">£950.00</span>
                        </div>
                        <button class="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white py-2 rounded-md">
                            Add to Cart
                        </button>
                    </div>
                </div>
                
                <div class="product-card bg-white rounded-lg shadow-md overflow-hidden transition-transform duration-300">
                    <div class="relative">
                        <img src="https://travelinlite-transporters.co.uk/cdn/shop/products/image_368cfe95-0578-4d79-b0d1-d0c263e9889d_large.jpg?v=1654078080" 
                             alt="T6.1 Splitter" class="w-full h-48 object-cover">
                    </div>
                    <div class="p-4">
                        <h3 class="font-medium text-gray-800 mb-2">T6.1 Splitter Gloss Black TL Design 20 Onwards</h3>
                        <div class="flex justify-between items-center">
                            <span class="text-lg font-bold text-gray-900">£155.00</span>
                        </div>
                        <button class="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white py-2 rounded-md">
                            Add to Cart
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Vehicle Type Selector -->
    <div class="bg-white py-12">
        <div class="container mx-auto px-4">
            <h2 class="text-2xl font-bold text-center mb-8">Shop By Vehicle</h2>
            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6">
                <a href="#" class="block text-center group">
                    <img src="https://travelinlite-transporters.co.uk/cdn/shop/t/4/assets/catbox-image-1.jpg?v=95091023929989602401707747436" 
                         alt="T5 (03-09)" class="w-full h-32 object-cover rounded-md mb-2">
                    <span class="font-medium text-gray-800 group-hover:text-blue-600">T5 (03-09)</span>
                </a>
                <a href="#" class="block text-center group">
                    <img src="https://travelinlite-transporters.co.uk/cdn/shop/t/4/assets/catbox-image-2.jpg?v=154852507155710561111707901670" 
                         alt="T5.1 (10-15)" class="w-full h-32 object-cover rounded-md mb-2">
                    <span class="font-medium text-gray-800 group-hover:text-blue-600">T5.1 (10-15)</span>
                </a>
                <!-- More vehicle types would go here -->
                <a href="#" class="block text-center group">
                    <img src="https://travelinlite-transporters.co.uk/cdn/shop/t/4/assets/catbox-image-5.jpg?v=9591471235125164721669207055" 
                         alt="Caddy Mk3" class="w-full h-32 object-cover rounded-md mb-2">
                    <span class="font-medium text-gray-800 group-hover:text-blue-600">Caddy Mk3</span>
                </a>
            </div>
        </div>
    </div>

    <!-- Promo Banner -->
    <div class="bg-blue-800 text-white py-8">
        <div class="container mx-auto px-4 text-center">
            <h2 class="text-2xl font-bold mb-4">Need Help Choosing Parts?</h2>
            <p class="mb-6 max-w-2xl mx-auto">Our team of VW experts are here to help you find the perfect parts for your vehicle.</p>
            <div class="flex flex-col sm:flex-row justify-center gap-4">
                <a href="#" class="bg-white text-blue-800 hover:bg-gray-100 px-6 py-3 rounded-md font-medium inline-block">Contact Us</a>
                <a href="#" class="border border-white hover:bg-blue-700 px-6 py-3 rounded-md font-medium inline-block">Live Chat</a>
            </div>
        </div>
    </div>

    <!-- Features -->
    <div class="bg-gray-50 py-12">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                <div class="text-center">
                    <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i class="fas fa-check-circle text-blue-600 text-2xl"></i>
                    </div>
                    <h3 class="font-bold text-lg mb-2">Quality Products</h3>
                    <p class="text-gray-600">Premium parts from trusted manufacturers</p>
                </div>
                <div class="text-center">
                    <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i class="fas fa-headset text-blue-600 text-2xl"></i>
                    </div>
                    <h3 class="font-bold text-lg mb-2">Expert Support</h3>
                    <p class="text-gray-600">Knowledgeable team ready to help</p>
                </div>
                <div class="text-center">
                    <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i class="fas fa-lock text-blue-600 text-2xl"></i>
                    </div>
                    <h3 class="font-bold text-lg mb-2">Secure Payment</h3>
                    <p class="text-gray-600">100% secure checkout process</p>
                </div>
                <div class="text-center">
                    <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i class="fas fa-truck text-blue-600 text-2xl"></i>
                    </div>
                    <h3 class="font-bold text-lg mb-2">Fast Delivery</h3>
                    <p class="text-gray-600">Same day dispatch on most orders</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Footer -->
    <footer class="bg-gray-900 text-white pt-12 pb-6">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-8">
                <!-- Information -->
                <div>
                    <h3 class="font-bold text-lg mb-4">Information</h3>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-400 hover:text-white">About Us</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">Contact Us</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">Returns Policy</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a></li>
                    </ul>
                </div>
                
                <!-- Customer Service -->
                <div>
                    <h3 class="font-bold text-lg mb-4">Customer Service</h3>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-400 hover:text-white">FAQs</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">Shipping Info</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">Track Order</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">Size Guide</a></li>
                    </ul>
                </div>
                
                <!-- Categories -->
                <div>
                    <h3 class="font-bold text-lg mb-4">Categories</h3>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-400 hover:text-white">T4 Transporter</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">T5 Transporter</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">T6 Transporter</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">Wheel Packages</a></li>
                    </ul>
                </div>
                
                <!-- Newsletter -->
                <div>
                    <h3 class="font-bold text-lg mb-4">Newsletter</h3>
                    <p class="text-gray-400 mb-4">Subscribe for updates and special offers</p>
                    <form class="flex">
                        <input type="email" placeholder="Your email" class="px-3 py-2 bg-gray-800 text-white rounded-l-md focus:outline-none w-full">
                        <button type="submit" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-r-md">
                            <i class="fas fa-paper-plane"></i>
                        </button>
                    </form>
                    <div class="flex space-x-4 mt-4">
                        <a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-facebook-f"></i></a>
                        <a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-instagram"></i></a>
                        <a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-youtube"></i></a>
                    </div>
                </div>
            </div>
            
            <!-- Payment Methods -->
            <div class="flex flex-wrap justify-center gap-4 mb-6">
                <img src="https://cdn.shopify.com/s/files/1/1774/9481/t/2/assets/footer_cards.png?97" alt="Payment Methods" class="h-8">
            </div>
            
            <!-- Copyright -->
            <div class="border-t border-gray-800 pt-6 text-center text-gray-400">
                <p>&copy; 2023 Travelin-Lite LTD. All rights reserved.</p>
            </div>
        </div>
    </footer>

    <script>
        // Mobile menu toggle
        document.getElementById('mobile-menu-button').addEventListener('click', function() {
            const menu = document.getElementById('mobile-menu');
            menu.classList.toggle('hidden');
        });

        // Dropdown menus for mobile
        document.querySelectorAll('#mobile-menu li > a').forEach(item => {
            if (item.nextElementSibling && item.nextElementSibling.tagName === 'UL') {
                item.addEventListener('click', function(e) {
                    e.preventDefault();
                    this.nextElementSibling.classList.toggle('hidden');
                });
            }
        });
    </script>
<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>
</html>