Merge branch 'fix/fourhundredFour-page' into develop

IFRCGo · Oct 15, 2024 · 97d1d64 · 97d1d64
2 parents 1620715 + c9dc7ee
commit 97d1d64
Show file tree

Hide file tree

Showing 6 changed files with 295 additions and 75 deletions.
diff --git a/.changeset/fluffy-months-film.md b/.changeset/fluffy-months-film.md
@@ -0,0 +1,5 @@
+---
+"go-web-app": patch
+---
+
+Add a new 404 page
diff --git a/app/src/assets/content/four_hundred_four.svg b/app/src/assets/content/four_hundred_four.svg
diff --git a/app/src/assets/content/four_hundred_four_background.svg b/app/src/assets/content/four_hundred_four_background.svg
diff --git a/app/src/views/FourHundredFour/i18n.json b/app/src/views/FourHundredFour/i18n.json
@@ -2,11 +2,11 @@
     "namespace": "common",
     "strings": {
         "uhohPageNotFoundTitle":"IFRC GO - Page not found",
-        "uhohPageNotFound":"Page not found",
-        "uhohPageDescription":"The requested page does not exist or may have been removed.",
-        "uhohAreYouSureUrlIsCorrect":"Are you sure the URL is correct?",
-        "uhohGetInTouch":"Get in touch",
-        "uhohWithThePlatformTeam":"with the platform team.",
-        "uhohExploreOurHomepage":"Explore our homepage"
+        "uhohOops":"Oops!",
+        "uhohPageDescriptionOne": "This page seems to have wandered off.",
+        "uhohPageDescriptionTwo":"Let's go back home and try again.",
+        "uhohBackToHome":"Back to Home",
+        "fourHundredFourBackgroundImage": "Four hundred four background image",
+        "fourHundredFour":"Four hundred four"
     }
 }
diff --git a/app/src/views/FourHundredFour/index.tsx b/app/src/views/FourHundredFour/index.tsx
@@ -1,7 +1,8 @@
-import { SearchLineIcon } from '@ifrc-go/icons';
 import { Heading } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 
+import fourHundredFour from '#assets/content/four_hundred_four.svg';
+import fourHundredFourBackgroundImage from '#assets/content/four_hundred_four_background.svg';
 import Link from '#components/Link';
 import Page from '#components/Page';
 
@@ -14,49 +15,43 @@ export function Component() {
 
     return (
         <Page
-            className={styles.fourHundredFour}
             title={strings.uhohPageNotFoundTitle}
-            mainSectionContainerClassName={styles.mainSectionContainer}
             mainSectionClassName={styles.main}
+            mainSectionContainerClassName={styles.mainContainer}
         >
-            <div className={styles.topSection}>
+            <div className={styles.backgroundLayer}>
+                <img
+                    className={styles.image}
+                    src={fourHundredFourBackgroundImage}
+                    alt={strings.fourHundredFourBackgroundImage}
+                />
+            </div>
+            <div className={styles.fourHundredFourHeading}>
+                <img
+                    className={styles.image}
+                    src={fourHundredFour}
+                    alt={strings.fourHundredFour}
+                />
+            </div>
+            <div className={styles.content}>
                 <Heading
                     level={1}
-                    className={styles.heading}
                 >
-                    <div className={styles.icons}>
-                        <SearchLineIcon className={styles.searchIcon} />
-                        <Heading
-                            level={2}
-                        >
-                            404
-                        </Heading>
-                    </div>
-                    {strings.uhohPageNotFound}
+                    {strings.uhohOops}
                 </Heading>
                 <div className={styles.description}>
-                    {strings.uhohPageDescription}
+                    {strings.uhohPageDescriptionOne}
                 </div>
-            </div>
-            <div className={styles.bottomSection}>
-                {strings.uhohAreYouSureUrlIsCorrect}
-                <div className={styles.text}>
-                    <Link
-                        href="mailto:im@ifrc.org"
-                        external
-                    >
-                        {strings.uhohGetInTouch}
-                    </Link>
-                    &nbsp;
-                    {strings.uhohWithThePlatformTeam}
+                <div className={styles.description}>
+                    {strings.uhohPageDescriptionTwo}
                 </div>
-                <Link
-                    to="home"
-                    variant="primary"
-                >
-                    {strings.uhohExploreOurHomepage}
-                </Link>
             </div>
+            <Link
+                to="home"
+                variant="primary"
+            >
+                {strings.uhohBackToHome}
+            </Link>
         </Page>
     );
 }