Create <DestinationCard /> component

[williamkolmacka]

Description

• DestinationCard is a component which is used on the landing page and also on the search page.

Visual style

Zeplin: https://zpl.io/2jPQo6W

Interactions

• on hover is showed a dark overlay with additional information about the flight
• animations are the same as on current DestinationCard on the Kiwi.com landing page, but with Orbit duration token.

Additional information

• the background image have to be always stretched

Functional specs

• width is 100%
• height is set up randomly from the range of min and max height

Default

• for city name is used title1 heading
• for price is used title3 heading
• for time of stay is used title4 heading

Hover

• for departure city is used title3 heading
• for arrival city is used title1 heading
• for arrival country is used title4 heading
• for the bottom section is used small text with bold variant

All the texts are in inversed style.

Storybook chapters

• TBD later