Improve styling of about page

IFRCGo · Apr 23, 2024 · 6faebab · 6faebab
1 parent 495faa2
commit 6faebab
Show file tree

Hide file tree

Showing 7 changed files with 94 additions and 63 deletions.
diff --git 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
@@ -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 → src/views/About/about.png b/src/assets/about.png → src/views/About/about.png
diff --git a/src/assets/homepage_bg.png → src/views/About/homepage_bg.png b/src/assets/homepage_bg.png → src/views/About/homepage_bg.png
diff --git 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."
     }
-}
+}
diff --git 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,65 +18,80 @@ 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}
                 </div>
                 <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
@@ -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);
     }
-}
+}