From e61897fef929ed199ca701834c2560ad879b3c52 Mon Sep 17 00:00:00 2001
From: NatSquared <nat.k.weiland@gmail.com>
Date: Tue, 11 Jun 2024 17:02:40 -0700
Subject: [PATCH] Initial commit

---
 CHANGELOG.MD                                  |  11 ++
 .../components/appLayouts/PublicLayout.tsx    |   5 +-
 .../common/Indicators/StatusChip.tsx          |  77 ++++++++++++
 .../src/components/common/Indicators/index.ts |   1 +
 met-web/src/components/common/Input/index.tsx |   1 -
 .../src/components/common/Layout/index.tsx    |  49 +++++---
 .../src/components/common/Navigation/Link.tsx |  18 ++-
 .../src/components/common/Typography/Body.tsx |  41 ++----
 .../components/common/Typography/Headers.tsx  | 108 +++++++++++-----
 .../components/common/Typography/index.tsx    |   2 +-
 .../engagement/new/view/EngagementHero.tsx    |  76 +++++++++++
 .../components/engagement/new/view/index.tsx  | 118 ++++++++++++------
 .../view/EngagementBanner/BannerSection.tsx   |   2 +-
 .../engagement/view/EngagementView.tsx        |  20 ++-
 .../engagement/view/widgets/Map/MapWidget.tsx |   3 +-
 .../src/components/layout/Footer/index.tsx    |   3 +-
 met-web/src/routes/NotFound.tsx               |   2 +-
 met-web/src/routes/UnauthenticatedRoutes.tsx  |  21 +++-
 18 files changed, 431 insertions(+), 127 deletions(-)
 create mode 100644 met-web/src/components/common/Indicators/StatusChip.tsx
 create mode 100644 met-web/src/components/common/Indicators/index.ts
 create mode 100644 met-web/src/components/engagement/new/view/EngagementHero.tsx

diff --git a/CHANGELOG.MD b/CHANGELOG.MD
index 6ff2e5bdc..f8d190160 100644
--- a/CHANGELOG.MD
+++ b/CHANGELOG.MD
@@ -1,3 +1,14 @@
+## June 11, 2024
+
+- **Feature** Add new header to "new look" engagement page [🎟️ DESENG-630](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-630)
+  - Added a new hero image to the new engagement page
+  - Added a header overlaying the hero image
+    - The header uses the sponsor name, CTA message, and CTA URL from DESENG-629, as well as the engagement title, dates, and status
+  - Added new engagement status chips for use in the header
+  - Added link from the old engagement page offering the option to preview the new engagement page
+  - Added global width limit to the public view to avoid display issues on very wide screens
+- **Task** De-duplicate link code and only use \<Link>s from the common/Navigation module
+
 ## June 10, 2024
 
 - **Feature** Add new fields for use in "new look" design [🎟️ DESENG-629](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-629)
diff --git a/met-web/src/components/appLayouts/PublicLayout.tsx b/met-web/src/components/appLayouts/PublicLayout.tsx
index 9dafe23b5..3e792654e 100644
--- a/met-web/src/components/appLayouts/PublicLayout.tsx
+++ b/met-web/src/components/appLayouts/PublicLayout.tsx
@@ -9,10 +9,11 @@ import { FeedbackModal } from 'components/feedback/FeedbackModal';
 import Footer from 'components/layout/Footer';
 import DocumentTitle from 'DocumentTitle';
 import ScrollToTop from 'components/scrollToTop';
+import { WidthLimiter } from 'components/common/Layout';
 
 export const PublicLayout = () => {
     return (
-        <>
+        <WidthLimiter>
             <DocumentTitle />
             <PageViewTracker />
             <Notification />
@@ -22,6 +23,6 @@ export const PublicLayout = () => {
             <Outlet />
             <FeedbackModal />
             <Footer />
-        </>
+        </WidthLimiter>
     );
 };
diff --git a/met-web/src/components/common/Indicators/StatusChip.tsx b/met-web/src/components/common/Indicators/StatusChip.tsx
new file mode 100644
index 000000000..e4e3e5543
--- /dev/null
+++ b/met-web/src/components/common/Indicators/StatusChip.tsx
@@ -0,0 +1,77 @@
+import React from 'react';
+import { Chip as MuiChip } from '@mui/material';
+import { colors } from '..';
+import { SubmissionStatus } from 'constants/engagementStatus';
+
+export interface ChipProps {
+    label?: string;
+    invert?: boolean;
+    statusId: SubmissionStatus;
+}
+
+type StatusText = 'Open' | 'Upcoming' | 'Closed';
+
+export const getStatusFromStatusId = (statusId: SubmissionStatus): StatusText => {
+    switch (statusId) {
+        case SubmissionStatus.Open:
+            return 'Open';
+        case SubmissionStatus.Upcoming:
+            return 'Upcoming';
+        case SubmissionStatus.Closed:
+            return 'Closed';
+        default:
+            return 'Closed';
+    }
+};
+
+export const EngagementStatusChip: React.FC<ChipProps> = ({ label: customLabel, statusId: status, invert }) => {
+    const statusText = getStatusFromStatusId(status);
+    return (
+        <MuiChip
+            label={customLabel || statusText}
+            className={`status-chip status-chip-${statusText.toLowerCase()} ${invert ? 'status-chip-invert' : ''}`}
+            sx={{
+                display: 'inline-flex',
+                height: '28px',
+                justifyContent: 'center',
+                alignItems: 'center',
+                gap: '10px',
+                flexShrink: 0,
+                borderWidth: '1px',
+                borderColor: 'transparent',
+                borderRadius: '24px',
+                '&>.MuiChip-label': {
+                    padding: '4px 16px',
+                    fontSize: '14px',
+                    fontWeight: 700,
+                    lineHeight: '16px',
+                },
+                '&.status-chip-open': {
+                    backgroundColor: colors.surface.blue[80],
+                    color: colors.type.inverted.primary,
+                    '&.status-chip-invert': {
+                        backgroundColor: 'transparent',
+                        borderWidth: '2px',
+                        borderColor: colors.surface.white,
+                    },
+                },
+                '&.status-chip-upcoming': {
+                    backgroundColor: 'transparent',
+                    color: colors.surface.blue[80],
+                    borderColor: colors.surface.blue[80],
+                    borderStyle: 'dashed',
+                    '&.status-chip-invert': {
+                        backgroundColor: 'transparent',
+                        borderColor: colors.surface.white,
+                        color: colors.type.inverted.primary,
+                    },
+                },
+                '&.status-chip-closed': {
+                    backgroundColor: colors.surface.gray[90],
+                    borderColor: colors.surface.gray[100],
+                    color: colors.surface.gray[40],
+                },
+            }}
+        />
+    );
+};
diff --git a/met-web/src/components/common/Indicators/index.ts b/met-web/src/components/common/Indicators/index.ts
new file mode 100644
index 000000000..922ebaa0a
--- /dev/null
+++ b/met-web/src/components/common/Indicators/index.ts
@@ -0,0 +1 @@
+export { EngagementStatusChip } from './StatusChip';
diff --git a/met-web/src/components/common/Input/index.tsx b/met-web/src/components/common/Input/index.tsx
index 214b6c51f..a604e58cd 100644
--- a/met-web/src/components/common/Input/index.tsx
+++ b/met-web/src/components/common/Input/index.tsx
@@ -1,6 +1,5 @@
 export { Button, IconButton } from './Button';
 export { CustomTextField, TextInput, TextField, TextAreaField } from './TextInput';
 export { FormField } from './FormField';
-export { Link } from '../Navigation/Link';
 export { CommonSelect } from './Select';
 export { Pagination } from './Pagination';
diff --git a/met-web/src/components/common/Layout/index.tsx b/met-web/src/components/common/Layout/index.tsx
index d0fb6e997..593f3b34e 100644
--- a/met-web/src/components/common/Layout/index.tsx
+++ b/met-web/src/components/common/Layout/index.tsx
@@ -1,30 +1,13 @@
 import React from 'react';
-import { Box, BoxProps, Theme, useMediaQuery, useTheme } from '@mui/material';
+import { Box, BoxProps } from '@mui/material';
 import { Outlet } from 'react-router-dom';
 
-const useDesktopOrLarger = (theme: Theme) => useMediaQuery(theme.breakpoints.up('md'));
-const useTabletOrLarger = (theme: Theme) => useMediaQuery(theme.breakpoints.up('sm'));
-
 // A container that decreases its padding on smaller screens
 export const ResponsiveContainer: React.FC<BoxProps> = (props: BoxProps) => {
-    const theme = useTheme();
-    const isDesktopOrLarger = useDesktopOrLarger(theme);
-    const isTabletOrLarger = useTabletOrLarger(theme);
-
-    const horizontalPadding = () => {
-        if (isDesktopOrLarger) {
-            return '2em';
-        } else if (isTabletOrLarger) {
-            return '1.5em';
-        } else {
-            return '1em';
-        }
-    };
-
     return (
         <Box
             sx={{
-                padding: `1.5em ${horizontalPadding()}`,
+                padding: { xs: '1.5em 1em', md: '1.5em 1.5em', lg: '1.5em 2em' },
             }}
             {...props}
         >
@@ -44,5 +27,33 @@ export const ResponsiveWrapper: React.FC = () => {
     );
 };
 
+export const WidthLimiter: React.FC<BoxProps & { innerProps?: BoxProps }> = ({ children, innerProps, ...props }) => {
+    return (
+        <Box
+            sx={{
+                width: '100%',
+                alignItems: 'center',
+                justifyContent: 'center',
+                background: 'transparent',
+                padding: 0,
+                margin: 0,
+                ...props.sx,
+            }}
+            {...props}
+        >
+            <Box
+                sx={{
+                    maxWidth: '1920px',
+                    margin: '0 auto',
+                    ...innerProps?.sx,
+                }}
+                {...innerProps}
+            >
+                {children}
+            </Box>
+        </Box>
+    );
+};
+
 export { Table, TableHead, TableHeadRow, TableHeadCell, TableBody, TableRow, TableCell, TableContainer } from './Table';
 export { DetailsContainer, Detail } from './Details';
diff --git a/met-web/src/components/common/Navigation/Link.tsx b/met-web/src/components/common/Navigation/Link.tsx
index ac4acfb47..4a477bd9e 100644
--- a/met-web/src/components/common/Navigation/Link.tsx
+++ b/met-web/src/components/common/Navigation/Link.tsx
@@ -10,7 +10,15 @@ interface FocusableNavLinkProps extends MuiLinkProps {
     size?: 'small' | 'regular' | 'large';
 }
 
-export const Link: React.FC<FocusableNavLinkProps> = ({ children, size = 'regular', to, href, onClick, ...props }) => {
+export const Link: React.FC<FocusableNavLinkProps> = ({
+    children,
+    size = 'regular',
+    to,
+    href,
+    onClick,
+    color,
+    ...props
+}) => {
     const fontSize = {
         small: '14px',
         regular: '16px',
@@ -21,6 +29,7 @@ export const Link: React.FC<FocusableNavLinkProps> = ({ children, size = 'regula
         regular: '1.5',
         large: '1.625',
     }[size];
+    const textColor = color ?? colors.surface.blue[90];
     return (
         <MuiLink
             onClick={onClick}
@@ -28,9 +37,14 @@ export const Link: React.FC<FocusableNavLinkProps> = ({ children, size = 'regula
             to={to}
             href={href}
             sx={{
+                color: textColor,
+                textDecorationColor: textColor,
                 '&:focus-visible': {
                     outline: `2px solid ${colors.focus.regular.outer}`,
-                    outlineOffset: '4px',
+                    outlineOffset: '2px',
+                    boxShadow: '0px 0px 0px 2px white',
+                    padding: '4px',
+                    margin: '-4px',
                 },
                 outline: 'none',
                 outlineOffset: '2px',
diff --git a/met-web/src/components/common/Typography/Body.tsx b/met-web/src/components/common/Typography/Body.tsx
index 53b687c26..bbd5ea228 100644
--- a/met-web/src/components/common/Typography/Body.tsx
+++ b/met-web/src/components/common/Typography/Body.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Typography, TypographyProps } from '@mui/material';
 import { globalFocusVisible, colors } from '../../common';
-import { Link as RouterLink } from 'react-router-dom';
+import { LinkProps, Link as RouterLink } from 'react-router-dom';
 
 export const BodyText = ({
     bold,
@@ -39,40 +39,25 @@ export const BodyText = ({
     );
 };
 
-export const Link = ({
-    bold,
-    size = 'regular',
+export const EyebrowText = ({
     children,
     ...props
 }: {
-    bold?: boolean;
-    size?: 'small' | 'regular' | 'large';
-    to: string;
     children: React.ReactNode;
-}) => {
-    const fontSize = {
-        small: '14px',
-        regular: '16px',
-        large: '18px',
-    }[size];
-    const lineHeight = {
-        small: '1.375',
-        regular: '1.5',
-        large: '1.625',
-    }[size];
+} & TypographyProps) => {
     return (
-        <RouterLink
-            style={{
-                lineHeight,
-                fontSize,
-                textDecoration: 'none',
-                fontWeight: bold ? 700 : 400,
-                color: colors.type.regular.link,
-                ...globalFocusVisible,
-            }}
+        <Typography
+            variant="body1"
             {...props}
+            sx={{
+                fontSize: '24px',
+                lineHeight: 'normal',
+                fontWeight: 300,
+                color: colors.surface.gray[90],
+                ...props.sx,
+            }}
         >
             {children}
-        </RouterLink>
+        </Typography>
     );
 };
diff --git a/met-web/src/components/common/Typography/Headers.tsx b/met-web/src/components/common/Typography/Headers.tsx
index f4eb19d1a..629435e9f 100644
--- a/met-web/src/components/common/Typography/Headers.tsx
+++ b/met-web/src/components/common/Typography/Headers.tsx
@@ -1,33 +1,85 @@
-import { styled } from '@mui/material';
+import React from 'react';
+import { Typography, TypographyProps } from '@mui/material';
 
-export const Header1 = styled('h1')({
-    lineHeight: '1.5',
-    fontSize: '2rem',
-    marginBottom: '2rem',
-    marginTop: '1.5rem',
-    fontWeight: 700,
-    color: '#292929',
-});
+const fontWeight = (weight: string) => {
+    switch (weight) {
+        case 'bold':
+            return 700;
+        case 'regular':
+            return 400;
+        case 'thin':
+            return 200;
+        default:
+            return 700;
+    }
+};
+
+export const Header1 = ({
+    children,
+    weight = 'bold',
+    ...props
+}: {
+    children: React.ReactNode;
+    weight?: 'bold' | 'regular' | 'thin';
+} & TypographyProps) => {
+    return (
+        <Typography
+            variant="h1"
+            {...props}
+            sx={{
+                lineHeight: '1.5',
+                fontSize: '2rem',
+                marginBottom: '2rem',
+                marginTop: '1.5rem',
+                fontWeight: fontWeight(weight),
+                color: '#292929',
+                ...props.sx,
+            }}
+        >
+            {children}
+        </Typography>
+    );
+};
 
-export const Header2 = styled('h2')<{ decorated?: boolean }>((props) => ({
-    lineHeight: '1.5',
-    fontSize: '1.5rem',
-    marginBottom: '1.5rem',
-    marginTop: '0.5rem',
-    fontWeight: 600,
-    color: '#292929',
-    '&::before': props.decorated
-        ? {
-              backgroundColor: '#FCBA19',
-              content: '""',
-              display: 'block',
-              width: '40px',
-              height: '4px',
-              position: 'relative',
-              bottom: '4px',
-          }
-        : {},
-}));
+export const Header2 = ({
+    children,
+    decorated = false,
+    weight = 'bold',
+    ...props
+}: {
+    children: React.ReactNode;
+    decorated?: boolean;
+    weight?: 'bold' | 'regular' | 'thin';
+} & TypographyProps) => {
+    return (
+        <Typography
+            variant="h2"
+            {...props}
+            sx={{
+                lineHeight: '1.5',
+                fontSize: '1.5rem',
+                marginBottom: '1.5rem',
+                marginTop: '0.5rem',
+                fontWeight: fontWeight(weight),
+                color: '#292929',
+                ...(decorated && {
+                    '&::before': {
+                        backgroundColor: '#FCBA19',
+                        content: '""',
+                        display: 'block',
+                        width: '40px',
+                        height: '4px',
+                        position: 'relative',
+                        bottom: '4px',
+                    },
+                }),
+                ...props.sx,
+            }}
+        >
+            {children}
+        </Typography>
+    );
+};
 
 const Headers = {
     Header1,
diff --git a/met-web/src/components/common/Typography/index.tsx b/met-web/src/components/common/Typography/index.tsx
index 46d983103..0a849b5f4 100644
--- a/met-web/src/components/common/Typography/index.tsx
+++ b/met-web/src/components/common/Typography/index.tsx
@@ -1,2 +1,2 @@
 export { Header1, Header2 } from './Headers';
-export { BodyText } from './Body';
+export { BodyText, EyebrowText } from './Body';
diff --git a/met-web/src/components/engagement/new/view/EngagementHero.tsx b/met-web/src/components/engagement/new/view/EngagementHero.tsx
new file mode 100644
index 000000000..1b993e6e0
--- /dev/null
+++ b/met-web/src/components/engagement/new/view/EngagementHero.tsx
@@ -0,0 +1,76 @@
+import { BodyText, EyebrowText, Header1 } from 'components/common/Typography';
+import React from 'react';
+import { Button } from 'components/common/Input';
+import { Engagement } from 'models/engagement';
+import { Box, Grid } from '@mui/material';
+import { colors } from 'components/common';
+import { EngagementStatusChip } from 'components/common/Indicators';
+import dayjs from 'dayjs';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faChevronRight } from '@fortawesome/pro-regular-svg-icons';
+
+export const EngagementHero = ({ engagement }: { engagement: Engagement }) => {
+    const dateFormat = 'MMM DD, YYYY';
+    const isExternalCTA = engagement.cta_url?.startsWith('http');
+    return (
+        <>
+            <Box
+                sx={{
+                    width: '100%',
+                    height: { xs: '160px', md: '840px' },
+                    background: `url(${engagement.banner_url}) no-repeat center center`,
+                    backgroundSize: 'cover',
+                }}
+            ></Box>
+            <Box
+                sx={{
+                    backgroundColor: colors.surface.white,
+                    width: { xs: '100%', md: '720px' },
+                    minHeight: '120px',
+                    maxWidth: '100vw',
+                    position: { xs: 'relative', md: 'absolute' },
+                    marginTop: { xs: '-24px', md: '-679px' },
+                    marginBottom: { xs: '24px', md: '161px' },
+                    borderRadius: {
+                        xs: '0px 24px 0px 0px', // upper right corner
+                        md: '0px 24px 24px 0px', // upper right and lower right corners
+                    },
+                    padding: { xs: '43px 16px 75px 16px', md: '88px 48px 88px 5vw', lg: '88px 48px 88px 156px' },
+                    boxShadow:
+                        '0px 20px 11px 0px rgba(0, 0, 0, 0.00), 0px 12px 10px 0px rgba(0, 0, 0, 0.01), 0px 7px 9px 0px rgba(0, 0, 0, 0.05), 0px 3px 6px 0px rgba(0, 0, 0, 0.09), 0px 1px 3px 0px rgba(0, 0, 0, 0.10)',
+                }}
+            >
+                <EyebrowText m="0">{engagement.sponsor_name}</EyebrowText>
+                <Grid container mt="16px" flexDirection="row" alignItems="center" columnSpacing={1}>
+                    <Grid item>
+                        <EngagementStatusChip statusId={engagement.submission_status} />
+                    </Grid>
+                    <Grid item>
+                        <BodyText bold size="small" sx={{ color: '#201F1E' }}>
+                            {dayjs(engagement.start_date).format(dateFormat)} to{' '}
+                            {dayjs(engagement.end_date).format(dateFormat)}
+                        </BodyText>
+                    </Grid>
+                </Grid>
+                <Header1 weight="thin" sx={{ color: colors.surface.gray[110], m: '40px 0' }}>
+                    {engagement.name}
+                </Header1>
+                {/* tabIndex={-1} is used to force the button to receive focus instead of the anchor tag */}
+                <a
+                    href={engagement.cta_url || '#cta-section'}
+                    tabIndex={-1}
+                    target={isExternalCTA ? '_blank' : undefined}
+                >
+                    <Button
+                        variant="primary"
+                        icon={<FontAwesomeIcon fontSize={24} icon={faChevronRight} />}
+                        iconPosition="right"
+                        sx={{ borderRadius: '8px' }}
+                    >
+                        {engagement.cta_message || 'Learn more'}
+                    </Button>
+                </a>
+            </Box>
+        </>
+    );
+};
diff --git a/met-web/src/components/engagement/new/view/index.tsx b/met-web/src/components/engagement/new/view/index.tsx
index e847fa88e..083807737 100644
--- a/met-web/src/components/engagement/new/view/index.tsx
+++ b/met-web/src/components/engagement/new/view/index.tsx
@@ -1,49 +1,93 @@
-import { BodyText, Header1 } from 'components/common/Typography';
-import React from 'react';
-import { useParams } from 'react-router-dom';
-import { Link } from 'components/common/Input';
+import { BodyText } from 'components/common/Typography';
+import React, { Suspense } from 'react';
+import { Await, useLoaderData, useParams } from 'react-router-dom';
+import { Link } from 'components/common/Navigation';
+import { Engagement } from 'models/engagement';
+import { Box, Skeleton } from '@mui/material';
+import { EngagementHero } from './EngagementHero';
+import { colors } from 'components/common';
 
 export const ViewEngagement = () => {
     const { slug, language } = useParams();
     const oldLink = `/${slug}/${language}`;
+    const { engagement } = useLoaderData() as { engagement: Engagement };
     return (
         <>
             <header>
-                <Header1>View Engagement "{slug}"</Header1>
+                <Suspense
+                    fallback={
+                        <Skeleton
+                            variant="rectangular"
+                            sx={{
+                                width: '100%',
+                                height: {
+                                    xs: 'unset',
+                                    md: '840px',
+                                },
+                            }}
+                        />
+                    }
+                >
+                    <Await resolve={engagement}>
+                        {(resolvedEngagement: Engagement) => <EngagementHero engagement={resolvedEngagement} />}
+                    </Await>
+                </Suspense>
             </header>
             <main>
-                <BodyText>The new engagement view will be displayed here once work is completed. </BodyText>
-                <BodyText>
-                    For now, please use the <Link to={oldLink}>old view</Link>.
-                </BodyText>
-                <BodyText>Work to be completed: </BodyText>
-                <ul>
-                    <li>
-                        <Link to="https://apps.itsm.gov.bc.ca/jira/browse/DESENG-636">
-                            <s>Create new engagement view page</s>
-                        </Link>
-                    </li>
-                    <li>
-                        <Link to="https://apps.itsm.gov.bc.ca/jira/browse/DESENG-630">
-                            Add new header section to the new engagement view
-                        </Link>
-                    </li>
-                    <li>
-                        <Link to="https://apps.itsm.gov.bc.ca/jira/browse/DESENG-631">
-                            Add new Engagement description section
-                        </Link>
-                    </li>
-                    <li>
-                        <Link to="https://apps.itsm.gov.bc.ca/jira/browse/DESENG-632">
-                            Add new Dynamic pages section
-                        </Link>
-                    </li>
-                    <li>
-                        <Link to="https://apps.itsm.gov.bc.ca/jira/browse/DESENG-633">
-                            Add new Survey block section
-                        </Link>
-                    </li>
-                </ul>
+                <Box
+                    sx={{
+                        background: colors.surface.blue[90],
+                        color: colors.surface.white,
+                        borderRadius: '0px 24px 0px 0px' /* upper right corner */,
+                        padding: { xs: '32px 16px', md: '32px 5vw', lg: '32px 156px' },
+                        marginTop: '-32px',
+                        zIndex: 10,
+                        position: 'relative',
+                    }}
+                >
+                    <section id="cta-section">
+                        {/* TODO: create dark theme provider for this area*/}
+                        <BodyText sx={{ color: colors.surface.white }}>
+                            You are viewing a <b>preview</b> of the new engagement page. It will replace the old page
+                            once all features are completed.
+                        </BodyText>
+                        <BodyText sx={{ color: colors.surface.white }}>
+                            For now, you can use the{' '}
+                            <Link color="white" to={oldLink}>
+                                existing page
+                            </Link>{' '}
+                            for access to all features.
+                        </BodyText>
+                        <BodyText sx={{ color: colors.surface.white }}>Work to be completed: </BodyText>
+                        <ol>
+                            <li>
+                                <Link color="white" to="https://apps.itsm.gov.bc.ca/jira/browse/DESENG-636">
+                                    <s>Create new engagement view page</s>
+                                </Link>
+                            </li>
+                            <li>
+                                <Link color="white" to="https://apps.itsm.gov.bc.ca/jira/browse/DESENG-630">
+                                    <s>Add new header section to the new engagement view</s>
+                                </Link>
+                            </li>
+                            <li>
+                                <Link color="white" to="https://apps.itsm.gov.bc.ca/jira/browse/DESENG-631">
+                                    Add new Engagement description section
+                                </Link>
+                            </li>
+                            <li>
+                                <Link color="white" to="https://apps.itsm.gov.bc.ca/jira/browse/DESENG-632">
+                                    Add new Dynamic pages section
+                                </Link>
+                            </li>
+                            <li>
+                                <Link color="white" to="https://apps.itsm.gov.bc.ca/jira/browse/DESENG-633">
+                                    Add new Survey block section
+                                </Link>
+                            </li>
+                        </ol>
+                    </section>
+                </Box>
             </main>
         </>
     );
diff --git a/met-web/src/components/engagement/view/EngagementBanner/BannerSection.tsx b/met-web/src/components/engagement/view/EngagementBanner/BannerSection.tsx
index cad40baef..f63e93a8e 100644
--- a/met-web/src/components/engagement/view/EngagementBanner/BannerSection.tsx
+++ b/met-web/src/components/engagement/view/EngagementBanner/BannerSection.tsx
@@ -14,7 +14,7 @@ export interface EngagementBannerProps {
 }
 export const BannerSection = ({ isEngagementLoading, savedEngagement, surveyButton }: EngagementBannerProps) => {
     if (isEngagementLoading || !savedEngagement) {
-        return <Skeleton variant="rectangular" width="100%" height="35em" />;
+        return <Skeleton variant="rectangular" width="100%" height="480px" />;
     }
 
     return (
diff --git a/met-web/src/components/engagement/view/EngagementView.tsx b/met-web/src/components/engagement/view/EngagementView.tsx
index 26d48e7e7..fd5100315 100644
--- a/met-web/src/components/engagement/view/EngagementView.tsx
+++ b/met-web/src/components/engagement/view/EngagementView.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from 'react';
+import React, { Suspense, useContext, useEffect, useState } from 'react';
 import { Grid, useMediaQuery, Theme } from '@mui/material';
 import { ActionContext } from './ActionContext';
 import { LanguageContext } from 'components/common/LanguageContext';
@@ -13,6 +13,12 @@ import WidgetBlock from './widgets/WidgetBlock';
 import { Else, If, Then } from 'react-if';
 import { getAvailableTranslationLanguages } from 'services/engagementService';
 import { EngagementBanner } from './EngagementBanner';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faSparkles } from '@fortawesome/pro-regular-svg-icons';
+import { colors } from 'components/common';
+import { Link } from 'components/common/Navigation';
+import { getSlugByEngagementId } from 'services/engagementSlugService';
+import { Await } from 'react-router-dom';
 
 export const EngagementView = () => {
     const { state } = useLocation() as RouteState;
@@ -26,6 +32,7 @@ export const EngagementView = () => {
     const navigate = useNavigate();
     //Clear state on window refresh
     window.history.replaceState({}, document.title);
+    const engagementSlug = savedEngagement.id ? getSlugByEngagementId(savedEngagement.id) : undefined;
 
     const isMediumScreen: boolean = useMediaQuery((theme: Theme) => theme.breakpoints.up('md'));
 
@@ -79,6 +86,17 @@ export const EngagementView = () => {
                 <Grid item xs={12}>
                     <EngagementBanner />
                 </Grid>
+                {!isLoggedIn && (
+                    <Grid item xs={12} sx={{ backgroundColor: colors.surface.gold[20], padding: '1em 4em' }}>
+                        <FontAwesomeIcon icon={faSparkles} style={{ marginRight: '0.5em' }} />
+                        There is a new look coming to the engagement page soon.{' '}
+                        <Suspense fallback={null}>
+                            <Await resolve={engagementSlug}>
+                                {(slug) => slug && <Link to={`/new-look/${slug.slug}/en`}>Preview it now?</Link>}
+                            </Await>
+                        </Suspense>
+                    </Grid>
+                )}
                 <Grid
                     container
                     item
diff --git a/met-web/src/components/engagement/view/widgets/Map/MapWidget.tsx b/met-web/src/components/engagement/view/widgets/Map/MapWidget.tsx
index 85b81c207..7b2648d15 100644
--- a/met-web/src/components/engagement/view/widgets/Map/MapWidget.tsx
+++ b/met-web/src/components/engagement/view/widgets/Map/MapWidget.tsx
@@ -10,7 +10,8 @@ import { WidgetMap } from 'models/widgetMap';
 import { ExpandModal } from './ExpandModal';
 import { When } from 'react-if';
 import { geoJSONDecode, calculateZoomLevel } from 'components/engagement/form/EngagementWidgets/Map/utils';
-import { IconButton, Link } from 'components/common/Input';
+import { IconButton } from 'components/common/Input';
+import { Link } from 'components/common/Navigation';
 import { faExpand } from '@fortawesome/pro-solid-svg-icons/faExpand';
 
 interface MapWidgetProps {
diff --git a/met-web/src/components/layout/Footer/index.tsx b/met-web/src/components/layout/Footer/index.tsx
index c42025f6b..df772611f 100644
--- a/met-web/src/components/layout/Footer/index.tsx
+++ b/met-web/src/components/layout/Footer/index.tsx
@@ -12,7 +12,8 @@ import { Unless } from 'react-if';
 import { FOOTER_COLORS } from './constants';
 import { useAppTranslation } from 'hooks';
 import { getBaseUrl } from 'helper';
-import { IconButton, Link } from 'components/common/Input';
+import { IconButton } from 'components/common/Input';
+import { Link } from 'components/common/Navigation';
 
 const Footer = () => {
     const baseURL = getBaseUrl();
diff --git a/met-web/src/routes/NotFound.tsx b/met-web/src/routes/NotFound.tsx
index b58a3b9d7..73cc3e9cd 100644
--- a/met-web/src/routes/NotFound.tsx
+++ b/met-web/src/routes/NotFound.tsx
@@ -62,7 +62,7 @@ const NotFound = () => {
                     />
                 </Grid>
                 <Grid item xs={6} justifyContent="center" mb={4}>
-                    <MetHeader4 align="flex-start" bold>
+                    <MetHeader4 align="left" bold>
                         {translate('notFound.header.1')}
                     </MetHeader4>
                 </Grid>
diff --git a/met-web/src/routes/UnauthenticatedRoutes.tsx b/met-web/src/routes/UnauthenticatedRoutes.tsx
index f6c021a04..b29fb778c 100644
--- a/met-web/src/routes/UnauthenticatedRoutes.tsx
+++ b/met-web/src/routes/UnauthenticatedRoutes.tsx
@@ -10,10 +10,11 @@ import ManageSubscription from '../components/engagement/view/widgets/Subscribe/
 import { FormCAC } from 'components/FormCAC';
 import { RedirectLogin } from './RedirectLogin';
 import withLanguageParam from './LanguageParam';
-import { Navigate, Route } from 'react-router-dom';
+import { Navigate, Params, Route, defer } from 'react-router-dom';
 import NotFound from './NotFound';
 import ViewEngagement from 'components/engagement/new/view';
-import { ResponsiveWrapper } from 'components/common/Layout';
+import { getEngagement } from 'services/engagementService';
+import { getEngagementIdBySlug } from 'services/engagementSlugService';
 
 const ManageSubscriptionWrapper = withLanguageParam(ManageSubscription);
 const EngagementViewWrapper = withLanguageParam(EngagementView);
@@ -29,9 +30,21 @@ const UnauthenticatedRoutes = () => {
         <>
             <Route path="/" element={<Landing />} />
             <Route path="/surveys/submit/:surveyId/:token/:language" element={<SurveySubmitWrapper />} />
-            <Route path="/new-look" element={<ResponsiveWrapper />}>
+            <Route path="/new-look">
                 <Route index element={<Navigate to="/" />} />
-                <Route path=":slug/:language" element={<ViewEngagement />} />
+                <Route
+                    path=":slug/:language"
+                    loader={async ({ params }: { params: Params<string> }) => {
+                        const { slug } = params;
+                        const engagement = getEngagementIdBySlug(slug ?? '').then((response) =>
+                            getEngagement(response.engagement_id),
+                        );
+                        return defer({ engagement, slug });
+                    }}
+                    errorElement={<NotFound />}
+                    element={<ViewEngagement />}
+                />
+                <Route path=":engagementId/view/:language" element={<EngagementViewWrapper />} />
             </Route>
             <Route path="/engagements">
                 <Route path="create/form/:language" element={<RedirectLoginWrapper />} />