🎨 Create team members carousel
IanOdhiambo9 opened this issue · comments
Create team member carousel
Quick links: Summary | Description | Technical-Analysis | Acceptance-Criteria
Summary
As a user I want a section that shows all the team members and some brief info about them
Description
As seen on the designs (link below), this section contains the following:
1. A scrollable list of team members
The team section needs to appear as shown below including carousel functionality. When a user clicks next or previous the carousel should navigate accordingly with ease.
The team members will be saved in a "teamMembers" array which will be looped through in the carousel.
The array will have objects with the following properties;
1. name
2. role
3. imageLink
4. LinkedInProfileLink
5. summary
When a team member is clicked the view on #16 is opened in the same section.
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
mobile
https://xd.adobe.com/view/7b72572b-b40a-4618-bfa6-5500ab28f13b-2e21/screen/0efb593f-dc28-4e6d-86f3-098699455ad4
Technical Analysis
This component will be created in libs/pages/elewa/about-us
Acceptance Criteria
Provide a short video of the carousel working on both mobile and web
- When rendered the component is pixel perfect compared to the design above.
- The component is clean and does not have more than 50 lines
- The component SCSS uses CSS variables for colour, font, ... Connected to the main style.scss
- The code is isolated to the libs/page/home package, unless a justified reason is specified.
- The component is aligned using CSS flex
- The design is responsive for screen, tablet and phone
- The image renders fast and has multiple srcsets
working on this
Working on this
We are working on this @jobkarani
working on this with @royokite