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
f8f36ba
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>West Bengal Transport Department</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background-color: #f8fafc; | |
| } | |
| .glass-nav { | |
| background: rgba(255, 255, 255, 0.85); | |
| backdrop-filter: blur(10px); | |
| -webkit-backdrop-filter: blur(10px); | |
| box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); | |
| } | |
| .glass-card { | |
| background: rgba(255, 255, 255, 0.8); | |
| backdrop-filter: blur(5px); | |
| -webkit-backdrop-filter: blur(5px); | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); | |
| transition: all 0.3s ease; | |
| } | |
| .glass-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); | |
| } | |
| .status-step { | |
| position: relative; | |
| } | |
| .status-step:not(:last-child):after { | |
| content: ''; | |
| position: absolute; | |
| top: 50%; | |
| right: -30px; | |
| width: 20px; | |
| height: 2px; | |
| background: #cbd5e1; | |
| } | |
| .status-step.active:after { | |
| background: #3b82f6; | |
| } | |
| .ticker { | |
| animation: ticker 30s linear infinite; | |
| } | |
| @keyframes ticker { | |
| 0% { transform: translateX(100%); } | |
| 100% { transform: translateX(-100%); } | |
| } | |
| .accordion-content { | |
| max-height: 0; | |
| overflow: hidden; | |
| transition: max-height 0.3s ease-out; | |
| } | |
| .accordion.active .accordion-content { | |
| max-height: 500px; | |
| } | |
| .search-bar:focus-within { | |
| box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3); | |
| } | |
| .hover-slide-btn { | |
| transform: translateX(100%); | |
| transition: transform 0.3s ease; | |
| } | |
| .service-card:hover .hover-slide-btn { | |
| transform: translateX(0); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Scene 1: Hero Banner --> | |
| <div class="relative h-screen md:h-[600px] bg-gradient-to-br from-blue-50 to-green-50 overflow-hidden"> | |
| <!-- Glassmorphic Navigation --> | |
| <nav class="glass-nav fixed w-full z-50 py-4 px-6"> | |
| <div class="max-w-7xl mx-auto flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <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"> | |
| <div class="hidden md:flex space-x-6"> | |
| <a href="#" class="text-blue-900 font-medium hover:text-blue-700">Home</a> | |
| <a href="#" class="text-gray-700 hover:text-blue-700">Services</a> | |
| <a href="#" class="text-gray-700 hover:text-blue-700">Forms</a> | |
| <a href="#" class="text-gray-700 hover:text-blue-700">e-Permit</a> | |
| <a href="#" class="text-gray-700 hover:text-blue-700">Track Vehicle</a> | |
| <a href="#" class="text-gray-700 hover:text-blue-700">Contact</a> | |
| </div> | |
| </div> | |
| <div class="hidden md:block"> | |
| <button class="bg-blue-700 text-white px-4 py-2 rounded-md hover:bg-blue-800 transition">Login</button> | |
| </div> | |
| <button class="md:hidden text-gray-700"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| </nav> | |
| <!-- Hero Content --> | |
| <div class="absolute inset-0 flex items-center"> | |
| <div class="max-w-7xl mx-auto px-6 z-10 mt-16"> | |
| <div class="md:w-2/3"> | |
| <h1 class="text-4xl md:text-5xl font-bold text-blue-900 mb-4">West Bengal Transport Department</h1> | |
| <p class="text-lg text-gray-700 mb-8">Simplifying transport services for citizens with digital solutions and transparent processes.</p> | |
| <!-- Search Bar --> | |
| <div class="bg-white rounded-lg p-1 shadow-lg search-bar transition-all duration-300 max-w-2xl"> | |
| <div class="flex"> | |
| <input type="text" placeholder="Enter Vehicle No. or Permit ID" class="flex-grow px-4 py-3 focus:outline-none rounded-l-lg"> | |
| <button class="bg-blue-700 text-white px-6 py-3 rounded-r-lg hover:bg-blue-800 transition">Search</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Illustration --> | |
| <div class="absolute bottom-0 right-0 w-full md:w-1/2 h-1/2 md:h-full"> | |
| <svg viewBox="0 0 800 600" class="w-full h-full"> | |
| <path d="M0,300 L800,300 L800,600 L0,600 Z" fill="#3b82f6" fill-opacity="0.1"></path> | |
| <path d="M0,400 L800,400 L800,600 L0,600 Z" fill="#10b981" fill-opacity="0.1"></path> | |
| <!-- Road --> | |
| <path d="M0,450 L800,450 L800,470 L0,470 Z" fill="#334155"></path> | |
| <!-- Buses --> | |
| <rect x="100" y="380" width="120" height="70" rx="5" fill="#1e40af"></rect> | |
| <rect x="350" y="390" width="140" height="80" rx="5" fill="#065f46"></rect> | |
| <rect x="600" y="400" width="130" height="75" rx="5" fill="#1e40af"></rect> | |
| <!-- Road markings --> | |
| <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> | |
| </svg> | |
| </div> | |
| </div> | |
| <!-- Scene 2: e-Permit & Licensing Dashboard --> | |
| <div class="py-16 bg-white"> | |
| <div class="max-w-7xl mx-auto px-6"> | |
| <h2 class="text-3xl font-bold text-blue-900 mb-2">Transport Services</h2> | |
| <p class="text-gray-600 mb-12">Access all transport-related services with just a few clicks</p> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <!-- Card 1 --> | |
| <div class="glass-card rounded-xl p-6 service-card relative overflow-hidden"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-blue-100 p-3 rounded-lg mr-4"> | |
| <i class="fas fa-file-alt text-blue-700 text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold text-gray-800">Apply for Permit</h3> | |
| </div> | |
| <p class="text-gray-600 text-sm mb-6">Apply for new vehicle permits or renew existing ones through our online portal.</p> | |
| <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> | |
| </div> | |
| <!-- Card 2 --> | |
| <div class="glass-card rounded-xl p-6 service-card relative overflow-hidden"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-green-100 p-3 rounded-lg mr-4"> | |
| <i class="fas fa-id-card text-green-700 text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold text-gray-800">Driver's License Renewal</h3> | |
| </div> | |
| <p class="text-gray-600 text-sm mb-6">Renew your driving license online without visiting RTO offices.</p> | |
| <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> | |
| </div> | |
| <!-- Card 3 --> | |
| <div class="glass-card rounded-xl p-6 service-card relative overflow-hidden"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-yellow-100 p-3 rounded-lg mr-4"> | |
| <i class="fas fa-car text-yellow-700 text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold text-gray-800">Fitness Certificate</h3> | |
| </div> | |
| <p class="text-gray-600 text-sm mb-6">Apply for vehicle fitness certification and schedule inspections.</p> | |
| <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> | |
| </div> | |
| <!-- Card 4 --> | |
| <div class="glass-card rounded-xl p-6 service-card relative overflow-hidden"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-purple-100 p-3 rounded-lg mr-4"> | |
| <i class="fas fa-file-invoice-dollar text-purple-700 text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold text-gray-800">Tax Payment</h3> | |
| </div> | |
| <p class="text-gray-600 text-sm mb-6">Pay your vehicle taxes online with multiple payment options.</p> | |
| <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> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Scene 3: Vehicle Tracking & Status Flow --> | |
| <div class="py-16 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-6"> | |
| <h2 class="text-3xl font-bold text-blue-900 mb-2">Track Your Application</h2> | |
| <p class="text-gray-600 mb-12">Check the status of your permit or license application in real-time</p> | |
| <div class="bg-white rounded-xl shadow-md p-8"> | |
| <div class="flex flex-col md:flex-row items-center mb-8"> | |
| <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"> | |
| <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> | |
| </div> | |
| <div class="flex justify-between items-center py-6 px-4 bg-gray-50 rounded-lg"> | |
| <!-- Status Steps --> | |
| <div class="status-step active flex flex-col items-center"> | |
| <div class="w-12 h-12 rounded-full bg-blue-700 text-white flex items-center justify-center mb-2"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <span class="text-sm font-medium text-blue-700">Submitted</span> | |
| </div> | |
| <div class="status-step flex flex-col items-center"> | |
| <div class="w-12 h-12 rounded-full bg-gray-300 text-gray-600 flex items-center justify-center mb-2"> | |
| <i class="fas fa-spinner"></i> | |
| </div> | |
| <span class="text-sm font-medium text-gray-600">Verified</span> | |
| </div> | |
| <div class="status-step flex flex-col items-center"> | |
| <div class="w-12 h-12 rounded-full bg-gray-300 text-gray-600 flex items-center justify-center mb-2"> | |
| <i class="fas fa-file-alt"></i> | |
| </div> | |
| <span class="text-sm font-medium text-gray-600">Processing</span> | |
| </div> | |
| <div class="status-step flex flex-col items-center"> | |
| <div class="w-12 h-12 rounded-full bg-gray-300 text-gray-600 flex items-center justify-center mb-2"> | |
| <i class="fas fa-check-circle"></i> | |
| </div> | |
| <span class="text-sm font-medium text-gray-600">Completed</span> | |
| </div> | |
| </div> | |
| <div class="mt-8 p-6 bg-blue-50 rounded-lg border border-blue-100"> | |
| <h3 class="text-lg font-semibold text-blue-900 mb-2">Application Status Details</h3> | |
| <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> | |
| <p class="text-sm text-gray-600">Expected completion: 25 June 2023</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Scene 4: Fee Calculator & QR Scan --> | |
| <div class="py-16 bg-white"> | |
| <div class="max-w-7xl mx-auto px-6"> | |
| <div class="flex flex-col lg:flex-row gap-12"> | |
| <!-- Fee Calculator --> | |
| <div class="lg:w-1/2"> | |
| <h2 class="text-3xl font-bold text-blue-900 mb-2">Fee Calculator</h2> | |
| <p class="text-gray-600 mb-6">Estimate fees for your transport-related applications</p> | |
| <div class="bg-gray-50 rounded-xl p-6 shadow-sm"> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 mb-2">Vehicle Type</label> | |
| <select class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <option>Select Vehicle Type</option> | |
| <option>Two Wheeler</option> | |
| <option>Private Car</option> | |
| <option>Commercial Vehicle</option> | |
| <option>Bus</option> | |
| <option>Taxi</option> | |
| </select> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 mb-2">Application Type</label> | |
| <select class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <option>Select Application</option> | |
| <option>New Permit</option> | |
| <option>Permit Renewal</option> | |
| <option>Route Variation</option> | |
| <option>Duplicate Permit</option> | |
| </select> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 mb-2">Route/Distance (km)</label> | |
| <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"> | |
| </div> | |
| <button class="w-full bg-blue-700 text-white px-6 py-3 rounded-lg hover:bg-blue-800 transition">Calculate Fees</button> | |
| <div class="mt-6 p-4 bg-blue-100 rounded-lg hidden" id="feeResult"> | |
| <h3 class="font-semibold text-blue-900 mb-2">Estimated Fees</h3> | |
| <p class="text-gray-700">Application Fee: ₹500</p> | |
| <p class="text-gray-700">Permit Fee: ₹2,000</p> | |
| <p class="text-gray-700">Route Fee: ₹1,200</p> | |
| <p class="text-lg font-bold text-blue-900 mt-2">Total: ₹3,700</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- QR Scanner --> | |
| <div class="lg:w-1/2"> | |
| <h2 class="text-3xl font-bold text-blue-900 mb-2">Vehicle Authenticity Check</h2> | |
| <p class="text-gray-600 mb-6">Scan QR code to verify vehicle documents</p> | |
| <div class="bg-gray-50 rounded-xl p-8 shadow-sm flex flex-col items-center"> | |
| <div class="relative mb-6"> | |
| <div class="w-64 h-64 bg-white border-4 border-blue-200 rounded-lg flex items-center justify-center"> | |
| <div class="w-48 h-48 bg-gray-200 rounded flex items-center justify-center"> | |
| <i class="fas fa-qrcode text-5xl text-gray-400"></i> | |
| </div> | |
| </div> | |
| <div class="absolute -top-2 -left-2 w-12 h-12 border-t-4 border-l-4 border-blue-500 rounded-tl-lg"></div> | |
| <div class="absolute -top-2 -right-2 w-12 h-12 border-t-4 border-r-4 border-blue-500 rounded-tr-lg"></div> | |
| <div class="absolute -bottom-2 -left-2 w-12 h-12 border-b-4 border-l-4 border-blue-500 rounded-bl-lg"></div> | |
| <div class="absolute -bottom-2 -right-2 w-12 h-12 border-b-4 border-r-4 border-blue-500 rounded-br-lg"></div> | |
| </div> | |
| <p class="text-gray-600 text-center mb-6">Point your camera at the QR code on the vehicle permit or registration document</p> | |
| <div class="flex space-x-4"> | |
| <button class="bg-blue-700 text-white px-6 py-2 rounded-lg hover:bg-blue-800 transition flex items-center"> | |
| <i class="fas fa-camera mr-2"></i> Scan QR Code | |
| </button> | |
| <button class="bg-gray-200 text-gray-700 px-6 py-2 rounded-lg hover:bg-gray-300 transition"> | |
| Upload Image | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Scene 5: Vehicle Search Map --> | |
| <div class="py-16 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-6"> | |
| <h2 class="text-3xl font-bold text-blue-900 mb-2">Transport Offices & Centers</h2> | |
| <p class="text-gray-600 mb-12">Locate RTO offices, inspection centers, and other transport facilities across West Bengal</p> | |
| <div class="flex flex-col lg:flex-row gap-8"> | |
| <!-- Map --> | |
| <div class="lg:w-2/3 bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="h-96 bg-blue-100 relative"> | |
| <!-- Map placeholder with West Bengal outline --> | |
| <svg viewBox="0 0 800 500" class="w-full h-full"> | |
| <!-- West Bengal outline (simplified) --> | |
| <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> | |
| <!-- City markers --> | |
| <circle cx="300" cy="200" r="8" fill="#ef4444" class="cursor-pointer hover:r-10 transition-all" data-city="kolkata"></circle> | |
| <circle cx="400" cy="250" r="6" fill="#10b981" class="cursor-pointer hover:r-8 transition-all" data-city="asansol"></circle> | |
| <circle cx="250" cy="150" r="6" fill="#10b981" class="cursor-pointer hover:r-8 transition-all" data-city="siliguri"></circle> | |
| <circle cx="500" cy="300" r="6" fill="#10b981" class="cursor-pointer hover:r-8 transition-all" data-city="durgapur"></circle> | |
| <circle cx="350" cy="350" r="6" fill="#10b981" class="cursor-pointer hover:r-8 transition-all" data-city="kharagpur"></circle> | |
| <circle cx="450" cy="150" r="6" fill="#10b981" class="cursor-pointer hover:r-8 transition-all" data-city="bardhaman"></circle> | |
| <text x="300" y="180" text-anchor="middle" class="text-xs font-bold">Kolkata</text> | |
| </svg> | |
| </div> | |
| </div> | |
| <!-- Office List --> | |
| <div class="lg:w-1/3"> | |
| <div class="bg-white rounded-xl shadow-md p-6 h-full"> | |
| <h3 class="text-xl font-semibold text-blue-900 mb-4">Transport Offices</h3> | |
| <div class="space-y-4"> | |
| <div class="p-4 border border-gray-200 rounded-lg hover:border-blue-300 hover:bg-blue-50 transition cursor-pointer" data-city="kolkata"> | |
| <h4 class="font-medium text-gray-800">Kolkata RTO (WB01)</h4> | |
| <p class="text-sm text-gray-600">Belgharia, Kolkata - 700056</p> | |
| <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> | |
| </div> | |
| <div class="p-4 border border-gray-200 rounded-lg hover:border-blue-300 hover:bg-blue-50 transition cursor-pointer" data-city="asansol"> | |
| <h4 class="font-medium text-gray-800">Asansol RTO (WB38)</h4> | |
| <p class="text-sm text-gray-600">Burnpur, Asansol - 713325</p> | |
| <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> | |
| </div> | |
| <div class="p-4 border border-gray-200 rounded-lg hover:border-blue-300 hover:bg-blue-50 transition cursor-pointer" data-city="siliguri"> | |
| <h4 class="font-medium text-gray-800">Siliguri RTO (WB74)</h4> | |
| <p class="text-sm text-gray-600">Pradhan Nagar, Siliguri - 734003</p> | |
| <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> | |
| </div> | |
| <div class="p-4 border border-gray-200 rounded-lg hover:border-blue-300 hover:bg-blue-50 transition cursor-pointer" data-city="durgapur"> | |
| <h4 class="font-medium text-gray-800">Durgapur RTO (WB44)</h4> | |
| <p class="text-sm text-gray-600">City Center, Durgapur - 713216</p> | |
| <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> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Scene 6: Real-Time Notices & Alerts --> | |
| <div class="py-12 bg-blue-800 text-white"> | |
| <div class="max-w-7xl mx-auto px-6"> | |
| <div class="flex items-center mb-8"> | |
| <div class="bg-white text-blue-800 p-2 rounded-lg mr-4"> | |
| <i class="fas fa-bell text-xl"></i> | |
| </div> | |
| <h2 class="text-3xl font-bold">Notices & Alerts</h2> | |
| </div> | |
| <!-- Ticker --> | |
| <div class="bg-blue-900 rounded-lg p-4 mb-8 overflow-hidden"> | |
| <div class="flex items-center"> | |
| <span class="bg-yellow-400 text-blue-900 font-bold px-3 py-1 rounded mr-4 whitespace-nowrap">LATEST:</span> | |
| <div class="ticker whitespace-nowrap"> | |
| <span class="mr-8">New seat belt regulations effective from 1st July 2023</span> | |
| <span class="mr-8">Online payment discount extended till 30th June</span> | |
| <span class="mr-8">Kolkata RTO office will remain closed on 29th June</span> | |
| <span class="mr-8">New traffic rules for commercial vehicles in hill areas</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Alert Cards --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <div class="bg-white text-blue-900 rounded-xl p-6 shadow-lg"> | |
| <div class="flex items-start mb-4"> | |
| <div class="bg-red-100 text-red-600 p-2 rounded-lg mr-4"> | |
| <i class="fas fa-exclamation-triangle"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold mb-1">Traffic Advisory</h3> | |
| <p class="text-sm text-gray-700">Restrictions on NH12 during monsoon season from 15th June to 15th September.</p> | |
| </div> | |
| </div> | |
| <a href="#" class="text-blue-700 text-sm font-medium hover:underline">Read more →</a> | |
| </div> | |
| <div class="bg-white text-blue-900 rounded-xl p-6 shadow-lg"> | |
| <div class="flex items-start mb-4"> | |
| <div class="bg-green-100 text-green-600 p-2 rounded-lg mr-4"> | |
| <i class="fas fa-info-circle"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold mb-1">New Online Services</h3> | |
| <p class="text-sm text-gray-700">Now apply for international driving permit online through our portal.</p> | |
| </div> | |
| </div> | |
| <a href="#" class="text-blue-700 text-sm font-medium hover:underline">Read more →</a> | |
| </div> | |
| <div class="bg-white text-blue-900 rounded-xl p-6 shadow-lg"> | |
| <div class="flex items-start mb-4"> | |
| <div class="bg-yellow-100 text-yellow-600 p-2 rounded-lg mr-4"> | |
| <i class="fas fa-calendar-alt"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold mb-1">Holiday Notice</h3> | |
| <p class="text-sm text-gray-700">All RTO offices will remain closed on 29th June for annual maintenance.</p> | |
| </div> | |
| </div> | |
| <a href="#" class="text-blue-700 text-sm font-medium hover:underline">Read more →</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Scene 7: Resources & Downloads --> | |
| <div class="py-16 bg-white"> | |
| <div class="max-w-7xl mx-auto px-6"> | |
| <h2 class="text-3xl font-bold text-blue-900 mb-2">Resources & Downloads</h2> | |
| <p class="text-gray-600 mb-12">Access important forms, documents, and informational resources</p> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <div class="glass-card rounded-xl p-6 hover:shadow-md transition group"> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 p-3 rounded-lg mr-4 group-hover:bg-blue-200 transition"> | |
| <i class="fas fa-file-pdf text-blue-700 text-xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-1">Permit Application Form</h3> | |
| <p class="text-sm text-gray-600 mb-3">Form A for new vehicle permit applications</p> | |
| <a href="#" class="text-blue-700 text-sm font-medium hover:underline flex items-center"> | |
| <i class="fas fa-download mr-2"></i> Download (PDF, 245KB) | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="glass-card rounded-xl p-6 hover:shadow-md transition group"> | |
| <div class="flex items-start"> | |
| <div class="bg-green-100 p-3 rounded-lg mr-4 group-hover:bg-green-200 transition"> | |
| <i class="fas fa-file-pdf text-green-700 text-xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-1">Route Maps</h3> | |
| <p class="text-sm text-gray-600 mb-3">Approved routes for commercial vehicles</p> | |
| <a href="#" class="text-blue-700 text-sm font-medium hover:underline flex items-center"> | |
| <i class="fas fa-download mr-2"></i> Download (PDF, 1.2MB) | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="glass-card rounded-xl p-6 hover:shadow-md transition group"> | |
| <div class="flex items-start"> | |
| <div class="bg-yellow-100 p-3 rounded-lg mr-4 group-hover:bg-yellow-200 transition"> | |
| <i class="fas fa-file-pdf text-yellow-700 text-xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-1">Fee Schedule</h3> | |
| <p class="text-sm text-gray-600 mb-3">Updated fee structure for all services</p> | |
| <a href="#" class="text-blue-700 text-sm font-medium hover:underline flex items-center"> | |
| <i class="fas fa-download mr-2"></i> Download (PDF, 380KB) | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="glass-card rounded-xl p-6 hover:shadow-md transition group"> | |
| <div class="flex items-start"> | |
| <div class="bg-purple-100 p-3 rounded-lg mr-4 group-hover:bg-purple-200 transition"> | |
| <i class="fas fa-file-pdf text-purple-700 text-xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-1">Vehicle Fitness Guidelines</h3> | |
| <p class="text-sm text-gray-600 mb-3">Checklist and standards for fitness certification</p> | |
| <a href="#" class="text-blue-700 text-sm font-medium hover:underline flex items-center"> | |
| <i class="fas fa-download mr-2"></i> Download (PDF, 890KB) | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="glass-card rounded-xl p-6 hover:shadow-md transition group"> | |
| <div class="flex items-start"> | |
| <div class="bg-red-100 p-3 rounded-lg mr-4 group-hover:bg-red-200 transition"> | |
| <i class="fas fa-file-pdf text-red-700 text-xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-1">Traffic Rules Handbook</h3> | |
| <p class="text-sm text-gray-600 mb-3">Updated West Bengal traffic regulations</p> | |
| <a href="#" class="text-blue-700 text-sm font-medium hover:underline flex items-center"> | |
| <i class="fas fa-download mr-2"></i> Download (PDF, 2.4MB) | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="glass-card rounded-xl p-6 hover:shadow-md transition group"> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 p-3 rounded-lg mr-4 group-hover:bg-blue-200 transition"> | |
| <i class="fas fa-file-pdf text-blue-700 text-xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-1">Grievance Form</h3> | |
| <p class="text-sm text-gray-600 mb-3">Form for submitting complaints/suggestions</p> | |
| <a href="#" class="text-blue-700 text-sm font-medium hover:underline flex items-center"> | |
| <i class="fas fa-download mr-2"></i> Download (PDF, 150KB) | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Scene 8: Help & Support Accordion --> | |
| <div class="py-16 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-6"> | |
| <h2 class="text-3xl font-bold text-blue-900 mb-2">Help & Support</h2> | |
| <p class="text-gray-600 mb-12">Find answers to common questions and get assistance</p> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <!-- FAQ Accordion --> | |
| <div class="border-b border-gray-200 accordion"> | |
| <button class="w-full flex justify-between items-center p-6 text-left accordion-btn"> | |
| <h3 class="text-lg font-semibold text-blue-900">Frequently Asked Questions</h3> | |
| <i class="fas fa-chevron-down text-gray-500 transition-transform"></i> | |
| </button> | |
| <div class="accordion-content px-6 pb-6"> | |
| <div class="space-y-4"> | |
| <div> | |
| <h4 class="font-medium text-gray-800">How do I apply for a new vehicle permit?</h4> | |
| <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> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-gray-800">What documents are required for license renewal?</h4> | |
| <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> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-gray-800">How long does permit processing take?</h4> | |
| <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> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Helpline Accordion --> | |
| <div class="border-b border-gray-200 accordion"> | |
| <button class="w-full flex justify-between items-center p-6 text-left accordion-btn"> | |
| <h3 class="text-lg font-semibold text-blue-900">Helpline Numbers</h3> | |
| <i class="fas fa-chevron-down text-gray-500 transition-transform"></i> | |
| </button> | |
| <div class="accordion-content px-6 pb-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div class="bg-blue-50 p-4 rounded-lg"> | |
| <h4 class="font-medium text-blue-900 mb-2">General Enquiries</h4> | |
| <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> | |
| <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> | |
| </div> | |
| <div class="bg-green-50 p-4 rounded-lg"> | |
| <h4 class="font-medium text-green-900 mb-2">Complaints & Grievances</h4> | |
| <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> | |
| <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> | |
| </div> | |
| <div class="bg-yellow-50 p-4 rounded-lg"> | |
| <h4 class="font-medium text-yellow-900 mb-2">Emergency Support</h4> | |
| <p class="text-sm text-gray-700"><i class="fas fa-phone-alt mr-2 text-yellow-600"></i> 033-2245-6789</p> | |
| <p class="text-sm text-gray-700 mt-1">Available 24x7</p> | |
| </div> | |
| <div class="bg-purple-50 p-4 rounded-lg"> | |
| <h4 class="font-medium text-purple-900 mb-2">Technical Support</h4> | |
| <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> | |
| <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> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Complaint Tracking Accordion --> | |
| <div class="accordion"> | |
| <button class="w-full flex justify-between items-center p-6 text-left accordion-btn"> | |
| <h3 class="text-lg font-semibold text-blue-900">Complaint Tracking</h3> | |
| <i class="fas fa-chevron-down text-gray-500 transition-transform"></i> | |
| </button> | |
| <div class="accordion-content px-6 pb-6"> | |
| <div class="flex flex-col md:flex-row gap-6"> | |
| <div class="md:w-1/2"> | |
| <h4 class="font-medium text-gray-800 mb-2">Check Complaint Status</h4> | |
| <div class="flex"> | |
| <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"> | |
| <button class="bg-blue-700 text-white px-6 py-3 rounded-r-lg hover:bg-blue-800 transition">Track</button> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-2">Complaint ID can be found in your acknowledgement email/SMS</p> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <h4 class="font-medium text-gray-800 mb-2">Submit New Complaint</h4> | |
| <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"> | |
| <i class="fas fa-plus-circle mr-2"></i> Register Complaint | |
| </button> | |
| <p class="text-xs text-gray-500 mt-2">Average resolution time: 3-5 working days</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Scene 9: Footer & Mobile Nav --> | |
| <footer class="glass-nav border-t border-gray-200 pt-12 pb-6"> | |
| <div class="max-w-7xl mx-auto px-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8"> | |
| <div> | |
| <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"> | |
| <p class="text-sm text-gray-600">Department of Transport, Government of West Bengal</p> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold text-blue-900 mb-4">Quick Links</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-600 hover:text-blue-700 text-sm">Home</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-blue-700 text-sm">Services</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-blue-700 text-sm">Forms & Downloads</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-blue-700 text-sm">Track Application</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-blue-700 text-sm">Contact Us</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold text-blue-900 mb-4">Policies</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-600 hover:text-blue-700 text-sm">Terms of Service</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-blue-700 text-sm">Privacy Policy</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-blue-700 text-sm">Accessibility</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-blue-700 text-sm">Refund Policy</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-blue-700 text-sm">Disclaimer</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold text-blue-900 mb-4">Connect With Us</h3> | |
| <div class="flex space-x-4 mb-4"> | |
| <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"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <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"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <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"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <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"> | |
| <i class="fab fa-youtube"></i> | |
| </a> | |
| </div> | |
| <div class="flex items-center"> | |
| <select class="text-sm border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-1 focus:ring-blue-500"> | |
| <option>English</option> | |
| <option>বাংলা</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-200 pt-6"> | |
| <p class="text-sm text-gray-600 text-center">© 2023 Transport Department, Government of West Bengal. All Rights Reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Mobile Bottom Navigation --> | |
| <div class="md:hidden fixed bottom-0 left-0 right-0 bg-white shadow-lg border-t border-gray-200 z-50"> | |
| <div class="flex justify-around py-3"> | |
| <a href="#" class="flex flex-col items-center text-blue-700"> | |
| <i class="fas fa-home text-xl mb-1"></i> | |
| <span class="text-xs">Home</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center text-gray-600"> | |
| <i class="fas fa-concierge-bell text-xl mb-1"></i> | |
| <span class="text-xs">Services</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center text-gray-600"> | |
| <i class="fas fa-search-location text-xl mb-1"></i> | |
| <span class="text-xs">Track</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center text-gray-600"> | |
| <i class="fas fa-headset text-xl mb-1"></i> | |
| <span class="text-xs">Support</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center text-gray-600"> | |
| <i class="fas fa-user-circle text-xl mb-1"></i> | |
| <span class="text-xs">Profile</span> | |
| </a> | |
| </div> | |
| </div> | |
| <script> | |
| // Accordion functionality | |
| document.querySelectorAll('.accordion-btn').forEach(button => { | |
| button.addEventListener('click', () => { | |
| const accordion = button.parentElement; | |
| accordion.classList.toggle('active'); | |
| const icon = button.querySelector('i'); | |
| if (accordion.classList.contains('active')) { | |
| icon.style.transform = 'rotate(180deg)'; | |
| } else { | |
| icon.style.transform = 'rotate(0deg)'; | |
| } | |
| }); | |
| }); | |
| // Fee calculator button | |
| document.querySelector('#feeCalculator button').addEventListener('click', () => { | |
| document.getElementById('feeResult').classList.remove('hidden'); | |
| }); | |
| // Map hover effects | |
| document.querySelectorAll('[data-city]').forEach(element => { | |
| element.addEventListener('mouseenter', () => { | |
| const city = element.getAttribute('data-city'); | |
| document.querySelector(`[data-city="${city}"]`).classList.add('bg-blue-100'); | |
| }); | |
| element.addEventListener('mouseleave', () => { | |
| const city = element.getAttribute('data-city'); | |
| document.querySelector(`[data-city="${city}"]`).classList.remove('bg-blue-100'); | |
| }); | |
| }); | |
| </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=aniket2025/second-website-design" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |