From 6faebab143d63529271446c0510832a3cd9cf304 Mon Sep 17 00:00:00 2001
From: frozenhelium <ankit.mehta@togglecorp.com>
Date: Tue, 23 Apr 2024 20:39:14 +0545
Subject: [PATCH] Improve styling of about page

---
 src/components/Navbar/index.tsx             |   3 +-
 src/components/Page/index.tsx               |   6 +-
 src/{assets => views/About}/about.png       | Bin
 src/{assets => views/About}/homepage_bg.png | Bin
 src/views/About/i18n.json                   |   8 +-
 src/views/About/index.tsx                   |  86 ++++++++++++--------
 src/views/About/styles.module.css           |  54 +++++++-----
 7 files changed, 94 insertions(+), 63 deletions(-)
 rename src/{assets => views/About}/about.png (100%)
 rename src/{assets => views/About}/homepage_bg.png (100%)

diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
index cf89e947..88dbef05 100644
--- a/src/components/Navbar/index.tsx
+++ b/src/components/Navbar/index.tsx
@@ -55,10 +55,9 @@ function Navbar(props: Props) {
                     variant="tertiary"
                 >
                     <LangaugeDropdown />
-                    {/* // FIXME: Add About route */}
                     <Link
                         className={styles.actionItem}
-                        to="about"
+                        to={routes.about.absolutePath}
                     >
                         {strings.appAbout}
                     </Link>
diff --git a/src/components/Page/index.tsx b/src/components/Page/index.tsx
index 8ffdd6f9..0b4829fd 100644
--- a/src/components/Page/index.tsx
+++ b/src/components/Page/index.tsx
@@ -77,11 +77,7 @@ function Page(props: Props) {
             )}
             ref={elementRef}
         >
-            {beforeHeaderContent && (
-                <PageContainer>
-                    {beforeHeaderContent}
-                </PageContainer>
-            )}
+            {beforeHeaderContent && beforeHeaderContent}
             {isNotDefined(blockingContent) && showPageContainer && (
                 <PageHeader
                     className={_cs(
diff --git a/src/assets/about.png b/src/views/About/about.png
similarity index 100%
rename from src/assets/about.png
rename to src/views/About/about.png
diff --git a/src/assets/homepage_bg.png b/src/views/About/homepage_bg.png
similarity index 100%
rename from src/assets/homepage_bg.png
rename to src/views/About/homepage_bg.png
diff --git a/src/views/About/i18n.json b/src/views/About/i18n.json
index ef085774..8949d313 100644
--- a/src/views/About/i18n.json
+++ b/src/views/About/i18n.json
@@ -4,19 +4,19 @@
         "aboutTheGoalTitile": "The Goal",
         "aboutGoalDescription":"The goal of the IFRC Alert Hub is to ensure that communities everywhere receive the most timely and effective emergency alerting possible, and can thereby take action to safeguard their lives and livelihoods.",
         "aboutimage":"",
-        "aboutTheProblemTitle":"THE PROBLEM",
+        "aboutTheProblemTitle":"The Problem",
         "aboutTheProblemDescription":"Every year, millions of people are killed, injured, displaced or made poor by natural hazards whose impacts could have been prevented or reduced. Too much of this loss is due to ineffective public warning: emergency alerts that are not timely enough, difficult to understand or fail to reach everyone at risk.",
         "aboutProblemFactorsIncluding":"This failure to reach people is due to a number of factors including:",
         "aboutTheProblemHazardInformation":"Hazard information that is not communicated effectively or in a consistent format;",
         "aboutTheProblemOverlyComplicated":"Overly complicated, data-heavy messages that are not contextually appropriate nor understandable by the general public;",
         "aboutTheProblemActionableGuidance":"A lack of actionable guidance that people can understand and trust on how to stay safe;",
         "aboutTheProblemLimitedBroadcasting":"Limited broadcasting of hazard alerts across too few communication channels.",    
-        "aboutTheSolutionTitle":"THE SOLUTION",
+        "aboutTheSolutionTitle":"The Solution",
         "aboutTheSolutionDescription":"The IFRC Alert Hub aims to address this situation by leveraging modern communications technology and proven international standards to increase the delivery of reliable, actionable emergency alerts and encourage anticipatory action by people in harm’s way.",
         "aboutSolutionSteps":"This will be done by:",
         "aboutSolutionStep1":"increasing access for the media and online networks to official government alerts published using the Common Alerting Protocol (CAP), a digital format for exchanging emergency alerts, which allows a consistent alert message to be disseminated simultaneously over multiple communications pathways",
         "aboutSolutionStep2":"facilitate the pairing of the CAP hazard alerts with locally contextualized and actionable public awareness and public education messages that have been developed and agreed to by national governments and emergency management organizations.",
-        "aboutDisclaimerTitle":"DISCLAIMER",
+        "aboutDisclaimerTitle":"Disclaimer",
         "aboutDisclaimerDescription":"The IFRC Alert Hub publishes only official alerts issued by recognised government alerting agencies. Alerts are not issued or published by the IFRC or its member Red Cross and Red Crescent National Societies. The IFRC takes no responsibility for the information contained in the alerts, which is solely the responsibility of the issuing agency. The IFRC makes every effort to identify broken government alert feeds and to highlight this information for users of the Alert Hub. However, the IFRC does not maintain 24/7 monitoring of the status of the government feeds and it is the responsibility of Alert Hub users to identify redundant sources of hazard alert information."
     }
-}
\ No newline at end of file
+}
diff --git a/src/views/About/index.tsx b/src/views/About/index.tsx
index 15ff9c34..97837fba 100644
--- a/src/views/About/index.tsx
+++ b/src/views/About/index.tsx
@@ -1,8 +1,15 @@
-import { Container } from '@ifrc-go/ui';
+import {
+    Container,
+    Header,
+    PageContainer,
+} from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 
 import Page from '#components/Page';
 
+import aboutIcon from './about.png';
+import backgroundImage from './homepage_bg.png';
+
 import i18n from './i18n.json';
 import styles from './styles.module.css';
 
@@ -11,30 +18,43 @@ export function Component() {
     const strings = useTranslation(i18n);
 
     return (
-
         <Page
-            mainSectionClassName={styles.aboutPage}
-        >
-            <Container>
-                <div className={styles.content}>
-                    <div className={styles.text}>
-                        <h2>{strings.aboutTheGoalTitile}</h2>
-                        <p>{strings.aboutGoalDescription}</p>
-                    </div>
-                    <div className={styles.image}>
+            title="AlertHub - About"
+            className={styles.about}
+            beforeHeaderContent={(
+                <div className={styles.headerContainer}>
+                    <img
+                        className={styles.backgroundImage}
+                        src={backgroundImage}
+                        alt=""
+                    />
+                    <PageContainer
+                        className={styles.headerContentSection}
+                        contentClassName={styles.content}
+                    >
+                        <Header
+                            className={styles.header}
+                            heading={strings.aboutTheGoalTitile}
+                            headingLevel={1}
+                            childrenContainerClassName={styles.description}
+                            spacing="loose"
+                        >
+                            {strings.aboutGoalDescription}
+                        </Header>
                         <img
-                            src="src/assets/about.png"
+                            className={styles.aboutIcon}
+                            src={aboutIcon}
                             alt=""
                         />
-                    </div>
+                    </PageContainer>
                 </div>
-
-            </Container>
-
+            )}
+            mainSectionClassName={styles.pageContent}
+        >
             <Container
                 heading={strings.aboutTheProblemTitle}
-                childrenContainerClassName={styles.aboutSubHeading}
                 withHeaderBorder
+                contentViewType="vertical"
             >
                 <div>
                     {strings.aboutTheProblemDescription}
@@ -42,34 +62,36 @@ export function Component() {
                 <div>
                     {strings.aboutProblemFactorsIncluding}
                 </div>
-                <li>
-                    {strings.aboutTheProblemHazardInformation}
-                </li>
-                <li>
-                    {strings.aboutTheProblemOverlyComplicated}
-                </li>
-                <li>
-                    {strings.aboutTheProblemActionableGuidance}
-                </li>
-                <li>
-                    {strings.aboutTheProblemLimitedBroadcasting}
-                </li>
+                <ul>
+                    <li>
+                        {strings.aboutTheProblemHazardInformation}
+                    </li>
+                    <li>
+                        {strings.aboutTheProblemOverlyComplicated}
+                    </li>
+                    <li>
+                        {strings.aboutTheProblemActionableGuidance}
+                    </li>
+                    <li>
+                        {strings.aboutTheProblemLimitedBroadcasting}
+                    </li>
+                </ul>
             </Container>
             <Container
                 heading={strings.aboutTheSolutionTitle}
-                childrenContainerClassName={styles.aboutSubHeading}
                 withHeaderBorder
+                contentViewType="vertical"
             >
                 <div>{strings.aboutTheSolutionDescription}</div>
                 <div>{strings.aboutSolutionSteps}</div>
-                <ol className={styles.aboutSolutionList}>
+                <ol>
                     <li>{strings.aboutSolutionStep1}</li>
                     <li>{strings.aboutSolutionStep2}</li>
                 </ol>
             </Container>
             <Container
                 heading={strings.aboutDisclaimerTitle}
-                childrenContainerClassName={styles.aboutSubHeading}
+                contentViewType="vertical"
                 withHeaderBorder
             >
                 <div>{strings.aboutDisclaimerDescription}</div>
diff --git a/src/views/About/styles.module.css b/src/views/About/styles.module.css
index 0ee1c344..69d13950 100644
--- a/src/views/About/styles.module.css
+++ b/src/views/About/styles.module.css
@@ -1,28 +1,42 @@
-.about-page {
-    display: flex;
-    flex-direction: column;
-    gap: var(--go-ui-spacing-lg);
-    margin-bottom: 10;
-    background-image: url(src/assets/homepage_bg.png);
-    background-repeat: no-repeat;
+.about {
+    .header-container {
+        position: relative;
+        background-image: url(src/assets/homepage_bg.png);
+        background-repeat: no-repeat;
 
-    .content {
-        display: flex;
+        .background-image {
+            position: absolute;
+            z-index: -1;
+            width: 100%;
+            height: 100%;
+        }
+
+        .header-content-section {
+            height: 100%;
+            min-height: 30rem;
+
+            .content {
+                display: flex;
+                align-items: center;
 
-        .text{
-            color :white;
-           /* color: var(--go-ui-color-primary-white);*/
+                .header {
+                    color: var(--go-ui-color-white);
+
+                    .about-icon {
+                        height: 20rem;
+                    }
+
+                    .description {
+                        font-size: var(--go-ui-font-size-xl);
+                    }
+                }
+            }
         }
     }
 
-    .about-sub-heading {
+    .page-content {
         display: flex;
         flex-direction: column;
-        gap: var(--go-ui-spacing-md);
-    }
-
-    .about-solution-list {
-        margin: 0;
-        padding: var(--go-ui-spacing-xs);
+        gap: var(--go-ui-spacing-2xl);
     }
-}
\ No newline at end of file
+}