Header Box - Copy this React, Mui Component to your project
### Top Section (Header) **Airline Information**: Left aligned at the top. **Airline Logo** (American Airlines logo) followed by **American Airlines** text. Below the airline name, in smaller font, "Operated by KLM Royal Dutch Airlines". Below that, in even smaller font, "Airbus A320 Neo · AA1139". ### Middle Section (Main Information) **Flight Times and Locations**: **Departure Time and Location**: On the left side, a **dot** icon indicating the starting point. "8:13 AM CEST" in bold, large font. Below that, in smaller font, "Oslo (TRF) · 8:13 AM CEST". Below that, in even smaller font, "Thu, May 21 2023". **Layover**: Centered horizontally with a dotted line connecting the departure and arrival sections. "Overnight layover" in red text. "Copenhagen (CPH)" in regular font. Below that, in smaller font, "6h 15m". **Arrival Time and Location**: On the right side, a **plane** icon indicating the destination. "11:23 PM CEST" in bold, large font. Below that, in smaller font, "Rome (CIA) · 6:23 PM CET". Below that, in even smaller font, "Fri, May 22 2023". ### Bottom Section (Additional Information) **Travel Duration and Availability**: Left aligned, small font. "Travel time 12h 50m". "9 Seats Remaining". "4 Classes Available". "75 kg CO2e". **Additional Indicators** (on the right side of the middle section): "Cheapest" in a blue rounded rectangle. "Often delayed by 30+ min" in a yellow rounded rectangle. " 23% Emissions" in a green rounded rectangle. "Combinable" in a purple rounded rectangle. ### Price and Action Button **Price Information**: Right aligned. Large, bold font. "$540.67 / passenger". **Action Button**: Below the price. Blue button with white text "Select Flight". ### Visual Style and Spacing **Colors**: Background: White or light gray. Text: Mostly black, with specific highlights (red for layover, blue for cheapest, yellow for delays, green for emissions, purple for combinable). Icons: Consistent with the airline’s color scheme. **Spacing**: Ample padding around sections for clarity. Use of dividers and icons to separate information clearly. **Fonts**: Clear, legible fonts with varying weights for emphasis (bold for main times and prices, regular for details, smaller fonts for dates and additional information).
