italanta/elewa-group

elewa-group's Issues

🎨 Create a reusable vertical list for projects, news etc..

🎨 Create a reusable vertical list for projects, news etc..

---

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

---

Summary

As a user I want a component I can reuse to display a list of items projects, news etc

Description

This component displays a vertical list of items, it takes a list of the following values as input:

1. A title
2. A description (limited to max 50 characters)
3. A date

Your assignment is to implement the component to appear as above

Please take note of all the design features (including mobile)

Link to full design:

https://xd.adobe.com/view/7b72572b-b40a-4618-bfa6-5500ab28f13b-2e21/screen/31438bb0-400a-4da8-a374-c0440535c37c

mobile 
-

Technical Analysis

This component will be created in libs/features/components/ui-lists

The component will be called elewa-group-vertical-list-one

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

🎨 Create social impact projects section

🎨 Create social impact projects section

---

Note: This issue is dependent on #35 and #38, please complete that issue first.

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

---

Summary

As a user I want a component I can use to display a list of the organisation projects.

Description

This component displays the organisation projects.

1. A title
2. A list of projects (reuse #35 for this section)
3. A list of organisation partners (resue #38 for this section)
4. A call to action text

Your assignment is to implement the component to appear as above, reuse #35 and #38
Please take note of all the design features (including mobile)

Link to full design:

https://xd.adobe.com/view/7b72572b-b40a-4618-bfa6-5500ab28f13b-2e21/screen/31438bb0-400a-4da8-a374-c0440535c37c

mobile 
-

Technical Analysis

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

🎨 Create Social Impact cooperative section

🎨 Create Social Impact cooperative section

---

Note: This issue is dependent on #31, please complete that issue first

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

---

Summary

As a user I want a section that describes the organisation common objectives

Description

This component displays provided text and images side by side on the social impact section.

Then section has the following :

1. An image on the right side
2. A paragraph of text
3. A title

Your assignment is to implement the component to appear as above, reuse the component on #31.

Please take note of all the design features (including mobile and rounded corners)

Link to full design:

https://xd.adobe.com/view/7b72572b-b40a-4618-bfa6-5500ab28f13b-2e21/screen/31438bb0-400a-4da8-a374-c0440535c37c

mobile 
-

Technical Analysis

This component will be created in libs/pages/elewa/social-impact

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

🎨 Home page - Hero section

Create the home hero section

---

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

---

Summary

As a user I want a clear hero section that captures my attention and explains the values of Elewa.
I want a good experience on web and phone

Description

Design:

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

Responsive design:
https://xd.adobe.com/view/7b72572b-b40a-4618-bfa6-5500ab28f13b-2e21/screen/97e91d3f-d00a-4006-a192-02b0810be1ab

Technical Analysis

This feature can be found in libs/pages/home
This feature should be a stand alone component. The page should be different from the element.

In this phase, DO NOT YET ADD THE DROPOUT SECTIONS AS SEEN ON THE RESPONSIVE PAGE (the tabbed titles like "levelling the playing field", ...). Instead, ensure a clean design of the sections when scaling the screen up and down.

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

🎨 Create Careers Hero

Create Careers Hero

---

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

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

---

Summary

As a user I want a hero section for the careers page

Description

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

1. A title
2. A paragraph
3. An animated button

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

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/a7f37e20-4f02-4b0a-9afc-11c44a0ce560

Technical Analysis

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

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

:art: Invest Page Footer section

Invest Page Footer section

---

On Hold, do not attempt yet

Note: this feature depends on a component created on #15, please complete this issue first.

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

---

Summary

As a user I want a footer section on the Invest page

Description

Just add the component on #15 to the bottom of the about 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/31438bb0-400a-4da8-a374-c0440535c37c

mobile 
-

Technical Analysis

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

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

Create Invest creative-hub section

🎨 Create Invest creative-hub section

---

Note: This issue is dependent on #31, please complete that issue first

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

---

Summary

As a user I want a section that describes the investors creative hub section.

Description

This component displays provided text and images side by side on the creative hub section..

Then section has the following :

1. An image on the right side
2. A paragraph of text (2)
3. A title

Your assignment is to implement the component to appear as above, reuse the component on #31.

Please take note of all the design features (including mobile and rounded corners)

Link to full design:

https://xd.adobe.com/view/7b72572b-b40a-4618-bfa6-5500ab28f13b-2e21/screen/d601deb2-7100-407e-aed2-6c782b5006af

#### Image link

https://res.cloudinary.com/dyl3rncv3/image/upload/v1675690302/elewa-group-website/Images/Mask_Group_20_yshsq2.png

### Technical Analysis

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

The component will be called elewa-invest-creative-hub-section

### 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

🎨 Reusable card component

A reusable card component

---

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

---

Summary

As a developer, I want a reusable card component I can use to clearly present data
I want a good experience on web and phone

Description

Design:

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

Responsive design:
https://xd.adobe.com/view/7b72572b-b40a-4618-bfa6-5500ab28f13b-2e21/screen/97e91d3f-d00a-4006-a192-02b0810be1ab

Technical Analysis

The card component should be placed in the library libs/features/components/cards
Use the command nx generate @nrwl/angular:library features/components/cards to create this library. Make sure it's a separate commit.

The card is a reusable component that can be used by e.g. the home page to properly display certain components.
The component name is elewa-group-card

The card exposes three Angular inputs of type text, i.e. "title", "subtitle", "imgSrc" and "description".

The module is named "CardsModule"
It exports the elewa-group-card component, for other modules to import

Acceptance Criteria

• 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
• A separate commit is used for each small change
• The commits and PR are well formatted/use proper documentation
• The module exports the component

🎨 [App Layout] Create careers page Module & routing

Create careers page Module

---

Note:

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

---

Summary

As a user I want a careers page that contains the open positions for the organisatiom

Description

The library to enable this hasn't been created yet. Create the lib and setup routing to it.
You'll need to add a routing file "careers.routing.ts"
You'll need to add the main page for this lib "elewa-careers-page" (inside a pages folder)
Add a careers tab on the header and it's routerLink

Add the elewa-main-page template to the elewa-careers-page

Link to full design:

https://xd.adobe.com/view/7b72572b-b40a-4618-bfa6-5500ab28f13b-2e21/screen/a7f37e20-4f02-4b0a-9afc-11c44a0ce560

Technical Analysis

This module will be created in libs/pages/elewa/careers

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

🎨 Create About us page (We care) section

Create About us page (We care) section

---

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

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

---

Summary

As a user I want a section that describes our mission and investment as an organisation

Description

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

1. A title
2. (2) paragraphs side by side
3. (3) Columns with an icon, title and test vertically aligned

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

Your assignment is to implement the component to appear as above. The columns below use reusable components from #14. Please take note of that.

Please take note of all the design features (including rounded corners)

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

Icon Links

https://res.cloudinary.com/dyl3rncv3/image/upload/v1675690301/elewa-group-website/Icons/PNG/coorperative_kzlzrg.png

https://res.cloudinary.com/dyl3rncv3/image/upload/v1675690300/elewa-group-website/Icons/PNG/Holistic_id4kra.png

https://res.cloudinary.com/dyl3rncv3/image/upload/v1675690301/elewa-group-website/Icons/PNG/ownership_yno4a2.png

Technical Analysis

This component will be created in libs/pages/elewa/about-us

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

🎨 Create social impact page top banner

Create social impact page top banner

---

Note: this issue is dependent on #10 , 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 social impact 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/31438bb0-400a-4da8-a374-c0440535c37c

Technical Analysis

This component will be created in libs/pages/elewa/social-impact

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

🎨 Create Invest page investing section

🎨 Create Invest page investing section

---

Note: This issue is dependent on #31, please complete that issue first

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

---

Summary

As a user I want a section that describes how to invest in elewa.

Description

This component displays provided text and images side by side on the invest in elewa section..

You will need to extend an optional button field (reusable animation button #11 )on the original reusable component, also add an input with the buttonText and url to navigate to. (Needs to utilize a navigate function on the component file)

Then section has the following :

1. An image on the left side
2. A paragraph of text (1)
3. A button.
4. A title

Your assignment is to implement the component to appear as above, reuse the component on #31.

Please take note of all the design features (including mobile and rounded corners)

Link to full design:

https://xd.adobe.com/view/7b72572b-b40a-4618-bfa6-5500ab28f13b-2e21/screen/d601deb2-7100-407e-aed2-6c782b5006af

#### Image link

https://res.cloudinary.com/dyl3rncv3/image/upload/v1675690302/elewa-group-website/Images/f2b2ea6afc31e9720638da1bbd0d2d69_p58coq.png

### Technical Analysis

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

The component will be called elewa-invest-investing-in-elewa-section

### 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
5. The code is isolated to the libs/page/home package, unless a justified reason is specified.
6. The component is aligned using CSS flex
7. The design is responsive for screen, tablet and phone
8. The image renders fast and has multiple srcsets

🎨 About us Footer section

About us Footer section

---

Note: this feature depends on a component created on #15, please complete this issue first.

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

---

Summary

As a user I want a footer section on the about us page

Description

Just add the component on #15 to the bottom of the about 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

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

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

:art: Create the Invest page call-to-action section

Create the Invest page call-to-action section

---

Note: this feature is dependent on #249, Please complete that one first.

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

---

Summary

As a user I want a nice link which captures my attention and sends me to the invest call to action
I want a good experience on web and phone

Description

Design:

Link to full design:

https://xd.adobe.com/view/7b72572b-b40a-4618-bfa6-5500ab28f13b-2e21/screen/d601deb2-7100-407e-aed2-6c782b5006af

Technical Analysis

This feature can be found in libs/pages/elewa/invest

The component will be called elewa-invest-call-to-action-section

The text "investing" is an anchor link which points to the /invest page

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 30 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

🎨 Social Impact Footer section

Social Impact Footer section

---

Note: this feature depends on a component created on #252, please complete this issue first.

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

---

Summary

As a user I want a footer section on the social impact page

Description

Just add the component on #15 to the bottom of the about 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/31438bb0-400a-4da8-a374-c0440535c37c

mobile 
-

Technical Analysis

This component will be created in libs/pages/elewa/social-impact

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

🎨 Home page impact section

Create the home "Impact" section

---

This card depends on:

• #11

---

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

---

Summary

As a user I want a section that shows an intro the elewa impact
I want a good experience on web and phone

Description

Design:

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

Responsive design:
https://xd.adobe.com/view/7b72572b-b40a-4618-bfa6-5500ab28f13b-2e21/screen/97e91d3f-d00a-4006-a192-02b0810be1ab

Technical Analysis

This feature can be found in libs/pages/home
This feature should be a stand alone component. The page should be different from the section element.

Re-use components as much as possible
For the buttons, use the <elewa-group-button></elewa-group-button> component.

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

:fire: Make the footer Dynamic

Make the footer Dynamic

---

Note: this feature depends on a component created on #15, please complete this issue first.

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

---

Summary

As a user I want a footer section on all pages that takes advantage of the transclusion capabilities of the footer section

Description

The footer has already been created, however, the transclusion bit is not yet fully implemented. Depending on the current active page, the footer transclusion section needs to switch it's component. Since the footer is only added to the main page layout, the switchcase will need to happen there.

For this issue you need to create a swithCase that renders a different component based on the active page (will need to make use of the route), from the route you can get the active page and set a different component everytime the route changes.

All the components in the switchCase will be reusable components.

For more about angular switchase and router see the links below:

https://angular.io/api/common/NgSwitchCase

https://angular.io/api/router

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/grid
-

Technical Analysis

This component will be created in libs/elements/layout

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

⌚ Create a reusable TimeLine carousel

TimeLine carousel

---

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

---

Summary

As a user I want a carousel that can display a timeline of provided events

Description

The carousel needs to take in as input a list of events and the number of events to show at a time. The list of events will have objects with the following properties (Create a generic type for this);

1. A date
2. A title
3. A description

The timeline carousel needs to appear as shown below including navigation functionality. When a user clicks the previous or next button they should navigate accordingly with ease.

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 features/components/ui-list

The component will be called elewa-horizontal-timeline-carousel

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

🔧 Create a sitemap for the website

Create a sitemap for the website

---

Note: This issue is dependent on #40, ON HOLD (DO NOT ATTEMPT YET)

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

---

Summary

As a user I want the website to rank top on browsers and provide useful links to various pages on the website.

Description

To aid with site navigation and helping the google crawlers understand our website and it's contents better we need a sitemap.

Research on this and create a sitemap for the website.

Your assignment is to implement the sitemap for the website.

Technical Analysis

The sitemap.xml file should be placed in app/elewa-group-wesbite/src

Acceptance Criteria

The sitemap is recognised and loaded as part of the website

:art: Create reusable Key Figure Card Component

Create reusable Key Figure Card Component

---

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

---

Summary

As a user I want a component I can use to show key figures across the website.

Description

As seen on the design below, this section contains a type of card that is used to show various metrics.
The top part can show either Key Figure or logo Image.

The card takes the following inputs:

1. Figure (string) i.e 1.2M, $17M etc..
2. Description (string) - optional 
3. isImage (boolean) - determines whether top section is an image or text

The card needs to appear as shown below;

Please take note of all the design features (including border and rounded corners)

Link to full design:

https://xd.adobe.com/view/7b72572b-b40a-4618-bfa6-5500ab28f13b-2e21/screen/31438bb0-400a-4da8-a374-c0440535c37c

Technical Analysis

This component will be created in libs/features/components/cards

The component will be called elewa-key-figure-card

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

🎨 Create team members carousel

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

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

🎨 Create Social Impact beyond business section

🎨 Create Social Impact beyond business section

---

Note: This issue is dependent on #31, please complete that issue first

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

---

Summary

As a user I want a section that describes the organisation beyond business.

Description

This component displays provided text and images side by side on the social impact section.

Then section has the following :

1. An image on the left side
2. A paragraph of text
3. A title

Your assignment is to implement the component to appear as above, reuse the component on #31.

Please take note of all the design features (including mobile and rounded corners)

Link to full design:

https://xd.adobe.com/view/7b72572b-b40a-4618-bfa6-5500ab28f13b-2e21/screen/31438bb0-400a-4da8-a374-c0440535c37c

mobile 
-

#### Image link

https://res.cloudinary.com/dyl3rncv3/image/upload/v1675690301/elewa-group-website/Images/IMG_0764_twyo3k.png

Technical Analysis

This component will be created in libs/pages/elewa/social-impact

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

:art: Enhance Image and Text banner Paragraphs

Enhance Image and Text banner Paragraphs

---

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

---

Summary

As a user I want a component I can reuse throughout the site to display images and text side by side.

Description

This component displays text and images side by side on the site

Then section has the following as inputs to the component:

1. An image url
2. A paragraph of text [array]
3. A title
4. Placement of image ("left" or "right")
5. Background color of the section (Hex Code i.e "#00000")

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

Please take note of all the design features (including mobile and rounded corners)

Link to full design:

https://xd.adobe.com/view/7b72572b-b40a-4618-bfa6-5500ab28f13b-2e21/screen/31438bb0-400a-4da8-a374-c0440535c37c

mobile 
-

Technical Analysis

This component will be created in libs/features/components/banners

The component will be called elewa-group-image-and-text-banner

https://res.cloudinary.com/dyl3rncv3/image/upload/v1675690301/elewa-group-website/Images/gettyimages-525701055-2048x2048_g7nbt1.png

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

🎨 Create Social Impact people section

Create Social Impact people section

---

Note: This issue is dependent on #31, please complete that issue first.

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

---

Summary

As a user I want a summary in numbers of the organisation impact

Description

This section contains an auto incrementing figure of the organisation impact, the increment starts from 0 to the provided figure in about 5secs.

Then section has the following:

1. 4 side by side impact figures
2. A description section with an image floated left (reuse component on #31 here).

The figure counters need to increment in uniform and with ease

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

Please take note of all the design features (including mobile)

Link to full design:

https://xd.adobe.com/view/7b72572b-b40a-4618-bfa6-5500ab28f13b-2e21/screen/31438bb0-400a-4da8-a374-c0440535c37c

mobile 
-

Technical Analysis

This component will be created in libs/pages/elewa/social-impact

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

🎨 [App layout] Website footer

Create the website footer

---

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

Summary

As a user I want a simple footer that displays my information in a structured way.
Another component can be injected into the footer to highlight a certain action per page

Description

Currently the website page has not footer. Your job is to add one.

The footer needs to appear well on web and mobile:

Web:

Mobile:

---

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

Responsive design:
https://xd.adobe.com/view/7b72572b-b40a-4618-bfa6-5500ab28f13b-2e21/screen/97e91d3f-d00a-4006-a192-02b0810be1ab

Technical Analysis

This feature can be found in apps/elewa-group-website

Create a layout package in libs/elements/layout/footer

Create a footer component inside a components folder of the package above.
Add a module and export the component.

The footer has a dynamic component which can change from page to page, as illustrated below:

Use simple content projection/transclusion for this through the <ng-content></ng-content> element

https://angular.io/guide/content-projection

Social media links

https://res.cloudinary.com/dyl3rncv3/image/upload/v1675690295/elewa-group-website/Icons/SVG/_Social/instagram_x8ujcq.svg

https://res.cloudinary.com/dyl3rncv3/image/upload/v1675690294/elewa-group-website/Icons/SVG/_Social/linkedin_x8smhm.svg

https://res.cloudinary.com/dyl3rncv3/image/upload/v1675690294/elewa-group-website/Icons/SVG/_Social/facebook_lhhwk2.svg

company logo

https://res.cloudinary.com/dyl3rncv3/image/upload/v1675690297/elewa-group-website/Icons/SVG/_Logo/Logo_White_arvoyx.svg

Acceptance Criteria

• 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 component allows for a transclusive element that is centered using CSS flex

🎨 Create reusable text and image banner (side by side)

Create reusable text and image banner (side by side)

---

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

---

Summary

As a user I want a component I can reuse throughout the site to display images and text side by side.

Description

This component displays text and images side by side on the site

Then section has the following as inputs to the component:

1. An image url
2. A paragraph of text
3. A title
4. Placement of image ("left" or "right")
5. Background color of the section (Hex Code i.e "#00000")

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

Please take note of all the design features (including mobile and rounded corners)

Link to full design:

https://xd.adobe.com/view/7b72572b-b40a-4618-bfa6-5500ab28f13b-2e21/screen/31438bb0-400a-4da8-a374-c0440535c37c

mobile 
-

Technical Analysis

This component will be created in libs/features/components/banners

The component will be called elewa-group-image-and-text-banner

https://res.cloudinary.com/dyl3rncv3/image/upload/v1675690301/elewa-group-website/Images/gettyimages-525701055-2048x2048_g7nbt1.png

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

🎨 About us location section

About us location section

---

Note: this feature depends on a component created on #11

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

---

Summary

As a user I want a section that shows the physical location of the organisation and a link to get directions

Description

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

1. An interactive map on the right
2. A title
3. A description 
4. A button link

The location section needs to appear as shown below including map functionality. When a user clicks the get directions button they should navigate accordingly with ease.

Note

Research and propose possible libraries to provide the maps api/service

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

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

🎨 Create Reusable Icons and text components

Create Reusable Icons and text components

---

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

---

Summary

As a user I want a a component I can reuse across the app to visualise similar text and icons

Description

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

1. An icon / image
2. A title
3. A paragraph

The component needs to appear as shown below (link to icons to be provided)

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/features/components/cards

The component will be called elewa-vertical-icon-and-text

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

:art: Create Investors page top banner

Create Investors page top banner

---

Note: this issue is dependent on #10 , 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 Investors 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/31438bb0-400a-4da8-a374-c0440535c37c

Image Url

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

Technical Analysis

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

The componenent will be called elewa-invest-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

🎨 [App Layout] Create a responsive website header

Create the website header

---

Note: This issue is dependent on #3, please complete that before you continue.

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

---

Summary

As a user I want a header I can use to navigate the website.

Description

Your task is to add the website header as described below.

The content of this header will include:

1. "Elewa group" logo on the left
2. A transparent background 
3. White text

Logo Url -> https://res.cloudinary.com/dyl3rncv3/image/upload/v1675690297/elewa-group-website/Icons/SVG/_Logo/Logo_White_arvoyx.svg

The header needs to be absolute and of higher z-index so that it appears on top of the page banner.

The header needs to appear as shown below on web and mobile:

Technical Analysis

Create a layout package in libs/elements/layout

Create a header component inside a components folder of the package above

Acceptance Criteria

1. When rendered the component is pixel perfect compared to the design above.

:art: Create Investors Key Figures Section

Create Investors Key Figures Section

---

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

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

---

Summary

As a user I want a section that shows key figures investors need to be aware of on the investors page.

Description

The card used on this section is similar to one created on the issue #244, please reuse that can create a responsive card grid to appear as shown below.

Key figures should be an array with the key figure string and a description

Please take note of all the design features

Link to full design:

https://xd.adobe.com/view/7b72572b-b40a-4618-bfa6-5500ab28f13b-2e21/screen/31438bb0-400a-4da8-a374-c0440535c37c

Technical Analysis

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

The componenent will be called elewa-invest-key-figures-section

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

🎨 Team & Partners image component

Team & Partners image component

---

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

---

Summary

As a user I want a section that shows the team and partners
I want a good experience on web and phone

Description

Design:

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

Responsive design:
https://xd.adobe.com/view/7b72572b-b40a-4618-bfa6-5500ab28f13b-2e21/screen/97e91d3f-d00a-4006-a192-02b0810be1ab

Technical Analysis

This feature can be found in libs/pages/elewa/home
This feature should be a stand alone component. The page should be different from the element.

The component will be called team-and-partners

Re-use components as much as possible
For the three cards (Elewa, iTalanta, Ventures), use the ` component.

The image needs to be optimised for web rendering. A low-res version needs to render fast and the high-res can be downloaded in the background.

Use NgOptimizedImage and srcsets - https://angular.io/guide/image-directive

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

:art: Create Invest Detail Section

Create Invest Detail Section

---

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

---

Summary

As a user I want a detail section for the investors page.

Description

The detail section needs to appear as shown 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/d601deb2-7100-407e-aed2-6c782b5006af

Image Url

https://res.cloudinary.com/dyl3rncv3/image/upload/v1675690306/elewa-group-website/Images/Mask_Group_17_rjkgrq.png

Technical Analysis

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

The component will be called elewa-invest-detail-section

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

🎨 Create reusable partner orgs section

🎨 Create reusable partner orgs section

---

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

---

Summary

As a user I want a component I can reuse to display a horizontal list of partners.

Description

This component displays a horizontal list of partner organisation logos, it takes the following as input:

1. A list of imageUrls

Your assignment is to implement the component to appear as above

Please take note of all the design features (including mobile)

Link to full design:

https://xd.adobe.com/view/7b72572b-b40a-4618-bfa6-5500ab28f13b-2e21/screen/31438bb0-400a-4da8-a374-c0440535c37c

mobile 
-

Technical Analysis

This component will be created in libs/features/components/ui-lists

The component will be called elewa-group-horizontal-list-orgs

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

🎨 Create the home page lander

Create the home page lander

---

Note: This issue is dependent on #10, please complete that first.

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

---

Summary

As a user I want a nice home page that captures my attention.
I want a good experience on web and phone

Description

Design:

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

Technical Analysis

This feature can be found in libs/pages/home
This feature should be a stand alone component. The page should be different from the element.

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 30 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

🎨 Home page "Jobs" section

Create the home page "Jobs" section

---

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

---

Summary

As a user I want a nice link which captures my attention and sends me to the jobs page
I want a good experience on web and phone

Description

Design:

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

Technical Analysis

This feature can be found in libs/pages/home
This feature should be a stand alone component. The page should be different from the element.

The text "open opportunities" is an anchor link which points to the /jobs page

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 30 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

🎨 Create about us history carousel

Create about us history carousel

---

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

---

Summary

As a user I want a carousel that can display a history timeline of the organisation

Description

In this section the user can track the progress of the organisation throughout the years.

Then section has the following:

1. A title
2. A timeline carousel (reuse #21 )
3. A call to action message

The timeline carousel needs to appear as shown below including navigation functionality. When a user clicks the previous or next button they should navigate accordingly with ease.

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

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

🎨 ⚡ Button component with animation

Button component with animation

---

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

---

Summary

As a developer, I want a reusable button component that reacts and is animated in a uniform way
I want a good experience on web and phone

Description

The button has a slider-like look and feel.

Light mode:

Dark mode:

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

Responsive design:
N/A - Design does not change.

Animation

When hovering over the button, the arrow moves to the left and the text is highlighted.

Technical Analysis

The button component should be placed in the library libs/features/components/buttons
Use the command nx generate @nrwl/angular:library features/components/buttons to create this library. Make sure it's a separate commit.

The card is a reusable component that can be used by e.g. the home page to properly display certain components.
The component name is elewa-group-button

The card exposes two Angular inputs, i.e. { "mode": ["light" | "dark"], "message": [type = text], "action", [type=navigation link] }

The message input determines the text displayed

The module is named "ButtonsModule"
It exports the elewa-group-button component, for other modules to import

Acceptance Criteria

• 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
• A separate commit is used for each small change
• The commits and PR are well formatted/use proper documentation
• The module exports the component
• The button has proper animation

🎨 Create Social Impact open knowledge section

🎨 Create Social Impact open knowledge section

---

Note: This issue is dependent on #31, please complete that issue first

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

---

Summary

As a user I want a section that describes the organisation open knowledge

Description

This component displays provided text and images side by side on the social impact section.

Then section has the following :

1. An image on the right side
2. A paragraph of text
3. A title

Your assignment is to implement the component to appear as above, reuse the component on #31.

Please take note of all the design features (including mobile and rounded corners)

Link to full design:

https://xd.adobe.com/view/7b72572b-b40a-4618-bfa6-5500ab28f13b-2e21/screen/31438bb0-400a-4da8-a374-c0440535c37c

mobile 
-

Technical Analysis

This component will be created in libs/pages/elewa/social-impact

The component will be called social-impact-open-knowledge

Image Url

https://res.cloudinary.com/dyl3rncv3/image/upload/v1675690302/elewa-group-website/Images/unnamed_1_m3dvll.png

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

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

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

🎨 [App Layout] Make the website header responsive

Make the website header responsive

---

Note: This issue is dependent on #1 and #3, please complete that issue first

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

---

Summary

As a user I want a simple header I can use on my smartphone/tablet to navigate through the website

Description

Currently the website has a header but the header is not responsive, your task is to make the header responsive on different screen sizes.

The header should retain all it's links and routes.

The header needs to appear as shown below when not active:

Technical Analysis

This feature can be found in libs/elements/layout/headers/components

Acceptance Criteria

1. When rendered the component is pixel perfect compared to the design above.

:bug: Error loading Layout Module

🎨 Home page footer

Create the home page Footer section

---

This feature depends on:

• #11
• #15
• #252

---

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

---

Summary

As a user I want a nice well-designed footer on the home page
I want a good experience on web and phone

Description

Design:

Technical Analysis

This feature can be found in libs/pages/home
This feature should be a stand alone component. The page should be different from the element.

Use the elewa-group-footer component. Create a reusable component that acts as CTA for "call to mission":

On the HomePageComponent, add the footer as follows:

<elewa-group-footer>
  <elewa-group-cta-mission></elewa-group-cta-mission>
</elewa-group-footer>
`

### Acceptance Criteria

- [ ] When rendered the component is pixel perfect compared to the design above.
- [ ] The component is clean and does not have more than 30 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 code reuses other components

🔥 Remove default Nx template from the site

Remove default Nx template from the site

---

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

---

Summary

As a user I want to interact with the elewa group website.

Description

Currently the site contains a default NX template. Remove the template and replace with a simple landing page with black background and white text "Elewa Group".

Current site is as shown below

Technical Analysis

This feature can be found in apps/elewa-group-website

Create a temporary landing page on libs/features/elewa/home

Acceptance Criteria

1. When rendered the component is pixel perfect compared to the design above.

🎨 Create About us page culture and values section

Create About us page culture and values section

---

Note: This feature is dependent on #14, please complete this issue first.

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

---

Summary

As a user I want a section that describes the organisations culture and values

Description

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

1. A title
2. A section description
3. A grid of culture and values

This sections reuses components from #14, use this component to render the values on these section

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

Please take note of all the design features (including rounded corners and borders)

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

The component will be called elewa-culture-and-values

icon links:

https://res.cloudinary.com/dyl3rncv3/image/upload/v1675690301/elewa-group-website/Icons/PNG/coorperative_kzlzrg.png

https://res.cloudinary.com/dyl3rncv3/image/upload/v1675690301/elewa-group-website/Icons/PNG/ownership_yno4a2.png

https://res.cloudinary.com/dyl3rncv3/image/upload/v1675690300/elewa-group-website/Icons/PNG/Holistic_id4kra.png

https://res.cloudinary.com/dyl3rncv3/image/upload/v1675690300/elewa-group-website/Icons/PNG/Education_hstyzo.png

https://res.cloudinary.com/dyl3rncv3/image/upload/v1675690300/elewa-group-website/Icons/PNG/Transparancy_fqal8q.png

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

🎨 Create Invest stakeholder section

🎨 Create Invest stakeholder section

---

Note: This issue is dependent on #31, please complete that issue first

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

---

Summary

As a user I want a section that describes the investors stakeholder section.

Description

This component displays provided text and images side by side on the stakeholder section..

Then section has the following :

1. An image on the left side
2. A paragraph of text (2)
3. A title

Your assignment is to implement the component to appear as above, reuse the component on #31.

Please take note of all the design features (including mobile and rounded corners)

Link to full design:

https://xd.adobe.com/view/7b72572b-b40a-4618-bfa6-5500ab28f13b-2e21/screen/d601deb2-7100-407e-aed2-6c782b5006af
mobile 
-

#### Image link

https://res.cloudinary.com/dyl3rncv3/image/upload/v1675690303/elewa-group-website/Images/IMG_6523_vabpyo.png

### Technical Analysis

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

The component will be called elewa-invest-stakeholder-section

### 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

🚚 Configure App Routing

Configure App Routing

---

Note: This issue is dependent on #1, please complete this issue first.

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

---

Summary

As a user I want routes to navigate to various parts of the website

Description

The website navigation is managed on apps/elewa-group-website/src/app

On the path above create a file named app.routing.ts

Paste the code below on that file

import { NgModule } from '@angular/core';
import { RouterModule, Route }  from '@angular/router';

export const ELEWA_GROUP_WEBSITE_ROUTES: Route[] = [

  // App Entry-Point

  { path: '', redirectTo: `home`, pathMatch: 'full' },
  {  path: 'home', redirectTo: 'home/en'  },

];

@NgModule({
  imports: [
    RouterModule.forRoot(
      ELEWA_GROUP_WEBSITE_ROUTES,
      {
        scrollPositionRestoration: 'enabled',
        enableTracing: true, 
        onSameUrlNavigation: 'reload'
      }
    )
  ],
  exports: [
    RouterModule
  ]
})
export class AppRoutingModule { }

Your assignment is to implement the routing for the various pages/modules of the website on the file above.

Technical Analysis

This feature will be implemented on apps/elewa-group-website/src/app

Acceptance Criteria

1. All the navigation routes are properly implemented and working.

🎨 Home page - Activity section

Create the home "Activity" section

---

This card depends on:

• #7

---

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

---

Summary

As a user I want a section that shows an overview of all the Elewa company branches
I want a good experience on web and phone

Description

Design:

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

Responsive design:
https://xd.adobe.com/view/7b72572b-b40a-4618-bfa6-5500ab28f13b-2e21/screen/97e91d3f-d00a-4006-a192-02b0810be1ab

Image links

https://res.cloudinary.com/dyl3rncv3/image/upload/v1675690300/elewa-group-website/Icons/PNG/technolagy_sgfgo6.png

https://res.cloudinary.com/dyl3rncv3/image/upload/v1675690300/elewa-group-website/Icons/PNG/Education_hstyzo.png

https://res.cloudinary.com/dyl3rncv3/image/upload/v1675690296/elewa-group-website/Icons/SVG/venturelabs_icon_vfnmpj.svg

Technical Analysis

This feature can be found in libs/pages/home
This feature should be a stand alone component. The page should be different from the element.

Re-use components as much as possible
For the three cards (Elewa, iTalanta, Ventures)

Acceptance Criteria

• 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

:fire: Make Home Page Jobs Section reusable

🎨 Make Home Page Jobs Section reusable

---

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

---

Summary

As a user I want a section I can use to display call to action messages with links to the action.

Description

Currently a component has been implemented on the home-page that enables this feature. Instead of creating a new one, we'll reuse the one already created.

Your task is to create a new reusable component, migrate the code for home-page-jobs-section to this component (html, scss, ts).

Make the home-page-jobs-section reuse this component.

The section has the following Inputs:

1. A message (string)
2. A call to action text (the one in bold and underlined on hover) (string)
3. A text align (should only accept - "center", "left", "right", "justified")
4. A url to navigate to (string)

Use a function on the component file for navigation.

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

Please take note of all the design features (including mobile and rounded corners)

Link to full design:

https://xd.adobe.com/view/7b72572b-b40a-4618-bfa6-5500ab28f13b-2e21/screen/d601deb2-7100-407e-aed2-6c782b5006af

Technical Analysis

Move the reusable component to features/components/banners

The component will be called elewa-call-to-action-banner

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

🎨 Create reusable team member view (Single team member view) - When clicked

Create reusable team member view (Single team member view) - When clicked (Responsive)

---

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

---

Summary

As a user I want a reusable section that shows a team member and some brief info about them

Description

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

1. An Image on the left
2. The name and role of the team member
3. Some paragraphs describing the team member
4. A floating button on the image that links to (LinkedIn)

The team section needs to appear as shown below.

When the cancel button on the top right corner is clicked the section goes back to view on #41.

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/features/components/banners

The component will be called elewa-group-team-member

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