Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>LoadAI - Intelligent Freight Matching</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%); | |
| } | |
| .dashboard-card { | |
| transition: all 0.3s ease; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); | |
| } | |
| .dashboard-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); | |
| } | |
| .tier-badge { | |
| position: absolute; | |
| top: -12px; | |
| right: 20px; | |
| font-size: 0.75rem; | |
| font-weight: 700; | |
| padding: 0.25rem 0.75rem; | |
| border-radius: 9999px; | |
| } | |
| .animated-arrow { | |
| transition: transform 0.3s ease; | |
| } | |
| .feature-card:hover .animated-arrow { | |
| transform: translateX(5px); | |
| } | |
| .pricing-toggle:checked + .toggle-dot { | |
| transform: translateX(100%); | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans antialiased text-gray-800"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-sm sticky top-0 z-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <i class="fas fa-route text-indigo-600 text-2xl mr-2"></i> | |
| <span class="text-xl font-bold text-gray-900">Load<span class="text-indigo-600">AI</span></span> | |
| </div> | |
| <div class="hidden sm:ml-10 sm:flex sm:space-x-8"> | |
| <a href="#" class="border-indigo-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Home</a> | |
| <a href="#features" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Features</a> | |
| <a href="#pricing" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Pricing</a> | |
| <a href="#testimonials" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Testimonials</a> | |
| </div> | |
| </div> | |
| <div class="hidden sm:ml-6 sm:flex sm:items-center"> | |
| <button class="px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> | |
| Get Started | |
| </button> | |
| </div> | |
| <div class="-mr-2 flex items-center sm:hidden"> | |
| <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500" aria-controls="mobile-menu" aria-expanded="false"> | |
| <span class="sr-only">Open main menu</span> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <div class="gradient-bg"> | |
| <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8"> | |
| <div class="text-center"> | |
| <h1 class="text-4xl tracking-tight font-extrabold text-white sm:text-5xl md:text-6xl"> | |
| <span class="block">Intelligent Freight Matching</span> | |
| <span class="block text-indigo-200">Powered by AI</span> | |
| </h1> | |
| <p class="mt-3 max-w-md mx-auto text-base text-indigo-100 sm:text-lg md:mt-5 md:text-xl md:max-w-3xl"> | |
| Our three-tier load board guarantees coverage for shippers, exclusive early access for carriers, and premium late-stage bookings for brokers. | |
| </p> | |
| <div class="mt-8 flex justify-center"> | |
| <div class="inline-flex rounded-md shadow"> | |
| <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-gray-50"> | |
| Request Demo | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| <div class="ml-3 inline-flex"> | |
| <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-500 bg-opacity-60 hover:bg-opacity-70"> | |
| Learn More | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Stats Section --> | |
| <div class="relative bg-gray-50 pt-12 sm:pt-16"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-4xl mx-auto text-center"> | |
| <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> | |
| Trusted by the industry leaders | |
| </h2> | |
| <p class="mt-3 text-xl text-gray-500"> | |
| Our AI-powered platform delivers real results for businesses of all sizes. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="mt-10 pb-12 bg-white sm:pb-16"> | |
| <div class="relative"> | |
| <div class="absolute inset-0 h-1/2 bg-gray-50"></div> | |
| <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-4xl mx-auto"> | |
| <dl class="rounded-lg bg-white shadow-lg sm:grid sm:grid-cols-3"> | |
| <div class="flex flex-col border-b border-gray-100 p-6 text-center sm:border-0 sm:border-r"> | |
| <dt class="order-2 mt-2 text-lg leading-6 font-medium text-gray-500"> | |
| On-Time Deliveries | |
| </dt> | |
| <dd class="order-1 text-5xl font-extrabold text-indigo-600"> | |
| 98.7% | |
| </dd> | |
| </div> | |
| <div class="flex flex-col border-t border-b border-gray-100 p-6 text-center sm:border-0 sm:border-l sm:border-r"> | |
| <dt class="order-2 mt-2 text-lg leading-6 font-medium text-gray-500"> | |
| Cost Savings | |
| </dt> | |
| <dd class="order-1 text-5xl font-extrabold text-indigo-600"> | |
| 22% | |
| </dd> | |
| </div> | |
| <div class="flex flex-col border-t border-gray-100 p-6 text-center sm:border-0 sm:border-l"> | |
| <dt class="order-2 mt-2 text-lg leading-6 font-medium text-gray-500"> | |
| Capacity Utilized | |
| </dt> | |
| <dd class="order-1 text-5xl font-extrabold text-indigo-600"> | |
| 94% | |
| </dd> | |
| </div> | |
| </dl> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Three-Tier Explanation --> | |
| <div id="features" class="py-12 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center"> | |
| <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Features</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> | |
| Our Three-Tier Advantage | |
| </p> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> | |
| Different needs, different solutions - all powered by our AI matching engine. | |
| </p> | |
| </div> | |
| <div class="mt-10"> | |
| <div class="grid grid-cols-1 gap-8 sm:grid-cols-3"> | |
| <!-- Shipper Tier --> | |
| <div class="dashboard-card relative pt-10 px-6 pb-8 bg-white rounded-xl overflow-hidden"> | |
| <div class="absolute top-0 left-0 right-0 h-2 bg-indigo-500"></div> | |
| <span class="tier-badge bg-indigo-100 text-indigo-800">Shippers</span> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-indigo-500 rounded-md p-3"> | |
| <i class="fas fa-box-open text-white text-xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Guaranteed Coverage</h3> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <p class="text-base text-gray-500"> | |
| Our AI ensures your loads are matched with the right carriers at the right price, with guaranteed coverage for every shipment. | |
| </p> | |
| <ul class="mt-4 space-y-3"> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 text-indigo-500"> | |
| <i class="fas fa-check-circle"></i> | |
| </div> | |
| <p class="ml-2 text-sm text-gray-700">Predictive capacity matching</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 text-indigo-500"> | |
| <i class="fas fa-check-circle"></i> | |
| </div> | |
| <p class="ml-2 text-sm text-gray-700">Dynamic pricing optimization</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 text-indigo-500"> | |
| <i class="fas fa-check-circle"></i> | |
| </div> | |
| <p class="ml-2 text-sm text-gray-700">On-time delivery guarantees</p> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Carrier Tier --> | |
| <div class="dashboard-card relative pt-10 px-6 pb-8 bg-white rounded-xl overflow-hidden"> | |
| <div class="absolute top-0 left-0 right-0 h-2 bg-purple-500"></div> | |
| <span class="tier-badge bg-purple-100 text-purple-800">Carriers</span> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-purple-500 rounded-md p-3"> | |
| <i class="fas fa-truck text-white text-xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Exclusive Early Access</h3> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <p class="text-base text-gray-500"> | |
| Get first pick of the most profitable loads before they hit the open market, with our carrier-exclusive early access program. | |
| </p> | |
| <ul class="mt-4 space-y-3"> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 text-purple-500"> | |
| <i class="fas fa-check-circle"></i> | |
| </div> | |
| <p class="ml-2 text-sm text-gray-700">48-hour exclusive window</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 text-purple-500"> | |
| <i class="fas fa-check-circle"></i> | |
| </div> | |
| <p class="ml-2 text-sm text-gray-700">Higher profit margins</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 text-purple-500"> | |
| <i class="fas fa-check-circle"></i> | |
| </div> | |
| <p class="ml-2 text-sm text-gray-700">Preference-based matching</p> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Broker Tier --> | |
| <div class="dashboard-card relative pt-10 px-6 pb-8 bg-white rounded-xl overflow-hidden"> | |
| <div class="absolute top-0 left-0 right-0 h-2 bg-pink-500"></div> | |
| <span class="tier-badge bg-pink-100 text-pink-800">Brokers</span> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-pink-500 rounded-md p-3"> | |
| <i class="fas fa-handshake text-white text-xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Premium Late-Stage</h3> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <p class="text-base text-gray-500"> | |
| Access our premium late-stage bookings to fill last-minute capacity gaps and secure additional revenue streams. | |
| </p> | |
| <ul class="mt-4 space-y-3"> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 text-pink-500"> | |
| <i class="fas fa-check-circle"></i> | |
| </div> | |
| <p class="ml-2 text-sm text-gray-700">Urgent load matching</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 text-pink-500"> | |
| <i class="fas fa-check-circle"></i> | |
| </div> | |
| <p class="ml-2 text-sm text-gray-700">Commission optimization</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 text-pink-500"> | |
| <i class="fas fa-check-circle"></i> | |
| </div> | |
| <p class="ml-2 text-sm text-gray-700">Backhaul opportunities</p> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- AI Features Section --> | |
| <div class="py-12 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center"> | |
| <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Technology</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> | |
| AI-Powered Logistics Intelligence | |
| </p> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> | |
| Our proprietary algorithms deliver unmatched efficiency across the freight lifecycle. | |
| </p> | |
| </div> | |
| <div class="mt-10"> | |
| <div class="grid grid-cols-1 gap-y-10 gap-x-8 lg:grid-cols-2"> | |
| <!-- Predictive Matching --> | |
| <div class="feature-card group relative bg-white p-6 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-500 rounded-lg"> | |
| <div> | |
| <span class="rounded-lg inline-flex p-3 bg-indigo-50 text-indigo-700 ring-4 ring-white"> | |
| <i class="fas fa-brain text-2xl"></i> | |
| </span> | |
| </div> | |
| <div class="mt-8"> | |
| <h3 class="text-lg font-medium"> | |
| <a href="#" class="focus:outline-none"> | |
| <span class="absolute inset-0" aria-hidden="true"></span> | |
| Predictive Matching | |
| </a> | |
| </h3> | |
| <p class="mt-2 text-sm text-gray-500"> | |
| Our machine learning models analyze historical patterns, current market conditions, and real-time data to predict the optimal carrier for each load. | |
| </p> | |
| </div> | |
| <span class="pointer-events-none absolute top-6 right-6 text-gray-300 group-hover:text-indigo-400" aria-hidden="true"> | |
| <i class="fas fa-arrow-right animated-arrow"></i> | |
| </span> | |
| </div> | |
| <!-- Dynamic Pricing --> | |
| <div class="feature-card group relative bg-white p-6 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-500 rounded-lg"> | |
| <div> | |
| <span class="rounded-lg inline-flex p-3 bg-purple-50 text-purple-700 ring-4 ring-white"> | |
| <i class="fas fa-chart-line text-2xl"></i> | |
| </span> | |
| </div> | |
| <div class="mt-8"> | |
| <h3 class="text-lg font-medium"> | |
| <a href="#" class="focus:outline-none"> | |
| <span class="absolute inset-0" aria-hidden="true"></span> | |
| Dynamic Pricing Engine | |
| </a> | |
| </h3> | |
| <p class="mt-2 text-sm text-gray-500"> | |
| Real-time rate optimization that considers fuel costs, lane density, equipment availability, and market demand to maximize value for all parties. | |
| </p> | |
| </div> | |
| <span class="pointer-events-none absolute top-6 right-6 text-gray-300 group-hover:text-purple-400" aria-hidden="true"> | |
| <i class="fas fa-arrow-right animated-arrow"></i> | |
| </span> | |
| </div> | |
| <!-- Capacity Forecasting --> | |
| <div class="feature-card group relative bg-white p-6 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-500 rounded-lg"> | |
| <div> | |
| <span class="rounded-lg inline-flex p-3 bg-blue-50 text-blue-700 ring-4 ring-white"> | |
| <i class="fas fa-project-diagram text-2xl"></i> | |
| </span> | |
| </div> | |
| <div class="mt-8"> | |
| <h3 class="text-lg font-medium"> | |
| <a href="#" class="focus:outline-none"> | |
| <span class="absolute inset-0" aria-hidden="true"></span> | |
| Capacity Forecasting | |
| </a> | |
| </h3> | |
| <p class="mt-2 text-sm text-gray-500"> | |
| Advanced analytics predict capacity shortages before they happen, allowing proactive measures to ensure coverage for critical shipments. | |
| </p> | |
| </div> | |
| <span class="pointer-events-none absolute top-6 right-6 text-gray-300 group-hover:text-blue-400" aria-hidden="true"> | |
| <i class="fas fa-arrow-right animated-arrow"></i> | |
| </span> | |
| </div> | |
| <!-- Route Optimization --> | |
| <div class="feature-card group relative bg-white p-6 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-500 rounded-lg"> | |
| <div> | |
| <span class="rounded-lg inline-flex p-3 bg-green-50 text-green-700 ring-4 ring-white"> | |
| <i class="fas fa-map-marked-alt text-2xl"></i> | |
| </span> | |
| </div> | |
| <div class="mt-8"> | |
| <h3 class="text-lg font-medium"> | |
| <a href="#" class="focus:outline-none"> | |
| <span class="absolute inset-0" aria-hidden="true"></span> | |
| Smart Route Optimization | |
| </a> | |
| </h3> | |
| <p class="mt-2 text-sm text-gray-500"> | |
| AI-driven route planning that considers traffic, weather, rest periods, and delivery windows to maximize efficiency and minimize costs. | |
| </p> | |
| </div> | |
| <span class="pointer-events-none absolute top-6 right-6 text-gray-300 group-hover:text-green-400" aria-hidden="true"> | |
| <i class="fas fa-arrow-right animated-arrow"></i> | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Pricing Section --> | |
| <div id="pricing" class="bg-gray-50 py-12"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="sm:flex sm:flex-col sm:align-center"> | |
| <h2 class="text-3xl font-extrabold text-gray-900 text-center">Flexible Pricing Plans</h2> | |
| <p class="mt-5 text-xl text-gray-500 text-center max-w-2xl mx-auto"> | |
| Choose the plan that fits your business needs. All plans include our AI matching technology. | |
| </p> | |
| <div class="relative mt-6 bg-white rounded-lg p-0.5 flex self-center"> | |
| <button type="button" class="relative bg-white border-gray-200 rounded-md shadow-sm py-2 px-4 inline-flex items-center justify-center text-sm font-medium text-gray-900 whitespace-nowrap hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:z-10 sm:w-auto sm:px-8"> | |
| Monthly billing | |
| </button> | |
| <button type="button" class="ml-0.5 relative border border-transparent rounded-md py-2 px-4 inline-flex items-center justify-center text-sm font-medium text-gray-700 whitespace-nowrap hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:z-10 sm:w-auto sm:px-8"> | |
| Annual billing | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mt-12 space-y-4 sm:mt-16 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-6 lg:max-w-4xl lg:mx-auto xl:max-w-none xl:mx-0"> | |
| <!-- Shipper Plan --> | |
| <div class="border border-gray-200 rounded-lg shadow-sm divide-y divide-gray-200"> | |
| <div class="p-6"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900">Shipper</h3> | |
| <p class="mt-4 text-sm text-gray-500"> | |
| For businesses that need guaranteed coverage and predictable costs. | |
| </p> | |
| <p class="mt-8"> | |
| <span class="text-4xl font-extrabold text-gray-900">$499</span> | |
| <span class="text-base font-medium text-gray-500">/month</span> | |
| </p> | |
| <button class="mt-8 block w-full py-3 px-6 border border-transparent rounded-md text-center font-medium bg-indigo-600 text-white hover:bg-indigo-700"> | |
| Get started | |
| </button> | |
| </div> | |
| <div class="pt-6 pb-8 px-6"> | |
| <h4 class="text-xs font-medium text-gray-900 tracking-wide uppercase">What's included</h4> | |
| <ul class="mt-6 space-y-4"> | |
| <li class="flex"> | |
| <i class="fas fa-check text-green-500 mt-0.5 mr-2"></i> | |
| <span class="text-base text-gray-500">Guaranteed load coverage</span> | |
| </li> | |
| <li class="flex"> | |
| <i class="fas fa-check text-green-500 mt-0.5 mr-2"></i> | |
| <span class="text-base text-gray-500">Dynamic pricing optimization</span> | |
| </li> | |
| <li class="flex"> | |
| <i class="fas fa-check text-green-500 mt-0.5 mr-2"></i> | |
| <span class="text-base text-gray-500">On-time delivery tracking</span> | |
| </li> | |
| <li class="flex"> | |
| <i class="fas fa-check text-green-500 mt-0.5 mr-2"></i> | |
| <span class="text-base text-gray-500">Dedicated account manager</span> | |
| </li> | |
| <li class="flex"> | |
| <i class="fas fa-check text-green-500 mt-0.5 mr-2"></i> | |
| <span class="text-base text-gray-500">API integration</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Carrier Plan --> | |
| <div class="border border-gray-200 rounded-lg shadow-sm divide-y divide-gray-200"> | |
| <div class="p-6"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900">Carrier</h3> | |
| <p class="mt-4 text-sm text-gray-500"> | |
| For trucking companies that want first access to premium loads. | |
| </p> | |
| <p class="mt-8"> | |
| <span class="text-4xl font-extrabold text-gray-900">$299</span> | |
| <span class="text-base font-medium text-gray-500">/month</span> | |
| </p> | |
| <button class="mt-8 block w-full py-3 px-6 border border-transparent rounded-md text-center font-medium bg-purple-600 text-white hover:bg-purple-700"> | |
| Get started | |
| </button> | |
| </div> | |
| <div class="pt-6 pb-8 px-6"> | |
| <h4 class="text-xs font-medium text-gray-900 tracking-wide uppercase">What's included</h4> | |
| <ul class="mt-6 space-y-4"> | |
| <li class="flex"> | |
| <i class="fas fa-check text-green-500 mt-0.5 mr-2"></i> | |
| <span class="text-base text-gray-500">48-hour exclusive load access</span> | |
| </li> | |
| <li class="flex"> | |
| <i class="fas fa-check text-green-500 mt-0.5 mr-2"></i> | |
| <span class="text-base text-gray-500">Higher margin opportunities</span> | |
| </li> | |
| <li class="flex"> | |
| <i class="fas fa-check text-green-500 mt-0.5 mr-2"></i> | |
| <span class="text-base text-gray-500">Route optimization</span> | |
| </li> | |
| <li class="flex"> | |
| <i class="fas fa-check text-green-500 mt-0.5 mr-2"></i> | |
| <span class="text-base text-gray-500">Backhaul matching</span> | |
| </li> | |
| <li class="flex"> | |
| <i class="fas fa-check text-green-500 mt-0.5 mr-2"></i> | |
| <span class="text-base text-gray-500">Mobile dispatch app</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Broker Plan --> | |
| <div class="border border-gray-200 rounded-lg shadow-sm divide-y divide-gray-200"> | |
| <div class="p-6"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900">Broker</h3> | |
| <p class="mt-4 text-sm text-gray-500"> | |
| For logistics brokers who need to fill last-minute capacity. | |
| </p> | |
| <p class="mt-8"> | |
| <span class="text-4xl font-extrabold text-gray-900">$399</span> | |
| <span class="text-base font-medium text-gray-500">/month</span> | |
| </p> | |
| <button class="mt-8 block w-full py-3 px-6 border border-transparent rounded-md text-center font-medium bg-pink-600 text-white hover:bg-pink-700"> | |
| Get started | |
| </button> | |
| </div> | |
| <div class="pt-6 pb-8 px-6"> | |
| <h4 class="text-xs font-medium text-gray-900 tracking-wide uppercase">What's included</h4> | |
| <ul class="mt-6 space-y-4"> | |
| <li class="flex"> | |
| <i class="fas fa-check text-green-500 mt-0.5 mr-2"></i> | |
| <span class="text-base text-gray-500">Premium late-stage bookings</span> | |
| </li> | |
| <li class="flex"> | |
| <i class="fas fa-check text-green-500 mt-0.5 mr-2"></i> | |
| <span class="text-base text-gray-500">Commission optimization</span> | |
| </li> | |
| <li class="flex"> | |
| <i class="fas fa-check text-green-500 mt-0.5 mr-2"></i> | |
| <span class="text-base text-gray-500">Urgent load matching</span> | |
| </li> | |
| <li class="flex"> | |
| <i class="fas fa-check text-green-500 mt-0.5 mr-2"></i> | |
| <span class="text-base text-gray-500">Carrier vetting tools</span> | |
| </li> | |
| <li class="flex"> | |
| <i class="fas fa-check text-green-500 mt-0.5 mr-2"></i> | |
| <span class="text-base text-gray-500">White-label reporting</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testimonials --> | |
| <div id="testimonials" class="py-12 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center"> | |
| <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Testimonials</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> | |
| What our customers say | |
| </p> | |
| </div> | |
| <div class="mt-10"> | |
| <div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3"> | |
| <!-- Testimonial 1 --> | |
| <div class="bg-gray-50 p-6 rounded-lg"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-12 w-12 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-sm font-bold text-gray-900">Sarah Johnson</h4> | |
| <p class="text-sm text-gray-500">Logistics Manager, Acme Corp</p> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <p class="text-gray-600 italic"> | |
| "LoadAI's guaranteed coverage has transformed our shipping operations. We've reduced our freight costs by 18% while improving on-time delivery to 99.2%." | |
| </p> | |
| <div class="mt-4 flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="bg-gray-50 p-6 rounded-lg"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-12 w-12 rounded-full" src="https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-sm font-bold text-gray-900">Michael Rodriguez</h4> | |
| <p class="text-sm text-gray-500">Owner, R&R Trucking</p> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <p class="text-gray-600 italic"> | |
| "The exclusive early access to loads has increased our revenue per mile by 22%. We're running fuller trucks with better-paying freight than ever before." | |
| </p> | |
| <div class="mt-4 flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="bg-gray-50 p-6 rounded-lg"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-12 w-12 rounded-full" src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-sm font-bold text-gray-900">David Chen</h4> | |
| <p class="text-sm text-gray-500">CEO, Summit Logistics</p> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <p class="text-gray-600 italic"> | |
| "As a broker, the premium late-stage bookings have been a game-changer. We're able to fill capacity gaps instantly while maintaining healthy margins." | |
| </p> | |
| <div class="mt-4 flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- CTA Section --> | |
| <div class="bg-indigo-700"> | |
| <div class="max-w-2xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8"> | |
| <h2 class="text-3xl font-extrabold text-white sm:text-4xl"> | |
| <span class="block">Ready to transform your freight operations?</span> | |
| <span class="block">Start using LoadAI today.</span> | |
| </h2> | |
| <p class="mt-4 text-lg leading-6 text-indigo-200"> | |
| Join hundreds of shippers, carriers, and brokers who are already benefiting from our AI-powered platform. | |
| </p> | |
| <a href="#" class="mt-8 w-full inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-indigo-50 sm:w-auto"> | |
| Request a demo | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800"> | |
| <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Product</h3> | |
| <ul class="mt-4 space-y-4"> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Features</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Pricing</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">API</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Integrations</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Company</h3> | |
| <ul class="mt-4 space-y-4"> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">About</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Blog</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Careers</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Resources</h3> | |
| <ul class="mt-4 space-y-4"> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Documentation</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Guides</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Webinars</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Support</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Legal</h3> | |
| <ul class="mt-4 space-y-4"> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Privacy</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Terms</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Security</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="mt-8 border-t border-gray-700 pt-8 md:flex md:items-center md:justify-between"> | |
| <div class="flex space-x-6 md:order-2"> | |
| <a href="#" class="text-gray-400 hover:text-gray-300"> | |
| <span class="sr-only">Facebook</span> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-gray-300"> | |
| <span class="sr-only">Twitter</span> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-gray-300"> | |
| <span class="sr-only">LinkedIn</span> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| </div> | |
| <p class="mt-8 text-base text-gray-400 md:mt-0 md:order-1"> | |
| © 2023 LoadAI. All rights reserved. | |
| </p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Simple JavaScript for interactive elements | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Mobile menu toggle would go here | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| // Pricing toggle functionality | |
| const pricingToggle = document.querySelector('.relative button:first-child'); | |
| const annualToggle = document.querySelector('.relative button:last-child'); | |
| if (pricingToggle && annualToggle) { | |
| pricingToggle.addEventListener('click', function() { | |
| pricingToggle.classList.add('bg-white', 'border-gray-200', 'shadow-sm', 'text-gray-900'); | |
| pricingToggle.classList.remove('text-gray-700', 'border-transparent'); | |
| annualToggle.classList.remove('bg-white', 'border-gray-200', 'shadow-sm', 'text-gray-900'); | |
| annualToggle.classList.add('text-gray-700', 'border-transparent'); | |
| }); | |
| annualToggle.addEventListener('click', function() { | |
| annualToggle.classList.add('bg-white', 'border-gray-200', 'shadow-sm', 'text-gray-900'); | |
| annualToggle.classList.remove('text-gray-700', 'border-transparent'); | |
| pricingToggle.classList.remove('bg-white', 'border-gray-200', 'shadow-sm', 'text-gray-900'); | |
| pricingToggle.classList.add('text-gray-700', 'border-transparent'); | |
| }); | |
| } | |
| }); | |
| </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=sdurdiyev/loadai-homepage" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |