feat: relocate Benefit component from web

Author: Uzhastin-Nikita

src/components/molecules/Benefits/Benefit.utils.ts

@@ -0,0 +1,55 @@
+export type Benefit = {
+  header: string
+  content: string
+  svgUrl: string
+}
+
+export const BENEFITS: Benefit[][] = [
+  [
+    {
+      svgUrl: 'images/benefit/dollar.svg',
+      header: 'Доступность',
+      content: 'Мы внимательно подошли к формированию цены, чтобы Вы могли найти подходящее решение'
+    }
+  ],
+  [
+    {
+      svgUrl: 'images/benefit/guality.svg',
+      header: 'Профессионализм',
+      content: 'Мы - программисты и геймеры, которые понимают что нужно для максимального комфорта и эргономики!'
+    }
+  ],
+  [
+    {
+      svgUrl: 'images/benefit/tool.svg',
+      header: 'Конфигурируемость',
+      content:
+        'Заменить видеокарту или добавить ОЗУ?' +
+        ' Без проблем, крышка поднимается так, что процесс установки комплектующих принесёт удовольствие!'
+    }
+  ],
+  [
+    {
+      svgUrl: 'images/benefit/modules.svg',
+      header: 'Модульность',
+      content:
+        'Ремонтопригодность - неотъемлая часть долгосрочной эксплуатации' +
+        ', если повредите стекло или опоры, то всегда сможете заказать их отдельно!'
+    }
+  ],
+  [
+    {
+      svgUrl: 'images/benefit/vector.svg',
+      header: 'Гибкость',
+      content: 'Хотите использовать свою сборку или поместить элементы декора? Мы поможем!'
+    }
+  ],
+  [
+    {
+      svgUrl: 'images/benefit/envelope.svg',
+      header: 'Ваши предложения',
+      // TODO: Добавить возможность перехода по ссылке
+      content: 'В разделе Контакты есть вся необходимая информация, чтобы связаться с нами!'
+    }
+  ]
+]

src/components/molecules/Benefits/Benefit/Benefit.styles.module.scss

@@ -0,0 +1,124 @@
+@import 'src/scss/mixins';
+
+.header,
+.benefit,
+.container {
+  @include flex-center;
+}
+
+.benefit {
+  width: 380px;
+  border-radius: 26px;
+  background: $color-background-indigo;
+  margin-top: 40px;
+
+  @include desktop {
+    padding: 35px 0;
+    position: relative;
+
+    &:hover .emergence {
+      display: flex;
+    }
+  }
+
+  @include devices {
+    display: flex;
+    flex-flow: column;
+  }
+
+  @include tablet {
+    width: 380px;
+    height: 280px;
+  }
+}
+
+.benefit,
+.emergence {
+  cursor: pointer;
+}
+
+.header {
+  @include desktop {
+    width: 380px;
+    flex-flow: column;
+  }
+
+  @include tablet {
+    width: 90%;
+    justify-content: space-evenly;
+    flex-flow: row-reverse;
+  }
+}
+
+.img {
+  width: 100px;
+  height: 100px;
+  margin: 30px;
+
+  @include devices {
+    width: 80px;
+    height: 80px;
+    margin: 10px;
+  }
+}
+
+.title {
+  color: $color-white;
+  font-family: $font-lato;
+  font-size: 30px;
+  font-weight: 700;
+  line-height: 36px;
+
+  @include desktop {
+    font-size: 30px;
+  }
+
+  @include tablet {
+    font-size: 20px;
+  }
+}
+
+.container {
+  @include desktop {
+    width: 380px;
+  }
+
+  @include tablet {
+    width: 355px;
+  }
+}
+
+.content {
+  color: $color-light;
+  font-family: $font-lato;
+  font-size: 24px;
+  font-weight: 400;
+  line-height: 32px;
+  margin: 10px;
+  padding: 15px;
+
+  @include tablet {
+    font-size: 16px;
+    margin: 0;
+    padding: 13px;
+  }
+}
+
+.emergence {
+  @include desktop {
+    width: 100%;
+    border-radius: 26px;
+    align-items: center;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    top: 0;
+    display: none;
+    position: absolute;
+    background: $color-background-indigo;
+  }
+
+  @include devices {
+    display: flex;
+  }
+}

src/components/molecules/Benefits/Benefit/Benefit.tsx

@@ -0,0 +1,48 @@
+import React from 'react'
+
+import cx from 'classnames'
+
+import { Image } from 'src/components/atoms/Image'
+
+import css from './Benefit.styles.module.scss'
+
+export type BenefitProps = {
+  className?: string
+  headerClassName?: string
+  imgClassName?: string
+  titleClassName?: string
+  emergenceClassName?: string
+  containerClassName?: string
+  contentClassName?: string
+  header: string
+  content: string
+  svgUrl: string
+}
+
+export const Benefit = ({
+  header,
+  content,
+  svgUrl,
+  className,
+  headerClassName,
+  imgClassName,
+  titleClassName,
+  emergenceClassName,
+  containerClassName,
+  contentClassName
+}: BenefitProps) => {
+  return (
+    <div className={cx(css.benefit, className)}>
+      <div className={cx(css.header, headerClassName)}>
+        <Image className={cx(css.img, imgClassName)} src={svgUrl} />
+        <span className={cx(css.title, titleClassName)}>{header}</span>
+      </div>
+
+      <div className={cx(css.emergence, emergenceClassName)}>
+        <div className={cx(css.container, containerClassName)}>
+          <span className={cx(css.content, contentClassName)}>{content}</span>
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/molecules/Benefits/Benefit/index.ts

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

src/components/molecules/Benefits/Benefits.styles.module.scss

@@ -0,0 +1,36 @@
+@import 'src/scss/mixins';
+
+.benefits {
+  @include flex-center;
+
+  flex-flow: wrap;
+  width: 100%;
+  margin-top: 100px;
+  margin-bottom: 50px;
+
+  @include mobile {
+    display: none;
+  }
+}
+
+.container {
+  display: grid;
+  grid-template-columns: 380px 380px 380px;
+  grid-template-rows: 280px 280px;
+  grid-gap: 40px;
+  margin-top: 50px;
+
+  @include tablet {
+    grid-template-columns: 380px 380px;
+    grid-template-rows: 280px 280px;
+    grid-template-rows: 17em 17em;
+    grid-gap: 40px;
+  }
+}
+
+.title {
+  width: 100%;
+  display: block;
+  text-align: left;
+  margin: 70px 0 30px;
+}

src/components/molecules/Benefits/Benefits.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+
+import cx from 'classnames'
+
+import { TitleBlock } from 'src/components/atoms/TitleBlock'
+
+import { Benefit } from './Benefit'
+import { BENEFITS } from './Benefit.utils'
+
+import css from './Benefits.styles.module.scss'
+
+export const Benefits = () => {
+  return (
+    <div className={css.benefits}>
+      <div className={cx(css.title)}>
+        <TitleBlock simpleText="Наши" highlightText="преимущества" />
+      </div>
+      <div className={cx(css.container)}>
+        {BENEFITS.map((row, rowIndex) => {
+          return (
+            <div key={`benefit-row-${rowIndex}`}>
+              {row.map((column, columnIndex) => {
+                return (
+                  <Benefit
+                    key={`benefit-column-${columnIndex}`}
+                    header={column.header}
+                    content={column.content}
+                    svgUrl={column.svgUrl}
+                  />
+                )
+              })}
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}

src/components/molecules/Benefits/index.ts

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