Styling of home

components/shared/Paragraph/Paragraph.module.css

@@ -0,0 +1,3 @@
+.subtitle {
+    margin-block-start: -2em;
+}

components/shared/Paragraph/Paragraph.tsx

@@ -0,0 +1,23 @@
+import { FC, PropsWithChildren } from 'react'
+import cx from 'classnames'
+import typography from '../../../styles/typography.module.css'
+import styles from './Paragraph.module.css'
+
+interface Props {
+  size: 'large' | 'medium' | 'small' | 'subtitle'
+}
+
+export const Paragraph: FC<PropsWithChildren<Props>> = ({ size, children }) => {
+  return (
+    <p
+      className={cx({
+        [typography.bodyLarge]: size === 'large',
+        [typography.bodyMedium]: size === 'medium',
+        [typography.bodySmall]: size === 'small' || size === 'subtitle',
+        [styles.subtitle]: size === 'subtitle'
+      })}
+    >
+      {children}
+    </p>
+  )
+}