| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Partner Onboarding Process</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <style> |
| .process-step { |
| transition: all 0.3s ease; |
| } |
| .process-step:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); |
| } |
| .arrow-down { |
| width: 0; |
| height: 0; |
| border-left: 20px solid transparent; |
| border-right: 20px solid transparent; |
| border-top: 20px solid #3B82F6; |
| margin: 0 auto; |
| } |
| .tab-content { |
| display: none; |
| } |
| .tab-content.active { |
| display: block; |
| } |
| .tab-button.active { |
| background-color: #3B82F6; |
| color: white; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 min-h-screen"> |
| <div class="container mx-auto px-4 py-12"> |
| <header class="text-center mb-16"> |
| <h1 class="text-4xl font-bold text-gray-800 mb-4" data-aos="fade-down">Partner Onboarding Process</h1> |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto" data-aos="fade-up">Streamlined workflow for partner and driver approvals</p> |
| </header> |
|
|
| <div class="flex flex-col lg:flex-row gap-8 mb-8"> |
| <div class="w-full lg:w-1/3"> |
| <div class="bg-white rounded-xl shadow-md overflow-hidden process-step" data-aos="fade-right"> |
| <div class="p-6"> |
| <div class="flex items-center mb-4"> |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> |
| <i data-feather="users" class="text-blue-600"></i> |
| </div> |
| <h2 class="text-xl font-semibold text-gray-800">Partner Approval</h2> |
| </div> |
| <div class="space-y-4"> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 mt-1"> |
| <i data-feather="check-circle" class="text-green-500"></i> |
| </div> |
| <div class="ml-3"> |
| <h3 class="text-sm font-medium text-gray-800">Tax Info (W9)</h3> |
| <p class="text-xs text-gray-500">Standard Form</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 mt-1"> |
| <i data-feather="check-circle" class="text-green-500"></i> |
| </div> |
| <div class="ml-3"> |
| <h3 class="text-sm font-medium text-gray-800">Bank Info</h3> |
| <p class="text-xs text-gray-500">Direct deposit form or text fields</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 mt-1"> |
| <i data-feather="check-circle" class="text-green-500"></i> |
| </div> |
| <div class="ml-3"> |
| <h3 class="text-sm font-medium text-gray-800">COI</h3> |
| <p class="text-xs text-gray-500">$500,000 minimum insurance</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 mt-1"> |
| <i data-feather="check-circle" class="text-green-500"></i> |
| </div> |
| <div class="ml-3"> |
| <h3 class="text-sm font-medium text-gray-800">Agreements</h3> |
| <p class="text-xs text-gray-500">Service, Privacy Policy, Duty of Care</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="flex items-center justify-center lg:block lg:w-1/6"> |
| <div class="arrow-down lg:rotate-90" data-aos="zoom-in"></div> |
| </div> |
|
|
| <div class="w-full lg:w-1/3"> |
| <div class="bg-white rounded-xl shadow-md overflow-hidden process-step" data-aos="fade-left"> |
| <div class="p-6"> |
| <div class="flex items-center mb-4"> |
| <div class="bg-purple-100 p-3 rounded-full mr-4"> |
| <i data-feather="user" class="text-purple-600"></i> |
| </div> |
| <h2 class="text-xl font-semibold text-gray-800">Driver Approval</h2> |
| </div> |
| <div class="space-y-4"> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 mt-1"> |
| <i data-feather="check-circle" class="text-green-500"></i> |
| </div> |
| <div class="ml-3"> |
| <h3 class="text-sm font-medium text-gray-800">Background Check</h3> |
| <p class="text-xs text-gray-500">Annual requirement</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 mt-1"> |
| <i data-feather="check-circle" class="text-green-500"></i> |
| </div> |
| <div class="ml-3"> |
| <h3 class="text-sm font-medium text-gray-800">Headshot Photo</h3> |
| <p class="text-xs text-gray-500">Uploaded to platform</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 mt-1"> |
| <i data-feather="check-circle" class="text-green-500"></i> |
| </div> |
| <div class="ml-3"> |
| <h3 class="text-sm font-medium text-gray-800">Driver's License</h3> |
| <p class="text-xs text-gray-500">Photo or scan with certifications</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 mt-1"> |
| <i data-feather="check-circle" class="text-green-500"></i> |
| </div> |
| <div class="ml-3"> |
| <h3 class="text-sm font-medium text-gray-800">Agreements</h3> |
| <p class="text-xs text-gray-500">Driver, Privacy Policy, Duty of Care</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="flex items-center justify-center lg:block lg:w-1/6"> |
| <div class="arrow-down lg:rotate-90" data-aos="zoom-in"></div> |
| </div> |
|
|
| <div class="w-full lg:w-1/3"> |
| <div class="bg-white rounded-xl shadow-md overflow-hidden process-step" data-aos="fade-right"> |
| <div class="p-6"> |
| <div class="flex items-center mb-4"> |
| <div class="bg-green-100 p-3 rounded-full mr-4"> |
| <i data-feather="truck" class="text-green-600"></i> |
| </div> |
| <h2 class="text-xl font-semibold text-gray-800">Vehicle Approval</h2> |
| </div> |
| <div class="space-y-4"> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 mt-1"> |
| <i data-feather="check-circle" class="text-green-500"></i> |
| </div> |
| <div class="ml-3"> |
| <h3 class="text-sm font-medium text-gray-800">Make and Model</h3> |
| <p class="text-xs text-gray-500">Open text field with dropdowns</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 mt-1"> |
| <i data-feather="check-circle" class="text-green-500"></i> |
| </div> |
| <div class="ml-3"> |
| <h3 class="text-sm font-medium text-gray-800">Age</h3> |
| <p class="text-xs text-gray-500">5 years or newer (6+ flagged)</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 mt-1"> |
| <i data-feather="check-circle" class="text-green-500"></i> |
| </div> |
| <div class="ml-3"> |
| <h3 class="text-sm font-medium text-gray-800">Photos</h3> |
| <p class="text-xs text-gray-500">10 standard angles (inside/outside)</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 mt-1"> |
| <i data-feather="check-circle" class="text-green-500"></i> |
| </div> |
| <div class="ml-3"> |
| <h3 class="text-sm font-medium text-gray-800">Registration & VIN</h3> |
| <p class="text-xs text-gray-500">Uploaded, must match COI</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="bg-white rounded-xl shadow-md overflow-hidden mb-12" data-aos="fade-up"> |
| <div class="p-6"> |
| <h2 class="text-2xl font-semibold text-gray-800 mb-6">Extra Services</h2> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
| <div class="border border-gray-200 rounded-lg p-4"> |
| <div class="flex items-center mb-3"> |
| <div class="bg-yellow-100 p-2 rounded-full mr-3"> |
| <i data-feather="shield" class="text-yellow-600"></i> |
| </div> |
| <h3 class="font-medium text-gray-800">Child Seats</h3> |
| </div> |
| <p class="text-sm text-gray-600">Acknowledge and provide photos of 3 different seat types</p> |
| </div> |
| <div class="border border-gray-200 rounded-lg p-4"> |
| <div class="flex items-center mb-3"> |
| <div class="bg-pink-100 p-2 rounded-full mr-3"> |
| <i data-feather="handshake" class="text-pink-600"></i> |
| </div> |
| <h3 class="font-medium text-gray-800">Meet and Greet</h3> |
| </div> |
| <p class="text-sm text-gray-600">Yes/No acknowledgment of offering this service</p> |
| </div> |
| <div class="border border-gray-200 rounded-lg p-4"> |
| <div class="flex items-center mb-3"> |
| <div class="bg-indigo-100 p-2 rounded-full mr-3"> |
| <i data-feather="github" class="text-indigo-600"></i> |
| </div> |
| <h3 class="font-medium text-gray-800">Pets</h3> |
| </div> |
| <p class="text-sm text-gray-600">Yes/No acknowledgment of allowing pets in vehicle</p> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="bg-white rounded-xl shadow-md overflow-hidden" data-aos="fade-up"> |
| <div class="flex border-b border-gray-200"> |
| <button class="tab-button py-4 px-6 font-medium text-gray-600 active" onclick="openTab(event, 'current')">Current Process</button> |
| <button class="tab-button py-4 px-6 font-medium text-gray-600" onclick="openTab(event, 'proposed')">Proposed Process</button> |
| </div> |
|
|
| <div id="current" class="tab-content p-6 active"> |
| <div class="overflow-x-auto"> |
| <table class="min-w-full divide-y divide-gray-200"> |
| <thead class="bg-gray-50"> |
| <tr> |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Partners</th> |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Notes</th> |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Drivers</th> |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Notes</th> |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Vehicles</th> |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Notes</th> |
| </tr> |
| </thead> |
| <tbody class="bg-white divide-y divide-gray-200"> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">W9</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"></td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Drivers License #</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">No verification, no photos</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Make and Model</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Need to review approval criteria</td> |
| </tr> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Direct Deposit From</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"></td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">First Name</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"></td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">6 years or newer</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Review process for activation</td> |
| </tr> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Insurance Certificate</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">No minimum</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Last Name</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"></td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Photos</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Outside only</td> |
| </tr> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Partner Service Agreement</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">No background checks mentioned</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Email</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"></td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Vehicle Registration</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"></td> |
| </tr> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Privacy Policy</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"></td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Phone Number</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"></td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">VIN #</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Must match COI</td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
|
|
| <div id="proposed" class="tab-content p-6"> |
| <div class="overflow-x-auto"> |
| <table class="min-w-full divide-y divide-gray-200"> |
| <thead class="bg-gray-50"> |
| <tr> |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Partners</th> |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Notes</th> |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Drivers</th> |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Notes</th> |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Vehicles</th> |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Notes</th> |
| </tr> |
| </thead> |
| <tbody class="bg-white divide-y divide-gray-200"> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Tax Info (W9)</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Standard Form</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Background Check</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Annual required per driver</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Make and Model</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Open Text Field. Possible dropdowns</td> |
| </tr> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Bank Info</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Direct Deposit form or text fields</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Headshot Photo</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Must be uploaded to platform</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">5 years or newer</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Older than 6 years flagged/denied</td> |
| </tr> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">COI</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$500,000 Minimum, verification</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Drivers License #</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Photo/scan with certifications</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Photos</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Outside AND Inside (10 standard)</td> |
| </tr> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Agreements</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Service, Privacy, Duty of Care</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Driver Agreement</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Standard signature field</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Vehicle Registration</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Uploaded</td> |
| </tr> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Credit card on file</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">For contract violations</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Privacy Policy</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Standard signature field</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">VIN #</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Must match COI</td> |
| </tr> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Extra Services</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Options to acknowledge</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Driver Training</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Video and test confirmation</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900"></td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"></td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| function openTab(evt, tabName) { |
| var i, tabcontent, tabbuttons; |
| |
| tabcontent = document.getElementsByClassName("tab-content"); |
| for (i = 0; i < tabcontent.length; i++) { |
| tabcontent[i].classList.remove("active"); |
| } |
| |
| tabbuttons = document.getElementsByClassName("tab-button"); |
| for (i = 0; i < tabbuttons.length; i++) { |
| tabbuttons[i].classList.remove("active"); |
| } |
| |
| document.getElementById(tabName).classList.add("active"); |
| evt.currentTarget.classList.add("active"); |
| } |
| |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| AOS.init({ |
| duration: 800, |
| easing: 'ease-in-out', |
| once: true |
| }); |
| feather.replace(); |
| }); |
| </script> |
| </body> |
| </html> |
|
|
