Hugging Face's logo

Spaces:
aniket2025
/
second-website-design
Running

App Files Community
aniket2025 commited on
Commit
f8f36ba
·
verified ·
1 Parent(s): 2825710

Redesign a modern, professional homepage for the West Bengal Transport Department portal. Scene 1 – Hero Banner: full-width hero showing a clean, stylized illustration of buses and roads in West Bengal, overlaid with a glassmorphic navigation bar featuring “Home, Services, Forms, e-Permit, Track Vehicle, Contact.” Include a prominent search/quick-access bar (“Enter Vehicle No. or Permit ID”) with subtle focus animation and a clear “Search” button. Scene 2 – e-Permit & Licensing Dashboard: a grid of interactive cards like “Apply for Permit,” “Driver’s License Renewal,” “Fitness Certificate,” each with icons, hover reveals “Start Application” button, sliding in from sides. Scene 3 – Vehicle Tracking & Status Flow: split-screen timeline UI where users enter vehicle number and see sequence: “Submitted → Verified → Permit Issued,” animated with arrows and status highlights. Scene 4 – Fee Calculator & QR Scan: left section shows a simple fee calculator with input fields (vehicle type, route), real-time calculation and “Calculate” button; right side includes QR-code scanner UI mockup for checking vehicle authenticity. Scene 5 – Vehicle Search Map: split-section map of West Bengal with animated pins for vehicle check centers, registration offices; right side list syncs with map hover. Scene 6 – Real-Time Notices & Alerts: horizontal scrolling ticker overlay with live updates (“New regulations, seat belt fines, traffic advisories”), plus linkable alert cards. Scene 7 – Resources & Downloads: grid of downloadable PDF forms (“Permit Application,” “Route Maps,” “Fee Schedules”) with clickable icons and hover download animation. Scene 8 – Help & Support Accordion: expandable panels for FAQs, helpline numbers, complaint tracking, with smooth transitions. Scene 9 – Footer & Mobile Nav: glassmorphic footer containing official Gov logos, language toggle (English/Bengali), policy links, and social media icons; mobile bottom sticky nav featuring icons for “Home, Services, Track, Support, Profile.” Use a trustworthy colour palette: white, WBGov green and blue accents, gentle grey backgrounds, with clear sans-serif typography. Incorporate glassmorphism, drop shadows, soft transitions, hover micro-interactions, and ensure responsive layout across desktop and mobile. - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +790 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Second Website Design
3
- emoji: 🐠
4
- colorFrom: pink
5
- colorTo: red
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: second-website-design
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: pink
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,790 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>West Bengal Transport Department</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
+ <style>
11
+ body {
12
+ font-family: 'Poppins', sans-serif;
13
+ background-color: #f8fafc;
14
+ }
15
+
16
+ .glass-nav {
17
+ background: rgba(255, 255, 255, 0.85);
18
+ backdrop-filter: blur(10px);
19
+ -webkit-backdrop-filter: blur(10px);
20
+ box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
21
+ }
22
+
23
+ .glass-card {
24
+ background: rgba(255, 255, 255, 0.8);
25
+ backdrop-filter: blur(5px);
26
+ -webkit-backdrop-filter: blur(5px);
27
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
28
+ transition: all 0.3s ease;
29
+ }
30
+
31
+ .glass-card:hover {
32
+ transform: translateY(-5px);
33
+ box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
34
+ }
35
+
36
+ .status-step {
37
+ position: relative;
38
+ }
39
+
40
+ .status-step:not(:last-child):after {
41
+ content: '';
42
+ position: absolute;
43
+ top: 50%;
44
+ right: -30px;
45
+ width: 20px;
46
+ height: 2px;
47
+ background: #cbd5e1;
48
+ }
49
+
50
+ .status-step.active:after {
51
+ background: #3b82f6;
52
+ }
53
+
54
+ .ticker {
55
+ animation: ticker 30s linear infinite;
56
+ }
57
+
58
+ @keyframes ticker {
59
+ 0% { transform: translateX(100%); }
60
+ 100% { transform: translateX(-100%); }
61
+ }
62
+
63
+ .accordion-content {
64
+ max-height: 0;
65
+ overflow: hidden;
66
+ transition: max-height 0.3s ease-out;
67
+ }
68
+
69
+ .accordion.active .accordion-content {
70
+ max-height: 500px;
71
+ }
72
+
73
+ .search-bar:focus-within {
74
+ box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
75
+ }
76
+
77
+ .hover-slide-btn {
78
+ transform: translateX(100%);
79
+ transition: transform 0.3s ease;
80
+ }
81
+
82
+ .service-card:hover .hover-slide-btn {
83
+ transform: translateX(0);
84
+ }
85
+ </style>
86
+ </head>
87
+ <body>
88
+ <!-- Scene 1: Hero Banner -->
89
+ <div class="relative h-screen md:h-[600px] bg-gradient-to-br from-blue-50 to-green-50 overflow-hidden">
90
+ <!-- Glassmorphic Navigation -->
91
+ <nav class="glass-nav fixed w-full z-50 py-4 px-6">
92
+ <div class="max-w-7xl mx-auto flex justify-between items-center">
93
+ <div class="flex items-center">
94
+ <img src="https://upload.wikimedia.org/wikipedia/en/thumb/9/9c/West_Bengal_Government_Logo.svg/1200px-West_Bengal_Government_Logo.svg.png" alt="WB Government Logo" class="h-12 mr-4">
95
+ <div class="hidden md:flex space-x-6">
96
+ <a href="#" class="text-blue-900 font-medium hover:text-blue-700">Home</a>
97
+ <a href="#" class="text-gray-700 hover:text-blue-700">Services</a>
98
+ <a href="#" class="text-gray-700 hover:text-blue-700">Forms</a>
99
+ <a href="#" class="text-gray-700 hover:text-blue-700">e-Permit</a>
100
+ <a href="#" class="text-gray-700 hover:text-blue-700">Track Vehicle</a>
101
+ <a href="#" class="text-gray-700 hover:text-blue-700">Contact</a>
102
+ </div>
103
+ </div>
104
+ <div class="hidden md:block">
105
+ <button class="bg-blue-700 text-white px-4 py-2 rounded-md hover:bg-blue-800 transition">Login</button>
106
+ </div>
107
+ <button class="md:hidden text-gray-700">
108
+ <i class="fas fa-bars text-2xl"></i>
109
+ </button>
110
+ </div>
111
+ </nav>
112
+
113
+ <!-- Hero Content -->
114
+ <div class="absolute inset-0 flex items-center">
115
+ <div class="max-w-7xl mx-auto px-6 z-10 mt-16">
116
+ <div class="md:w-2/3">
117
+ <h1 class="text-4xl md:text-5xl font-bold text-blue-900 mb-4">West Bengal Transport Department</h1>
118
+ <p class="text-lg text-gray-700 mb-8">Simplifying transport services for citizens with digital solutions and transparent processes.</p>
119
+
120
+ <!-- Search Bar -->
121
+ <div class="bg-white rounded-lg p-1 shadow-lg search-bar transition-all duration-300 max-w-2xl">
122
+ <div class="flex">
123
+ <input type="text" placeholder="Enter Vehicle No. or Permit ID" class="flex-grow px-4 py-3 focus:outline-none rounded-l-lg">
124
+ <button class="bg-blue-700 text-white px-6 py-3 rounded-r-lg hover:bg-blue-800 transition">Search</button>
125
+ </div>
126
+ </div>
127
+ </div>
128
+ </div>
129
+ </div>
130
+
131
+ <!-- Illustration -->
132
+ <div class="absolute bottom-0 right-0 w-full md:w-1/2 h-1/2 md:h-full">
133
+ <svg viewBox="0 0 800 600" class="w-full h-full">
134
+ <path d="M0,300 L800,300 L800,600 L0,600 Z" fill="#3b82f6" fill-opacity="0.1"></path>
135
+ <path d="M0,400 L800,400 L800,600 L0,600 Z" fill="#10b981" fill-opacity="0.1"></path>
136
+ <!-- Road -->
137
+ <path d="M0,450 L800,450 L800,470 L0,470 Z" fill="#334155"></path>
138
+ <!-- Buses -->
139
+ <rect x="100" y="380" width="120" height="70" rx="5" fill="#1e40af"></rect>
140
+ <rect x="350" y="390" width="140" height="80" rx="5" fill="#065f46"></rect>
141
+ <rect x="600" y="400" width="130" height="75" rx="5" fill="#1e40af"></rect>
142
+ <!-- Road markings -->
143
+ <path d="M50,460 L100,460 M150,460 L200,460 M250,460 L300,460 M350,460 L400,460 M450,460 L500,460 M550,460 L600,460 M650,460 L700,460 M750,460 L800,460" stroke="#f8fafc" stroke-width="4" stroke-dasharray="10,10"></path>
144
+ </svg>
145
+ </div>
146
+ </div>
147
+
148
+ <!-- Scene 2: e-Permit & Licensing Dashboard -->
149
+ <div class="py-16 bg-white">
150
+ <div class="max-w-7xl mx-auto px-6">
151
+ <h2 class="text-3xl font-bold text-blue-900 mb-2">Transport Services</h2>
152
+ <p class="text-gray-600 mb-12">Access all transport-related services with just a few clicks</p>
153
+
154
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
155
+ <!-- Card 1 -->
156
+ <div class="glass-card rounded-xl p-6 service-card relative overflow-hidden">
157
+ <div class="flex items-center mb-4">
158
+ <div class="bg-blue-100 p-3 rounded-lg mr-4">
159
+ <i class="fas fa-file-alt text-blue-700 text-xl"></i>
160
+ </div>
161
+ <h3 class="text-lg font-semibold text-gray-800">Apply for Permit</h3>
162
+ </div>
163
+ <p class="text-gray-600 text-sm mb-6">Apply for new vehicle permits or renew existing ones through our online portal.</p>
164
+ <button class="hover-slide-btn absolute bottom-4 right-4 bg-blue-700 text-white px-4 py-2 rounded-md text-sm hover:bg-blue-800 transition">Start Application</button>
165
+ </div>
166
+
167
+ <!-- Card 2 -->
168
+ <div class="glass-card rounded-xl p-6 service-card relative overflow-hidden">
169
+ <div class="flex items-center mb-4">
170
+ <div class="bg-green-100 p-3 rounded-lg mr-4">
171
+ <i class="fas fa-id-card text-green-700 text-xl"></i>
172
+ </div>
173
+ <h3 class="text-lg font-semibold text-gray-800">Driver's License Renewal</h3>
174
+ </div>
175
+ <p class="text-gray-600 text-sm mb-6">Renew your driving license online without visiting RTO offices.</p>
176
+ <button class="hover-slide-btn absolute bottom-4 right-4 bg-blue-700 text-white px-4 py-2 rounded-md text-sm hover:bg-blue-800 transition">Start Application</button>
177
+ </div>
178
+
179
+ <!-- Card 3 -->
180
+ <div class="glass-card rounded-xl p-6 service-card relative overflow-hidden">
181
+ <div class="flex items-center mb-4">
182
+ <div class="bg-yellow-100 p-3 rounded-lg mr-4">
183
+ <i class="fas fa-car text-yellow-700 text-xl"></i>
184
+ </div>
185
+ <h3 class="text-lg font-semibold text-gray-800">Fitness Certificate</h3>
186
+ </div>
187
+ <p class="text-gray-600 text-sm mb-6">Apply for vehicle fitness certification and schedule inspections.</p>
188
+ <button class="hover-slide-btn absolute bottom-4 right-4 bg-blue-700 text-white px-4 py-2 rounded-md text-sm hover:bg-blue-800 transition">Start Application</button>
189
+ </div>
190
+
191
+ <!-- Card 4 -->
192
+ <div class="glass-card rounded-xl p-6 service-card relative overflow-hidden">
193
+ <div class="flex items-center mb-4">
194
+ <div class="bg-purple-100 p-3 rounded-lg mr-4">
195
+ <i class="fas fa-file-invoice-dollar text-purple-700 text-xl"></i>
196
+ </div>
197
+ <h3 class="text-lg font-semibold text-gray-800">Tax Payment</h3>
198
+ </div>
199
+ <p class="text-gray-600 text-sm mb-6">Pay your vehicle taxes online with multiple payment options.</p>
200
+ <button class="hover-slide-btn absolute bottom-4 right-4 bg-blue-700 text-white px-4 py-2 rounded-md text-sm hover:bg-blue-800 transition">Start Application</button>
201
+ </div>
202
+ </div>
203
+ </div>
204
+ </div>
205
+
206
+ <!-- Scene 3: Vehicle Tracking & Status Flow -->
207
+ <div class="py-16 bg-gray-50">
208
+ <div class="max-w-7xl mx-auto px-6">
209
+ <h2 class="text-3xl font-bold text-blue-900 mb-2">Track Your Application</h2>
210
+ <p class="text-gray-600 mb-12">Check the status of your permit or license application in real-time</p>
211
+
212
+ <div class="bg-white rounded-xl shadow-md p-8">
213
+ <div class="flex flex-col md:flex-row items-center mb-8">
214
+ <input type="text" placeholder="Enter Application/Vehicle Number" class="flex-grow px-4 py-3 border border-gray-300 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
215
+ <button class="bg-blue-700 text-white px-6 py-3 rounded-r-lg hover:bg-blue-800 transition md:ml-0 md:mt-0 mt-4 w-full md:w-auto">Track Status</button>
216
+ </div>
217
+
218
+ <div class="flex justify-between items-center py-6 px-4 bg-gray-50 rounded-lg">
219
+ <!-- Status Steps -->
220
+ <div class="status-step active flex flex-col items-center">
221
+ <div class="w-12 h-12 rounded-full bg-blue-700 text-white flex items-center justify-center mb-2">
222
+ <i class="fas fa-check"></i>
223
+ </div>
224
+ <span class="text-sm font-medium text-blue-700">Submitted</span>
225
+ </div>
226
+
227
+ <div class="status-step flex flex-col items-center">
228
+ <div class="w-12 h-12 rounded-full bg-gray-300 text-gray-600 flex items-center justify-center mb-2">
229
+ <i class="fas fa-spinner"></i>
230
+ </div>
231
+ <span class="text-sm font-medium text-gray-600">Verified</span>
232
+ </div>
233
+
234
+ <div class="status-step flex flex-col items-center">
235
+ <div class="w-12 h-12 rounded-full bg-gray-300 text-gray-600 flex items-center justify-center mb-2">
236
+ <i class="fas fa-file-alt"></i>
237
+ </div>
238
+ <span class="text-sm font-medium text-gray-600">Processing</span>
239
+ </div>
240
+
241
+ <div class="status-step flex flex-col items-center">
242
+ <div class="w-12 h-12 rounded-full bg-gray-300 text-gray-600 flex items-center justify-center mb-2">
243
+ <i class="fas fa-check-circle"></i>
244
+ </div>
245
+ <span class="text-sm font-medium text-gray-600">Completed</span>
246
+ </div>
247
+ </div>
248
+
249
+ <div class="mt-8 p-6 bg-blue-50 rounded-lg border border-blue-100">
250
+ <h3 class="text-lg font-semibold text-blue-900 mb-2">Application Status Details</h3>
251
+ <p class="text-gray-700 mb-4">Your application <span class="font-medium">WB04AB1234</span> was submitted on 15 June 2023 and is currently under verification.</p>
252
+ <p class="text-sm text-gray-600">Expected completion: 25 June 2023</p>
253
+ </div>
254
+ </div>
255
+ </div>
256
+ </div>
257
+
258
+ <!-- Scene 4: Fee Calculator & QR Scan -->
259
+ <div class="py-16 bg-white">
260
+ <div class="max-w-7xl mx-auto px-6">
261
+ <div class="flex flex-col lg:flex-row gap-12">
262
+ <!-- Fee Calculator -->
263
+ <div class="lg:w-1/2">
264
+ <h2 class="text-3xl font-bold text-blue-900 mb-2">Fee Calculator</h2>
265
+ <p class="text-gray-600 mb-6">Estimate fees for your transport-related applications</p>
266
+
267
+ <div class="bg-gray-50 rounded-xl p-6 shadow-sm">
268
+ <div class="mb-4">
269
+ <label class="block text-gray-700 mb-2">Vehicle Type</label>
270
+ <select class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
271
+ <option>Select Vehicle Type</option>
272
+ <option>Two Wheeler</option>
273
+ <option>Private Car</option>
274
+ <option>Commercial Vehicle</option>
275
+ <option>Bus</option>
276
+ <option>Taxi</option>
277
+ </select>
278
+ </div>
279
+
280
+ <div class="mb-4">
281
+ <label class="block text-gray-700 mb-2">Application Type</label>
282
+ <select class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
283
+ <option>Select Application</option>
284
+ <option>New Permit</option>
285
+ <option>Permit Renewal</option>
286
+ <option>Route Variation</option>
287
+ <option>Duplicate Permit</option>
288
+ </select>
289
+ </div>
290
+
291
+ <div class="mb-6">
292
+ <label class="block text-gray-700 mb-2">Route/Distance (km)</label>
293
+ <input type="number" placeholder="Enter distance" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
294
+ </div>
295
+
296
+ <button class="w-full bg-blue-700 text-white px-6 py-3 rounded-lg hover:bg-blue-800 transition">Calculate Fees</button>
297
+
298
+ <div class="mt-6 p-4 bg-blue-100 rounded-lg hidden" id="feeResult">
299
+ <h3 class="font-semibold text-blue-900 mb-2">Estimated Fees</h3>
300
+ <p class="text-gray-700">Application Fee: ₹500</p>
301
+ <p class="text-gray-700">Permit Fee: ₹2,000</p>
302
+ <p class="text-gray-700">Route Fee: ₹1,200</p>
303
+ <p class="text-lg font-bold text-blue-900 mt-2">Total: ₹3,700</p>
304
+ </div>
305
+ </div>
306
+ </div>
307
+
308
+ <!-- QR Scanner -->
309
+ <div class="lg:w-1/2">
310
+ <h2 class="text-3xl font-bold text-blue-900 mb-2">Vehicle Authenticity Check</h2>
311
+ <p class="text-gray-600 mb-6">Scan QR code to verify vehicle documents</p>
312
+
313
+ <div class="bg-gray-50 rounded-xl p-8 shadow-sm flex flex-col items-center">
314
+ <div class="relative mb-6">
315
+ <div class="w-64 h-64 bg-white border-4 border-blue-200 rounded-lg flex items-center justify-center">
316
+ <div class="w-48 h-48 bg-gray-200 rounded flex items-center justify-center">
317
+ <i class="fas fa-qrcode text-5xl text-gray-400"></i>
318
+ </div>
319
+ </div>
320
+ <div class="absolute -top-2 -left-2 w-12 h-12 border-t-4 border-l-4 border-blue-500 rounded-tl-lg"></div>
321
+ <div class="absolute -top-2 -right-2 w-12 h-12 border-t-4 border-r-4 border-blue-500 rounded-tr-lg"></div>
322
+ <div class="absolute -bottom-2 -left-2 w-12 h-12 border-b-4 border-l-4 border-blue-500 rounded-bl-lg"></div>
323
+ <div class="absolute -bottom-2 -right-2 w-12 h-12 border-b-4 border-r-4 border-blue-500 rounded-br-lg"></div>
324
+ </div>
325
+
326
+ <p class="text-gray-600 text-center mb-6">Point your camera at the QR code on the vehicle permit or registration document</p>
327
+
328
+ <div class="flex space-x-4">
329
+ <button class="bg-blue-700 text-white px-6 py-2 rounded-lg hover:bg-blue-800 transition flex items-center">
330
+ <i class="fas fa-camera mr-2"></i> Scan QR Code
331
+ </button>
332
+ <button class="bg-gray-200 text-gray-700 px-6 py-2 rounded-lg hover:bg-gray-300 transition">
333
+ Upload Image
334
+ </button>
335
+ </div>
336
+ </div>
337
+ </div>
338
+ </div>
339
+ </div>
340
+ </div>
341
+
342
+ <!-- Scene 5: Vehicle Search Map -->
343
+ <div class="py-16 bg-gray-50">
344
+ <div class="max-w-7xl mx-auto px-6">
345
+ <h2 class="text-3xl font-bold text-blue-900 mb-2">Transport Offices & Centers</h2>
346
+ <p class="text-gray-600 mb-12">Locate RTO offices, inspection centers, and other transport facilities across West Bengal</p>
347
+
348
+ <div class="flex flex-col lg:flex-row gap-8">
349
+ <!-- Map -->
350
+ <div class="lg:w-2/3 bg-white rounded-xl shadow-md overflow-hidden">
351
+ <div class="h-96 bg-blue-100 relative">
352
+ <!-- Map placeholder with West Bengal outline -->
353
+ <svg viewBox="0 0 800 500" class="w-full h-full">
354
+ <!-- West Bengal outline (simplified) -->
355
+ <path d="M150,100 L250,120 L300,150 L350,200 L400,250 L450,300 L500,350 L550,400 L600,380 L650,350 L700,300 L750,250 L700,200 L650,150 L600,100 L550,80 L500,70 L450,80 L400,90 L350,100 L300,90 L250,80 L200,90 Z" fill="#dbeafe" stroke="#3b82f6" stroke-width="2"></path>
356
+
357
+ <!-- City markers -->
358
+ <circle cx="300" cy="200" r="8" fill="#ef4444" class="cursor-pointer hover:r-10 transition-all" data-city="kolkata"></circle>
359
+ <circle cx="400" cy="250" r="6" fill="#10b981" class="cursor-pointer hover:r-8 transition-all" data-city="asansol"></circle>
360
+ <circle cx="250" cy="150" r="6" fill="#10b981" class="cursor-pointer hover:r-8 transition-all" data-city="siliguri"></circle>
361
+ <circle cx="500" cy="300" r="6" fill="#10b981" class="cursor-pointer hover:r-8 transition-all" data-city="durgapur"></circle>
362
+ <circle cx="350" cy="350" r="6" fill="#10b981" class="cursor-pointer hover:r-8 transition-all" data-city="kharagpur"></circle>
363
+ <circle cx="450" cy="150" r="6" fill="#10b981" class="cursor-pointer hover:r-8 transition-all" data-city="bardhaman"></circle>
364
+
365
+ <text x="300" y="180" text-anchor="middle" class="text-xs font-bold">Kolkata</text>
366
+ </svg>
367
+ </div>
368
+ </div>
369
+
370
+ <!-- Office List -->
371
+ <div class="lg:w-1/3">
372
+ <div class="bg-white rounded-xl shadow-md p-6 h-full">
373
+ <h3 class="text-xl font-semibold text-blue-900 mb-4">Transport Offices</h3>
374
+
375
+ <div class="space-y-4">
376
+ <div class="p-4 border border-gray-200 rounded-lg hover:border-blue-300 hover:bg-blue-50 transition cursor-pointer" data-city="kolkata">
377
+ <h4 class="font-medium text-gray-800">Kolkata RTO (WB01)</h4>
378
+ <p class="text-sm text-gray-600">Belgharia, Kolkata - 700056</p>
379
+ <p class="text-sm text-gray-600 mt-1"><i class="fas fa-phone-alt mr-2 text-blue-600"></i> 033-2555-6789</p>
380
+ </div>
381
+
382
+ <div class="p-4 border border-gray-200 rounded-lg hover:border-blue-300 hover:bg-blue-50 transition cursor-pointer" data-city="asansol">
383
+ <h4 class="font-medium text-gray-800">Asansol RTO (WB38)</h4>
384
+ <p class="text-sm text-gray-600">Burnpur, Asansol - 713325</p>
385
+ <p class="text-sm text-gray-600 mt-1"><i class="fas fa-phone-alt mr-2 text-blue-600"></i> 0341-2255-123</p>
386
+ </div>
387
+
388
+ <div class="p-4 border border-gray-200 rounded-lg hover:border-blue-300 hover:bg-blue-50 transition cursor-pointer" data-city="siliguri">
389
+ <h4 class="font-medium text-gray-800">Siliguri RTO (WB74)</h4>
390
+ <p class="text-sm text-gray-600">Pradhan Nagar, Siliguri - 734003</p>
391
+ <p class="text-sm text-gray-600 mt-1"><i class="fas fa-phone-alt mr-2 text-blue-600"></i> 0353-251-2345</p>
392
+ </div>
393
+
394
+ <div class="p-4 border border-gray-200 rounded-lg hover:border-blue-300 hover:bg-blue-50 transition cursor-pointer" data-city="durgapur">
395
+ <h4 class="font-medium text-gray-800">Durgapur RTO (WB44)</h4>
396
+ <p class="text-sm text-gray-600">City Center, Durgapur - 713216</p>
397
+ <p class="text-sm text-gray-600 mt-1"><i class="fas fa-phone-alt mr-2 text-blue-600"></i> 0343-254-7890</p>
398
+ </div>
399
+ </div>
400
+ </div>
401
+ </div>
402
+ </div>
403
+ </div>
404
+ </div>
405
+
406
+ <!-- Scene 6: Real-Time Notices & Alerts -->
407
+ <div class="py-12 bg-blue-800 text-white">
408
+ <div class="max-w-7xl mx-auto px-6">
409
+ <div class="flex items-center mb-8">
410
+ <div class="bg-white text-blue-800 p-2 rounded-lg mr-4">
411
+ <i class="fas fa-bell text-xl"></i>
412
+ </div>
413
+ <h2 class="text-3xl font-bold">Notices & Alerts</h2>
414
+ </div>
415
+
416
+ <!-- Ticker -->
417
+ <div class="bg-blue-900 rounded-lg p-4 mb-8 overflow-hidden">
418
+ <div class="flex items-center">
419
+ <span class="bg-yellow-400 text-blue-900 font-bold px-3 py-1 rounded mr-4 whitespace-nowrap">LATEST:</span>
420
+ <div class="ticker whitespace-nowrap">
421
+ <span class="mr-8">New seat belt regulations effective from 1st July 2023</span>
422
+ <span class="mr-8">Online payment discount extended till 30th June</span>
423
+ <span class="mr-8">Kolkata RTO office will remain closed on 29th June</span>
424
+ <span class="mr-8">New traffic rules for commercial vehicles in hill areas</span>
425
+ </div>
426
+ </div>
427
+ </div>
428
+
429
+ <!-- Alert Cards -->
430
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
431
+ <div class="bg-white text-blue-900 rounded-xl p-6 shadow-lg">
432
+ <div class="flex items-start mb-4">
433
+ <div class="bg-red-100 text-red-600 p-2 rounded-lg mr-4">
434
+ <i class="fas fa-exclamation-triangle"></i>
435
+ </div>
436
+ <div>
437
+ <h3 class="font-bold mb-1">Traffic Advisory</h3>
438
+ <p class="text-sm text-gray-700">Restrictions on NH12 during monsoon season from 15th June to 15th September.</p>
439
+ </div>
440
+ </div>
441
+ <a href="#" class="text-blue-700 text-sm font-medium hover:underline">Read more →</a>
442
+ </div>
443
+
444
+ <div class="bg-white text-blue-900 rounded-xl p-6 shadow-lg">
445
+ <div class="flex items-start mb-4">
446
+ <div class="bg-green-100 text-green-600 p-2 rounded-lg mr-4">
447
+ <i class="fas fa-info-circle"></i>
448
+ </div>
449
+ <div>
450
+ <h3 class="font-bold mb-1">New Online Services</h3>
451
+ <p class="text-sm text-gray-700">Now apply for international driving permit online through our portal.</p>
452
+ </div>
453
+ </div>
454
+ <a href="#" class="text-blue-700 text-sm font-medium hover:underline">Read more →</a>
455
+ </div>
456
+
457
+ <div class="bg-white text-blue-900 rounded-xl p-6 shadow-lg">
458
+ <div class="flex items-start mb-4">
459
+ <div class="bg-yellow-100 text-yellow-600 p-2 rounded-lg mr-4">
460
+ <i class="fas fa-calendar-alt"></i>
461
+ </div>
462
+ <div>
463
+ <h3 class="font-bold mb-1">Holiday Notice</h3>
464
+ <p class="text-sm text-gray-700">All RTO offices will remain closed on 29th June for annual maintenance.</p>
465
+ </div>
466
+ </div>
467
+ <a href="#" class="text-blue-700 text-sm font-medium hover:underline">Read more →</a>
468
+ </div>
469
+ </div>
470
+ </div>
471
+ </div>
472
+
473
+ <!-- Scene 7: Resources & Downloads -->
474
+ <div class="py-16 bg-white">
475
+ <div class="max-w-7xl mx-auto px-6">
476
+ <h2 class="text-3xl font-bold text-blue-900 mb-2">Resources & Downloads</h2>
477
+ <p class="text-gray-600 mb-12">Access important forms, documents, and informational resources</p>
478
+
479
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
480
+ <div class="glass-card rounded-xl p-6 hover:shadow-md transition group">
481
+ <div class="flex items-start">
482
+ <div class="bg-blue-100 p-3 rounded-lg mr-4 group-hover:bg-blue-200 transition">
483
+ <i class="fas fa-file-pdf text-blue-700 text-xl"></i>
484
+ </div>
485
+ <div>
486
+ <h3 class="text-lg font-semibold text-gray-800 mb-1">Permit Application Form</h3>
487
+ <p class="text-sm text-gray-600 mb-3">Form A for new vehicle permit applications</p>
488
+ <a href="#" class="text-blue-700 text-sm font-medium hover:underline flex items-center">
489
+ <i class="fas fa-download mr-2"></i> Download (PDF, 245KB)
490
+ </a>
491
+ </div>
492
+ </div>
493
+ </div>
494
+
495
+ <div class="glass-card rounded-xl p-6 hover:shadow-md transition group">
496
+ <div class="flex items-start">
497
+ <div class="bg-green-100 p-3 rounded-lg mr-4 group-hover:bg-green-200 transition">
498
+ <i class="fas fa-file-pdf text-green-700 text-xl"></i>
499
+ </div>
500
+ <div>
501
+ <h3 class="text-lg font-semibold text-gray-800 mb-1">Route Maps</h3>
502
+ <p class="text-sm text-gray-600 mb-3">Approved routes for commercial vehicles</p>
503
+ <a href="#" class="text-blue-700 text-sm font-medium hover:underline flex items-center">
504
+ <i class="fas fa-download mr-2"></i> Download (PDF, 1.2MB)
505
+ </a>
506
+ </div>
507
+ </div>
508
+ </div>
509
+
510
+ <div class="glass-card rounded-xl p-6 hover:shadow-md transition group">
511
+ <div class="flex items-start">
512
+ <div class="bg-yellow-100 p-3 rounded-lg mr-4 group-hover:bg-yellow-200 transition">
513
+ <i class="fas fa-file-pdf text-yellow-700 text-xl"></i>
514
+ </div>
515
+ <div>
516
+ <h3 class="text-lg font-semibold text-gray-800 mb-1">Fee Schedule</h3>
517
+ <p class="text-sm text-gray-600 mb-3">Updated fee structure for all services</p>
518
+ <a href="#" class="text-blue-700 text-sm font-medium hover:underline flex items-center">
519
+ <i class="fas fa-download mr-2"></i> Download (PDF, 380KB)
520
+ </a>
521
+ </div>
522
+ </div>
523
+ </div>
524
+
525
+ <div class="glass-card rounded-xl p-6 hover:shadow-md transition group">
526
+ <div class="flex items-start">
527
+ <div class="bg-purple-100 p-3 rounded-lg mr-4 group-hover:bg-purple-200 transition">
528
+ <i class="fas fa-file-pdf text-purple-700 text-xl"></i>
529
+ </div>
530
+ <div>
531
+ <h3 class="text-lg font-semibold text-gray-800 mb-1">Vehicle Fitness Guidelines</h3>
532
+ <p class="text-sm text-gray-600 mb-3">Checklist and standards for fitness certification</p>
533
+ <a href="#" class="text-blue-700 text-sm font-medium hover:underline flex items-center">
534
+ <i class="fas fa-download mr-2"></i> Download (PDF, 890KB)
535
+ </a>
536
+ </div>
537
+ </div>
538
+ </div>
539
+
540
+ <div class="glass-card rounded-xl p-6 hover:shadow-md transition group">
541
+ <div class="flex items-start">
542
+ <div class="bg-red-100 p-3 rounded-lg mr-4 group-hover:bg-red-200 transition">
543
+ <i class="fas fa-file-pdf text-red-700 text-xl"></i>
544
+ </div>
545
+ <div>
546
+ <h3 class="text-lg font-semibold text-gray-800 mb-1">Traffic Rules Handbook</h3>
547
+ <p class="text-sm text-gray-600 mb-3">Updated West Bengal traffic regulations</p>
548
+ <a href="#" class="text-blue-700 text-sm font-medium hover:underline flex items-center">
549
+ <i class="fas fa-download mr-2"></i> Download (PDF, 2.4MB)
550
+ </a>
551
+ </div>
552
+ </div>
553
+ </div>
554
+
555
+ <div class="glass-card rounded-xl p-6 hover:shadow-md transition group">
556
+ <div class="flex items-start">
557
+ <div class="bg-blue-100 p-3 rounded-lg mr-4 group-hover:bg-blue-200 transition">
558
+ <i class="fas fa-file-pdf text-blue-700 text-xl"></i>
559
+ </div>
560
+ <div>
561
+ <h3 class="text-lg font-semibold text-gray-800 mb-1">Grievance Form</h3>
562
+ <p class="text-sm text-gray-600 mb-3">Form for submitting complaints/suggestions</p>
563
+ <a href="#" class="text-blue-700 text-sm font-medium hover:underline flex items-center">
564
+ <i class="fas fa-download mr-2"></i> Download (PDF, 150KB)
565
+ </a>
566
+ </div>
567
+ </div>
568
+ </div>
569
+ </div>
570
+ </div>
571
+ </div>
572
+
573
+ <!-- Scene 8: Help & Support Accordion -->
574
+ <div class="py-16 bg-gray-50">
575
+ <div class="max-w-7xl mx-auto px-6">
576
+ <h2 class="text-3xl font-bold text-blue-900 mb-2">Help & Support</h2>
577
+ <p class="text-gray-600 mb-12">Find answers to common questions and get assistance</p>
578
+
579
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
580
+ <!-- FAQ Accordion -->
581
+ <div class="border-b border-gray-200 accordion">
582
+ <button class="w-full flex justify-between items-center p-6 text-left accordion-btn">
583
+ <h3 class="text-lg font-semibold text-blue-900">Frequently Asked Questions</h3>
584
+ <i class="fas fa-chevron-down text-gray-500 transition-transform"></i>
585
+ </button>
586
+ <div class="accordion-content px-6 pb-6">
587
+ <div class="space-y-4">
588
+ <div>
589
+ <h4 class="font-medium text-gray-800">How do I apply for a new vehicle permit?</h4>
590
+ <p class="text-sm text-gray-600 mt-1">You can apply for a new vehicle permit through our online portal by selecting 'Apply for Permit' under the Services section. You'll need to upload required documents and pay the applicable fees.</p>
591
+ </div>
592
+ <div>
593
+ <h4 class="font-medium text-gray-800">What documents are required for license renewal?</h4>
594
+ <p class="text-sm text-gray-600 mt-1">For license renewal, you need your current license, address proof, age proof, and medical fitness certificate. The complete checklist is available in the Downloads section.</p>
595
+ </div>
596
+ <div>
597
+ <h4 class="font-medium text-gray-800">How long does permit processing take?</h4>
598
+ <p class="text-sm text-gray-600 mt-1">Standard processing time is 7-10 working days after document verification. You can track your application status in real-time through our portal.</p>
599
+ </div>
600
+ </div>
601
+ </div>
602
+ </div>
603
+
604
+ <!-- Helpline Accordion -->
605
+ <div class="border-b border-gray-200 accordion">
606
+ <button class="w-full flex justify-between items-center p-6 text-left accordion-btn">
607
+ <h3 class="text-lg font-semibold text-blue-900">Helpline Numbers</h3>
608
+ <i class="fas fa-chevron-down text-gray-500 transition-transform"></i>
609
+ </button>
610
+ <div class="accordion-content px-6 pb-6">
611
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
612
+ <div class="bg-blue-50 p-4 rounded-lg">
613
+ <h4 class="font-medium text-blue-900 mb-2">General Enquiries</h4>
614
+ <p class="text-sm text-gray-700"><i class="fas fa-phone-alt mr-2 text-blue-600"></i> 1800-345-6789 (Toll Free)</p>
615
+ <p class="text-sm text-gray-700 mt-1"><i class="fas fa-envelope mr-2 text-blue-600"></i> transport-help@wb.gov.in</p>
616
+ </div>
617
+ <div class="bg-green-50 p-4 rounded-lg">
618
+ <h4 class="font-medium text-green-900 mb-2">Complaints & Grievances</h4>
619
+ <p class="text-sm text-gray-700"><i class="fas fa-phone-alt mr-2 text-green-600"></i> 1800-112-2334 (Toll Free)</p>
620
+ <p class="text-sm text-gray-700 mt-1"><i class="fas fa-envelope mr-2 text-green-600"></i> transport-grievance@wb.gov.in</p>
621
+ </div>
622
+ <div class="bg-yellow-50 p-4 rounded-lg">
623
+ <h4 class="font-medium text-yellow-900 mb-2">Emergency Support</h4>
624
+ <p class="text-sm text-gray-700"><i class="fas fa-phone-alt mr-2 text-yellow-600"></i> 033-2245-6789</p>
625
+ <p class="text-sm text-gray-700 mt-1">Available 24x7</p>
626
+ </div>
627
+ <div class="bg-purple-50 p-4 rounded-lg">
628
+ <h4 class="font-medium text-purple-900 mb-2">Technical Support</h4>
629
+ <p class="text-sm text-gray-700"><i class="fas fa-phone-alt mr-2 text-purple-600"></i> 1800-789-4561 (Toll Free)</p>
630
+ <p class="text-sm text-gray-700 mt-1"><i class="fas fa-envelope mr-2 text-purple-600"></i> portal-support@wb.gov.in</p>
631
+ </div>
632
+ </div>
633
+ </div>
634
+ </div>
635
+
636
+ <!-- Complaint Tracking Accordion -->
637
+ <div class="accordion">
638
+ <button class="w-full flex justify-between items-center p-6 text-left accordion-btn">
639
+ <h3 class="text-lg font-semibold text-blue-900">Complaint Tracking</h3>
640
+ <i class="fas fa-chevron-down text-gray-500 transition-transform"></i>
641
+ </button>
642
+ <div class="accordion-content px-6 pb-6">
643
+ <div class="flex flex-col md:flex-row gap-6">
644
+ <div class="md:w-1/2">
645
+ <h4 class="font-medium text-gray-800 mb-2">Check Complaint Status</h4>
646
+ <div class="flex">
647
+ <input type="text" placeholder="Enter Complaint ID" class="flex-grow px-4 py-3 border border-gray-300 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
648
+ <button class="bg-blue-700 text-white px-6 py-3 rounded-r-lg hover:bg-blue-800 transition">Track</button>
649
+ </div>
650
+ <p class="text-xs text-gray-500 mt-2">Complaint ID can be found in your acknowledgement email/SMS</p>
651
+ </div>
652
+ <div class="md:w-1/2">
653
+ <h4 class="font-medium text-gray-800 mb-2">Submit New Complaint</h4>
654
+ <button class="w-full bg-green-600 text-white px-6 py-3 rounded-lg hover:bg-green-700 transition flex items-center justify-center">
655
+ <i class="fas fa-plus-circle mr-2"></i> Register Complaint
656
+ </button>
657
+ <p class="text-xs text-gray-500 mt-2">Average resolution time: 3-5 working days</p>
658
+ </div>
659
+ </div>
660
+ </div>
661
+ </div>
662
+ </div>
663
+ </div>
664
+ </div>
665
+
666
+ <!-- Scene 9: Footer & Mobile Nav -->
667
+ <footer class="glass-nav border-t border-gray-200 pt-12 pb-6">
668
+ <div class="max-w-7xl mx-auto px-6">
669
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
670
+ <div>
671
+ <img src="https://upload.wikimedia.org/wikipedia/en/thumb/9/9c/West_Bengal_Government_Logo.svg/1200px-West_Bengal_Government_Logo.svg.png" alt="WB Government Logo" class="h-16 mb-4">
672
+ <p class="text-sm text-gray-600">Department of Transport, Government of West Bengal</p>
673
+ </div>
674
+
675
+ <div>
676
+ <h3 class="text-lg font-semibold text-blue-900 mb-4">Quick Links</h3>
677
+ <ul class="space-y-2">
678
+ <li><a href="#" class="text-gray-600 hover:text-blue-700 text-sm">Home</a></li>
679
+ <li><a href="#" class="text-gray-600 hover:text-blue-700 text-sm">Services</a></li>
680
+ <li><a href="#" class="text-gray-600 hover:text-blue-700 text-sm">Forms & Downloads</a></li>
681
+ <li><a href="#" class="text-gray-600 hover:text-blue-700 text-sm">Track Application</a></li>
682
+ <li><a href="#" class="text-gray-600 hover:text-blue-700 text-sm">Contact Us</a></li>
683
+ </ul>
684
+ </div>
685
+
686
+ <div>
687
+ <h3 class="text-lg font-semibold text-blue-900 mb-4">Policies</h3>
688
+ <ul class="space-y-2">
689
+ <li><a href="#" class="text-gray-600 hover:text-blue-700 text-sm">Terms of Service</a></li>
690
+ <li><a href="#" class="text-gray-600 hover:text-blue-700 text-sm">Privacy Policy</a></li>
691
+ <li><a href="#" class="text-gray-600 hover:text-blue-700 text-sm">Accessibility</a></li>
692
+ <li><a href="#" class="text-gray-600 hover:text-blue-700 text-sm">Refund Policy</a></li>
693
+ <li><a href="#" class="text-gray-600 hover:text-blue-700 text-sm">Disclaimer</a></li>
694
+ </ul>
695
+ </div>
696
+
697
+ <div>
698
+ <h3 class="text-lg font-semibold text-blue-900 mb-4">Connect With Us</h3>
699
+ <div class="flex space-x-4 mb-4">
700
+ <a href="#" class="bg-blue-100 text-blue-700 w-10 h-10 rounded-full flex items-center justify-center hover:bg-blue-200 transition">
701
+ <i class="fab fa-facebook-f"></i>
702
+ </a>
703
+ <a href="#" class="bg-blue-100 text-blue-700 w-10 h-10 rounded-full flex items-center justify-center hover:bg-blue-200 transition">
704
+ <i class="fab fa-twitter"></i>
705
+ </a>
706
+ <a href="#" class="bg-blue-100 text-blue-700 w-10 h-10 rounded-full flex items-center justify-center hover:bg-blue-200 transition">
707
+ <i class="fab fa-instagram"></i>
708
+ </a>
709
+ <a href="#" class="bg-blue-100 text-blue-700 w-10 h-10 rounded-full flex items-center justify-center hover:bg-blue-200 transition">
710
+ <i class="fab fa-youtube"></i>
711
+ </a>
712
+ </div>
713
+
714
+ <div class="flex items-center">
715
+ <select class="text-sm border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-1 focus:ring-blue-500">
716
+ <option>English</option>
717
+ <option>বাংলা</option>
718
+ </select>
719
+ </div>
720
+ </div>
721
+ </div>
722
+
723
+ <div class="border-t border-gray-200 pt-6">
724
+ <p class="text-sm text-gray-600 text-center">© 2023 Transport Department, Government of West Bengal. All Rights Reserved.</p>
725
+ </div>
726
+ </div>
727
+ </footer>
728
+
729
+ <!-- Mobile Bottom Navigation -->
730
+ <div class="md:hidden fixed bottom-0 left-0 right-0 bg-white shadow-lg border-t border-gray-200 z-50">
731
+ <div class="flex justify-around py-3">
732
+ <a href="#" class="flex flex-col items-center text-blue-700">
733
+ <i class="fas fa-home text-xl mb-1"></i>
734
+ <span class="text-xs">Home</span>
735
+ </a>
736
+ <a href="#" class="flex flex-col items-center text-gray-600">
737
+ <i class="fas fa-concierge-bell text-xl mb-1"></i>
738
+ <span class="text-xs">Services</span>
739
+ </a>
740
+ <a href="#" class="flex flex-col items-center text-gray-600">
741
+ <i class="fas fa-search-location text-xl mb-1"></i>
742
+ <span class="text-xs">Track</span>
743
+ </a>
744
+ <a href="#" class="flex flex-col items-center text-gray-600">
745
+ <i class="fas fa-headset text-xl mb-1"></i>
746
+ <span class="text-xs">Support</span>
747
+ </a>
748
+ <a href="#" class="flex flex-col items-center text-gray-600">
749
+ <i class="fas fa-user-circle text-xl mb-1"></i>
750
+ <span class="text-xs">Profile</span>
751
+ </a>
752
+ </div>
753
+ </div>
754
+
755
+ <script>
756
+ // Accordion functionality
757
+ document.querySelectorAll('.accordion-btn').forEach(button => {
758
+ button.addEventListener('click', () => {
759
+ const accordion = button.parentElement;
760
+ accordion.classList.toggle('active');
761
+
762
+ const icon = button.querySelector('i');
763
+ if (accordion.classList.contains('active')) {
764
+ icon.style.transform = 'rotate(180deg)';
765
+ } else {
766
+ icon.style.transform = 'rotate(0deg)';
767
+ }
768
+ });
769
+ });
770
+
771
+ // Fee calculator button
772
+ document.querySelector('#feeCalculator button').addEventListener('click', () => {
773
+ document.getElementById('feeResult').classList.remove('hidden');
774
+ });
775
+
776
+ // Map hover effects
777
+ document.querySelectorAll('[data-city]').forEach(element => {
778
+ element.addEventListener('mouseenter', () => {
779
+ const city = element.getAttribute('data-city');
780
+ document.querySelector(`[data-city="${city}"]`).classList.add('bg-blue-100');
781
+ });
782
+
783
+ element.addEventListener('mouseleave', () => {
784
+ const city = element.getAttribute('data-city');
785
+ document.querySelector(`[data-city="${city}"]`).classList.remove('bg-blue-100');
786
+ });
787
+ });
788
+ </script>
789
+ <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=aniket2025/second-website-design" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
790
+ </html>