File size: 11,371 Bytes
a913bac | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FleetFlow Navigator | Optimize Your Fleet Routes</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="components/navbar.js"></script>
<script src="components/footer.js"></script>
<script src="components/feature-card.js"></script>
</head>
<body class="bg-gray-50">
<custom-navbar></custom-navbar>
<main>
<!-- Hero Section -->
<section class="relative bg-gradient-to-r from-blue-600 to-indigo-800 text-white py-20 px-4 sm:px-6 lg:px-8">
<div class="max-w-7xl mx-auto">
<div class="lg:grid lg:grid-cols-2 lg:gap-8 items-center">
<div class="mb-12 lg:mb-0">
<h1 class="text-4xl md:text-5xl font-bold mb-6">Smart Route Planning for Your Fleet</h1>
<p class="text-xl mb-8 opacity-90">Optimize routes, reduce costs, and improve efficiency with our advanced fleet management solution.</p>
<div class="flex flex-col sm:flex-row gap-4">
<a href="/demo" class="bg-white text-blue-600 hover:bg-blue-50 font-semibold py-3 px-6 rounded-lg transition duration-300 text-center">
Request Demo
</a>
<a href="/features" class="bg-transparent border-2 border-white hover:bg-white hover:text-blue-600 font-semibold py-3 px-6 rounded-lg transition duration-300 text-center">
Learn More
</a>
</div>
</div>
<div class="relative">
<div class="bg-white/20 backdrop-blur-sm rounded-xl p-4">
<div class="bg-white rounded-lg shadow-xl overflow-hidden">
<div class="p-4 bg-gray-100 flex items-center gap-2">
<div class="w-3 h-3 rounded-full bg-red-500"></div>
<div class="w-3 h-3 rounded-full bg-yellow-500"></div>
<div class="w-3 h-3 rounded-full bg-green-500"></div>
</div>
<div class="p-4">
<div class="h-64 bg-gray-200 rounded-md flex items-center justify-center">
<i data-feather="map" class="w-16 h-16 text-gray-400"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Features Section -->
<section class="py-20 px-4 sm:px-6 lg:px-8 bg-white">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold text-gray-900 mb-4">Powerful Features for Fleet Management</h2>
<p class="text-xl text-gray-600 max-w-3xl mx-auto">Our platform provides everything you need to optimize your fleet operations</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<custom-feature-card
icon="map-pin"
title="Optimized Routing"
description="Generate the most efficient routes based on vehicle capacity, traffic, and delivery windows."
></custom-feature-card>
<custom-feature-card
icon="bar-chart-2"
title="Real-time Analytics"
description="Monitor fleet performance with live dashboards and detailed reports."
></custom-feature-card>
<custom-feature-card
icon="users"
title="Driver Management"
description="Track driver performance, hours, and compliance with regulations."
></custom-feature-card>
<custom-feature-card
icon="clock"
title="ETA Predictions"
description="Accurate arrival time estimates using historical and real-time data."
></custom-feature-card>
<custom-feature-card
icon="alert-triangle"
title="Alerts & Notifications"
description="Get notified about delays, traffic, or vehicle issues immediately."
></custom-feature-card>
<custom-feature-card
icon="dollar-sign"
title="Cost Reduction"
description="Reduce fuel costs and vehicle wear with optimized routes."
></custom-feature-card>
</div>
</div>
</section>
<!-- Demo Section -->
<section class="py-20 px-4 sm:px-6 lg:px-8 bg-gray-100">
<div class="max-w-7xl mx-auto">
<div class="lg:grid lg:grid-cols-2 lg:gap-8 items-center">
<div class="mb-12 lg:mb-0">
<h2 class="text-3xl font-bold text-gray-900 mb-6">See It In Action</h2>
<p class="text-xl text-gray-600 mb-8">Schedule a personalized demo to see how FleetFlow Navigator can transform your fleet operations.</p>
<form class="space-y-4">
<div>
<input type="text" placeholder="Your Name" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<div>
<input type="email" placeholder="Email Address" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<div>
<input type="text" placeholder="Company Name" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-6 rounded-lg transition duration-300">
Request Demo
</button>
</form>
</div>
<div class="relative">
<div class="bg-white rounded-xl shadow-xl overflow-hidden p-6">
<div class="aspect-w-16 aspect-h-9">
<div class="bg-gray-200 rounded-lg flex items-center justify-center h-64">
<i data-feather="play" class="w-16 h-16 text-blue-600"></i>
</div>
</div>
<div class="mt-6">
<h3 class="text-xl font-semibold text-gray-900 mb-2">Watch Product Overview</h3>
<p class="text-gray-600">See how our platform helps businesses like yours optimize their fleet operations.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Testimonials -->
<section class="py-20 px-4 sm:px-6 lg:px-8 bg-white">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold text-gray-900 mb-4">Trusted by Industry Leaders</h2>
<p class="text-xl text-gray-600 max-w-3xl mx-auto">Hear what our customers have to say about FleetFlow Navigator</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-gray-50 p-8 rounded-xl">
<div class="flex items-center mb-4">
<div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center">
<i data-feather="user" class="text-blue-600"></i>
</div>
<div class="ml-4">
<h4 class="font-semibold">Michael Johnson</h4>
<p class="text-gray-600 text-sm">Logistics Manager</p>
</div>
</div>
<p class="text-gray-700">"FleetFlow Navigator reduced our route planning time by 70% and improved our delivery efficiency significantly. The analytics dashboard gives us real insights into our operations."</p>
</div>
<div class="bg-gray-50 p-8 rounded-xl">
<div class="flex items-center mb-4">
<div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center">
<i data-feather="user" class="text-blue-600"></i>
</div>
<div class="ml-4">
<h4 class="font-semibold">Sarah Williams</h4>
<p class="text-gray-600 text-sm">Operations Director</p>
</div>
</div>
<p class="text-gray-700">"The optimization algorithms are incredibly accurate. We've seen a 15% reduction in fuel costs since implementing FleetFlow Navigator across our 150-vehicle fleet."</p>
</div>
<div class="bg-gray-50 p-8 rounded-xl">
<div class="flex items-center mb-4">
<div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center">
<i data-feather="user" class="text-blue-600"></i>
</div>
<div class="ml-4">
<h4 class="font-semibold">David Chen</h4>
<p class="text-gray-600 text-sm">CTO</p>
</div>
</div>
<p class="text-gray-700">"Integration with our existing systems was seamless. The API documentation is excellent, and the support team was responsive throughout the implementation process."</p>
</div>
</div>
</div>
</section>
</main>
<custom-footer></custom-footer>
<script>
feather.replace();
</script>
<script src="script.js"></script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html> |