🎨 Create Brands page top banner

[IanOdhiambo9]

Create Brands page top banner

---

Note: this issue is dependent on #10 and #318 , please complete that issue first

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

---

Summary

As a user I want a top banner page for the brands page

Description

As seen on the designs (link below), the section is similar to the page banner component created on #10, reuse that component and pass the relevant data for this section;

The page banner section needs to appear as shown below (link to icons below)

Please take note of all the design features

Link to full design:

https://xd.adobe.com/view/7b72572b-b40a-4618-bfa6-5500ab28f13b-2e21/screen/3bb41a81-fd4c-462b-9535-043bc5c55faf

Image Url

https://res.cloudinary.com/dyl3rncv3/image/upload/v1675690292/elewa-group-website/hero-Images/Brands_ewjhj2.jpg

Technical Analysis

This component will be created in libs/pages/elewa/brands

The component will be called elewa-brands-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

[kahoragachau]

Working on this.