feat: HomeCategories

src/components/common/HeadingCommon/HeadingCommon.module.scss

@@ -0,0 +1,23 @@
+@import '../../../styles/utilities';
+
+.headingCommon {
+  @apply font-heading uppercase text-left spacing-horizontal-left;
+  font-size: 3.2rem;
+  line-height: 4rem;
+
+  &.highlight {
+    color: var(--negative);
+  }
+  &.light {
+    color: var(--disabled);
+  }
+  &.center {
+    @apply text-center;
+  }
+
+  @screen md {
+    @apply spacing-horizontal;
+    font-size: 4.8rem;
+    line-height: 5.6rem;
+  } 
+}

src/components/common/HeadingCommon/HeadingCommon.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import classNames from 'classnames'
+import s from './HeadingCommon.module.scss'
+
+interface HeadingCommonProps {
+    type?: 'highlight' | 'light' | 'default';
+    align?: 'center' | 'left';
+    children: string;
+}
+
+const HeadingCommon = ({ type='default', align='left', children }: HeadingCommonProps) => {
+
+    return (
+        <div className={classNames(s.headingCommon, {
+            [s[type]]: type,
+            [s[align]]: align
+          })}
+        >{children}</div>
+    )
+
+}
+
+export default HeadingCommon