SOEOPSFY24-337 | refine feature timeline teaser card

app/globals.css

@@ -14,4 +14,10 @@
   .timeline-detail {
     grid-area: 'detail';
   }
+
+  .font-inherit {
+    font: inherit;
+    font-size: inherit;
+    line-height: inherit;
+  }
 }

app/page.tsx

@@ -1,28 +1,28 @@
 import { Masthead } from "@/components/Masthead";
-import { TimelineBanner } from "@/components/TimelineBanner";
+import { TimelineCard } from "@/components/Timeline";
 import { PageTitle } from "@/components/PageTitle";
 
 export default function Home() {
   return (
     <div>
       <Masthead isLight />
       <PageTitle heading="100 years of" bigText="Impact" />
-      <TimelineBanner
+      <TimelineCard
         heading="The first African-American woman in space"
         year="1983"
         body="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."
         image="https://airandspace.si.edu/sites/default/files/styles/slideshow_basic/public/images/NASA%20166851h.jpg?itok=yL6MTpUr"
         width="narrow"
       />
-      <TimelineBanner
+      <TimelineCard
         heading="First remote classs from the Stanford Instructional Television Network"
         year="1969"
         body="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."
         image="https://images.unsplash.com/photo-1491770042090-0810a7e20f46?q=80&w=1935&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
         align="right"
         width="narrow"
       />
-      <TimelineBanner
+      <TimelineCard
         heading="The Stanford Dish Radiotelescope completed in 1962"
         year="1983"
         body="Enabling vastly expanded studies of scattering effects in the earth’s ionosphere and was used to detect Soviet radar and still used today for satellite calibrations, spacecraft command and telemetry, and radio astronomy measurements."

components/Timeline/TimelineImage.tsx

@@ -22,10 +22,10 @@ export const TimelineImage = ({
   const trapezoidType = styles.trapezoid[trapezoidAngle];
 
   return (
-    <div className={cnb("group relative", trapezoidType)}>
+    <div className={cnb("group relative flex justify-center", trapezoidType)}>
       <div
         className={cnb(
-          "aspect-[1/1] relative perspective-600 group-hocus:scale-105 transform ease-in-out duration-1000",
+          "aspect-[1/1] relative perspective-1000 transform ease-in-out duration-1000",
           imageSize,
           className,
         )}

components/Timeline/TimelineItem.styles.ts

@@ -7,6 +7,6 @@ export const size = {
 };
 
 export const trapezoid = {
-  left: "rotate-y-[20deg] hocus:rotate-y-[-20deg]",
-  right: "rotate-y-[-20deg] hocus:rotate-y-[20deg]",
+  left: "rotate-y-[15deg] hocus:rotate-y-[-15deg]",
+  right: "rotate-y-[-15deg] hocus:rotate-y-[15deg]",
 };

components/Timeline/index.ts

@@ -5,3 +5,4 @@ export * from "./TimelineItem.types";
 export * from "./TimelineDetails";
 export * from "./TimelineDetails.styles";
 export * from "./TimelineSidebar";
+export * from "./TimelineCard";

components/Typography/Heading.tsx

@@ -1,14 +1,28 @@
+import { cnb } from "cnbuilder";
 import { Text, type TypographyProps } from "./Text";
 import * as types from "./typography.types";
 
 type HeadingProps = Omit<TypographyProps, "as"> &
   React.HTMLAttributes<HTMLHeadingElement> & {
     as?: types.HeadingType;
+    className?: string;
   };
 
 // Convenience component for paragraphs
 export const Heading = ({
   as = "h2",
   weight = "bold",
+  className,
   ...rest
-}: HeadingProps) => <Text {...rest} weight={weight} as={as} />;
+}: HeadingProps) => {
+  const headingLinkClasses =
+    "[&_a]:text-stone-dark [&_a]:underline [&_a]:underline-offset-[5px] [&_a]:decoration-digital-red-light [&_a]:cursor-pointer [&_a]:decoration-4";
+  return (
+    <Text
+      {...rest}
+      weight={weight}
+      as={as}
+      className={cnb(headingLinkClasses, className)}
+    />
+  );
+};

components/Typography/Text.tsx

@@ -60,7 +60,6 @@ export const Text = ({
     <AsComponent
       {...rest}
       className={cnb(
-        "rs-mb-2",
         font ? styles.fontFamilies[font] : "",
         size ? styles.fontSizes[size] : "",
         weight ? styles.fontWeights[weight] : "",
@@ -72,7 +71,7 @@ export const Text = ({
         srOnly ? "sr-only" : "",
         uppercase ? "uppercase" : "",
         useDefaultTracking ? "tracking-normal" : "",
-        font === "dm-sans" ? "tracking-normal sm:tracking-wide" : "",
+        font === "serif" ? "tracking-normal sm:tracking-wide" : "",
         className,
       )}
     >