italanta/elewa-group

🎨 Create venture lab detail hero

Closed this issue · 2 comments

Create venture lab detail hero


Note: this issue is dependent on #407, please complete that issue first

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


Summary

As a user I want a hero section for the venture detail page

Description

As seen on the designs (link below), this section contains the following:

1. A title
2. A paragraph
3. An animated button
4. a Logo image

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

Screenshot 2023-03-06 at 09 26 36

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/6a994cc0-5cf0-4d13-919e-3953e3b5b9f2

Technical Analysis

This component will be created in libs/pages/elewa/venture-detail

The component will be called venture-detail-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

@IanOdhiambo9 kindly provide the link of the logo.

review