SM
Souvik Mal

Trucko Ride and Package Booking Interface

"Design a modern, user-friendly ride and package booking interface for a service called 'Trucko.' The interface should be clean and minimalistic, with the following key elements: Left Panel: A toggle switch at the top allowing users to choose between 'Ride' and 'Package' options. For the 'Ride' option, include two input fields with placeholder text: one for 'Pickup location' and another for 'Dropoff location.' A location icon next to the 'Pickup location' field to autofill the user’s current location. Below the location fields, include two dropdown menus: one for selecting the date (default: 'Today') and another for selecting the time (default: 'Now'). A prominent black button at the bottom labeled 'See prices.' Map Section (Right Side): A detailed, interactive map displaying key city landmarks. The map should take up most of the right side of the interface, similar to Google Maps, and allow users to visualize their route. Suggestions Section (Bottom): A section titled 'Suggestions' featuring three cards horizontally: Ride card: An icon of a white vehicle with text describing the service as 'Go anywhere with Trucko. Request a ride, hop in, and go.' Include a 'Details' button. Package card: An icon of a package with text 'Trucko Connect makes same-day delivery easier than ever.' Include a 'Details' button. Reserve card: An icon of a calendar and clock with text 'Reserve your ride in advance so you can relax on the day of your trip.' Include a 'Details' button. The color palette should primarily feature black, white, and gray tones for a clean, sleek look. The typography should be bold and modern for clarity and readability. Use intuitive icons to represent the location, vehicle, package, and clock elements, ensuring the design feels both functional and visually appealing."

Prompt
Component Preview

About

Discover the sleek and user-friendly Trucko booking interface built with React and Tailwind CSS. Effortlessly book rides or packages with an intuitive design and interactive map.

Share

Last updated 1 month ago