LandingPage.tsx

1import React, { useState } from 'react'; 2import { FaRoute, FaFileUpload, FaCheckCircle, FaRocket, FaTruck, FaShieldAlt, FaClock, FaChartLine } from 'react-icons/fa'; 3import AuthModal from './AuthModal'; 4 5const LandingPage = () => { 6 const [showAuthModal, setShowAuthModal] = useState(false); 7 const [authMode, setAuthMode] = useState<'login' | 'register'>('login'); 8 9 const openAuth = (mode: 'login' | 'register') => { 10 setAuthMode(mode); 11 setShowAuthModal(true); 12 }; 13 14 return ( 15 <div className="min-h-screen bg-gray-50"> 16 {/* Navigation */} 17 <nav className="bg-white shadow-sm fixed w-full top-0 z-50"> 18 <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> 19 <div className="flex justify-between items-center h-16"> 20 <div className="flex items-center"> 21 <FaTruck className="h-8 w-8 text-primary-600" /> 22 <span className="ml-2 text-xl font-bold text-gray-900">Oversize Route Builder</span> 23 </div> 24 <div className="flex items-center space-x-4"> 25 <a href="#features" className="text-gray-700 hover:text-primary-600 px-3 py-2">Features</a> 26 <a href="#pricing" className="text-gray-700 hover:text-primary-600 px-3 py-2">Pricing</a> 27 <button 28 onClick={() => openAuth('login')} 29 className="text-gray-700 hover:text-primary-600 px-3 py-2" 30 > 31 Sign In 32 </button> 33 <button 34 onClick={() => openAuth('register')} 35 className="bg-primary-600 text-white px-4 py-2 rounded-lg hover:bg-primary-700 transition" 36 > 37 Get Started 38 </button> 39 </div> 40 </div> 41 </div> 42 </nav> 43 44 {/* Hero Section */} 45 <div className="pt-24 pb-16 bg-gradient-to-br from-primary-600 to-primary-800 text-white"> 46 <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> 47 <div className="grid md:grid-cols-2 gap-12 items-center"> 48 <div> 49 <h1 className="text-5xl font-bold mb-6 leading-tight"> 50 Automated Route Building for Oversized Loads 51 </h1> 52 <p className="text-xl mb-8 text-primary-100"> 53 Upload your permit documents and instantly generate state-compliant routes. 54 Save hours of manual work and ensure perfect compliance with every trip. 55 </p> 56 <div className="flex space-x-4"> 57 <button 58 onClick={() => openAuth('register')} 59 className="bg-white text-primary-600 px-8 py-4 rounded-lg font-semibold text-lg hover:bg-gray-100 transition shadow-lg" 60 > 61 Start Free Trial 62 </button> 63 <button 64 onClick={() => document.getElementById('demo')?.scrollIntoView({ behavior: 'smooth' })} 65 className="border-2 border-white text-white px-8 py-4 rounded-lg font-semibold text-lg hover:bg-white hover:text-primary-600 transition" 66 > 67 See How It Works 68 </button> 69 </div> 70 <p className="mt-4 text-sm text-primary-200"> 71 ✓ No credit card required ✓ Cancel anytime ✓ Full support 72 </p> 73 </div> 74 <div className="hidden md:block"> 75 <img 76 src="https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?w=600&h=400&fit=crop" 77 alt="Oversize truck on highway" 78 className="rounded-lg shadow-2xl" 79 /> 80 </div> 81 </div> 82 </div> 83 </div> 84 85 {/* Trust Banner */} 86 <div className="bg-white py-8 border-b"> 87 <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> 88 <div className="flex flex-wrap justify-center items-center space-x-8 text-gray-500"> 89 <div className="flex items-center space-x-2"> 90 <FaCheckCircle className="text-green-500" /> 91 <span>Oklahoma DOT Compatible</span> 92 </div> 93 <div className="flex items-center space-x-2"> 94 <FaCheckCircle className="text-green-500" /> 95 <span>Texas DOT Compatible</span> 96 </div> 97 <div className="flex items-center space-x-2"> 98 <FaCheckCircle className="text-green-500" /> 99 <span>Multi-State Support</span> 100 </div> 101 </div> 102 </div> 103 </div> 104 105 {/* How It Works */} 106 <div id="demo" className="py-20 bg-white"> 107 <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> 108 <div className="text-center mb-16"> 109 <h2 className="text-4xl font-bold text-gray-900 mb-4">How It Works</h2> 110 <p className="text-xl text-gray-600 max-w-3xl mx-auto"> 111 Three simple steps to automated, compliant routing 112 </p> 113 </div> 114 115 <div className="grid md:grid-cols-3 gap-8"> 116 <div className="text-center p-8 rounded-xl bg-gray-50 hover:shadow-lg transition"> 117 <div className="bg-primary-600 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6"> 118 <FaFileUpload className="text-white text-2xl" /> 119 </div> 120 <h3 className="text-2xl font-bold mb-4 text-gray-900">1. Upload Permit</h3> 121 <p className="text-gray-600"> 122 Simply upload your state-issued oversize/overweight permit PDF. 123 We support Oklahoma, Texas, and more states. 124 </p> 125 </div> 126 127 <div className="text-center p-8 rounded-xl bg-gray-50 hover:shadow-lg transition"> 128 <div className="bg-primary-600 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6"> 129 <FaRocket className="text-white text-2xl" /> 130 </div> 131 <h3 className="text-2xl font-bold mb-4 text-gray-900">2. Auto-Extract Data</h3> 132 <p className="text-gray-600"> 133 Our AI instantly extracts route information, load specs, restrictions, 134 and all compliance requirements from your permit. 135 </p> 136 </div> 137 138 <div className="text-center p-8 rounded-xl bg-gray-50 hover:shadow-lg transition"> 139 <div className="bg-primary-600 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6"> 140 <FaRoute className="text-white text-2xl" /> 141 </div> 142 <h3 className="text-2xl font-bold mb-4 text-gray-900">3. Get Your Route</h3> 143 <p className="text-gray-600"> 144 View your complete route with turn-by-turn directions, distance, 145 time estimates, and all restrictions clearly marked. 146 </p> 147 </div> 148 </div> 149 </div> 150 </div> 151 152 {/* Features Section */} 153 <div id="features" className="py-20 bg-gray-50"> 154 <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> 155 <div className="text-center mb-16"> 156 <h2 className="text-4xl font-bold text-gray-900 mb-4">Powerful Features</h2> 157 <p className="text-xl text-gray-600 max-w-3xl mx-auto"> 158 Everything you need to manage oversized load routing 159 </p> 160 </div> 161 162 <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8"> 163 <div className="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition"> 164 <FaClock className="text-primary-600 text-3xl mb-4" /> 165 <h3 className="text-lg font-bold mb-2">Save Time</h3> 166 <p className="text-gray-600 text-sm"> 167 Reduce route planning from hours to minutes with automated extraction 168 </p> 169 </div> 170 171 <div className="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition"> 172 <FaShieldAlt className="text-primary-600 text-3xl mb-4" /> 173 <h3 className="text-lg font-bold mb-2">Stay Compliant</h3> 174 <p className="text-gray-600 text-sm"> 175 Never miss a restriction with automatic compliance checking 176 </p> 177 </div> 178 179 <div className="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition"> 180 <FaChartLine className="text-primary-600 text-3xl mb-4" /> 181 <h3 className="text-lg font-bold mb-2">Track Everything</h3> 182 <p className="text-gray-600 text-sm"> 183 Organize all your permits and routes in one secure dashboard 184 </p> 185 </div> 186 187 <div className="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition"> 188 <FaTruck className="text-primary-600 text-3xl mb-4" /> 189 <h3 className="text-lg font-bold mb-2">Multi-Vehicle</h3> 190 <p className="text-gray-600 text-sm"> 191 Manage multiple trucks and trailers with vehicle profiles 192 </p> 193 </div> 194 </div> 195 </div> 196 </div> 197 198 {/* Pricing Section */} 199 <div id="pricing" className="py-20 bg-white"> 200 <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> 201 <div className="text-center mb-16"> 202 <h2 className="text-4xl font-bold text-gray-900 mb-4">Simple, Transparent Pricing</h2> 203 <p className="text-xl text-gray-600 max-w-3xl mx-auto"> 204 Choose the plan that fits your business 205 </p> 206 </div> 207 208 <div className="grid md:grid-cols-3 gap-8"> 209 {/* Basic Plan */} 210 <div className="bg-gray-50 rounded-xl p-8 border-2 border-gray-200"> 211 <h3 className="text-2xl font-bold mb-4">Basic</h3> 212 <div className="mb-6"> 213 <span className="text-4xl font-bold">$29</span> 214 <span className="text-gray-600">/month</span> 215 </div> 216 <ul className="space-y-3 mb-8"> 217 <li className="flex items-start"> 218 <FaCheckCircle className="text-green-500 mt-1 mr-2 flex-shrink-0" /> 219 <span>Up to 10 permits/month</span> 220 </li> 221 <li className="flex items-start"> 222 <FaCheckCircle className="text-green-500 mt-1 mr-2 flex-shrink-0" /> 223 <span>Auto route extraction</span> 224 </li> 225 <li className="flex items-start"> 226 <FaCheckCircle className="text-green-500 mt-1 mr-2 flex-shrink-0" /> 227 <span>Basic compliance</span> 228 </li> 229 <li className="flex items-start"> 230 <FaCheckCircle className="text-green-500 mt-1 mr-2 flex-shrink-0" /> 231 <span>Email support</span> 232 </li> 233 </ul> 234 <button 235 onClick={() => openAuth('register')} 236 className="w-full bg-gray-200 text-gray-900 py-3 rounded-lg font-semibold hover:bg-gray-300 transition" 237 > 238 Start Free Trial 239 </button> 240 </div> 241 242 {/* Pro Plan */} 243 <div className="bg-primary-600 rounded-xl p-8 border-2 border-primary-700 transform scale-105 shadow-xl"> 244 <div className="bg-yellow-400 text-yellow-900 text-xs font-bold px-3 py-1 rounded-full inline-block mb-4"> 245 MOST POPULAR 246 </div> 247 <h3 className="text-2xl font-bold mb-4 text-white">Professional</h3> 248 <div className="mb-6"> 249 <span className="text-4xl font-bold text-white">$79</span> 250 <span className="text-primary-200">/month</span> 251 </div> 252 <ul className="space-y-3 mb-8 text-white"> 253 <li className="flex items-start"> 254 <FaCheckCircle className="text-green-300 mt-1 mr-2 flex-shrink-0" /> 255 <span>Unlimited permits</span> 256 </li> 257 <li className="flex items-start"> 258 <FaCheckCircle className="text-green-300 mt-1 mr-2 flex-shrink-0" /> 259 <span>Advanced route optimization</span> 260 </li> 261 <li className="flex items-start"> 262 <FaCheckCircle className="text-green-300 mt-1 mr-2 flex-shrink-0" /> 263 <span>Multi-state compliance</span> 264 </li> 265 <li className="flex items-start"> 266 <FaCheckCircle className="text-green-300 mt-1 mr-2 flex-shrink-0" /> 267 <span>Real-time notifications</span> 268 </li> 269 <li className="flex items-start"> 270 <FaCheckCircle className="text-green-300 mt-1 mr-2 flex-shrink-0" /> 271 <span>Priority support</span> 272 </li> 273 <li className="flex items-start"> 274 <FaCheckCircle className="text-green-300 mt-1 mr-2 flex-shrink-0" /> 275 <span>GPS export</span> 276 </li> 277 </ul> 278 <button 279 onClick={() => openAuth('register')} 280 className="w-full bg-white text-primary-600 py-3 rounded-lg font-semibold hover:bg-gray-100 transition" 281 > 282 Start Free Trial 283 </button> 284 </div> 285 286 {/* Enterprise Plan */} 287 <div className="bg-gray-50 rounded-xl p-8 border-2 border-gray-200"> 288 <h3 className="text-2xl font-bold mb-4">Enterprise</h3> 289 <div className="mb-6"> 290 <span className="text-4xl font-bold">$199</span> 291 <span className="text-gray-600">/month</span> 292 </div> 293 <ul className="space-y-3 mb-8"> 294 <li className="flex items-start"> 295 <FaCheckCircle className="text-green-500 mt-1 mr-2 flex-shrink-0" /> 296 <span>Everything in Pro</span> 297 </li> 298 <li className="flex items-start"> 299 <FaCheckCircle className="text-green-500 mt-1 mr-2 flex-shrink-0" /> 300 <span>Multiple user accounts</span> 301 </li> 302 <li className="flex items-start"> 303 <FaCheckCircle className="text-green-500 mt-1 mr-2 flex-shrink-0" /> 304 <span>API access</span> 305 </li> 306 <li className="flex items-start"> 307 <FaCheckCircle className="text-green-500 mt-1 mr-2 flex-shrink-0" /> 308 <span>Custom integrations</span> 309 </li> 310 <li className="flex items-start"> 311 <FaCheckCircle className="text-green-500 mt-1 mr-2 flex-shrink-0" /> 312 <span>Dedicated account manager</span> 313 </li> 314 <li className="flex items-start"> 315 <FaCheckCircle className="text-green-500 mt-1 mr-2 flex-shrink-0" /> 316 <span>SLA guarantee</span> 317 </li> 318 </ul> 319 <button 320 onClick={() => openAuth('register')} 321 className="w-full bg-gray-200 text-gray-900 py-3 rounded-lg font-semibold hover:bg-gray-300 transition" 322 > 323 Start Free Trial 324 </button> 325 </div> 326 </div> 327 </div> 328 </div> 329 330 {/* CTA Section */} 331 <div className="py-20 bg-gradient-to-br from-primary-600 to-primary-800 text-white"> 332 <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> 333 <h2 className="text-4xl font-bold mb-6">Ready to Streamline Your Routing?</h2> 334 <p className="text-xl mb-8 text-primary-100"> 335 Join hundreds of carriers already using automated route building 336 </p> 337 <button 338 onClick={() => openAuth('register')} 339 className="bg-white text-primary-600 px-12 py-4 rounded-lg font-semibold text-lg hover:bg-gray-100 transition shadow-lg" 340 > 341 Start Your Free Trial Today 342 </button> 343 <p className="mt-4 text-sm text-primary-200"> 344 No credit card required • 14-day free trial • Cancel anytime 345 </p> 346 </div> 347 </div> 348 349 {/* Footer */} 350 <footer className="bg-gray-900 text-white py-12"> 351 <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> 352 <div className="grid md:grid-cols-4 gap-8"> 353 <div> 354 <div className="flex items-center mb-4"> 355 <FaTruck className="h-8 w-8 text-primary-400" /> 356 <span className="ml-2 text-lg font-bold">Oversize Route Builder</span> 357 </div> 358 <p className="text-gray-400 text-sm"> 359 Automated routing solutions for the oversize transport industry. 360 </p> 361 </div> 362 <div> 363 <h4 className="font-bold mb-4">Product</h4> 364 <ul className="space-y-2 text-gray-400 text-sm"> 365 <li><a href="#features" className="hover:text-white">Features</a></li> 366 <li><a href="#pricing" className="hover:text-white">Pricing</a></li> 367 <li><a href="#" className="hover:text-white">Documentation</a></li> 368 </ul> 369 </div> 370 <div> 371 <h4 className="font-bold mb-4">Support</h4> 372 <ul className="space-y-2 text-gray-400 text-sm"> 373 <li><a href="#" className="hover:text-white">Help Center</a></li> 374 <li><a href="#" className="hover:text-white">Contact Us</a></li> 375 <li><a href="#" className="hover:text-white">Status</a></li> 376 </ul> 377 </div> 378 <div> 379 <h4 className="font-bold mb-4">Company</h4> 380 <ul className="space-y-2 text-gray-400 text-sm"> 381 <li><a href="#" className="hover:text-white">About</a></li> 382 <li><a href="#" className="hover:text-white">Privacy</a></li> 383 <li><a href="#" className="hover:text-white">Terms</a></li> 384 </ul> 385 </div> 386 </div> 387 <div className="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400 text-sm"> 388 <p>&copy; 2025 Oversize Route Builder. All rights reserved.</p> 389 </div> 390 </div> 391 </footer> 392 393 {/* Auth Modal */} 394 {showAuthModal && ( 395 <AuthModal 396 mode={authMode} 397 onClose={() => setShowAuthModal(false)} 398 onSwitchMode={(mode) => setAuthMode(mode)} 399 /> 400 )} 401 </div> 402 ); 403}; 404 405export default LandingPage; 406