OK

src/components/text.jsx

@@ -14,6 +14,62 @@ export function Heading({ as: Component = 'h1', className, children, ...props })
   )
 }
 
+export function H2({ className, children, ...props }) {
+  return (
+    <h2
+      className={clsx(
+        'mt-8 text-2xl font-medium tracking-tight text-bg-darkbrown sm:text-3xl',
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </h2>
+  )
+}
+
+export function H3({ className, children, ...props }) {
+  return (
+    <h2
+      className={clsx(
+        'mt-8 text-xl font-medium tracking-tight text-bg-darkbrown sm:text-2xl',
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </h2>
+  )
+}
+
+export function P({ className, children, ...props }) {
+  return (
+    <p
+      className={clsx(
+        'mt-4 text-lg/8 text-gray-700 font-extralight leading-tight',
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </p>
+  )
+}
+
+export function PS({ className, children, ...props }) {
+  return (
+    <p
+      className={clsx(
+        'mt-4 text-base text-gray-700 font-extralight leading-snug',
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </p>
+  )
+}
+
 export function Subheading({ className, children, ...props }) {
   return (
     <h3