Transfer
--- ### **Prompt: Modern Professional UI for Transfer Booking Pages** **General Description:** > Design a **modern, professional, and responsive UI** for a transfer booking website. The project includes **3 pages**: > > 1. Landing page with two cards for transfer types. > 2. Transfer form: Airport → Hotel. > 3. Transfer form: Hotel → Airport. > The design should be **clean, minimal, user-friendly**, consistent in color, typography, and style, and optimized for desktop and mobile screens. --- ### **Page 1 – Landing Page (Parent Page)** **Components:** * **Header / Title:** * Large clear title: “Choose Your Transfer Type” * Subtitle: “Enjoy a seamless journey and comfortable arrival at your destination” * Small relevant icon (plane or car) * **Cards:** * **Card 1:** “Airport → Hotel” + airplane/baggage icon * **Card 2:** “Hotel → Airport” + car/exit icon * Layout: **2-column grid on desktop, 1-column on mobile** * Hover effect: subtle shadow or scale-up for interactivity * Button inside each card: “Book Now” * **Layout:** * Centered content with ample margin and padding * Light background (white or subtle gradient) * **Extras:** * Footer with contact info, logo, and important links --- ### **Page 2 – Transfer Form: Airport → Hotel** **Components:** * **Header / Title:** * Large title: “Book Transfer from Airport to Hotel” * Subtitle: “Fill in your details for a smooth journey” * **Multi-step Form:** * **Step 1 – Travel Details:** Arrival date (Date Picker), Arrival time (Time Picker), Arrival airport (Dropdown/Autocomplete) * **Step 2 – Passenger Details:** Full name, Phone number, Email * **Step 3 – Vehicle & Notes:** Vehicle type (Dropdown/Radio), Optional notes (Textarea) * **Buttons:** * “Next” / “Submit” button: prominent accent color, hover effect * “Back” button: small and clear * **Layout:** * Central card layout with proper padding * Light background, subtle shadows on fields * **Extras:** * Small icons for each field (Calendar, Phone, Email) * Clear validation messages * Fully responsive, full-width fields on mobile --- ### **Page 3 – Transfer Form: Hotel → Airport** > Same design as Page 2, with adjusted text: * Title: “Book Transfer from Hotel to Airport” * Subtitle: “Enjoy a convenient ride to the airport on time” * Fields: Departure date & time, Hotel selection, Passenger details, Vehicle type, Optional notes * Layout, colors, buttons, icons, responsiveness: **identical to Page 2** for consistency --- ### **Overall Style for All Pages** * Modern, minimal, professional, clean UI * **Colors:** White/light backgrounds + accent color (e.g., blue or orange) for buttons and highlights * **Font:** Modern sans-serif (Roboto / Poppins / Open Sans) * **Shadows:** Subtle, only to highlight fields and buttons * **Consistency:** Same style, spacing, and visual hierarchy across all pages * Use **card layout** for all forms and content areas * Multi-step form for large forms to improve user experience * Small icons + hover effects to enhance modern professional look --- إذا تحب، أقدر أصيغ لك نسخة **مختصرة جدًا وجاهزة لأي AI UI generator** بحيث تطلع لك Mockup بصري كامل لكل الثلاث صفحات مباشرة، جاهزة للاستخدام في Figma أو MidJourney.