SOEOPSFY24-432 | adjust story card and create explore more section

app/page.tsx

@@ -5,8 +5,8 @@ import {
 } from "@/components/Timeline";
 import { PageTitle } from "@/components/PageTitle";
 import { TimelineFeature } from "@/components/Timeline/TimelineFeature";
-import { ThreeCol, TwoCol } from "@/components/Layout";
-import { StoryCard, StoryPosterCard } from "@/components/Story";
+import { TwoCol } from "@/components/Layout";
+import { StoryCard, StoryCardProps, StoryPosterCard } from "@/components/Story";
 import { Container } from "@/components/Container";
 import { StoryFeature } from "@/components/Story/StoryFeature";
 import { Heading, Text } from "@/components/Typography";
@@ -15,6 +15,7 @@ import { AnimatedLineartBanner } from "@/components/Banner";
 import { ContributeStoryBanner } from "@/components/ContributeStoryBanner";
 import { AnimateInView } from "@/components/Animate";
 import Link from "next/link";
+import { ExploreMore } from "@/components/Story/ExploreMore";
 
 export default function Home() {
   const timelineHorizontalCards: TimelineCardProps[] = [
@@ -49,6 +50,30 @@ export default function Home() {
     "1939-aviation-and-aeronautical-engineering",
     "1944-stanford-engineerings-third-dean",
   ];
+  const storyData: StoryCardProps[] = [
+    {
+      heading: "New Spaces and Expanding Influence",
+      superhead: "The 5th Decade",
+      chapter: "Chapter 5",
+      href: "/",
+      imageUrl:
+        "https://i.ibb.co/8YGpx87/new-spaces-and-expanding-influence.png",
+    },
+    {
+      heading: "Bridging Worlds: Chips, Code, and Cosmos",
+      superhead: "The 6th Decade",
+      chapter: "Chapter 6",
+      href: "/",
+      imageUrl: "https://i.ibb.co/TK4yBZ5/bridging-worlds.png",
+    },
+    {
+      heading: "Redevelopment and an Earthquake",
+      superhead: "The 7th Decade",
+      chapter: "Chapter 7",
+      href: "/",
+      imageUrl: "https://i.ibb.co/hF4zTc1/redevelopment.png",
+    },
+  ];
   return (
     <div>
       <Metadata
@@ -106,9 +131,9 @@ export default function Home() {
         <TimelineFeature anchors={timelineFeatureCards} />
       </Container>
       <StoryFeature>
-        <TwoCol className="rs-mb-8 items-center">
+        <TwoCol className="rs-mb-8 items-center max-w-[140rem]">
           <AnimateInView animation="slideUp" duration={2}>
-            <Heading size={5} weight="normal" className="rs-mr-8">
+            <Heading size={5} weight="normal">
               Fundamental work in science and transformational breakthroughs for
               one hundred years.
             </Heading>
@@ -125,38 +150,7 @@ export default function Home() {
             className="max-w-full"
           />
         </TwoCol>
-        <ThreeCol>
-          <StoryCard
-            animation="slideUp"
-            duration={2}
-            delay={0.8}
-            heading="New Spaces and Expanding Influence"
-            superhead="The 5th Decade"
-            chapter="Chapter 5"
-            href="/"
-            imageUrl="https://i.ibb.co/8YGpx87/new-spaces-and-expanding-influence.png"
-          />
-          <StoryCard
-            animation="slideUp"
-            duration={2}
-            delay={1.5}
-            heading="Bridging Worlds: Chips, Code, and Cosmos"
-            superhead="The 6th Decade"
-            chapter="Chapter 6"
-            href="/"
-            imageUrl="https://i.ibb.co/TK4yBZ5/bridging-worlds.png"
-          />
-          <StoryCard
-            animation="slideUp"
-            duration={2}
-            delay={0.5}
-            heading="Redevelopment and an Earthquake"
-            superhead="The 7th Decade"
-            chapter="Chapter 7"
-            href="/"
-            imageUrl="https://i.ibb.co/hF4zTc1/redevelopment.png"
-          />
-        </ThreeCol>
+        <ExploreMore stories={storyData} />
       </StoryFeature>
       <ContributeStoryBanner bgColor="blue" />
     </div>

components/Layout/ThreeCol.tsx

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

components/LocalFooter/LocalFooter.tsx

@@ -6,7 +6,13 @@ import { EngLogoLockup } from "@/components/Logo/EngLogoLockup";
 import { ActionLink, Button } from "@/components/Cta";
 
 export const LocalFooter = () => (
-  <Container as="nav" bgColor="red" py={10} aria-label="Local footer menu">
+  <Container
+    as="nav"
+    bgColor="red"
+    pt={7}
+    pb={8}
+    aria-label="Local footer menu"
+  >
     <FlexBox className={styles.flexWrapper}>
       <EngLogoLockup color="white-red" isLink className={styles.logo} />
       <FlexBox direction="col" className={styles.wrapper}>

components/Story/ExploreMore.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { ThreeCol } from "../Layout";
+import { StoryCard, StoryCardProps } from "./StoryCard";
+
+export const ExploreMore = ({ stories }: { stories: StoryCardProps[] }) => {
+  const delays = [0.8, 1.5, 0.5];
+
+  return (
+    <ThreeCol className="max-w-[140rem]">
+      {stories.map((story, index) => (
+        <StoryCard
+          key={index}
+          animation="slideUp"
+          duration={2}
+          delay={delays[index] || 0.5}
+          {...story}
+        />
+      ))}
+    </ThreeCol>
+  );
+};

components/Story/StoryCard.tsx

@@ -10,7 +10,7 @@ import {
   AnimateInViewProps,
 } from "@/components/Animate/AnimateInView";
 
-type StoryCardProps = HTMLAttributes<HTMLDivElement> &
+export type StoryCardProps = HTMLAttributes<HTMLDivElement> &
   Omit<AnimateInViewProps, "children"> & {
     heading: string;
     superhead?: string;
@@ -48,7 +48,7 @@ export const StoryCard = ({
     <AnimateInView {...props} className={className}>
       <CardWrapper
         className={cnb(
-          "relative overflow-hidden rs-mb-5 w-full h-fit rounded-[25px] shadow-lg lg:mb-0 lg:max-w-[920px] xl:max-w-[980px] group transition-all duration-1000 ease-in-out hocus:shadow-2xl outline outline-transparent hocus:outline-4 hocus:outline-digital-red-xlight",
+          "relative overflow-hidden w-full h-fit rounded-[25px] shadow-lg lg:max-w-[920px] xl:max-w-[980px] group transition-all duration-1000 ease-in-out hocus:shadow-2xl outline outline-transparent hocus:outline-4 hocus:outline-digital-red-xlight",
           { "flex flex-col md:flex-row items-center": isHorizontal },
           bgColor && styles.bgColors[bgColor],
         )}
@@ -67,7 +67,7 @@ export const StoryCard = ({
         <div className="flex flex-col rs-pt-3 rs-pb-4 rs-px-2">
           <Heading
             as={headerTag}
-            size={isHeadingLarge ? 3 : 2}
+            size={isHeadingLarge ? "f3" : 2}
             weight="normal"
             mb="none"
             linkType="story"

components/Story/StoryFeature.tsx

@@ -12,7 +12,7 @@ export const StoryFeature = ({ children, ...props }: StoryFeatureProps) => {
         width="site"
         py={8}
         bgColor="blue"
-        className="rounded-[25px] flex flex-col rs-px-9"
+        className="rounded-[25px] flex flex-col rs-px-6"
       >
         {children}
       </Container>

components/Typography/typography.styles.ts

@@ -24,6 +24,7 @@ export const fontSizes = {
   7: "type-7",
   8: "type-8",
   9: "type-9",
+  f3: "fluid-type-3",
   f4: "fluid-type-4",
   f5: "fluid-type-5",
   f6: "fluid-type-6",