feat: relocate TitleBlock component from web

src/components/atoms/TitleBlock/TitleBlock.styles.module.scss

@@ -0,0 +1,30 @@
+@import 'src/scss/mixins';
+
+.heading {
+  width: 100%;
+  height: 70px;
+  display: flex;
+  flex-wrap: wrap;
+
+  @include desktop {
+    margin-top: 80px;
+  }
+
+  @include devices {
+    margin-top: 20px;
+  }
+}
+
+.text {
+  font-family: $font-lato;
+  font-size: 48px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 58px;
+  letter-spacing: 0;
+  text-align: left;
+}
+
+.text-color {
+  color: $color-base;
+}

src/components/atoms/TitleBlock/TitleBlock.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+
+import cx from 'classnames'
+
+import css from './TitleBlock.styles.module.scss'
+
+export type TitleBlockProps = {
+  simpleText?: string
+  highlightText?: string
+  className?: string
+  simpleClassName?: string
+  highlightClassName?: string
+}
+
+export const TitleBlock = ({
+  simpleText,
+  highlightText,
+  className,
+  simpleClassName,
+  highlightClassName
+}: TitleBlockProps) => {
+  if (!simpleText && !highlightText) {
+    return null
+  }
+
+  const getSimpleText = () => {
+    if (simpleText) {
+      return <>{simpleText}&nbsp;</>
+    }
+
+    return simpleText
+  }
+
+  return (
+    <div className={cx(css.heading, className)}>
+      {simpleText && <span className={cx(css.text, simpleClassName)}>{getSimpleText()}</span>}
+      {highlightText && <span className={cx(css.text, css.textColor, highlightClassName)}>{highlightText}</span>}
+    </div>
+  )
+}

src/components/atoms/TitleBlock/index.ts

@@ -0,0 +1 @@
+export * from './TitleBlock'