SOEOPSFY24-357 | add feature story layout

app/page.tsx

@@ -2,9 +2,11 @@ import { Masthead } from "@/components/Masthead";
 import { TimelineCard } from "@/components/Timeline";
 import { PageTitle } from "@/components/PageTitle";
 import { TimelineFeature } from "@/components/Timeline/TimelineFeature";
-import { ThreeCol } from "@/components/Layout";
-import { StoryCard } from "@/components/StoryCard";
+import { ThreeCol, TwoCol } from "@/components/Layout";
+import { StoryCard } from "@/components/Story";
 import { Container } from "@/components/Container";
+import { StoryFeature } from "@/components/Story/StoryFeature";
+import { Heading } from "@/components/Typography";
 
 export default function Home() {
   return (
@@ -70,6 +72,41 @@ export default function Home() {
           href="/"
         />
       </ThreeCol>
+      <StoryFeature>
+        <TwoCol className="rs-mb-8 items-center">
+          <Heading size={5} weight="normal" className="rs-mr-8">
+            Fundamental work in science and transformational breakthroughs for
+            one hundred years.
+          </Heading>
+          <StoryCard
+            superhead="Impact"
+            heading="Lorem ipsum dolor sit amet consect hendrerit"
+            imageUrl="https://placecats.com/neo_banana/300/200"
+            href="/"
+            className="max-w-full"
+          />
+        </TwoCol>
+        <ThreeCol>
+          <StoryCard
+            superhead="Innovation"
+            heading="The Foundation of a New Era in Engineering"
+            imageUrl="https://placecats.com/neo_banana/300/200"
+            href="/"
+          />
+          <StoryCard
+            superhead="1975 - 1984"
+            heading="Computation, outer space, the nanoscale, and the fragility of planet Earth"
+            imageUrl="https://placecats.com/neo_banana/300/200"
+            href="/"
+          />
+          <StoryCard
+            superhead="1985 - 1994"
+            heading="Mae Jemison: “We each get a chance to choose our own path”"
+            imageUrl="https://placecats.com/neo_banana/300/200"
+            href="/"
+          />
+        </ThreeCol>
+      </StoryFeature>
     </div>
   );
 }

components/ContributeStoryBanner/ContributeStoryBanner.tsx

@@ -49,7 +49,11 @@ export const ContributeStoryBanner = ({
             your stories
           </span>
         </Heading>
-        <Text mb="none" className="order-first font-dm-mono mb-1 mt-50">
+        <Text
+          mb="none"
+          font="dm-mono"
+          className="order-first font-dm-mono mb-1 mt-50"
+        >
           Get involved
         </Text>
         <Text mb="none">

components/Layout/ThreeCol.tsx

@@ -18,7 +18,7 @@ export const ThreeCol = ({ children, className, ...props }: ColProps) => {
   return (
     <Container
       {...props}
-      className={cnb("grid grid-cols-1 md:grid-cols-3 gap-50", className)}
+      className={cnb("grid grid-cols-1 lg:grid-cols-3 gap-50", className)}
     >
       {children}
     </Container>

components/Layout/TwoCol.tsx

@@ -27,7 +27,7 @@ export const TwoCol = ({
       className={cnb(
         "flex flex-col w-full max-w-full lg:flex-row gap-20",
         {
-          "lg:*:max-w-1/2": !isSidebar,
+          "lg:*:w-1/2": !isSidebar,
           "lg:first:max-w-2/3 lg:last:max-w-1/3": isSidebar,
         },
         className,

components/StoryCard/StoryCard.tsx → components/Story/StoryCard.tsx

@@ -8,7 +8,7 @@ import * as styles from "@/components/Container/Container.styles";
 type StoryCardProps = HTMLAttributes<HTMLDivElement> & {
   heading: string;
   superhead?: string;
-  body: string;
+  body?: string;
   href: string;
   headerTag?: "h2" | "h3";
   isHeadingLarge?: boolean;
@@ -40,7 +40,7 @@ export const StoryCard = ({
     <CardWrapper
       {...props}
       className={cnb(
-        "overflow-hidden rs-mb-5 w-full rounded-[25px] shadow-lg lg:mb-0 lg:max-w-[920px] xl:max-w-[980px] stretched-link transition duration-500 hocus:shadow-2xl",
+        "overflow-hidden rs-mb-5 w-full h-fit rounded-[25px] shadow-lg lg:mb-0 lg:max-w-[920px] xl:max-w-[980px] stretched-link transition duration-500 hocus:shadow-2xl",
         { "flex flex-col md:flex-row items-center": isHorizontal },
         bgColor && styles.bgColors[bgColor],
         className,
@@ -71,9 +71,11 @@ export const StoryCard = ({
             {superhead}
           </Text>
         )}
-        <Text size="base" mb="none" className="rs-mt-neg1">
-          {body}
-        </Text>
+        {body && (
+          <Text size="base" mb="none" className="rs-mt-neg1">
+            {body}
+          </Text>
+        )}
       </div>
     </CardWrapper>
   );

components/Story/StoryFeature.tsx

@@ -0,0 +1,21 @@
+import React, { HTMLAttributes } from "react";
+import { Container } from "@/components/Container";
+
+type StoryFeatureProps = HTMLAttributes<HTMLDivElement> & {
+  children: React.ReactNode;
+};
+
+export const StoryFeature = ({ children, ...props }: StoryFeatureProps) => {
+  return (
+    <Container {...props} width="full" className="rs-px-1" py={8} mb={9}>
+      <Container
+        width="site"
+        py={8}
+        bgColor="blue"
+        className="rounded-[25px] flex flex-col rs-px-9"
+      >
+        {children}
+      </Container>
+    </Container>
+  );
+};