feature/dep315: Modified app layout, added new landing components, refactored landing components, other misc fixes.

Author: jareth-whitney

CHANGELOG.MD

@@ -1,3 +1,19 @@
+## Jul 7, 2026
+
+- **Feature** Integrated new landing hero section and introduction [🎟️ DEP-315](https://citz-gdx.atlassian.net/browse/DEP-315)
+    - Refactored existing landing code for structural simplicity
+    - Created a reusable container/section block that can be reused anywhere
+    - Added params to URL for future filter updating (can be decoupled easily if not desired)
+    - Implemented UX designs (mobile and desktop)
+    - Removed app's square box that appears at bigger viewports
+    - Ensured that other layouts were not negatively affected by change (admin, admin landing preview, admin engagement preview)
+        - Added constrained option for internal header component as an optional boolean prop
+- Fixed: Engagement preview was looking for route loader address that didn't exist
+- Fixed: Slug was not being populated with SuggestedEngagementAttachment, so Suggested Engagement links were not working
+- Fixed: Small typo in security response headers of API
+- Fixed: Console error for authoring section details tabs, selection/list mismatch
+- Enhanced: Notification banner now supports multiple lines for mobile (or long messages, if needed in the future)
+
 ## June 23, 2026
 
 - **Feature** Imported CHEFS components into DEP [🎟️ DEP-275](https://citz-gdx.atlassian.net/browse/DEP-275)

api/src/api/__init__.py

@@ -57,9 +57,9 @@ def _deprecated_print(*args, **kwargs):
 csp = (
     secure.ContentSecurityPolicy()
     .default_src("'self'")
-    .script_src("'self' 'unsafe-inline'")
-    .style_src("'self' 'unsafe-inline'")
-    .img_src("'self' data:")
+    .script_src("'self'", "'unsafe-inline'")
+    .style_src("'self'", "'unsafe-inline'")
+    .img_src("'self'", "'data:'")
     .object_src("'self'")
     .connect_src("'self'")
 )

api/src/api/schemas/suggested_engagement.py

@@ -70,6 +70,7 @@ class SuggestedEngagementAttachment(Schema):
     is_internal = fields.Bool(data_key='is_internal')
     consent_message = fields.Str(data_key='consent_message')
     sponsor_name = fields.Str(data_key='sponsor_name')
+    slug = fields.Str(data_key='slug')
 
     def get_banner_url(self, obj):
         """Return the object storage URL for the banner image."""

web/src/DocumentTitle.tsx

@@ -39,7 +39,6 @@ const DocumentTitle = () => {
         const resolveTitle = async () => {
             const crumbs = await getResolvedCrumbs(matches);
             if (cancelled) return;
-            console.log('Resolved crumbs for title:', crumbs);
             const filteredCrumbs = crumbs
                 // Exclude crumbs that are marked as index pages UNLESS they are the current page
                 .filter((crumb, index) => (crumb?.title ?? crumb?.name) && (index == 0 || !crumb?.isIndex))

web/src/components/appLayouts/PublicLayout.tsx

@@ -30,18 +30,16 @@ export const PublicLayout = () => {
         >
             <Box
                 sx={{
-                    maxWidth: '1926px',
-                    margin: '0 auto',
                     background: colors.surface.white,
                 }}
             >
                 <DocumentTitle />
                 <PageViewTracker />
                 <Notification />
                 <NotificationModal />
-                {isAuthenticated ? <InternalHeader showSideNav={false} /> : <PublicHeader />}
+                {isAuthenticated ? <InternalHeader constrained showSideNav={false} /> : <PublicHeader />}
                 <ScrollToTop />
-                <Box component="main" sx={isAuthenticated ? { marginTop: { xs: '3.5em', md: '6.5em' } } : undefined}>
+                <Box component="main" sx={{ marginTop: isAuthenticated ? '3.375em' : 0 }}>
                     <Outlet />
                 </Box>
                 <FeedbackModal />

web/src/components/engagement/admin/create/authoring/AuthoringDetails.tsx

@@ -566,7 +566,7 @@ const AuthoringDetails = () => {
             </AuthoringFormContainer>
 
             {/* Tab instructions */}
-            {currentTab && (
+            {currentTab && authoringDetailsTabs?.length > 0 && (
                 <TabContext value={currentTab}>
                     <AuthoringFormContainer rowSpacing="2rem" pt="0.5rem" isHydrating={isHydrating}>
                         {tabsEnabled && (

web/src/components/engagement/preview/EngagementPreview.tsx

@@ -186,7 +186,8 @@ const MeasurementBar: React.FC = () => {
  * modifying the actual engagement.
  */
 export const EngagementPreview: React.FC = () => {
-    const loaderData = useRouteLoaderData('public-single-engagement') as EngagementLoaderPublicData;
+    const loaderData = useRouteLoaderData('engagement-preview') as EngagementLoaderPublicData;
+    const { engagement, widgets, details, metadata, suggestions } = loaderData ?? {};
     const { engagementId, languageCode } = useParams();
     const revalidator = useRevalidator();
     const [previewState, setPreviewState] = useState<SubmissionStatusTypes>('Upcoming');
@@ -243,12 +244,12 @@ export const EngagementPreview: React.FC = () => {
 
     useEffect(() => {
         setContentVersion((previous) => previous + 1);
-    }, [loaderData.engagement, loaderData.widgets, loaderData.details, loaderData.metadata, loaderData.suggestions]);
+    }, [engagement, widgets, details, metadata, suggestions]);
 
     useEffect(() => {
         let isMounted = true;
 
-        loaderData.engagement
+        engagement
             .then((engagement) => {
                 if (!isMounted) return;
                 setResolvedEngagement(engagement);
@@ -261,19 +262,13 @@ export const EngagementPreview: React.FC = () => {
         return () => {
             isMounted = false;
         };
-    }, [loaderData.engagement]);
+    }, [engagement]);
 
     useEffect(() => {
         if (!isReloading) return;
 
         let isMounted = true;
-        Promise.allSettled([
-            loaderData.engagement,
-            loaderData.widgets,
-            loaderData.details,
-            loaderData.metadata,
-            loaderData.suggestions,
-        ]).finally(() => {
+        Promise.allSettled([engagement, widgets, details, metadata, suggestions]).finally(() => {
             if (isMounted) {
                 setIsReloading(false);
             }
@@ -282,14 +277,7 @@ export const EngagementPreview: React.FC = () => {
         return () => {
             isMounted = false;
         };
-    }, [
-        isReloading,
-        loaderData.engagement,
-        loaderData.widgets,
-        loaderData.details,
-        loaderData.metadata,
-        loaderData.suggestions,
-    ]);
+    }, [isReloading, engagement, widgets, details, metadata, suggestions]);
 
     useEffect(() => {
         const animateScrollToElement = (targetId: string) => {
@@ -377,7 +365,7 @@ export const EngagementPreview: React.FC = () => {
                       ...resolvedEngagement,
                       submission_status: getSubmissionStatusId(previewState),
                   })
-                : loaderData.engagement,
+                : engagement,
         }),
         [loaderData, resolvedEngagement, previewState],
     );

web/src/components/engagement/preview/PreviewLoaderDataContext.tsx

@@ -14,9 +14,9 @@ export const PreviewLoaderDataProvider: React.FC<PreviewLoaderDataProviderProps>
 };
 
 export const useEngagementLoaderData = (): EngagementLoaderPublicData => {
-    const previewLoaderData = useContext(PreviewLoaderDataContext);
-    const routeLoaderData = useRouteLoaderData('public-single-engagement') as EngagementLoaderPublicData;
-    return previewLoaderData ?? routeLoaderData;
+    const adminData = useContext(PreviewLoaderDataContext);
+    const publicData = useRouteLoaderData('public-single-engagement');
+    return adminData ?? publicData;
 };
 
 export default PreviewLoaderDataContext;

web/src/components/engagement/public/view/SuggestedEngagements.tsx

@@ -6,9 +6,8 @@ import { Heading2 } from 'components/common/Typography';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faArrowLeftLong } from '@fortawesome/pro-regular-svg-icons';
 import { Link } from 'components/common/Navigation';
-import { Await, useRouteLoaderData } from 'react-router';
+import { Await } from 'react-router';
 
-import { EngagementLoaderPublicData } from './EngagementLoaderPublic';
 import { EngagementViewSections } from '.';
 import { SuggestedEngagementWithAttachment } from 'models/suggestedEngagement';
 import { Engagement } from 'models/engagement';
@@ -17,11 +16,10 @@ import { usePreview } from 'engagements/preview/PreviewContext';
 import { EngagementPreviewTag } from './EngagementPreviewTag';
 import { getPath, ROUTES } from 'routes/routes';
 import { TranslationBundle, resolveTranslationValue } from './engagementTranslationResolution';
+import { useEngagementLoaderData } from 'engagements/preview/PreviewLoaderDataContext';
 
 export const SuggestedEngagements = () => {
-    const { suggestions, engagement, translationBundle } = useRouteLoaderData(
-        'public-single-engagement',
-    ) as EngagementLoaderPublicData;
+    const { suggestions, engagement, translationBundle } = useEngagementLoaderData();
     const engagementSlots = Array.from({ length: 3 });
     const { isPreviewMode } = usePreview();
 

web/src/components/landing/EngagementSearch.tsx

@@ -0,0 +1,16 @@
+import LandingSection from './LandingSection';
+import React from 'react';
+import FilterBlock from './FilterBlock';
+import TileBlock from './TileBlock';
+import { EngagementSearchProps } from './types';
+
+const EngagementSearch = (props: EngagementSearchProps) => {
+    return (
+        <LandingSection>
+            <FilterBlock {...props} />
+            <TileBlock {...props} />
+        </LandingSection>
+    );
+};
+
+export default EngagementSearch;