Typography

1import { FC, HTMLAttributes } from 'react';
2 
3import { cn } from '@/lib/utils';
4 
5/**
6 * Display1 Component - 80px display text for prominent titles and hero sections.
7 *
8 * @component
9 * @example
10 * ```tsx
11 * <Display1>Large Hero Title</Display1>
12 * <Display1 className="text-center">Centered Title</Display1>
13 * ```
14 *
15 * @param props - Standard HTML heading attributes
16 * @returns  An h1 element with 80px font size and medium weight
17 */
18const Display1: FC<HTMLAttributes<HTMLHeadingElement>> = ({ children, className, ...props }) => {
19  return (
20    <h1 className={cn('text-[5rem] leading-25 font-medium', className)} {...props}>
21      {children}
22    </h1>
23  );
24};
25 
26/**
27 * Display2 Component - 72px display text for large headings.
28 *
29 * @component
30 * @example
31 * ```tsx
32 * <Display2>Section Title</Display2>
33 * ```
34 *
35 * @param props - Standard HTML heading attributes
36 * @returns  An h1 element with 72px font size and medium weight
37 */
38const Display2: FC<HTMLAttributes<HTMLHeadingElement>> = ({ children, className, ...props }) => {
39  return (
40    <h1 className={cn('text-[4.5rem] leading-25 font-medium', className)} {...props}>
41      {children}
42    </h1>
43  );
44};
45 
46/**
47 * Display3 Component - 64px display text for medium-large headings.
48 *
49 * @component
50 * @example
51 * ```tsx
52 * <Display3>Page Title</Display3>
53 * ```
54 *
55 * @param props - Standard HTML heading attributes
56 * @returns  An h1 element with 64px font size and medium weight
57 */
58const Display3: FC<HTMLAttributes<HTMLHeadingElement>> = ({ children, className, ...props }) => {
59  return (
60    <h1 className={cn('text-[4rem] leading-20 font-medium', className)} {...props}>
61      {children}
62    </h1>
63  );
64};
65 
66/**
67 * Display4 Component - 56px display text for prominent headings.
68 *
69 * @component
70 * @example
71 * ```tsx
72 * <Display4>Feature Title</Display4>
73 * ```
74 *
75 * @param props - Standard HTML heading attributes
76 * @returns  An h1 element with 56px font size and medium weight
77 */
78const Display4: FC<HTMLAttributes<HTMLHeadingElement>> = ({ children, className, ...props }) => {
79  return (
80    <h1 className={cn('text-[3.5rem] leading-18 font-medium', className)} {...props}>
81      {children}
82    </h1>
83  );
84};
85 
86/**
87 * Display5 Component - 48px display text for section headings.
88 *
89 * @component
90 * @example
91 * ```tsx
92 * <Display5>Content Section</Display5>
93 * ```
94 *
95 * @param props - Standard HTML heading attributes
96 * @returns  An h1 element with 48px font size and medium weight
97 */
98// … truncated