SOEOPSFY24-359 | add footer

app/timeline/page.tsx

@@ -1,4 +1,6 @@
 import { Container } from "@/components/Container";
+import { ContributeStoryBanner } from "@/components/ContributeStoryBanner";
+import { Footer } from "@/components/Footer";
 import { Masthead } from "@/components/Masthead";
 import TimelineOverview from "@/components/Timeline/TimelineOverview";
 import { Heading, Text } from "@/components/Typography";
@@ -25,6 +27,8 @@ const TimelinePage = async () => {
         </Text>
       </Container>
       <TimelineOverview timelineData={timelineData} />
+      <ContributeStoryBanner hasLineArt />
+      <Footer bgColor="blue" />
     </div>
   );
 };

components/ContributeStoryBanner/ContributeStoryBanner.tsx

@@ -21,7 +21,7 @@ export const ContributeStoryBanner = ({
     as="section"
     bgColor={bgColor}
     width="full"
-    className="cc lg:w-full lg:rs-px-7 mb-20 flex items-center justify-center"
+    className="cc lg:w-full lg:rs-px-7 flex items-center justify-center"
     pt={2}
     pb={6}
   >

components/Footer/Footer.styles.ts

@@ -0,0 +1,15 @@
+// Use a wider centered container (1800px wide at 4XL (2000px) breakpoint)
+export const wrapper =
+  "cc 3xl:px-100 4xl:px-[calc((100%-1800px)/2)] rs-pt-2 rs-pb-1 transition";
+
+export const bgColors = {
+  none: "bg-transparent",
+  black: "bg-black text-white",
+  white: "bg-white text-stone-dark",
+  blue: "cen-blue-xlight",
+  "fog-light": "bg-fog-light text-stone-dark",
+  "red-gradient": "bg-cen-red-gradient text-white",
+  "stone-dark": "bg-stone-dark text-white",
+};
+
+export type BgColorType = keyof typeof bgColors | "";

components/Footer/Footer.tsx

@@ -0,0 +1,41 @@
+import { HTMLAttributes } from "react";
+import { cnb } from "cnbuilder";
+import { FlexBox } from "@/components/FlexBox";
+import * as styles from "./Footer.styles";
+import { EngLogoLockup } from "../Logo/EngLogoLockup";
+
+type FooterProps = HTMLAttributes<HTMLDivElement> & {
+  isOverlap?: boolean;
+  bgColor?: styles.BgColorType;
+};
+
+export const Footer = ({
+  bgColor = "none",
+  className = "",
+  ...props
+}: FooterProps) => {
+  // Map background colors to logo colors
+  const logoColorMap: Record<styles.BgColorType, "white" | "default"> = {
+    black: "white",
+    "red-gradient": "white",
+    "stone-dark": "white",
+    none: "default",
+    white: "white",
+    blue: "default",
+    "fog-light": "default",
+    "": "default",
+  };
+
+  const isLight = logoColorMap[bgColor] || "default";
+
+  return (
+    <footer
+      {...props}
+      className={cnb(styles.bgColors[bgColor || "none"], className)}
+    >
+      <FlexBox alignItems="start" className={styles.wrapper}>
+        <EngLogoLockup color={isLight} />
+      </FlexBox>
+    </footer>
+  );
+};

components/Footer/index.ts

@@ -0,0 +1,2 @@
+export * from "./Footer";
+export * from "./Footer.styles";

components/Timeline/TimelineOverview.tsx

@@ -77,13 +77,7 @@ const TimelineOverview = ({ timelineData }: TimelineProps) => {
   }
 
   return (
-    <Container
-      id="main-content"
-      width="site"
-      pb={5}
-      bgColor="fog-light"
-      className="mb-50"
-    >
+    <Container id="main-content" width="site" pb={5} bgColor="fog-light">
       <div className="grid rs-mb-10 sm:mb-0 sm:gap-[32px] md:gap-[76px]">
         {rows.map((row, rowIndex) => (
           <div