SOEOPSFY24-350 | build out contribute stories hero component

app/example/page.tsx

@@ -8,7 +8,7 @@ import { loadTimelineData } from "@/utilities/loadTimelineData";
 import { GradientBanner } from "@/components/GradientBanner/GradientBanner";
 import MediaCaptionImage from "@/components/MediaCaptionImage/MediaCaptionImage";
 import { Container } from "@/components/Container";
-import { AlumniBanner } from "@/components/AlumniBanner";
+import { ContributeStoryBanner } from "@/components/ContributeStoryBanner";
 import { HorizontalLineart } from "@/components/images/horizontal-lineart";
 import { Quote } from "@/components/Quote";
 
@@ -181,7 +181,7 @@ const ExamplePage = async () => {
           efficitur scelerisque urna et sollicitudin.
         </Text>
       </Container>
-      <AlumniBanner />
+      <ContributeStoryBanner />
       <GradientBanner>
         <Heading
           as="h1"

app/example/story/page.tsx

@@ -2,7 +2,7 @@ import { Heading, Text } from "@/components/Typography";
 import { Masthead } from "@/components/Masthead";
 import { FeatureHero } from "@/components/FeatureHero";
 import { Container } from "@/components/Container";
-import { AlumniBanner } from "@/components/AlumniBanner";
+import { AlumniBanner } from "@/components/ContributeStoryBanner";
 import { FlexBox } from "@/components/FlexBox";
 import { TimelineSidebar } from "@/components/Timeline";
 

app/example/textarea/page.tsx

@@ -1,15 +1,10 @@
 import { Heading, Text } from "@/components/Typography";
 import { Masthead } from "@/components/Masthead";
-import TimelineOverview from "@/components/Timeline/TimelineOverview";
-import { loadTimelineData } from "@/utilities/loadTimelineData";
-import { GradientBanner } from "@/components/GradientBanner/GradientBanner";
 import MediaCaptionImage from "@/components/MediaCaptionImage/MediaCaptionImage";
 import { Container } from "@/components/Container";
-import { AlumniBanner } from "@/components/AlumniBanner";
-import { Quote } from "@/components/Quote";
+import { ContributeStoryBanner } from "@/components/ContributeStoryBanner";
 
 const TextareaExamplePage = async () => {
-  const timelineData = await loadTimelineData();
   return (
     <div>
       <Masthead />
@@ -140,39 +135,12 @@ const TextareaExamplePage = async () => {
           efficitur scelerisque urna et sollicitudin.
         </Text>
       </Container>
-      <AlumniBanner />
-      <GradientBanner>
-        <Heading
-          as="h1"
-          leading="none"
-          className="2xl:whitespace-pre-line font-normal -mt-01em rs-mb-8 xl:max-w-1200"
-        >
-          Events
-        </Heading>
-        <div className="grid grid-cols-2 gap-[15.8rem]">
-          <Text>
-            Etiam sollicitudin, ipsum eu pulvinar rutrum, tellus ipsum laoreet
-            sapien, quis venenatis ante odio sit amet eros. Class aptent taciti
-            sociosqu ad litora torquent per conubia nostra, per inceptos
-            hymenaeos. Quisque libero metus, condimentum nec, tempor a, commodo
-            mollis, magna. Ut a nisl id ante tempus hendrerit. Nunc sed turpis.
-          </Text>
-          <Text>
-            Vivamus consectetuer hendrerit lacus. Maecenas tempus, tellus eget
-            condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem
-            neque sed ipsum. Donec vitae orci sed dolor rutrum auctor. Nunc
-            interdum lacus sit amet orci. Proin pretium, leo ac pellentesque
-            mollis, felis nunc ultrices eros, sed gravida augue augue mollis
-            justo.
-          </Text>
-        </div>
-      </GradientBanner>
-      <Quote
-        teaser="We each get a chance to choose our own path..."
-        body="Sometimes, it seems to me that we are running away from problems and reacting to issues in our world and our societies as though we are afraid of change, that we’re afraid of things being a little bit different. And that’s keeping us from formulating the right question so we can solve a problem."
-        source="Mae C. Jemison"
-      />
-      <TimelineOverview timelineData={timelineData} />
+      <ContributeStoryBanner />
+      <ContributeStoryBanner hasLineArt />
+      <ContributeStoryBanner bgColor="fog-light" />
+      <ContributeStoryBanner bgColor="fog-light" hasLineArt />
+      <ContributeStoryBanner bgColor="blue" />
+      <ContributeStoryBanner bgColor="blue" hasLineArt />
     </div>
   );
 };

components/Container/Container.styles.ts

@@ -6,7 +6,8 @@ export const widths = {
 
 export const bgColors = {
   black: "bg-black text-white",
-  white: "bg-white text-black",
-  "fog-light": "bg-fog-light text-black",
+  white: "bg-white text-stone-dark",
+  blue: "soe-blue-xlight",
+  "fog-light": "bg-fog-light text-stone-dark",
   "red-gradient": "bg-soe-red-gradient text-white",
 };

components/ContributeStoryBanner/ContributeStoryBanner.tsx

@@ -0,0 +1,63 @@
+import { HTMLAttributes } from "react";
+import { Container } from "@/components/Container";
+import { Heading, Text } from "@/components/Typography";
+import BannerLineart from "@/components/images/banner-lineart";
+import { cnb } from "cnbuilder";
+import { Button } from "../Cta";
+import { FlexBox } from "@/components/FlexBox";
+
+type ContributeStoryBannerProps = HTMLAttributes<HTMLDivElement> & {
+  bgColor?: "fog-light" | "red-gradient" | "blue";
+  hasLineArt?: boolean;
+};
+
+export const ContributeStoryBanner = ({
+  bgColor = "red-gradient",
+  hasLineArt = false,
+  ...props
+}: ContributeStoryBannerProps) => (
+  <Container
+    {...props}
+    as="section"
+    bgColor={bgColor}
+    width="site"
+    py={9}
+    className={cnb(
+      "overflow-hidden relative flex flex-col lg:flex-row items-center rs-pt-2 rs-pb-1 rs-px-9 min-h-500 h-full justify-between gap-50",
+      {
+        "*:text-white": bgColor === "red-gradient",
+        "*:text-stone-dark": bgColor !== "red-gradient",
+      },
+    )}
+  >
+    <FlexBox direction="col" className="z-50 max-w-[670px]">
+      <Heading mb={5} className="font-normal">
+        Contribute{" "}
+        <span
+          className={cnb("underline decoration-4 underline-offset-8", {
+            "text-digital-red-xlight": bgColor === "red-gradient",
+            "text-stone-dark": bgColor !== "red-gradient",
+          })}
+        >
+          your stories
+        </span>
+      </Heading>
+      <Text className="order-first font-dm-mono order-first mb-1">
+        Get involved
+      </Text>
+      <Text>
+        Cras felis tortor, bibendum quis porttitor at, ullamcorper eu diam.
+        Aenean iaculis efficitur quam, quis dignissim lacus. Cras nec dui id mi
+        blandit lobortis eget in enim.
+      </Text>
+    </FlexBox>
+    <div className="shrink-0 z-50">
+      <Button isLight={bgColor !== "red-gradient" ? true : false} href="/">
+        Submit your story
+      </Button>
+    </div>
+    {hasLineArt && (
+      <BannerLineart className="absolute top-0 left-0 flex justify-center items-center rs-pt-1 rs-pb-2 rs-px-1 z-10" />
+    )}
+  </Container>
+);

components/ContributeStoryBanner/index.ts

@@ -0,0 +1 @@
+export * from "./ContributeStoryBanner";

components/Cta/Button.tsx

@@ -6,6 +6,7 @@ import { cnb } from "cnbuilder";
 
 type Props = HtmlHTMLAttributes<HTMLAnchorElement | HTMLButtonElement> & {
   href?: string;
+  isLight?: boolean;
   buttonElem?: boolean;
   onClick?: MouseEventHandler;
   prefetch?: LinkProps["prefetch"];
@@ -15,18 +16,23 @@ type Props = HtmlHTMLAttributes<HTMLAnchorElement | HTMLButtonElement> & {
 
 export const Button = ({
   href,
+  isLight = false,
   buttonElem = false,
   children,
   className,
   ...props
 }: Props) => {
-  const standardClasses =
-    "font-dm-sans w-fit transition text-digital-red-light hocus:text-white hocus:bg-digital-red-light border-4 rounded border-digital-red-light hocus:border-white no-underline hocus:underline hocus:outline hocus:outline-3 hocus:outline-digital-red-light rs-py-1 rs-px-3 font-normal";
-
   if (!href || buttonElem) {
     return (
       <button
-        className={cnb(standardClasses, className)}
+        className={cnb(
+          "font-dm-sans w-fit transition hocus:text-white hocus:bg-digital-red-light border-4 rounded border-digital-red-light hocus:border-white no-underline hocus:underline hocus:outline hocus:outline-3 hocus:outline-digital-red-light rs-py-1 rs-px-3 font-normal ",
+          {
+            "text-digital-red-light ": isLight,
+            "text-white ": !isLight,
+          },
+          className,
+        )}
         type="button"
         {...props}
       >
@@ -38,7 +44,14 @@ export const Button = ({
   return (
     <Link
       href={href}
-      className={cnb(standardClasses, className?.replace("button", ""))}
+      className={cnb(
+        "font-dm-sans w-fit transition hocus:text-white hocus:bg-digital-red-light border-4 rounded border-digital-red-light hocus:border-white no-underline hocus:underline hocus:outline hocus:outline-3 hocus:outline-digital-red-light rs-py-1 rs-px-3 font-normal ",
+        {
+          "text-digital-red-light ": isLight,
+          "text-white ": !isLight,
+        },
+        className?.replace("button", ""),
+      )}
       {...props}
     >
       {children}

components/PageTitle/PageTitle.styles.ts

@@ -1,3 +1,3 @@
 export const root = "overflow-hidden";
 export const heading =
-  "*:font-dm-sans flex flex-row items-center 2xl:whitespace-pre-line -mt-01em rs-mb-2 xl:max-w-1200";
+  "*:font-dm-sans flex flex-row items-center 2xl:whitespace-pre-line -mt-01em xl:max-w-1200";

components/PageTitle/PageTitle.tsx

@@ -23,7 +23,7 @@ export const PageTitle = ({
     py={9}
     className={styles.root}
   >
-    <Heading leading="none" className={styles.heading}>
+    <Heading mb="base" leading="none" className={styles.heading}>
       <span className="font-semibold type-1">{heading}</span>
       <span className="font-bold type-8">{bigText}</span>
     </Heading>

components/Timeline/TimelineCard.styles.ts

@@ -10,7 +10,7 @@ export const contentWrapper = (isHorizontal: boolean) =>
     "rs-pt-2 w-full": !isHorizontal,
   });
 export const heading =
-  "2xl:whitespace-pre-line -mt-01em rs-mb-0 last:mb-0 xl:max-w-1200";
+  "2xl:whitespace-pre-line -mt-01em last:mb-0 xl:max-w-1200";
 export const superhead = "order-first rs-mb-2";
 export const imageWrapper = (align: string, isHorizontal: boolean) =>
   cnb("rs-mb-2 lg:mb-0 w-[420px] order-first", {

components/Timeline/TimelineDetails.styles.ts

@@ -1,7 +1,7 @@
 export const root = "overflow-hidden";
 export const wrapper = "mr-0 au-ml-auto flex-col lg:flex-row";
 export const contentWrapper = "lg:rs-pr-9 ml-0 flex flex-col *:font-dm-sans";
-export const heading = "2xl:whitespace-pre-line -mt-01em rs-mb-2 xl:max-w-1200";
+export const heading = "2xl:whitespace-pre-line -mt-01em xl:max-w-1200";
 export const superhead = "order-first mb-38";
 export const dek = "max-w-[50ch] type-3 rs-mb-3 *:*:leading-snug";
 export const body = "max-w-[50ch] rs-mb-3 *:*:leading-snug";

components/Typography/Text.tsx

@@ -7,6 +7,7 @@ import {
 } from "../images/HeroIcon";
 import * as styles from "./typography.styles";
 import * as types from "./typography.types";
+import { marginBottoms, MarginType } from "@/utilities/datasource";
 
 export type TypographyProps = {
   as?: types.TextType;
@@ -17,6 +18,7 @@ export type TypographyProps = {
   color?: types.TextColorType;
   variant?: types.TextVariantType;
   leading?: types.FontLeadingType;
+  mb?: MarginType;
   /**
    * If true, use default tracking for the font - for DM Sans
    */
@@ -44,6 +46,7 @@ export const Text = ({
   color = "default",
   variant,
   leading,
+  mb,
   useDefaultTracking = font === "dm-sans",
   italic,
   srOnly,
@@ -67,6 +70,7 @@ export const Text = ({
         color ? styles.textColors[color] : "",
         variant ? styles.textVariants[variant] : "",
         leading ? styles.fontLeadings[leading] : "",
+        mb ? marginBottoms[mb] : marginBottoms[2],
         italic ? "italic" : "",
         srOnly ? "sr-only" : "",
         uppercase ? "uppercase" : "",

tailwind/plugins/theme/soe-colors.js

@@ -3,6 +3,7 @@
  */
 module.exports = function () {
   return {
-    'soe-black': "#181818"
+    'soe-black': "#181818",
+    'soe-blue-xlight': "#F4F8FA"
   };
 };