Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>How It Works - RateDispatch</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> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: #f8fafc; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%); | |
| } | |
| .logo-text { | |
| background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .process-step { | |
| position: relative; | |
| } | |
| .process-step:not(:last-child):after { | |
| content: ""; | |
| position: absolute; | |
| left: 50%; | |
| top: 100%; | |
| height: 80px; | |
| width: 2px; | |
| background: #e5e7eb; | |
| transform: translateX(-50%); | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .nav-link:hover { | |
| color: #3b82f6; | |
| } | |
| .btn-primary { | |
| transition: all 0.3s ease; | |
| } | |
| .btn-primary:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); | |
| } | |
| .tab-content { | |
| display: none; | |
| } | |
| .tab-content.active { | |
| display: block; | |
| animation: fadeIn 0.5s ease-in-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-sm"> | |
| <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"> | |
| <a href="index.html" class="flex items-center"> | |
| <i class="fas fa-truck-moving text-3xl mr-2 logo-text"></i> | |
| <span class="text-xl font-bold logo-text">RateDispatch</span> | |
| </a> | |
| </div> | |
| <div class="hidden sm:ml-6 sm:flex sm:space-x-8"> | |
| <a href="index.html" class="nav-link 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">Home</a> | |
| <a href="how-it-works.html" class="nav-link border-indigo-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">How It Works</a> | |
| <a href="#" class="nav-link 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="#" class="nav-link 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> | |
| </div> | |
| </div> | |
| <div class="hidden sm:ml-6 sm:flex sm:items-center"> | |
| <button class="btn-primary bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium mr-4">Sign In</button> | |
| <button class="btn-primary bg-white border border-indigo-600 text-indigo-600 hover:bg-indigo-50 px-4 py-2 rounded-md text-sm font-medium">Sign Up</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> | |
| <!-- Mobile menu, show/hide based on menu state. --> | |
| <div class="sm:hidden hidden" id="mobile-menu"> | |
| <div class="pt-2 pb-3 space-y-1"> | |
| <a href="index.html" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Home</a> | |
| <a href="how-it-works.html" class="bg-indigo-50 border-indigo-500 text-indigo-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">How It Works</a> | |
| <a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Features</a> | |
| <a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Pricing</a> | |
| <div class="pt-4 pb-3 border-t border-gray-200"> | |
| <div class="flex items-center px-4"> | |
| <button class="btn-primary bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium w-full mb-2">Sign In</button> | |
| </div> | |
| <div class="mt-3 space-y-1"> | |
| <button class="btn-primary bg-white border border-indigo-600 text-indigo-600 hover:bg-indigo-50 px-4 py-2 rounded-md text-sm font-medium w-full">Sign Up</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <div class="gradient-bg text-white"> | |
| <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 font-extrabold tracking-tight sm:text-5xl lg:text-6xl"> | |
| How RateDispatch Works | |
| </h1> | |
| <p class="mt-6 max-w-2xl mx-auto text-xl"> | |
| Our platform makes it simple to connect dispatchers with carriers and grow your logistics business. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tabs Navigation --> | |
| <div class="bg-white border-b border-gray-200"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-center"> | |
| <nav class="-mb-px flex space-x-8"> | |
| <button data-tab="dispatchers" class="tab-button border-indigo-500 text-indigo-600 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"> | |
| For Dispatchers | |
| </button> | |
| <button data-tab="carriers" class="tab-button border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"> | |
| For Carriers | |
| </button> | |
| <button data-tab="brokers" class="tab-button border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"> | |
| For Brokers | |
| </button> | |
| </nav> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Dispatchers Tab Content --> | |
| <div id="dispatchers" class="tab-content active"> | |
| <div class="bg-gray-50 py-16"> | |
| <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">For Dispatchers</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> | |
| Find Reliable Carriers Effortlessly | |
| </p> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> | |
| Connect with vetted carriers who match your specific needs and preferences. | |
| </p> | |
| </div> | |
| <div class="mt-20"> | |
| <div class="flex flex-col items-center"> | |
| <!-- Step 1 --> | |
| <div class="process-step relative pb-20 text-center max-w-md"> | |
| <div class="flex items-center justify-center h-16 w-16 rounded-full bg-indigo-600 text-white mx-auto text-xl font-bold"> | |
| 1 | |
| </div> | |
| <h3 class="mt-6 text-lg font-medium text-gray-900">Create Your Profile</h3> | |
| <p class="mt-2 text-base text-gray-600"> | |
| Set up your dispatcher profile highlighting your experience, specialties, and the types of carriers you work with best. | |
| </p> | |
| <div class="mt-6"> | |
| <i class="fas fa-user-tie text-indigo-500 text-4xl"></i> | |
| </div> | |
| </div> | |
| <!-- Step 2 --> | |
| <div class="process-step relative pb-20 text-center max-w-md"> | |
| <div class="flex items-center justify-center h-16 w-16 rounded-full bg-indigo-600 text-white mx-auto text-xl font-bold"> | |
| 2 | |
| </div> | |
| <h3 class="mt-6 text-lg font-medium text-gray-900">Define Your Needs</h3> | |
| <p class="mt-2 text-base text-gray-600"> | |
| Specify your requirements - equipment types, lanes, capacity needs, and preferred rates to find perfect matches. | |
| </p> | |
| <div class="mt-6"> | |
| <i class="fas fa-sliders-h text-indigo-500 text-4xl"></i> | |
| </div> | |
| </div> | |
| <!-- Step 3 --> | |
| <div class="process-step relative pb-20 text-center max-w-md"> | |
| <div class="flex items-center justify-center h-16 w-16 rounded-full bg-indigo-600 text-white mx-auto text-xl font-bold"> | |
| 3 | |
| </div> | |
| <h3 class="mt-6 text-lg font-medium text-gray-900">Browse & Connect</h3> | |
| <p class="mt-2 text-base text-gray-600"> | |
| Access our database of verified carriers, view ratings and performance metrics, and initiate contact. | |
| </p> | |
| <div class="mt-6"> | |
| <i class="fas fa-search text-indigo-500 text-4xl"></i> | |
| </div> | |
| </div> | |
| <!-- Step 4 --> | |
| <div class="process-step relative pb-20 text-center max-w-md"> | |
| <div class="flex items-center justify-center h-16 w-16 rounded-full bg-indigo-600 text-white mx-auto text-xl font-bold"> | |
| 4 | |
| </div> | |
| <h3 class="mt-6 text-lg font-medium text-gray-900">Manage Relationships</h3> | |
| <p class="mt-2 text-base text-gray-600"> | |
| Use our tools to track performance, communicate, and build long-term partnerships with your carriers. | |
| </p> | |
| <div class="mt-6"> | |
| <i class="fas fa-handshake text-indigo-500 text-4xl"></i> | |
| </div> | |
| </div> | |
| <!-- Step 5 --> | |
| <div class="process-step relative text-center max-w-md"> | |
| <div class="flex items-center justify-center h-16 w-16 rounded-full bg-indigo-600 text-white mx-auto text-xl font-bold"> | |
| 5 | |
| </div> | |
| <h3 class="mt-6 text-lg font-medium text-gray-900">Grow Your Business</h3> | |
| <p class="mt-2 text-base text-gray-600"> | |
| Leverage analytics and reporting to optimize your operations and expand your dispatch services. | |
| </p> | |
| <div class="mt-6"> | |
| <i class="fas fa-chart-line text-indigo-500 text-4xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Features Section --> | |
| <div class="bg-white py-16"> | |
| <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">Dispatcher Features</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> | |
| Tools Designed for Dispatch Success | |
| </p> | |
| </div> | |
| <div class="mt-20"> | |
| <div class="space-y-10 md:space-y-0 md:grid md:grid-cols-3 md:gap-x-8 md:gap-y-10"> | |
| <div class="feature-card relative bg-gray-50 p-6 rounded-lg transition-all duration-300 ease-in-out"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white"> | |
| <i class="fas fa-filter"></i> | |
| </div> | |
| <h3 class="mt-6 text-lg font-medium text-gray-900">Advanced Filtering</h3> | |
| <p class="mt-2 text-base text-gray-600"> | |
| Filter carriers by equipment type, lane preferences, safety ratings, and more to find perfect matches. | |
| </p> | |
| </div> | |
| <div class="feature-card relative bg-gray-50 p-6 rounded-lg transition-all duration-300 ease-in-out"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white"> | |
| <i class="fas fa-bell"></i> | |
| </div> | |
| <h3 class="mt-6 text-lg font-medium text-gray-900">Instant Alerts</h3> | |
| <p class="mt-2 text-base text-gray-600"> | |
| Get notified when carriers matching your criteria become available in your preferred lanes. | |
| </p> | |
| </div> | |
| <div class="feature-card relative bg-gray-50 p-6 rounded-lg transition-all duration-300 ease-in-out"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white"> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| <h3 class="mt-6 text-lg font-medium text-gray-900">Rating System</h3> | |
| <p class="mt-2 text-base text-gray-600"> | |
| Rate and review carriers based on performance to help build your preferred network. | |
| </p> | |
| </div> | |
| <div class="feature-card relative bg-gray-50 p-6 rounded-lg transition-all duration-300 ease-in-out"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white"> | |
| <i class="fas fa-comments"></i> | |
| </div> | |
| <h3 class="mt-6 text-lg font-medium text-gray-900">Integrated Messaging</h3> | |
| <p class="mt-2 text-base text-gray-600"> | |
| Communicate directly with carriers through our secure messaging platform. | |
| </p> | |
| </div> | |
| <div class="feature-card relative bg-gray-50 p-6 rounded-lg transition-all duration-300 ease-in-out"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white"> | |
| <i class="fas fa-file-contract"></i> | |
| </div> | |
| <h3 class="mt-6 text-lg font-medium text-gray-900">Contract Management</h3> | |
| <p class="mt-2 text-base text-gray-600"> | |
| Create, send, and track contracts all within the platform with e-signature capabilities. | |
| </p> | |
| </div> | |
| <div class="feature-card relative bg-gray-50 p-6 rounded-lg transition-all duration-300 ease-in-out"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white"> | |
| <i class="fas fa-chart-pie"></i> | |
| </div> | |
| <h3 class="mt-6 text-lg font-medium text-gray-900">Performance Analytics</h3> | |
| <p class="mt-2 text-base text-gray-600"> | |
| Track key metrics like on-time performance, acceptance rates, and more. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Carriers Tab Content --> | |
| <div id="carriers" class="tab-content"> | |
| <div class="bg-gray-50 py-16"> | |
| <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">For Carriers</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> | |
| Connect with Quality Dispatchers | |
| </p> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> | |
| Find dispatchers who understand your business and can help you maximize your revenue. | |
| </p> | |
| </div> | |
| <div class="mt-20"> | |
| <div class="flex flex-col items-center"> | |
| <!-- Step 1 --> | |
| <div class="process-step relative pb-20 text-center max-w-md"> | |
| <div class="flex items-center justify-center h-16 w-16 rounded-full bg-indigo-600 text-white mx-auto text-xl font-bold"> | |
| 1 | |
| </div> | |
| <h3 class="mt-6 text-lg font-medium text-gray-900">Complete Your Profile</h3> | |
| <p class="mt-2 text-base text-gray-600"> | |
| Showcase your fleet details, operating authority, insurance, and preferred lanes to attract the right dispatchers. | |
| </p> | |
| <div class="mt-6"> | |
| <i class="fas fa-truck text-indigo-500 text-4xl"></i> | |
| </div> | |
| </div> | |
| <!-- Step 2 --> | |
| <div class="process-step relative pb-20 text-center max-w-md"> | |
| <div class="flex items-center justify-center h-16 w-16 rounded-full bg-indigo-600 text-white mx-auto text-xl font-bold"> | |
| 2 | |
| </div> | |
| <h3 class="mt-6 text-lg font-medium text-gray-900">Get Verified</h3> | |
| <p class="mt-2 text-base text-gray-600"> | |
| Complete our verification process to build trust with dispatchers and access premium opportunities. | |
| </p> | |
| <div class="mt-6"> | |
| <i class="fas fa-check-circle text-indigo-500 text-4xl"></i> | |
| </div> | |
| </div> | |
| <!-- Step 3 --> | |
| <div class="process-step relative pb-20 text-center max-w-md"> | |
| <div class="flex items-center justify-center h-16 w-16 rounded-full bg-indigo-600 text-white mx-auto text-xl font-bold"> | |
| 3 | |
| </div> | |
| <h3 class="mt-6 text-lg font-medium text-gray-900">Receive Dispatch Offers</h3> | |
| <p class="mt-2 text-base text-gray-600"> | |
| Get matched with dispatchers looking for carriers with your specific capabilities and preferences. | |
| </p> | |
| <div class="mt-6"> | |
| <i class="fas fa-bell text-indigo-500 text-4xl"></i> | |
| </div> | |
| </div> | |
| <!-- Step 4 --> | |
| <div class="process-step relative pb-20 text-center max-w-md"> | |
| <div class="flex items-center justify-center h-16 w-16 rounded-full bg-indigo-600 text-white mx-auto text-xl font-bold"> | |
| 4 | |
| </div> | |
| <h3 class="mt-6 text-lg font-medium text-gray-900">Evaluate & Accept</h3> | |
| <p class="mt-2 text-base text-gray-600"> | |
| Review dispatcher profiles, ratings, and terms before accepting the partnerships that work for you. | |
| </p> | |
| <div class="mt-6"> | |
| <i class="fas fa-file-signature text-indigo-500 text-4xl"></i> | |
| </div> | |
| </div> | |
| <!-- Step 5 --> | |
| <div class="process-step relative text-center max-w-md"> | |
| <div class="flex items-center justify-center h-16 w-16 rounded-full bg-indigo-600 text-white mx-auto text-xl font-bold"> | |
| 5 | |
| </div> | |
| <h3 class="mt-6 text-lg font-medium text-gray-900">Optimize Your Business</h3> | |
| <p class="mt-2 text-base text-gray-600"> | |
| Use our tools to track loads, communicate with dispatchers, and analyze your business performance. | |
| </p> | |
| <div class="mt-6"> | |
| <i class="fas fa-chart-bar text-indigo-500 text-4xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Features Section --> | |
| <div class="bg-white py-16"> | |
| <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">Carrier Features</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> | |
| Tools to Grow Your Trucking Business | |
| </p> | |
| </div> | |
| <div class="mt-20"> | |
| <div class="space-y-10 md:space-y-0 md:grid md:grid-cols-3 md:gap-x-8 md:gap-y-10"> | |
| <div class="feature-card relative bg-gray-50 p-6 rounded-lg transition-all duration-300 ease-in-out"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white"> | |
| <i class="fas fa-search-dollar"></i> | |
| </div> | |
| <h3 class="mt-6 text-lg font-medium text-gray-900">Load Board Access</h3> | |
| <p class="mt-2 text-base text-gray-600"> | |
| View available loads from our network of dispatchers with transparent rate information. | |
| </p> | |
| </div> | |
| <div class="feature-card relative bg-gray-50 p-6 rounded-lg transition-all duration-300 ease-in-out"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white"> | |
| <i class="fas fa-map-marked-alt"></i> | |
| </div> | |
| <h3 class="mt-6 text-lg font-medium text-gray-900">Lane Optimization</h3> | |
| <p class="mt-2 text-base text-gray-600"> | |
| Get matched with dispatchers who can help optimize your lanes and reduce empty miles. | |
| </p> | |
| </div> | |
| <div class="feature-card relative bg-gray-50 p-6 rounded-lg transition-all duration-300 ease-in-out"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white"> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| <h3 class="mt-6 text-lg font-medium text-gray-900">Reputation Building</h3> | |
| <p class="mt-2 text-base text-gray-600"> | |
| Build your reputation through verified ratings and reviews from dispatchers. | |
| </p> | |
| </div> | |
| <div class="feature-card relative bg-gray-50 p-6 rounded-lg transition-all duration-300 ease-in-out"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white"> | |
| <i class="fas fa-file-invoice-dollar"></i> | |
| </div> | |
| <h3 class="mt-6 text-lg font-medium text-gray-900">Quick Payments</h3> | |
| <p class="mt-2 text-base text-gray-600"> | |
| Integrated payment processing helps ensure timely payments from dispatchers. | |
| </p> | |
| </div> | |
| <div class="feature-card relative bg-gray-50 p-6 rounded-lg transition-all duration-300 ease-in-out"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white"> | |
| <i class="fas fa-tachometer-alt"></i> | |
| </div> | |
| <h3 class="mt-6 text-lg font-medium text-gray-900">Performance Tracking</h3> | |
| <p class="mt-2 text-base text-gray-600"> | |
| Monitor your on-time performance, acceptance rates, and other key metrics. | |
| </p> | |
| </div> | |
| <div class="feature-card relative bg-gray-50 p-6 rounded-lg transition-all duration-300 ease-in-out"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white"> | |
| <i class="fas fa-mobile-alt"></i> | |
| </div> | |
| <h3 class="mt-6 text-lg font-medium text-gray-900">Mobile App</h3> | |
| <p class="mt-2 text-base text-gray-600"> | |
| Manage your business on the go with our full-featured mobile application. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Brokers Tab Content --> | |
| <div id="brokers" class="tab-content"> | |
| <div class="bg-gray-50 py-16"> | |
| <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">For Brokers</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> | |
| Expand Your Carrier Network | |
| </p> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> | |
| Connect with reliable carriers through our network of professional dispatchers. | |
| </p> | |
| </div> | |
| <div class="mt-20"> | |
| <div class="flex flex-col items-center"> | |
| <!-- Step 1 --> | |
| <div class="process-step relative pb-20 text-center max-w-md"> | |
| <div class="flex items-center justify-center h-16 w-16 rounded-full bg-indigo-600 text-white mx-auto text-xl font-bold"> | |
| 1 | |
| </div> | |
| <h3 class="mt-6 text-lg font-medium text-gray-900">Register Your Brokerage</h3> | |
| <p class="mt-2 text-base text-gray-600"> | |
| Create your brokerage profile with your MC number, insurance details, and specialties. | |
| </p> | |
| <div class="mt-6"> | |
| <i class="fas fa-building text-indigo-500 text-4xl"></i> | |
| </div> | |
| </html> |