Implement About page components from the Figma design by HelNershingThapa · Pull Request #6050 · hotosm/tasking-manager

HelNershingThapa · 2023-09-05T04:57:56Z

Resolves #6019

This pull request addresses the task of translating the Figma design for the About page into code. It Introduced UI components for all sections of the About page.

Things to Do to Consider This PR Done

Text Revision: Review and revise the text content for the entire page.
Interest Cards: Create and add cards for all interest options within the "We Are Creating Change" section. Implement horizontal scrolling for a user-friendly interface.
Statistics: Determine and incorporate the specific statistics that must be displayed on the page.
Communication Channels: Integrate and link the communication channels from the "Get In Touch" section to ensure users can easily connect with us.
Bing Icon Fix: Address the issue where the Bing Icon appears disarranged on larger screens and implement a solution to ensure proper alignment and display.

Screenshots:
Desktop:

Tablet:

Mobile:

- Refactored the homepage by creating a reusable component, `OverlayListDisplay`, for the "Who Is Mapping" section. This component efficiently handles content display for both dark and light variants. Integrated the new `OverlayListDisplay` component into the `WhoIsMapping` component section. - Replaced all organization PNG icons in the assets folder with corresponding SVG icons sourced from the Figma design. Additionally, updated Bing's icon to a newer version. Introduced the `isShowWhiteLogo` prop for all SVG icons to control the display of white logos on the homepage and original logos on the about page.