SOEOPSFY24-311 | scaffold responsive svgs alumni banner and timeline …

…sidebar

app/components/AlumniBanner/AlumniBanner.tsx

@@ -0,0 +1,36 @@
+import { HTMLAttributes } from "react";
+import { Container } from "@/components/Container";
+import { Heading, Text } from "@/components/Typography";
+import BannerLineart from "@/components/images/banner-lineart";
+
+type AlumniBannerProps = HTMLAttributes<HTMLDivElement> & {
+  bgColor?: "fog-light" | "red-gradient";
+};
+
+export const AlumniBanner = ({
+  bgColor = "red-gradient",
+  ...props
+}: AlumniBannerProps) => (
+  <Container
+    {...props}
+    as="section"
+    bgColor={bgColor}
+    width="site"
+    py={9}
+    className="overflow-hidden relative flex flex-col *:text-white rs-pt-2 rs-pb-1 rs-px-9 min-h-500"
+  >
+    <Heading className="rs-mb-5 font-normal">
+      Contribute{" "}
+      <span className="underline decoration-2 underline-offset-8">
+        your stories
+      </span>
+    </Heading>
+    <Text className="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>
+    <BannerLineart className="absolute top-0 left-0 flex justify-center items-center rs-pt-1 rs-pb-2 rs-px-1" />
+  </Container>
+);

app/components/AlumniBanner/index.ts

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

app/components/TimelineEven/TimelineItem.styles.ts

@@ -2,6 +2,7 @@ export const size = {
   small: "max-w-150 max-h-150",
   medium: "max-w-200 max-h-200",
   large: "max-w-300 max-h-300",
+  full: "w-full h-full",
 };
 
 export const trapezoid = {

app/components/TimelineEven/TimelineItem.tsx

@@ -14,7 +14,7 @@ interface TimelineItemProps {
   animationProps?: MotionProps;
 }
 
-const TimelineItem = ({
+export const TimelineItem = ({
   heading,
   year,
   image,
@@ -73,5 +73,3 @@ const TimelineItem = ({
     </div>
   );
 };
-
-export default TimelineItem;

app/components/TimelineEven/TimelineOverview.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { Container } from "@/components/Container";
-import TimelineItem from "./TimelineItem";
+import { TimelineItem } from "./TimelineItem";
 import { SizeType } from "./TimelineItem.types";
 import { cnb } from "cnbuilder";
 

app/components/TimelineEven/TimelineSidebar.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { Heading } from "@/components/Typography";
+import SidebarLineart from "@/components/images/sidebar-lineart";
+import { TimelineItem } from "./TimelineItem";
+import { cnb } from "cnbuilder";
+
+interface TimelineSidebarProps {
+  className?: string;
+}
+
+export const TimelineSidebar = ({
+  className,
+  ...props
+}: TimelineSidebarProps) => {
+  return (
+    <div
+      {...props}
+      className={cnb(
+        "relative pt-[210px] pb-65 rs-px-3 max-w-[463px]",
+        className,
+      )}
+    >
+      <div className="w-full z-50 flex flex-col gap-[65px] justify-center items-center ">
+        <Heading as="h3" className="font-normal">
+          Around the same time...
+        </Heading>
+        <TimelineItem
+          size="full"
+          heading="The Beginning"
+          year="1990"
+          image="https://placecats.com/neo/300/200"
+        />
+        <TimelineItem
+          size="full"
+          heading="The Beginning"
+          year="1990"
+          image="https://placecats.com/neo/300/200"
+        />
+      </div>
+      <SidebarLineart className="absolute top-0 left-0 flex justify-center items-center rs-p-0 z-10" />
+    </div>
+  );
+};

app/components/TimelineEven/index.ts

@@ -1 +1,7 @@
 export * from "./TimelineOverview";
+export * from "./TimelineItem";
+export * from "./TimelineItem.styles";
+export * from "./TimelineItem.types";
+export * from "./TimelineDetails";
+export * from "./TimelineDetails.styles";
+export * from "./TimelineSidebar";

app/components/images/banner-lineart.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+
+interface BannerLineartProps {
+  className?: string;
+}
+
+const BannerLineart = ({ className }: BannerLineartProps) => {
+  return (
+    <svg
+      viewBox="0 0 1730 632"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      style={{
+        height: "100%",
+        width: "100%",
+        maxWidth: "100%",
+      }}
+      preserveAspectRatio="none"
+    >
+      <path
+        d="M2.1275 555.801C2.1275 584.656 -3.25941 630 55.9966 630C115.253 630 1616.52 630 1640.76 630C1728.3 630 1728.3 607 1728.3 544C1728.3 504.199 1728.3 148.874 1728.3 125.515C1728.3 81.545 1697.5 62.0899 1640.77 81.5449C1584.04 101 1504.84 135.515 1406.84 161C1369.3 170.761 1347.58 141 1347.58 121.545C1347.58 74.8065 1347.58 73.451 1347.58 58.3363C1347.58 15.7405 1386.64 2.00014 1406.84 2.00008C1463.42 1.9999 1588.65 2.00008 1607.5 2.00008C1654.64 2.00008 1651.94 63.8326 1607.5 65.2066C1563.06 66.5807 130.068 65.2066 72.1588 65.2066C14.2495 65.2066 2.12891 65.2066 2.12891 127.039C2.12891 158.642 2.1275 533.95 2.1275 555.801Z"
+        stroke="#F83535"
+        strokeWidth="3"
+      />
+    </svg>
+  );
+};
+
+export default BannerLineart;

app/components/images/sidebar-lineart.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+
+interface SidebarLineartProps {
+  className?: string;
+}
+
+const SidebarLineart = ({ className }: SidebarLineartProps) => {
+  return (
+    <svg
+      viewBox="0 0 467 1671"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      style={{
+        height: "100%",
+        width: "100%",
+        maxWidth: "465px",
+      }}
+      preserveAspectRatio="none"
+    >
+      <path
+        d="M2.1275 1595C2.1275 1623.86 -3.25941 1669.2 55.9966 1669.2C115.253 1669.2 353.222 1669.2 377.463 1669.2C443.452 1669.2 465 1651.34 465 1605.99C465 1573.02 465.001 148.874 465.001 125.515C465.001 81.545 434.193 62.0899 377.464 81.5449C320.735 101 241.535 135.515 143.535 161C106.001 170.761 84.2794 141 84.2794 121.545C84.2794 74.8065 84.2794 73.451 84.2794 58.3363C84.2794 15.7405 123.334 2.00014 143.535 2.00008C200.114 1.9999 325.344 2.00008 344.198 2.00008C391.333 2.00008 388.64 63.8326 344.198 65.2066C299.756 66.5807 130.068 65.2066 72.1588 65.2066C14.2495 65.2066 2.12891 65.2066 2.12891 127.039C2.12891 158.642 2.1275 1573.15 2.1275 1595Z"
+        stroke="#F83535"
+        stroke-width="3"
+      />
+    </svg>
+  );
+};
+
+export default SidebarLineart;

app/example/page.tsx

@@ -9,6 +9,7 @@ import { GradientBanner } from "@/components/GradientBanner/GradientBanner";
 import TimelineEven from "@/components/TimelineEven/TimelineOverview";
 import MediaCaptionImage from "@/components/MediaCaptionImage/MediaCaptionImage";
 import { Container } from "@/components/Container";
+import { AlumniBanner } from "@/components/AlumniBanner";
 
 const ExamplePage = async () => {
   const timelineData = await loadTimelineData();
@@ -177,6 +178,7 @@ const ExamplePage = async () => {
           efficitur scelerisque urna et sollicitudin.
         </Text>
       </Container>
+      <AlumniBanner />
       <GradientBanner>
         <Heading
           as="h1"

app/example/story/page.tsx

@@ -0,0 +1,92 @@
+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 { FlexBox } from "@/components/FlexBox";
+import { TimelineSidebar } from "@/components/TimelineEven";
+
+const ExampleStoryPage = async () => {
+  return (
+    <div>
+      <Masthead />
+      <FeatureHero>
+        <Heading
+          as="h1"
+          leading="none"
+          className="2xl:whitespace-pre-line font-normal -mt-01em rs-mb-8 xl:max-w-1200"
+        >
+          Exploring the reengineering of immune cells
+        </Heading>
+        <Text
+          variant="overview"
+          weight="normal"
+          className="order-first mb-38 underline underline-offset-[6px] decoration-2 decoration-digital-red-xlight"
+        >
+          Change Makers
+        </Text>
+        <Text
+          variant="overview"
+          weight="normal"
+          className="max-w-[50ch] rs-mb-3 *:*:leading-snug"
+        >
+          The Sarafan ChEM-H Institute scholar is building a multidisciplinary
+          lab to explore the reengineering of immune cells. Before coming to
+          Stanford, she says, “I was thinking in terms of understanding. Now I
+          feel that I can start thinking in terms of creating.”
+        </Text>
+        <Text
+          variant="overview"
+          weight="normal"
+          className="max-w-[50ch] rs-mb-3 *:*:leading-snug"
+        >
+          by Jess Alvarenga
+        </Text>
+      </FeatureHero>
+      <Container width="site" py={9} className="font-dm-sans">
+        <FlexBox direction="row" className="cc" gap>
+          <Container width="full" className="w-2/3">
+            <Text className="type-3 intro-text">
+              Overview style lorem ipsum dolar sit amet vestibulum parimentium
+              elit rhoncus donec. Scelerisque urna et euismod in daphibus nec
+              leo euismod nisi, pharetra raesent nec. Aliquam dignissim nisi
+              convalis quis, leo vestibulum duis euismod.
+            </Text>
+            <Text className="big-paragraph">
+              Long copy paragraph text style raesent nec dapibus odio. Aliquam
+              dignissim nisi nisi, pharetra faucibus elit rhoncus in. Donec
+              efficitur scelerisque urna et sollicitudin. Donec euismod enim a
+              dui convallis, quis suscipit leo vestibulum. Duis aliquam euismod
+              enim, sit amet
+            </Text>
+            <Heading>Header Two</Heading>
+            <Text className="big-paragraph">
+              Fusce sem enim, tempus nec massa id, mollis faucibus sem. Ut ipsum
+              erat, imperdiet eu fermentum sed in text link. Praesent nec
+              dapibus odio. Aliquam dignissim nisi nisi, pharetra faucibus elit
+              rhoncus in. Donec efficitur scelerisque urna et sollicitudin. Duis
+              aliquam euismod enim, sit amet in text link hover state. Aliquam
+              sodales consequat arcu in egestas. Aliquam condimentum viverra
+              eros.Donec efficitur scelerisque urna et sollicitudin. Duis
+              aliquam euismod enim, sit amet.
+            </Text>
+            <Heading as="h3">Header Three</Heading>
+            <Text className="big-paragraph">
+              Aenean sollicitudin facilisis ex, in tincidunt velit sodales ac.
+              Nullam consequat leo ut sem pharetra, a fringilla massa commodo.
+              Etiam molestie, justo nec congue ultricies, augue massa tempus
+              ante, nec sagittis dui tellus ac lectus. Duis aliquam euismod
+              enim, sit amet lobortis ante porttitor. Donec efficitur
+              scelerisque urna et sollicitudin. Duis aliquam euismod enim, sit
+              amet.
+            </Text>
+          </Container>
+          <TimelineSidebar className="w-1/3" />
+        </FlexBox>
+      </Container>
+      <AlumniBanner />
+    </div>
+  );
+};
+
+export default ExampleStoryPage;

app/layout.tsx

@@ -1,6 +1,6 @@
 import "./globals.css";
 import localFont from "next/font/local";
-import { Source_Sans_3, DM_Sans } from "next/font/google";
+import { Source_Sans_3, DM_Sans, DM_Mono } from "next/font/google";
 import { cnb } from "cnbuilder";
 
 const dm_sans = DM_Sans({
@@ -10,6 +10,14 @@ const dm_sans = DM_Sans({
   variable: "--font-dm-sans",
 });
 
+const dm_mono = DM_Mono({
+  subsets: ["latin"],
+  style: ["italic", "normal"],
+  display: "swap",
+  variable: "--font-font-dm-mono",
+  weight: "300",
+});
+
 const source_sans = Source_Sans_3({
   subsets: ["latin"],
   style: ["italic", "normal"],
@@ -33,6 +41,7 @@ export default function RootLayout({
       <body
         className={cnb(
           dm_sans.variable,
+          dm_mono.variable,
           source_sans.variable,
           stanford.variable,
         )}