Premium Transport Solutions Template
Preview
Edit
Download
Run
Download Options
HTML File
Download as .html file
CSS File
Download as .css file
JavaScript File
Download as .js file
Combined HTML
All code in one HTML file
Project ZIP
All files in a ZIP archive
Cancel
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>TransLogistics Pro - Premium Transport Solutions</title> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Poppins:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> </head> <body class="overflow-x-hidden bg-gray-50 font-inter"> <!-- Fixed Navigation --> <nav class="navbar-fixed py-4 px-6 glass-professional"> <div class="container mx-auto flex justify-between items-center"> <div class="flex items-center"> <div class="text-3xl font-poppins font-bold text-gray-900 tracking-wider"> ? TRANSLOGISTICS PRO </div> <!-- <div class="ml-3 text-sm text-gray-600 font-medium">Premium Transport Solutions</div> --> </div> <div class="hidden lg:flex items-center space-x-8"> <a href="#home" class="text-gray-700 hover:text-blue-600 transition-all duration-300 font-medium relative group"> Home <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-blue-600 transition-all duration-300 group-hover:w-full"></span> </a> <a href="#services" class="text-gray-700 hover:text-blue-600 transition-all duration-300 font-medium relative group"> Services <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-blue-600 transition-all duration-300 group-hover:w-full"></span> </a> <a href="#fleet" class="text-gray-700 hover:text-blue-600 transition-all duration-300 font-medium relative group"> Fleet <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-blue-600 transition-all duration-300 group-hover:w-full"></span> </a> <a href="#tracking" class="text-gray-700 hover:text-blue-600 transition-all duration-300 font-medium relative group"> Tracking <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-blue-600 transition-all duration-300 group-hover:w-full"></span> </a> <a href="#about" class="text-gray-700 hover:text-blue-600 transition-all duration-300 font-medium relative group"> About <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-blue-600 transition-all duration-300 group-hover:w-full"></span> </a> <a href="#contact" class="text-gray-700 hover:text-blue-600 transition-all duration-300 font-medium relative group"> Contact <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-blue-600 transition-all duration-300 group-hover:w-full"></span> </a> </div> <div class="flex items-center space-x-4"> <div class="relative"> <i class="fas fa-search absolute right-3 top-3 text-gray-400"></i> </div> <button class="btn-primary text-white px-6 py-2 rounded-full font-semibold"> Get Quote </button> </div> </div> </nav> <!-- Hero Section --> <section id="home" class="min-h-screen relative overflow-hidden content-with-navbar"> <div class="absolute inset-0 primary-gradient opacity-90"></div> <div class="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-black opacity-40"></div> <div class="relative z-10 container mx-auto px-6 py-20 min-h-screen flex items-center"> <div class="grid lg:grid-cols-2 gap-16 items-center w-full"> <div class="slide-in-left text-white"> <div class="professional-badge mb-6"> ISO 9001:2015 Certified </div> <h1 class="text-6xl md:text-7xl font-poppins font-bold mb-8 leading-tight"> Professional <span class="block secondary-gradient bg-clip-text text-transparent">Transport Solutions</span> </h1> <p class="text-xl mb-12 leading-relaxed text-gray-100 font-light"> Reliable, efficient, and secure transportation services for businesses and individuals. Advanced fleet management with real-time tracking and 24/7 support. </p> <div class="flex flex-col sm:flex-row gap-6 mb-16"> <button class="btn-primary text-white px-10 py-4 rounded-full font-bold text-lg"> ? Book Transport </button> <button class="btn-outline-primary border-white text-white hover:text-white px-10 py-4 rounded-full font-bold text-lg"> ? Track Shipment </button> </div> <div class="grid grid-cols-3 gap-8"> <div class="text-center"> <div class="stats-counter secondary-gradient bg-clip-text text-transparent mb-2">500+</div> <div class="text-gray-200 text-sm font-medium">Active Vehicles</div> </div> <div class="text-center"> <div class="stats-counter secondary-gradient bg-clip-text text-transparent mb-2">50K+</div> <div class="text-gray-200 text-sm font-medium">Deliveries/Month</div> </div> <div class="text-center"> <div class="stats-counter secondary-gradient bg-clip-text text-transparent mb-2">99.8%</div> <div class="text-gray-200 text-sm font-medium">On-Time Rate</div> </div> </div> </div> <div class="slide-in-right"> <div class="relative"> <div class="vehicle-animation"> <img src="https://images.unsplash.com/photo-1559297434-fae8a1916a79?q=80&w=870&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Professional Transport Fleet" class="rounded-3xl shadow-professional w-full"> </div> <div class="absolute -bottom-10 -left-10 glass-dark text-white p-6 rounded-2xl shadow-professional"> <div class="flex items-center space-x-4"> <div class="w-12 h-12 secondary-gradient rounded-full flex items-center justify-center tracking-pulse"> <i class="fas fa-route text-white text-xl"></i> </div> <div> <div class="font-bold text-lg">Live Tracking</div> <div class="text-sm text-gray-300">Real-time Updates</div> </div> </div> </div> <div class="absolute -top-10 -right-10 premium-gradient text-white p-6 rounded-2xl shadow-success"> <div class="text-center"> <div class="text-2xl font-bold">24/7</div> <div class="text-lg">Support</div> <div class="text-sm">Available</div> </div> </div> </div> </div> </div> </div> </section> <!-- Services Section --> <section id="services" class="py-20 bg-white"> <div class="container mx-auto px-6"> <div class="text-center mb-16 fade-in-up"> <h2 class="text-5xl font-poppins font-bold text-gray-900 mb-6">Our Transport Services</h2> <p class="text-xl text-gray-600 max-w-3xl mx-auto leading-relaxed"> Comprehensive transportation solutions tailored to meet your specific logistics requirements with advanced technology and professional service standards. </p> </div> <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> <div class="service-card bg-white rounded-2xl shadow-professional overflow-hidden scale-in"> <div class="relative"> <img src="https://images.unsplash.com/photo-1566576912321-d58ddd7a6088?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Freight Transport" class="w-full h-48 object-cover"> <div class="absolute top-4 left-4 primary-gradient text-white px-4 py-2 rounded-full text-sm font-bold"> PREMIUM </div> <div class="absolute top-4 right-4 status-active w-4 h-4 rounded-full"></div> </div> <div class="p-6"> <h3 class="text-xl font-poppins font-bold text-gray-900 mb-3">Freight Transport</h3> <p class="text-gray-600 mb-4 leading-relaxed"> Heavy-duty freight transportation with specialized vehicles for industrial cargo, construction materials, and bulk shipments. </p> <div class="space-y-2 mb-6"> <div class="spec-item"> <span class="text-gray-600">Capacity:</span> <span class="font-semibold text-gray-900">Up to 40 tons</span> </div> <div class="spec-item"> <span class="text-gray-600">Coverage:</span> <span class="font-semibold text-gray-900">Pan-India</span> </div> <div class="spec-item"> <span class="text-gray-600">Tracking:</span> <span class="font-semibold text-green-600">Real-time GPS</span> </div> </div> <button class="w-full btn-primary text-white py-3 rounded-full font-semibold"> Get Freight Quote </button> </div> </div> <div class="service-card bg-white rounded-2xl shadow-professional overflow-hidden scale-in"> <div class="relative"> <img src="https://images.unsplash.com/photo-1559297434-fae8a1916a79?q=80&w=870&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Express Delivery" class="w-full h-48 object-cover"> <div class="absolute top-4 left-4 accent-gradient text-white px-4 py-2 rounded-full text-sm font-bold"> EXPRESS </div> <div class="absolute top-4 right-4 status-active w-4 h-4 rounded-full"></div> </div> <div class="p-6"> <h3 class="text-xl font-poppins font-bold text-gray-900 mb-3">Express Delivery</h3> <p class="text-gray-600 mb-4 leading-relaxed"> Fast and reliable express delivery services for urgent shipments with same-day and next-day delivery options. </p> <div class="space-y-2 mb-6"> <div class="spec-item"> <span class="text-gray-600">Delivery:</span> <span class="font-semibold text-gray-900">Same/Next Day</span> </div> <div class="spec-item"> <span class="text-gray-600">Weight:</span> <span class="font-semibold text-gray-900">Up to 500kg</span> </div> <div class="spec-item"> <span class="text-gray-600">Insurance:</span> <span class="font-semibold text-green-600">Full Coverage</span> </div> </div> <button class="w-full btn-primary text-white py-3 rounded-full font-semibold"> Book Express </button> </div> </div> <div class="service-card bg-white rounded-2xl shadow-professional overflow-hidden scale-in"> <div class="relative"> <img src="https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Logistics Solutions" class="w-full h-48 object-cover"> <div class="absolute top-4 left-4 secondary-gradient text-white px-4 py-2 rounded-full text-sm font-bold"> LOGISTICS </div> <div class="absolute top-4 right-4 status-active w-4 h-4 rounded-full"></div> </div> <div class="p-6"> <h3 class="text-xl font-poppins font-bold text-gray-900 mb-3">Logistics Solutions</h3> <p class="text-gray-600 mb-4 leading-relaxed"> End-to-end logistics management including warehousing, inventory management, and supply chain optimization. </p> <div class="space-y-2 mb-6"> <div class="spec-item"> <span class="text-gray-600">Warehousing:</span> <span class="font-semibold text-gray-900">Available</span> </div> <div class="spec-item"> <span class="text-gray-600">Management:</span> <span class="font-semibold text-gray-900">Full Service</span> </div> <div class="spec-item"> <span class="text-gray-600">Technology:</span> <span class="font-semibold text-green-600">AI-Powered</span> </div> </div> <button class="w-full btn-primary text-white py-3 rounded-full font-semibold"> Explore Logistics </button> </div> </div> <div class="service-card bg-white rounded-2xl shadow-professional overflow-hidden scale-in"> <div class="relative"> <img src="https://images.unsplash.com/photo-1601584115197-04ecc0da31d7?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Corporate Transport" class="w-full h-48 object-cover"> <div class="absolute top-4 left-4 premium-gradient text-white px-4 py-2 rounded-full text-sm font-bold"> CORPORATE </div> <div class="absolute top-4 right-4 status-active w-4 h-4 rounded-full"></div> </div> <div class="p-6"> <h3 class="text-xl font-poppins font-bold text-gray-900 mb-3">Corporate Transport</h3> <p class="text-gray-600 mb-4 leading-relaxed"> Professional corporate transportation services for employee commute, executive travel, and business logistics. </p> <div class="space-y-2 mb-6"> <div class="spec-item"> <span class="text-gray-600">Fleet:</span> <span class="font-semibold text-gray-900">Premium Vehicles</span> </div> <div class="spec-item"> <span class="text-gray-600">Drivers:</span> <span class="font-semibold text-gray-900">Professional</span> </div> <div class="spec-item"> <span class="text-gray-600">Contracts:</span> <span class="font-semibold text-green-600">Flexible Terms</span> </div> </div> <button class="w-full btn-primary text-white py-3 rounded-full font-semibold"> Corporate Plans </button> </div> </div> <div class="service-card bg-white rounded-2xl shadow-professional overflow-hidden scale-in"> <div class="relative"> <img src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Specialized Transport" class="w-full h-48 object-cover"> <div class="absolute top-4 left-4 bg-orange-500 text-white px-4 py-2 rounded-full text-sm font-bold"> SPECIALIZED </div> <div class="absolute top-4 right-4 status-active w-4 h-4 rounded-full"></div> </div> <div class="p-6"> <h3 class="text-xl font-poppins font-bold text-gray-900 mb-3">Specialized Transport</h3> <p class="text-gray-600 mb-4 leading-relaxed"> Specialized transportation for hazardous materials, temperature-controlled goods, and oversized cargo with certified handling. </p> <div class="space-y-2 mb-6"> <div class="spec-item"> <span class="text-gray-600">Certification:</span> <span class="font-semibold text-gray-900">ADR Compliant</span> </div> <div class="spec-item"> <span class="text-gray-600">Temperature:</span> <span class="font-semibold text-gray-900">Controlled</span> </div> <div class="spec-item"> <span class="text-gray-600">Safety:</span> <span class="font-semibold text-green-600">Certified</span> </div> </div> <button class="w-full btn-primary text-white py-3 rounded-full font-semibold"> Special Handling </button> </div> </div> <div class="service-card bg-white rounded-2xl shadow-professional overflow-hidden scale-in"> <div class="relative"> <img src="https://images.unsplash.com/photo-1494412651409-8963ce7935a7?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="International Shipping" class="w-full h-48 object-cover"> <div class="absolute top-4 left-4 bg-purple-500 text-white px-4 py-2 rounded-full text-sm font-bold"> INTERNATIONAL </div> <div class="absolute top-4 right-4 status-active w-4 h-4 rounded-full"></div> </div> <div class="p-6"> <h3 class="text-xl font-poppins font-bold text-gray-900 mb-3">International Shipping</h3> <p class="text-gray-600 mb-4 leading-relaxed"> Global shipping solutions with customs clearance, documentation support, and international logistics partnerships. </p> <div class="space-y-2 mb-6"> <div class="spec-item"> <span class="text-gray-600">Coverage:</span> <span class="font-semibold text-gray-900">Worldwide</span> </div> <div class="spec-item"> <span class="text-gray-600">Customs:</span> <span class="font-semibold text-gray-900">Full Support</span> </div> <div class="spec-item"> <span class="text-gray-600">Partners:</span> <span class="font-semibold text-green-600">Global Network</span> </div> </div> <button class="w-full btn-primary text-white py-3 rounded-full font-semibold"> International Quote </button> </div> </div> </div> </div> </section> <!-- Fleet Section --> <section id="fleet" class="py-20 bg-gray-50"> <div class="container mx-auto px-6"> <div class="text-center mb-16 fade-in-up"> <h2 class="text-5xl font-poppins font-bold text-gray-900 mb-6">Our Professional Fleet</h2> <p class="text-xl text-gray-600 max-w-3xl mx-auto leading-relaxed"> Modern, well-maintained vehicles equipped with advanced tracking technology and operated by certified professional drivers for maximum safety and efficiency. </p> </div> <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8"> <div class="vehicle-card bg-white rounded-2xl shadow-professional overflow-hidden scale-in"> <div class="relative"> <img src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" alt="Heavy Trucks" class="vehicle-image w-full h-40 object-cover"> <div class="absolute bottom-4 right-4 primary-gradient text-white p-2 rounded-full map-marker"> <i class="fas fa-truck text-lg"></i> </div> </div> <div class="p-4"> <h3 class="text-lg font-poppins font-bold text-gray-900 mb-2">Heavy Trucks</h3> <p class="text-sm text-gray-600 mb-3">40-ton capacity freight vehicles</p> <div class="flex justify-between items-center mb-3"> <span class="text-xs text-gray-500">Fleet Size:</span> <span class="font-bold text-blue-600">150 Units</span> </div> <div class="flex justify-between items-center mb-3"> <span class="text-xs text-gray-500">Status:</span> <span class="text-xs text-green-600 font-semibold">✅ Available</span> </div> <button class="w-full btn-outline-primary px-4 py-2 rounded-full text-sm font-semibold"> View Details </button> </div> </div> <div class="vehicle-card bg-white rounded-2xl shadow-professional overflow-hidden scale-in"> <div class="relative"> <img src="https://images.unsplash.com/photo-1566576912321-d58ddd7a6088?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" alt="Medium Trucks" class="vehicle-image w-full h-40 object-cover"> <div class="absolute bottom-4 right-4 secondary-gradient text-white p-2 rounded-full map-marker"> <i class="fas fa-shipping-fast text-lg"></i> </div> </div> <div class="p-4"> <h3 class="text-lg font-poppins font-bold text-gray-900 mb-2">Medium Trucks</h3> <p class="text-sm text-gray-600 mb-3">15-ton capacity delivery vehicles</p> <div class="flex justify-between items-center mb-3"> <span class="text-xs text-gray-500">Fleet Size:</span> <span class="font-bold text-blue-600">200 Units</span> </div> <div class="flex justify-between items-center mb-3"> <span class="text-xs text-gray-500">Status:</span> <span class="text-xs text-green-600 font-semibold">✅ Available</span> </div> <button class="w-full btn-outline-primary px-4 py-2 rounded-full text-sm font-semibold"> View Details </button> </div> </div> <div class="vehicle-card bg-white rounded-2xl shadow-professional overflow-hidden scale-in"> <div class="relative"> <img src="https://images.unsplash.com/photo-1559297434-fae8a1916a79?q=80&w=870&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Light Vehicles" class="vehicle-image w-full h-40 object-cover"> <div class="absolute bottom-4 right-4 accent-gradient text-white p-2 rounded-full map-marker"> <i class="fas fa-box-open text-lg"></i> </div> </div> <div class="p-4"> <h3 class="text-lg font-poppins font-bold text-gray-900 mb-2">Light Vehicles</h3> <p class="text-sm text-gray-600 mb-3">3-ton capacity express delivery</p> <div class="flex justify-between items-center mb-3"> <span class="text-xs text-gray-500">Fleet Size:</span> <span class="font-bold text-blue-600">100 Units</span> </div> <div class="flex justify-between items-center mb-3"> <span class="text-xs text-gray-500">Status:</span> <span class="text-xs text-green-600 font-semibold">✅ Available</span> </div> <button class="w-full btn-outline-primary px-4 py-2 rounded-full text-sm font-semibold"> View Details </button> </div> </div> <div class="vehicle-card bg-white rounded-2xl shadow-professional overflow-hidden scale-in"> <div class="relative"> <img src="https://images.unsplash.com/photo-1601584115197-04ecc0da31d7?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" alt="Specialized Vehicles" class="vehicle-image w-full h-40 object-cover"> <div class="absolute bottom-4 right-4 premium-gradient text-white p-2 rounded-full map-marker"> <i class="fas fa-temperature-low text-lg"></i> </div> </div> <div class="p-4"> <h3 class="text-lg font-poppins font-bold text-gray-900 mb-2">Specialized</h3> <p class="text-sm text-gray-600 mb-3">Temperature controlled & hazmat</p> <div class="flex justify-between items-center mb-3"> <span class="text-xs text-gray-500">Fleet Size:</span> <span class="font-bold text-blue-600">50 Units</span> </div> <div class="flex justify-between items-center mb-3"> <span class="text-xs text-gray-500">Status:</span> <span class="text-xs text-green-600 font-semibold">✅ Available</span> </div> <button class="w-full btn-outline-primary px-4 py-2 rounded-full text-sm font-semibold"> View Details </button> </div> </div> </div> </div> </section> <!-- Tracking Section */ <section id="tracking" class="py-20 primary-gradient text-white"> <div class="container mx-auto px-6"> <div class="text-center mb-16 fade-in-up"> <h2 class="text-5xl font-poppins font-bold mb-6">?️ Advanced Tracking System</h2> <p class="text-xl leading-relaxed text-gray-100 max-w-3xl mx-auto"> Real-time GPS tracking, route optimization, and delivery notifications with our state-of-the-art fleet management system. </p> </div> <div class="grid md:grid-cols-2 gap-12 items-center"> <div class="slide-in-left"> <div class="glass-dark p-8 rounded-3xl"> <h3 class="text-2xl font-poppins font-bold mb-6">Track Your Shipment</h3> <div class="form-professional space-y-4"> <div> <label class="block text-gray-300 font-semibold mb-2">Tracking Number</label> <input type="text" placeholder="Enter tracking number..." class="w-full px-4 py-3 bg-white text-gray-900 rounded-lg"> </div> <div> <label class="block text-gray-300 font-semibold mb-2">Phone Number (Optional)</label> <input type="tel" placeholder="Enter phone number..." class="w-full px-4 py-3 bg-white text-gray-900 rounded-lg"> </div> <button class="w-full btn-primary text-white py-3 rounded-lg font-bold"> ? Track Shipment </button> </div> <div class="mt-8 p-6 bg-white bg-opacity-10 rounded-lg"> <h4 class="font-bold mb-4">Sample Tracking Result:</h4> <div class="booking-timeline"> <div class="timeline-item completed"> <div class="font-semibold">Package Picked Up</div> <div class="text-sm text-gray-300">Mumbai - 10:30 AM</div> </div> <div class="timeline-item completed"> <div class="font-semibold">In Transit</div> <div class="text-sm text-gray-300">Pune Hub - 2:15 PM</div> </div> <div class="timeline-item active"> <div class="font-semibold">Out for Delivery</div> <div class="text-sm text-gray-300">Bangalore - 8:45 AM</div> </div> <div class="timeline-item"> <div class="font-semibold">Delivered</div> <div class="text-sm text-gray-300">Expected: 12:00 PM</div> </div> </div> </div> </div> </div> <div class="slide-in-right"> <div class="route-viz fleet-tracker"> <div class="route-line" style="top: 50px; left: 20px; width: 80%;"></div> <div class="route-line" style="top: 100px; left: 40px; width: 60%;"></div> <div class="route-line" style="top: 150px; left: 10px; width: 90%;"></div> <div class="absolute top-4 left-4 bg-white text-gray-900 p-3 rounded-lg shadow-lg"> <div class="text-sm font-bold">Origin: Mumbai</div> <div class="text-xs text-gray-600">Pickup completed</div> </div> <div class="absolute top-20 right-4 bg-white text-gray-900 p-3 rounded-lg shadow-lg"> <div class="text-sm font-bold">Hub: Pune</div> <div class="text-xs text-gray-600">Processing</div> </div> <div class="absolute bottom-4 left-1/2 transform -translate-x-1/2 bg-white text-gray-900 p-3 rounded-lg shadow-lg"> <div class="text-sm font-bold">Destination: Bangalore</div> <div class="text-xs text-gray-600">Out for delivery</div> </div> </div> <div class="mt-8 grid grid-cols-2 gap-4"> <div class="glass-dark p-4 rounded-lg text-center"> <div class="text-2xl font-bold text-green-400">98.5%</div> <div class="text-sm">On-Time Delivery</div> </div> <div class="glass-dark p-4 rounded-lg text-center"> <div class="text-2xl font-bold text-blue-400">2.5hrs</div> <div class="text-sm">Avg. Response Time</div> </div> <div class="glass-dark p-4 rounded-lg text-center"> <div class="text-2xl font-bold text-yellow-400">500+</div> <div class="text-sm">Active Vehicles</div> </div> <div class="glass-dark p-4 rounded-lg text-center"> <div class="text-2xl font-bold text-purple-400">24/7</div> <div class="text-sm">Support Available</div> </div> </div> </div> </div> </div> </section> <!-- About Section --> <section id="about" class="py-20 bg-white"> <div class="container mx-auto px-6"> <div class="grid lg:grid-cols-2 gap-16 items-center"> <div class="slide-in-left"> <h2 class="text-5xl font-poppins font-bold text-gray-900 mb-8">About TransLogistics Pro</h2> <p class="text-xl text-gray-600 mb-8 leading-relaxed"> With over 15 years of experience in the transportation industry, we have established ourselves as a trusted partner for businesses and individuals across India. </p> <div class="space-y-6"> <div class="flex items-start"> <div class="w-12 h-12 primary-gradient rounded-full flex items-center justify-center mr-4 flex-shrink-0"> <i class="fas fa-award text-white text-xl"></i> </div> <div> <h4 class="text-xl font-bold text-gray-900 mb-2">ISO 9001:2015 Certified</h4> <p class="text-gray-600">Quality management system certification ensuring consistent service delivery and customer satisfaction.</p> </div> </div> <div class="flex items-start"> <div class="w-12 h-12 secondary-gradient rounded-full flex items-center justify-center mr-4 flex-shrink-0"> <i class="fas fa-shield-alt text-white text-xl"></i> </div> <div> <h4 class="text-xl font-bold text-gray-900 mb-2">Comprehensive Insurance</h4> <p class="text-gray-600">Full cargo insurance coverage and liability protection for complete peace of mind during transportation.</p> </div> </div> <div class="flex items-start"> <div class="w-12 h-12 premium-gradient rounded-full flex items-center justify-center mr-4 flex-shrink-0"> <i class="fas fa-users text-white text-xl"></i> </div> <div> <h4 class="text-xl font-bold text-gray-900 mb-2">Professional Team</h4> <p class="text-gray-600">Certified drivers, logistics experts, and customer service professionals dedicated to excellence.</p> </div> </div> </div> </div> <div class="slide-in-right"> <div class="grid grid-cols-2 gap-6"> <div class="bg-gray-50 p-6 rounded-2xl text-center"> <div class="stats-counter mb-2">15+</div> <div class="text-gray-600 font-medium">Years Experience</div> </div> <div class="bg-gray-50 p-6 rounded-2xl text-center"> <div class="stats-counter mb-2">500+</div> <div class="text-gray-600 font-medium">Fleet Vehicles</div> </div> <div class="bg-gray-50 p-6 rounded-2xl text-center"> <div class="stats-counter mb-2">10K+</div> <div class="text-gray-600 font-medium">Happy Clients</div> </div> <div class="bg-gray-50 p-6 rounded-2xl text-center"> <div class="stats-counter mb-2">50K+</div> <div class="text-gray-600 font-medium">Monthly Deliveries</div> </div> </div> <div class="mt-8 p-6 primary-gradient text-white rounded-2xl"> <h4 class="text-xl font-bold mb-4">Our Mission</h4> <p class="leading-relaxed"> To provide reliable, efficient, and cost-effective transportation solutions that exceed customer expectations while maintaining the highest standards of safety and environmental responsibility. </p> </div> </div> </div> </div> </section> <!-- Contact Section --> <section id="contact" class="py-20 bg-gray-50"> <div class="container mx-auto px-6"> <div class="grid lg:grid-cols-2 gap-16"> <div class="slide-in-left"> <h2 class="text-5xl font-poppins font-bold text-gray-900 mb-8">Get Professional Quote</h2> <p class="text-xl text-gray-600 mb-10 leading-relaxed"> Contact our logistics experts for customized transportation solutions tailored to your specific requirements. </p> <div class="space-y-6"> <div class="flex items-center"> <div class="w-12 h-12 primary-gradient rounded-full flex items-center justify-center mr-4"> <i class="fas fa-map-marker-alt text-xl text-white"></i> </div> <div> <h4 class="text-lg font-bold text-gray-900 mb-1">Head Office</h4> <p class="text-gray-600">Transport Hub, Logistics Park<br>Mumbai, Maharashtra 400001</p> </div> </div> <div class="flex items-center"> <div class="w-12 h-12 secondary-gradient rounded-full flex items-center justify-center mr-4"> <i class="fas fa-phone text-xl text-white"></i> </div> <div> <h4 class="text-lg font-bold text-gray-900 mb-1">24/7 Support</h4> <p class="text-gray-600">+91 98765 43210<br>1800-TRANSPORT (Toll Free)</p> </div> </div> <div class="flex items-center"> <div class="w-12 h-12 premium-gradient rounded-full flex items-center justify-center mr-4"> <i class="fas fa-envelope text-xl text-white"></i> </div> <div> <h4 class="text-lg font-bold text-gray-900 mb-1">Email</h4> <p class="text-gray-600">info@translogisticspro.com<br>support@translogisticspro.com</p> </div> </div> </div> </div> <div class="glass-professional p-8 rounded-3xl shadow-professional slide-in-right"> <form class="form-professional space-y-6"> <div class="grid md:grid-cols-2 gap-6"> <div> <label class="block text-gray-700 font-semibold mb-2">Company Name</label> <input type="text" class="w-full px-4 py-3 rounded-lg"> </div> <div> <label class="block text-gray-700 font-semibold mb-2">Contact Person</label> <input type="text" class="w-full px-4 py-3 rounded-lg"> </div> </div> <div class="grid md:grid-cols-2 gap-6"> <div> <label class="block text-gray-700 font-semibold mb-2">Phone Number</label> <input type="tel" class="w-full px-4 py-3 rounded-lg"> </div> <div> <label class="block text-gray-700 font-semibold mb-2">Email Address</label> <input type="email" class="w-full px-4 py-3 rounded-lg"> </div> </div> <div class="grid md:grid-cols-2 gap-6"> <div> <label class="block text-gray-700 font-semibold mb-2">Service Type</label> <select class="w-full px-4 py-3 rounded-lg"> <option>Freight Transport</option> <option>Express Delivery</option> <option>Logistics Solutions</option> <option>Corporate Transport</option> <option>Specialized Transport</option> <option>International Shipping</option> </select> </div> <div> <label class="block text-gray-700 font-semibold mb-2">Cargo Weight</label> <select class="w-full px-4 py-3 rounded-lg"> <option>Under 1 ton</option> <option>1-5 tons</option> <option>5-15 tons</option> <option>15-25 tons</option> <option>Over 25 tons</option> </select> </div> </div> <div class="grid md:grid-cols-2 gap-6"> <div> <label class="block text-gray-700 font-semibold mb-2">Pickup Location</label> <input type="text" placeholder="City, State" class="w-full px-4 py-3 rounded-lg"> </div> <div> <label class="block text-gray-700 font-semibold mb-2">Delivery Location</label> <input type="text" placeholder="City, State" class="w-full px-4 py-3 rounded-lg"> </div> </div> <div> <label class="block text-gray-700 font-semibold mb-2">Additional Requirements</label> <textarea rows="4" placeholder="Special handling, insurance requirements, delivery timeline..." class="w-full px-4 py-3 rounded-lg"></textarea> </div> <button type="submit" class="w-full btn-primary text-white py-4 rounded-lg font-bold text-lg"> Get Professional Quote </button> </form> </div> </div> </div> </section> <!-- Footer --> <footer class="primary-gradient text-white py-16"> <div class="container mx-auto px-6"> <div class="grid md:grid-cols-4 gap-12 mb-12"> <div> <div class="text-3xl font-poppins font-bold mb-6 tracking-wider"> ? TRANSLOGISTICS PRO </div> <p class="text-gray-100 mb-6 leading-relaxed"> Professional transportation solutions with advanced technology, reliable service, and comprehensive logistics support. </p> <div class="flex space-x-4"> <i class="fab fa-linkedin text-2xl hover:text-yellow-300 cursor-pointer transition-colors duration-300"></i> <i class="fab fa-twitter text-2xl hover:text-yellow-300 cursor-pointer transition-colors duration-300"></i> <i class="fab fa-facebook text-2xl hover:text-yellow-300 cursor-pointer transition-colors duration-300"></i> <i class="fab fa-instagram text-2xl hover:text-yellow-300 cursor-pointer transition-colors duration-300"></i> </div> </div> <div> <h3 class="text-xl font-bold mb-6">Services</h3> <ul class="space-y-3 text-gray-100"> <li><a href="#" class="hover:text-yellow-300 transition-colors duration-300">Freight Transport</a></li> <li><a href="#" class="hover:text-yellow-300 transition-colors duration-300">Express Delivery</a></li> <li><a href="#" class="hover:text-yellow-300 transition-colors duration-300">Logistics Solutions</a></li> <li><a href="#" class="hover:text-yellow-300 transition-colors duration-300">Corporate Transport</a></li> <li><a href="#" class="hover:text-yellow-300 transition-colors duration-300">International Shipping</a></li> </ul> </div> <div> <h3 class="text-xl font-bold mb-6">Company</h3> <ul class="space-y-3 text-gray-100"> <li><a href="#" class="hover:text-yellow-300 transition-colors duration-300">About Us</a></li> <li><a href="#" class="hover:text-yellow-300 transition-colors duration-300">Our Fleet</a></li> <li><a href="#" class="hover:text-yellow-300 transition-colors duration-300">Careers</a></li> <li><a href="#" class="hover:text-yellow-300 transition-colors duration-300">Safety Standards</a></li> <li><a href="#" class="hover:text-yellow-300 transition-colors duration-300">Sustainability</a></li> </ul> </div> <div> <h3 class="text-xl font-bold mb-6">Support</h3> <ul class="space-y-3 text-gray-100"> <li><i class="fas fa-phone mr-3"></i>+91 98765 43210</li> <li><i class="fas fa-envelope mr-3"></i>support@translogisticspro.com</li> <li><i class="fas fa-clock mr-3"></i>24/7 Customer Support</li> <li><i class="fas fa-shield-alt mr-3"></i>Insurance Claims</li> <li><i class="fas fa-headset mr-3"></i>Technical Support</li> </ul> </div> </div> <div class="border-t border-blue-300 pt-8 text-center text-gray-100"> <p>© 2024 TransLogistics Pro. All rights reserved. | Privacy Policy | Terms of Service | ISO 9001:2015 Certified</p> </div> </div> </footer> <!-- Quote Modal --> <div id="quoteModal" class="modal"> <div class="modal-content"> <div class="flex justify-between items-center mb-6"> <h3 class="text-2xl font-poppins font-bold">Get Professional Quote</h3> <button class="text-gray-500 hover:text-gray-700 text-2xl">×</button> </div> <form class="form-professional space-y-6"> <div class="grid md:grid-cols-2 gap-6"> <div> <label class="block text-gray-700 font-semibold mb-2">Service Type</label> <select class="w-full px-4 py-3 rounded-lg"> <option>Freight Transport</option> <option>Express Delivery</option> <option>Logistics Solutions</option> <option>Corporate Transport</option> <option>Specialized Transport</option> <option>International Shipping</option> </select> </div> <div> <label class="block text-gray-700 font-semibold mb-2">Cargo Type</label> <select class="w-full px-4 py-3 rounded-lg"> <option>General Cargo</option> <option>Hazardous Materials</option> <option>Temperature Controlled</option> <option>Oversized Cargo</option> <option>Fragile Items</option> <option>Liquid Transport</option> </select> </div> </div> <div class="grid md:grid-cols-3 gap-4"> <div> <label class="block text-gray-700 font-semibold mb-2">Weight (tons)</label> <input type="number" placeholder="0.5" class="w-full px-4 py-3 rounded-lg"> </div> <div> <label class="block text-gray-700 font-semibold mb-2">Length (m)</label> <input type="number" placeholder="2.5" class="w-full px-4 py-3 rounded-lg"> </div> <div> <label class="block text-gray-700 font-semibold mb-2">Distance (km)</label> <input type="number" placeholder="500" class="w-full px-4 py-3 rounded-lg"> </div> </div> <div class="grid md:grid-cols-2 gap-6"> <div> <label class="block text-gray-700 font-semibold mb-2">Pickup Date</label> <input type="date" class="w-full px-4 py-3 rounded-lg"> </div> <div> <label class="block text-gray-700 font-semibold mb-2">Delivery Date</label> <input type="date" class="w-full px-4 py-3 rounded-lg"> </div> </div> <div class="bg-gray-50 p-6 rounded-lg"> <h4 class="font-bold text-gray-900 mb-4">Estimated Quote:</h4> <div class="space-y-2 text-sm"> <div class="flex justify-between"> <span>Base Rate:</span> <span class="font-semibold">₹15,000</span> </div> <div class="flex justify-between"> <span>Distance Charges:</span> <span class="font-semibold">₹8,500</span> </div> <div class="flex justify-between"> <span>Fuel Surcharge:</span> <span class="font-semibold">₹2,200</span> </div> <div class="flex justify-between"> <span>Insurance:</span> <span class="font-semibold">₹1,800</span> </div> <div class="flex justify-between border-t pt-2 font-bold text-lg"> <span>Total Estimate:</span> <span class="text-blue-600">₹27,500</span> </div> </div> </div> <button type="submit" class="w-full btn-primary text-white py-3 rounded-lg font-bold"> Confirm Booking </button> </form> </div> </div> <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'96da726dc20c937a',t:'MTc1NDk0Mzc2Ny4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body> </html>
CSS
.font-inter { font-family: 'Inter', sans-serif; } .font-poppins { font-family: 'Poppins', sans-serif; } /* Professional Transport Animations */ .fade-in-up { opacity: 0; transform: translateY(60px); transition: all 1.2s cubic-bezier(0.4, 0, 0.2, 1); } .fade-in-up.visible { opacity: 1; transform: translateY(0); } .slide-in-left { opacity: 0; transform: translateX(-100px); transition: all 1s cubic-bezier(0.4, 0, 0.2, 1); } .slide-in-left.visible { opacity: 1; transform: translateX(0); } .slide-in-right { opacity: 0; transform: translateX(100px); transition: all 1s cubic-bezier(0.4, 0, 0.2, 1); } .slide-in-right.visible { opacity: 1; transform: translateX(0); } .scale-in { opacity: 0; transform: scale(0.8); transition: all 1.5s cubic-bezier(0.4, 0, 0.2, 1); } .scale-in.visible { opacity: 1; transform: scale(1); } .stagger-fade { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); } .stagger-fade.visible { opacity: 1; transform: translateY(0); } /* Professional Transport Gradients */ .primary-gradient { background: linear-gradient(135deg, #1e40af 0%, #3b82f6 25%, #60a5fa 50%, #3b82f6 75%, #1e40af 100%); } .secondary-gradient { background: linear-gradient(135deg, #059669 0%, #10b981 25%, #34d399 50%, #10b981 75%, #059669 100%); } .accent-gradient { background: linear-gradient(135deg, #dc2626 0%, #ef4444 25%, #f87171 50%, #ef4444 75%, #dc2626 100%); } .premium-gradient { background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 25%, #a78bfa 50%, #8b5cf6 75%, #7c3aed 100%); } /* Vehicle Card Hover Effects */ .vehicle-card { transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; } .vehicle-card::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); transition: left 0.8s; z-index: 1; } .vehicle-card:hover::before { left: 100%; } .vehicle-card:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 25px 50px rgba(30, 64, 175, 0.3); } .vehicle-card:hover .vehicle-image { transform: scale(1.05); } .vehicle-image { transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); } /* Glass Morphism Professional Style */ .glass-professional { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(30px); border: 1px solid rgba(255, 255, 255, 0.3); box-shadow: 0 8px 32px rgba(30, 64, 175, 0.1); } .glass-dark { background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(25px); border: 1px solid rgba(255, 255, 255, 0.1); } /* Professional Shadows */ .shadow-professional { box-shadow: 0 25px 50px rgba(30, 64, 175, 0.25); } .shadow-success { box-shadow: 0 20px 40px rgba(16, 185, 129, 0.3); } /* Button Animations */ .btn-primary { background: linear-gradient(135deg, #1e40af, #3b82f6); position: relative; overflow: hidden; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .btn-primary::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); transition: left 0.6s; } .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 15px 30px rgba(30, 64, 175, 0.4); } .btn-primary:hover::before { left: 100%; } .btn-outline-primary { border: 2px solid #1e40af; color: #1e40af; background: transparent; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; } .btn-outline-primary::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(135deg, #1e40af, #3b82f6); transition: left 0.4s; z-index: -1; } .btn-outline-primary:hover { color: white; transform: translateY(-3px); } .btn-outline-primary:hover::before { left: 0; } /* Transport Animations */ @keyframes vehicleMove { 0%, 100% { transform: translateX(0px); } 50% { transform: translateX(20px); } } @keyframes routeTrace { 0% { stroke-dashoffset: 1000; } 100% { stroke-dashoffset: 0; } } @keyframes loadingIndicator { 0%, 100% { transform: scale(1); opacity: 0.7; } 50% { transform: scale(1.2); opacity: 1; } } @keyframes trackingPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } .vehicle-animation { animation: vehicleMove 4s ease-in-out infinite; } .route-animation { animation: routeTrace 3s ease-in-out infinite; } .loading-animation { animation: loadingIndicator 2s ease-in-out infinite; } .tracking-pulse { animation: trackingPulse 2s ease-in-out infinite; } /* Service Card Hover */ .service-card { transition: all 0.4s ease; position: relative; overflow: hidden; } .service-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%); opacity: 0; transition: opacity 0.4s; } .service-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,0.15); } .service-card:hover::after { opacity: 1; } /* Fleet Status Indicators */ .status-active { background: #10b981; animation: statusPulse 2s infinite; } .status-maintenance { background: #f59e0b; } .status-inactive { background: #6b7280; } @keyframes statusPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } } /* Route Map Animation */ .map-marker { animation: markerBounce 2s ease-in-out infinite; } @keyframes markerBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } /* Progress Bar Animation */ .progress-bar { transition: width 2s ease-in-out; } /* Custom Scrollbar */ ::-webkit-scrollbar { width: 12px; } ::-webkit-scrollbar-track { background: #f8f8f8; } ::-webkit-scrollbar-thumb { background: linear-gradient(135deg, #1e40af, #3b82f6); border-radius: 6px; } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(135deg, #3b82f6, #1e40af); } /* Modal */ .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); backdrop-filter: blur(10px); } .modal.show { display: flex; align-items: center; justify-content: center; } .modal-content { background: white; padding: 2rem; border-radius: 20px; max-width: 700px; width: 90%; max-height: 80vh; overflow-y: auto; transform: scale(0.7); opacity: 0; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .modal.show .modal-content { transform: scale(1); opacity: 1; } /* Fixed Navigation */ .navbar-fixed { position: fixed; top: 0; left: 0; right: 0; z-index: 100; transition: all 0.3s ease; } .navbar-scrolled { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(20px); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); } /* Content padding to account for fixed navbar */ .content-with-navbar { padding-top: 80px; } /* Professional Stats Counter */ .stats-counter { font-size: 3rem; font-weight: 800; color: #1e40af; transition: all 0.3s ease; } /* Fleet Tracking Animation */ .fleet-tracker { position: relative; overflow: hidden; } .fleet-tracker::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, #3b82f6, transparent); animation: trackingLine 3s ease-in-out infinite; } @keyframes trackingLine { 0% { left: -100%; } 100% { left: 100%; } } /* Professional Form Styling */ .form-professional input, .form-professional select, .form-professional textarea { border: 2px solid #e5e7eb; transition: all 0.3s ease; } .form-professional input:focus, .form-professional select:focus, .form-professional textarea:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); outline: none; } /* Booking Timeline */ .booking-timeline { position: relative; } .booking-timeline::before { content: ''; position: absolute; left: 20px; top: 0; bottom: 0; width: 2px; background: #e5e7eb; } .timeline-item { position: relative; padding-left: 60px; margin-bottom: 30px; } .timeline-item::before { content: ''; position: absolute; left: 12px; top: 8px; width: 16px; height: 16px; border-radius: 50%; background: #3b82f6; } .timeline-item.completed::before { background: #10b981; } .timeline-item.active::before { background: #f59e0b; animation: trackingPulse 2s infinite; } /* Vehicle Specifications */ .spec-item { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #f3f4f6; } .spec-item:last-child { border-bottom: none; } /* Professional Badge */ .professional-badge { background: linear-gradient(135deg, #1e40af, #3b82f6); color: white; padding: 4px 12px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } /* Route Optimization Visualization */ .route-viz { position: relative; height: 200px; background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); border-radius: 12px; overflow: hidden; } .route-line { position: absolute; height: 3px; background: linear-gradient(90deg, #3b82f6, #10b981); border-radius: 2px; animation: routeProgress 4s ease-in-out infinite; } @keyframes routeProgress { 0% { width: 0%; } 50% { width: 100%; } 100% { width: 0%; } } /* Responsive Enhancements */ @media (max-width: 768px) { .stats-counter { font-size: 2rem; } .timeline-item { padding-left: 40px; } }
JavaScript
// Fixed Navigation Scroll Effect window.addEventListener('scroll', function() { const navbar = document.querySelector('.navbar-fixed'); if (window.scrollY > 100) { navbar.classList.add('navbar-scrolled'); } else { navbar.classList.remove('navbar-scrolled'); } }); // Advanced Intersection Observer const observerOptions = { threshold: 0.1, rootMargin: '0px 0px -50px 0px' }; const observer = new IntersectionObserver(function(entries) { entries.forEach((entry, index) => { if (entry.isIntersecting) { if (entry.target.classList.contains('stagger-fade')) { setTimeout(() => { entry.target.classList.add('visible'); }, index * 200); } else { entry.target.classList.add('visible'); } } }); }, observerOptions); // Observe all animated elements document.querySelectorAll('.fade-in-up, .slide-in-left, .slide-in-right, .scale-in, .stagger-fade').forEach(el => { observer.observe(el); }); // Smooth scrolling document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); const target = document.querySelector(this.getAttribute('href')); if (target) { const offsetTop = target.offsetTop - 80; window.scrollTo({ top: offsetTop, behavior: 'smooth' }); } }); }); // Quote Modal functionality const quoteModal = document.getElementById('quoteModal'); // Open quote modal document.querySelectorAll('button').forEach(button => { if (button.textContent.includes('Get Quote') || button.textContent.includes('Book Transport')) { button.addEventListener('click', function(e) { e.preventDefault(); quoteModal.classList.add('show'); }); } }); // Close modal quoteModal.addEventListener('click', function(e) { if (e.target === quoteModal || e.target.textContent === '×') { quoteModal.classList.remove('show'); } }); // Tracking functionality document.querySelector('input[placeholder*="Track"]').addEventListener('keypress', function(e) { if (e.key === 'Enter') { const trackingNumber = this.value.trim(); if (trackingNumber) { alert(`? Tracking Results for: ${trackingNumber}\n\n? Current Status: Out for Delivery\n? Expected Delivery: Today, 3:00 PM\n? Vehicle: TLP-MH-2024\n?✈️ Driver: Rajesh Kumar\n? Contact: +91 98765 43210\n\n? Journey Details:\n✅ Picked up: Mumbai (Yesterday 10:30 AM)\n✅ Transit Hub: Pune (Yesterday 2:15 PM)\n✅ Departed: Pune (Today 6:00 AM)\n? Current: Bangalore (Out for delivery)\n\n? SMS notifications sent to registered mobile number.\n? Email updates available in your account.\n\n? Need help? Call 24/7 support: 1800-TRANSPORT`); this.value = ''; } } }); // Service card functionality document.querySelectorAll('.service-card button').forEach(button => { button.addEventListener('click', function(e) { e.preventDefault(); const serviceName = this.closest('.service-card').querySelector('h3').textContent; const serviceType = this.closest('.service-card').querySelector('.absolute div').textContent; alert(`? ${serviceName} - ${serviceType}\n\n? Service Details:\n• Professional drivers & vehicles\n• Real-time GPS tracking\n• Comprehensive insurance coverage\n• 24/7 customer support\n• Competitive pricing\n• Flexible scheduling\n\n? Key Features:\n• ISO 9001:2015 certified operations\n• Advanced fleet management system\n• Route optimization technology\n• Proof of delivery documentation\n• Emergency response team\n\n? Perfect for:\n• Business logistics\n• Industrial transportation\n• Time-sensitive deliveries\n• Specialized cargo handling\n\n? Get instant quote: +91 98765 43210\n? Email: info@translogisticspro.com\n\nReady to book this service?`); }); }); // Vehicle details functionality document.querySelectorAll('.vehicle-card button').forEach(button => { button.addEventListener('click', function(e) { e.preventDefault(); const vehicleType = this.closest('.vehicle-card').querySelector('h3').textContent; const capacity = this.closest('.vehicle-card').querySelector('.text-sm').textContent; const fleetSize = this.closest('.vehicle-card').querySelector('.font-bold.text-blue-600').textContent; alert(`? ${vehicleType}\n\nCapacity: ${capacity}\nFleet Size: ${fleetSize}\n\n? Technical Specifications:\n• Engine: BS-VI compliant\n• GPS tracking: Real-time\n• Safety features: ABS, EBD, Airbags\n• Maintenance: Scheduled & preventive\n• Insurance: Comprehensive coverage\n• Drivers: Licensed & trained\n\n? Performance Metrics:\n• Fuel efficiency: Optimized\n• Uptime: 98.5%\n• Safety record: Excellent\n• Customer rating: 4.8/5\n\n?️ Safety & Compliance:\n• Regular safety inspections\n• Driver background verification\n• Route monitoring\n• Emergency response protocols\n\n? Available for immediate booking!\nContact: +91 98765 43210`); }); }); // Contact form submission document.querySelector('#contact form').addEventListener('submit', function(e) { e.preventDefault(); const submitBtn = this.querySelector('button[type="submit"]'); const originalText = submitBtn.textContent; submitBtn.innerHTML = 'Processing Quote Request...'; submitBtn.disabled = true; setTimeout(() => { alert('? Quote Request Submitted Successfully!\n\n? What happens next:\n• Our logistics expert will review your requirements\n• Detailed quote will be prepared within 2 hours\n• You\'ll receive quote via email & SMS\n• Follow-up call to discuss customization\n\n? Immediate assistance available:\n• Call: +91 98765 43210\n• WhatsApp: +91 98765 43210\n• Email: quotes@translogisticspro.com\n\n? Service Benefits:\n• Competitive pricing\n• Flexible scheduling\n• Professional handling\n• Real-time tracking\n• Insurance coverage\n\n? Quote Reference: TLP-' + Math.floor(Math.random() * 100000) + '\n\nThank you for choosing TransLogistics Pro!'); this.reset(); submitBtn.textContent = originalText; submitBtn.disabled = false; }, 2500); }); // Quote modal form submission document.querySelector('#quoteModal form').addEventListener('submit', function(e) { e.preventDefault(); const serviceType = this.querySelector('select').value; const cargoType = this.querySelectorAll('select')[1].value; const weight = this.querySelector('input[placeholder="0.5"]').value; const distance = this.querySelector('input[placeholder="500"]').value; quoteModal.classList.remove('show'); setTimeout(() => { alert(`? Booking Confirmed!\n\nService: ${serviceType}\nCargo: ${cargoType}\nWeight: ${weight} tons\nDistance: ${distance} km\nEstimated Cost: ₹27,500\n\n? Booking Details:\n• Booking ID: TLP-BK-${Math.floor(Math.random() * 10000)}\n• Confirmation sent to your email\n• SMS alerts activated\n• Driver assignment in progress\n\n? Track your shipment:\n• Real-time GPS tracking\n• SMS/Email notifications\n• 24/7 customer support\n• Proof of delivery\n\n? Vehicle Assignment:\n• Vehicle type: Based on cargo requirements\n• Driver: Professional & verified\n• Insurance: Full coverage included\n• ETA: As per scheduled dates\n\n? Support: +91 98765 43210\n? Email: support@translogisticspro.com\n\nWelcome to TransLogistics Pro!`); }, 500); }); // Stats counter animation function animateStats() { const statsCounters = document.querySelectorAll('.stats-counter'); statsCounters.forEach(counter => { const target = parseInt(counter.textContent.replace(/[^\d]/g, '')); const increment = target / 100; let current = 0; const timer = setInterval(() => { current += increment; if (current >= target) { counter.textContent = counter.textContent.replace(/\d+/, target); clearInterval(timer); } else { counter.textContent = counter.textContent.replace(/\d+/, Math.floor(current)); } }, 20); }); } // Trigger stats animation when visible const statsObserver = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { animateStats(); statsObserver.unobserve(entry.target); } }); }); document.querySelectorAll('.stats-counter').forEach(el => { statsObserver.observe(el); }); // Social media interactions document.querySelectorAll('.fab').forEach(icon => { icon.addEventListener('click', function() { const platform = this.classList[1].replace('fa-', ''); alert(`? Follow TransLogistics Pro on ${platform.charAt(0).toUpperCase() + platform.slice(1)}!\n\n? Stay connected for:\n• Industry news & updates\n• Service announcements\n• Transportation tips\n• Customer success stories\n• Special offers & discounts\n• Behind-the-scenes content\n• Safety guidelines\n\n? Join our professional network of 50,000+ followers!\n\nShare your transport experiences with #TransLogisticsPro`); }); }); // Add loading animation on page load window.addEventListener('load', function() { document.body.classList.add('loaded'); }); // Professional tracking simulation document.querySelector('#tracking button').addEventListener('click', function(e) { e.preventDefault(); const trackingInput = document.querySelector('#tracking input[placeholder*="tracking"]'); const phoneInput = document.querySelector('#tracking input[type="tel"]'); if (trackingInput.value.trim()) { alert(`?️ Advanced Tracking Results\n\nTracking ID: ${trackingInput.value}\nPhone: ${phoneInput.value || 'Not provided'}\n\n? Real-time Location: Bangalore Outer Ring Road\n? Vehicle: TLP-KA-2024 (GPS Active)\n?✈️ Driver: Suresh Patel (+91 98765 43211)\n⏰ ETA: 45 minutes\n\n? Delivery Progress:\n✅ Package collected (Mumbai)\n✅ Sorted at hub (Pune)\n✅ In transit (Highway)\n? Out for delivery (Current)\n⏳ Delivery pending\n\n? Live Updates:\n• GPS coordinates updated every 30 seconds\n• SMS alerts for major milestones\n• Email notifications with photos\n• Customer signature required\n\n? Direct contact with driver available\n? Emergency support: 1800-TRANSPORT`); } else { alert('Please enter a tracking number to track your shipment.'); } });
Output Preview
Desktop
Mobile
Fullscreen