✨(frontend) support screen titles with colorful page headers

Added support for passing screen titles that display in colorful header
components, improving page navigation context and visual hierarchy.

src/frontend/src/layout/Screen.tsx

@@ -2,6 +2,8 @@ import { layoutStore } from '@/stores/layout'
 import { Layout } from './Layout'
 import { useEffect } from 'react'
 import { Centered } from './Centered'
+import { H } from '@/primitives'
+import { css } from '@/styled-system/css'
 
 export type ScreenProps = {
   /**
@@ -14,6 +16,7 @@ export type ScreenProps = {
    */
   header?: boolean
   footer?: boolean
+  headerTitle?: string
   children: React.ReactNode
 }
 
@@ -21,6 +24,7 @@ export const Screen = ({
   layout = 'fullpage',
   header = true,
   footer = true,
+  headerTitle,
   children,
 }: ScreenProps) => {
   useEffect(() => {
@@ -31,5 +35,40 @@ export const Screen = ({
       layoutStore.showFooter = footer
     }
   }, [header, footer])
-  return layout === 'centered' ? <Centered>{children}</Centered> : children
+
+  return (
+    <>
+      {headerTitle && (
+        <div
+          className={css({
+            backgroundColor: 'primary.100',
+            width: '100%',
+          })}
+        >
+          <div
+            className={css({
+              maxWidth: '100%',
+              width: '38rem',
+              margin: 'auto',
+              paddingX: '2rem',
+            })}
+          >
+            <H
+              lvl={1}
+              margin={false}
+              className={css({
+                paddingY: '2rem',
+                md: {
+                  paddingY: '3rem',
+                },
+              })}
+            >
+              {headerTitle}
+            </H>
+          </div>
+        </div>
+      )}
+      {layout === 'centered' ? <Centered>{children}</Centered> : children}
+    </>
+  )
 }