SOEOPSFY24-351 | update timeline top banner

app/timeline/page.tsx

@@ -1,14 +1,29 @@
+import { Container } from "@/components/Container";
 import { Masthead } from "@/components/Masthead";
-import { PageTitle } from "@/components/PageTitle";
 import TimelineOverview from "@/components/Timeline/TimelineOverview";
+import { Heading, Text } from "@/components/Typography";
 import { loadTimelineData } from "@/utilities/loadTimelineData";
 
 const TimelinePage = async () => {
   const timelineData = await loadTimelineData();
   return (
     <div>
-      <Masthead isLight />
-      <PageTitle heading="100 years of" bigText="Impact" />
+      <Masthead isLight isOverlap={false} bgColor="fog-light" />
+      <Container as="section" bgColor="fog-light" width="site" py={8}>
+        <Heading leading="tight" size={6} className="flex flex-col">
+          <span className="underline underline-offset-[14px] decoration-4">
+            100 years
+          </span>
+          <span>of impact</span>
+        </Heading>
+        <Text className="max-w-800">
+          In the ten decades since its founding, the School of Engineering has
+          produced fundamental work in science and transformational
+          breakthroughs that have changed lives and shaped human society.
+          Experience the impact we’ve made through time in each of the events
+          you can interact with here.
+        </Text>
+      </Container>
       <TimelineOverview timelineData={timelineData} />
     </div>
   );

components/Masthead/Masthead.styles.ts

@@ -21,3 +21,11 @@ export const flexbox = "gap-x-12 sm:gap-x-20 md:gap-x-30";
 // We use the group-has- TW selector to make the Giving link white when the main nav is open
 export const cta =
   'relative z-[300] group-has-[nav[data-headlessui-state="open"]]:text-white group-has-[nav[data-headlessui-state="open"]]:decoration-white';
+
+export const bgColors = {
+  black: "bg-black text-white",
+  white: "bg-white text-black",
+  "fog-light": "bg-fog-light text-black",
+};
+
+export type BgColorType = keyof typeof bgColors | "";

components/Masthead/Masthead.tsx

@@ -1,25 +1,33 @@
 import { HTMLAttributes } from "react";
 import { cnb } from "cnbuilder";
 import { FlexBox } from "@/components/FlexBox";
-// import { LogoLockup } from "@/components/Logo/LogoLockup";
 import { Skiplink } from "@/components/SkipLink";
 import * as styles from "./Masthead.styles";
 import { EngLogoLockup } from "../Logo/EngLogoLockup";
 
 type MastheadProps = HTMLAttributes<HTMLDivElement> & {
   isLight?: boolean;
   isOverlap?: boolean;
+  bgColor?: styles.BgColorType;
   mainNav?: React.ReactNode;
 };
 
 export const Masthead = ({
   isLight,
   isOverlap = true,
+  bgColor,
   mainNav,
   className,
   ...props
 }: MastheadProps) => (
-  <header className={cnb(styles.root(isOverlap), className)} {...props}>
+  <header
+    className={cnb(
+      styles.bgColors[bgColor || "white"],
+      styles.root(isOverlap),
+      className,
+    )}
+    {...props}
+  >
     <Skiplink />
     <FlexBox
       justifyContent="between"