Load Booking Platform - Copy this React, Tailwind Component to your project
"A modern, user friendly website UI for an online load booking platform tailored for transportation services. The design focuses on functionality, ease of use, and a professional look with a clean blue and white color scheme. Top Navigation Bar: The navigation bar spans across the top, featuring options like 'Membership', 'Marketplace', 'Transport Directory', and 'Products/Services', clearly separated with adequate spacing and in a legible font. These options should be clickable, leading users to their respective sections of the platform. A login button is present on the top right corner, along with a notification bell icon, which will alert users of updates or pending actions. Search and Filter Section: Below the navigation bar is the main search section. This section allows users to perform their primary actions of finding loads or lorries. Search Bar: The search bar is large and centered, allowing users to input the city or location (e.g., 'Bengaluru, Karnataka') and an optional drop location. There is a dropdown for easy location selection with a map pin icon next to each location name for visual clarity. There are two prominent buttons for selecting either 'Find Loads' or 'Find Lorries' to differentiate between user types. The active option is clearly highlighted to indicate the current selection. Vehicle Filters: Below the search bar, there are vehicle filter options allowing users to filter loads or lorries by vehicle type, such as 'Truck', 'Container', 'Trailer', 'LCV', 'Hyva', and 'Tanker'. Each filter is represented with a small vehicle icon for quick recognition. The filters have rounded borders to match the UI’s clean and modern aesthetic. Available Loads Section (Load Cards): The available loads are displayed in cards format for clarity and organization. Load Cards: Each card contains detailed information about the available load, including: Origin and Destination: Clearly displayed with icons for pickup and drop off points (e.g., 'Bengaluru, KA' to 'Hyderabad, TG'). Vehicle Type: Icons or images represent the type of vehicle required (e.g., 'Truck Open Body', '6 tyres', '20 feet'). Load Details: Specifies the load type (e.g., 'Machinery 11 Tonnes') and any specific requirements or constraints. Loading Information: The expected loading time (e.g., 'Loading Today at 2:00 PM') is highlighted for immediate attention. Transporter Info: Displays the name and rating of the transporter (e.g., 'Decent Packers and Cargo Movers', '4.3 Stars'). Price Info: The expected rate for the service is highlighted at the bottom of each card (e.g., '₹23,000 To Pay ₹3.63/tonne km'). It also indicates if there is an advance payment required and the percentage (e.g., '50% Advance'). Action Button: A clear 'Bid Now' button allows users to take immediate action on the available load. The button is large and in a contrasting color for visibility. Footer Section: Load Statistics: Below the load cards, there is a section summarizing the number of active loads, verified trucks, and users in the platform. Benefits and Customer Support: A brief section details the benefits of using the platform such as verified transporters, cashback offers, and 24/7 customer support. This section ensures users understand the advantages of using the platform. Additional UI Elements: A Post Lorry button is available on the side panel for lorry owners to post their vehicle and find matching loads, prominently placed to encourage engagement. The notification bell icon provides quick access to important updates such as bid approvals, loading confirmations, or urgent alerts. Overall, the platform provides a professional, trustworthy appearance through a blue and white theme with clear separation between content blocks, rounded corners, and clean fonts for readability. The focus is on helping users efficiently search and engage with the transportation services they need, whether they are looking for a load or offering their vehicle."
