redesign the homepage

apps/homepage/src/components/typography/Typography.module.css

@@ -0,0 +1,70 @@
+.heading {
+  margin: 0;
+  color: var(--text-primary);
+}
+.display {
+  max-inline-size: 16ch;
+  font-size: var(--type-display-size);
+  line-height: var(--line-display);
+  letter-spacing: var(--tracking-display);
+}
+.section {
+  font-size: var(--type-heading-2-size);
+}
+.subheading {
+  font-size: var(--type-heading-3-size);
+}
+.eyebrow {
+  margin: 0;
+  color: var(--interactive-primary);
+  font-size: var(--type-label-size);
+  font-weight: 800;
+  letter-spacing: var(--tracking-label);
+  text-transform: uppercase;
+}
+html[dir='rtl'] .eyebrow {
+  letter-spacing: normal;
+  text-transform: none;
+}
+.text {
+  margin: 0;
+}
+.lead {
+  max-inline-size: 62ch;
+  color: var(--text-secondary);
+  font-size: var(--type-body-large-size);
+}
+.body {
+  max-inline-size: 70ch;
+}
+.supporting {
+  max-inline-size: 70ch;
+  color: var(--text-secondary);
+}
+.caption {
+  color: var(--text-secondary);
+  font-size: var(--type-caption-size);
+}
+.label {
+  font-size: var(--type-label-size);
+  font-weight: 700;
+}
+.quote {
+  display: grid;
+  gap: var(--space-3);
+  margin: 0;
+  padding-inline-start: var(--space-6);
+  border-inline-start: 4px solid var(--interactive-primary);
+}
+.quote blockquote {
+  margin: 0;
+  font-size: var(--type-body-large-size);
+}
+.quote figcaption {
+  color: var(--text-secondary);
+  font-size: var(--type-label-size);
+}
+html[lang='ar'] .display {
+  letter-spacing: normal;
+  line-height: 1.25;
+}

apps/homepage/src/components/typography/Typography.tsx

@@ -0,0 +1,67 @@
+import { classNames } from '@/lib/components/classNames';
+import type { HTMLAttributes, ReactNode } from 'react';
+import styles from './Typography.module.css';
+
+export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+export type HeadingStyle = 'display' | 'section' | 'subheading';
+
+interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
+  level: HeadingLevel;
+  appearance?: HeadingStyle;
+  children: ReactNode;
+}
+
+export function Heading({
+  level,
+  appearance = 'section',
+  className,
+  children,
+  ...props
+}: HeadingProps) {
+  const Component = `h${level}` as const;
+  return (
+    <Component className={classNames(styles.heading, styles[appearance], className)} {...props}>
+      {children}
+    </Component>
+  );
+}
+
+export function Eyebrow({ children, className, ...props }: HTMLAttributes<HTMLParagraphElement>) {
+  return (
+    <p className={classNames(styles.eyebrow, className)} {...props}>
+      {children}
+    </p>
+  );
+}
+
+export type TextVariant = 'lead' | 'body' | 'supporting' | 'caption' | 'label';
+
+interface TextProps extends HTMLAttributes<HTMLParagraphElement> {
+  variant?: TextVariant;
+  children: ReactNode;
+}
+
+export function Text({ variant = 'body', className, children, ...props }: TextProps) {
+  return (
+    <p className={classNames(styles.text, styles[variant], className)} {...props}>
+      {children}
+    </p>
+  );
+}
+
+export function Quote({
+  children,
+  cite,
+  className,
+}: {
+  children: ReactNode;
+  cite?: string;
+  className?: string;
+}) {
+  return (
+    <figure className={classNames(styles.quote, className)}>
+      <blockquote>{children}</blockquote>
+      {cite ? <figcaption>{cite}</figcaption> : null}
+    </figure>
+  );
+}