build quote component and resolve dm mono font styles

app/components/Quote/Quote.styles.ts

@@ -0,0 +1,25 @@
+import { cnb } from "cnbuilder";
+
+export const verticalAlignments = {
+  top: "justify-start",
+  center: "justify-center",
+  bottom: "justify-end",
+};
+export type QuoteVerticalAlignType = keyof typeof verticalAlignments;
+
+export const root = (quoteOnRight: boolean) =>
+  cnb("relative break-words flex flex-col lg:max-w-prose-wide lg:ml-0", {
+    "rs-pl-4": !quoteOnRight,
+    "rs-pr-4": quoteOnRight,
+  });
+export const teaserWrapper = "w-fit gap-9";
+export const quoteMark = (isLargeTeaser: boolean) =>
+  cnb("shrink-0 leading-[0]", {
+    "text-[clamp(16rem,7.46vw+13.31rem,26rem)] mt-[clamp(6rem,4.03vw+4.55rem,11.4rem)]":
+      !isLargeTeaser,
+    "text-[clamp(17rem,11.19vw+12.97rem,32rem)] mt-[clamp(6rem,4.03vw+4.55rem,11.4rem)]":
+      isLargeTeaser,
+  });
+export const teaser = "rs-mb-0 grow-0 w-fit";
+export const body = "mt-02em first:mt-0 whitespace-pre-line";
+export const source = "rs-mt-1 whitespace-pre-line";

app/components/Quote/Quote.tsx

@@ -0,0 +1,79 @@
+import { AnimateInView, type AnimationType } from "@/components/Animate";
+import { Container } from "@/components/Container";
+import { Text } from "@/components/Typography";
+import * as styles from "./Quote.styles";
+import { cnb } from "cnbuilder";
+
+export type QuoteProps = React.HTMLAttributes<HTMLDivElement> & {
+  teaser?: string;
+  body?: string;
+  source?: string;
+  addDarkOverlay?: boolean;
+  isLargeTeaser?: boolean;
+  isLargeBody?: boolean;
+  isMinimal?: boolean;
+  quoteOnRight?: boolean;
+  animation?: AnimationType;
+  delay?: number;
+};
+
+export const Quote = ({
+  teaser,
+  body,
+  addDarkOverlay,
+  isMinimal,
+  isLargeTeaser = false,
+  isLargeBody,
+  source,
+  animation = "slideUp",
+  quoteOnRight = false,
+  delay,
+  children,
+  className,
+  ...props
+}: QuoteProps) => {
+  return (
+    <AnimateInView animation={animation} delay={delay}>
+      <Container
+        width="full"
+        py={addDarkOverlay && !isMinimal ? 5 : undefined}
+        className={cnb(styles.root(quoteOnRight), className)}
+        {...props}
+      >
+        <blockquote>
+          {teaser && (
+            <>
+              <Text font="serif" className={styles.quoteMark(isLargeTeaser)}>
+                {quoteOnRight ? "”" : "“"}
+              </Text>
+              <Text
+                size={isLargeTeaser ? "f5" : "f4"}
+                leading="none"
+                font="dm-sans"
+                className={styles.teaser}
+              >
+                {teaser}
+              </Text>
+            </>
+          )}
+          {body && (
+            <Text
+              variant={isLargeBody ? undefined : "big"}
+              leading="display"
+              size={isLargeBody ? 2 : undefined}
+              font="dm-sans"
+              className={styles.body}
+            >
+              {body}&quot;
+            </Text>
+          )}
+          {source && (
+            <Text variant="card" font="dm-mono" className={styles.source}>
+              {source}
+            </Text>
+          )}
+        </blockquote>
+      </Container>
+    </AnimateInView>
+  );
+};

app/components/Quote/index.ts

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

app/components/Typography/typography.styles.ts

@@ -2,6 +2,7 @@ export const fontFamilies = {
   sans: "font-sans",
   serif: "font-serif",
   "dm-sans": "font-dm-sans",
+  "dm-mono": "font-dm-mono",
 };
 
 export const fontWeights = {

app/example/page.tsx

@@ -10,6 +10,7 @@ import MediaCaptionImage from "@/components/MediaCaptionImage/MediaCaptionImage"
 import { Container } from "@/components/Container";
 import { AlumniBanner } from "@/components/AlumniBanner";
 import { HorizontalLineart } from "@/components/images/horizontal-lineart";
+import { Quote } from "@/components/Quote";
 
 const ExamplePage = async () => {
   const timelineData = await loadTimelineData();
@@ -207,6 +208,11 @@ const ExamplePage = async () => {
           </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} />
     </div>
   );

app/layout.tsx

@@ -14,7 +14,7 @@ const dm_mono = DM_Mono({
   subsets: ["latin"],
   style: ["italic", "normal"],
   display: "swap",
-  variable: "--font-font-dm-mono",
+  variable: "--font-dm-mono",
   weight: "300",
 });