🎨 [App layout] Create a reusable hero (Top page banner) component for the website (Responsive)

[IanOdhiambo9]

Create a reusable hero (Top page banner) component for the website

---

Quick links: Summary | Description | Technical-Analysis | Acceptance-Criteria

---

Summary

As a user I want a consistent top page banner for various pages of the website.

Description

As seen on the designs (link below), there are various pages that share a similar top banner which we'll call the "hero section". The hero section is the first view when a user lands on a page. We need one component that can be reused for every page that needs a top banner.

The contents of the hero will be passed as inputs to the component and will include:

1. A subtitle
2. A main tittle
3. An optional footer text
4. A background image link

The hero section needs to appear as shown below (but Image and text will vary based on page)

Your assignment is to implement the component to appear as above.

Please take note of all the design features

Link to full design:

https://xd.adobe.com/view/7b72572b-b40a-4618-bfa6-5500ab28f13b-2e21/screen/63e63506-4ea3-4d02-af28-f7cf148b47d9

Technical Analysis

This component will be created in libs/elements/layout

The name of the component will be "elewa-hero"

Acceptance Criteria

1. When rendered the component is pixel perfect compared to the design above.
2. The component is clean and does not have more than 50 lines
3. The component SCSS uses CSS variables for colour, font, ... Connected to the main style.scss
4. The code is isolated to the libs/page/home package, unless a justified reason is specified.
5. The component is aligned using CSS flex
6. The design is responsive for screen, tablet and phone
7. The image renders fast and has multiple srcsets

[vincexiv]

We'll be doing this. Me and Mildred

[MildredKoskei]

@IanOdhiambo9 we would like a review on our pull request.

[nejidevelops]

Working on this with @mwanasiti

[jeffoty]

working on this with @Allan-Ngugi