Challenge: Deconstructing a Flight Booking Card

Let's practice Atomic Design deconstruction on a real-world complex UI element: a Flight Booking Result Card (showing airline logo, departure/arrival times, duration badge, price, and select button).

Deconstructing through the Atomic Hierarchy:

1. Atoms: Airline Logo image, Typography (time, airport codes), Status Badge ('Nonstop'), Button ('Select Flight').
2. Molecules:
   • Flight Segment Molecule: Departure Time + Arrow Icon + Arrival Time.
   • Price Display Molecule: Currency Symbol + Price Number + 'per passenger' caption.
3. Organism (The Flight Card): Composes the Airline header, Flight Segment molecule, Duration Badge, and Price Molecule into a bordered container with hover depth.
4. Template: A two-column responsive search results layout with filter sidebar and flight card list.
5. Page: The live checkout search page populated with live flight prices and dynamic currency conversions.