SOEOPSFY24-359 | adjust april launch footer

app/layout.tsx

@@ -86,6 +86,7 @@ export default function RootLayout({
         {children}
         <footer className="relative">
           <LocalFooterMvp />
+          <p className="text-center m-0">temp space here for footer review</p>
           <LocalFooter />
           <GlobalFooter />
         </footer>

components/Cta/ActionLink.tsx

@@ -18,7 +18,7 @@ export const ActionLink = ({
     <Link
       {...props}
       className={cnb(
-        "group relative flex w-fit flex-row items-center transition-all ease-in-out duration-1000 underline underline-offset-[5px] cursor-pointer decoration-4",
+        "group transition-all ease-in-out duration-1000 underline underline-offset-[5px] cursor-pointer decoration-4",
         whiteText
           ? "text-white hocus:text-digital-red-xlight decoration-digital-red-xlight"
           : "text-stone-dark hocus:decoration-stone-dark decoration-digital-red-light",

components/GlobalFooter/GlobalFooter.styles.ts

@@ -9,7 +9,7 @@ export const stanfordMenu =
   "list-unstyled mb-10 sm:mb-4 mr-19 sm:mr-0 p-0 text-15 md:text-17 2xl:text-18 flex flex-col sm:flex-row";
 export const legalMenu =
   "list-unstyled mb-10 sm:mb-0 ml-19 sm:ml-0 p-0 text-15 sm:text-14 md:text-15 xl:text-16 flex flex-col sm:flex-row sm:link-regular";
-export const listItem = "sm:mr-10 md:mr-20 lg:mr-27";
+export const listItem = "font-sans sm:mr-10 md:mr-20 lg:mr-27";
 export const link = "text-white no-underline hocus:underline hocus:text-white";
 export const copyright = "text-13 sm:text-14 text-center lg:text-left";
 export const copyrightText = "whitespace-no-wrap";

components/LocalFooter/LocalFooter.styles.tsx

@@ -1,6 +1,13 @@
+// Local Footer MVP
 export const flexWrapper =
-  "flex-col xl:flex-row items-start justify-between gap-95 relative z-10 w-full";
+  "flex-col xl:flex-row items-start justify-between gap-95 w-full";
 export const logo = "w-fit";
 export const contentWrapper =
   "flex-col md:flex-row shrink-0 w-full gap-95 justify-between";
-export const column = "w-full md:w-1/2 max-w-500 shrink-0";
+export const column = "w-full md:w-1/2 max-w-500";
+
+//  Local Footer April Release
+export const wrapper = "gap-45 md:gap-95 w-full max-w-[110rem]";
+export const linksWrapper =
+  "flex-col md:flex-row w-full gap-30 justify-between";
+export const link = "";

components/LocalFooter/LocalFooter.tsx

@@ -8,20 +8,20 @@ import { ActionLink, Button } from "@/components/Cta";
 export const LocalFooter = () => (
   <Container as="nav" bgColor="red" py={10} aria-label="Local footer menu">
     <FlexBox className={styles.flexWrapper}>
-      <EngLogoLockup color="white" isLink className={styles.logo} />
-      <FlexBox direction="col" className="gap-95 w-full max-w-[110rem]">
-        <FlexBox className={styles.contentWrapper}>
-          <Text size={2}>
+      <EngLogoLockup color="white-red" isLink className={styles.logo} />
+      <FlexBox direction="col" className={styles.wrapper}>
+        <FlexBox className={styles.linksWrapper}>
+          <Text className={styles.link} size={2}>
             <ActionLink whiteText className="font-normal" href="/stories">
               Impact stories
             </ActionLink>
           </Text>
-          <Text size={2}>
+          <Text className={styles.link} size={2}>
             <ActionLink whiteText className="font-normal" href="/timeline">
               Timeline
             </ActionLink>
           </Text>
-          <Text size={2}>
+          <Text className={styles.link} size={2}>
             <ActionLink whiteText className="font-normal" href="/">
               Centennial book online
             </ActionLink>

components/Logo/EngLogoLockup.tsx

@@ -10,7 +10,7 @@ import StanfordEngLogo from "./StanfordEngLogo";
  */
 type EngLogoLockupProps = {
   isLink?: boolean;
-  color?: "default" | "white";
+  color?: "default" | "white" | "white-red";
   className?: string;
 };
 

components/Logo/Logo.styles.ts

@@ -26,13 +26,14 @@ export const text =
 export const textColor = {
   default: "text-black-60 fill-stone-dark",
   white: "text-white fill-white",
+  "white-red": "text-white fill-white",
 };
 export const barColor = {
   default: "bg-black-60",
   white: "bg-white",
 };
-
 export const hundredColor = {
   default: "fill-digital-red-xlight",
   white: "fill-white",
+  "white-red": "fill-digital-red-xlight",
 };

components/Logo/StanfordEngLogo.tsx

@@ -1,18 +1,18 @@
 import { HtmlHTMLAttributes } from "react";
 import * as styles from "./Logo.styles";
 
-type Props = HtmlHTMLAttributes<SVGSVGElement> & {
+type StanfordEngLogoProps = HtmlHTMLAttributes<SVGSVGElement> & {
   height?: number | string;
   width?: number | string;
-  color?: "default" | "white";
+  color?: "default" | "white" | "white-red";
 };
 
 const StanfordEngLogo = ({
   height = 67,
   width = 261,
   color = "default",
   ...props
-}: Props) => {
+}: StanfordEngLogoProps) => {
   const levers: { [key: string]: string } = {};
   levers.textColor = styles.textColor[color];
   levers.hundredColor = styles.hundredColor[color];