new lab banner

src/components/lab/LabFactoryBanner/index.tsx

@@ -0,0 +1,26 @@
+import React, { FC } from 'react';
+
+import { Group } from '~/components/containers/Group';
+
+import styles from './styles.module.scss';
+
+interface LabFactoryBannerProps {}
+
+const LabFactoryBanner: FC<LabFactoryBannerProps> = () => (
+  <div className={styles.banner}>
+    <Group>
+      <div className={styles.title}>Лаборатория!</div>
+
+      <Group className={styles.content}>
+        <p>
+          <strong>
+            Всё, что происходит здесь &mdash; всего лишь эксперимент, о котором
+            не узнает никто за пределами Убежища.
+          </strong>
+        </p>
+      </Group>
+    </Group>
+  </div>
+);
+
+export { LabFactoryBanner };

src/components/lab/LabFactoryBanner/styles.module.scss

@@ -0,0 +1,23 @@
+@import 'src/styles/variables';
+
+.banner {
+  @include outer_shadow;
+
+  display: flex;
+  aspect-ratio: 0.7;
+  background: url('/images/peoples_lab.svg') 50% 100%;
+  background-size: cover;
+  padding: $gap;
+  border-radius: $radius;
+}
+
+.title {
+  font: $font_24_bold;
+  text-transform: uppercase;
+}
+
+.content {
+  font: $font_14_medium;
+  line-height: 19px;
+  opacity: 0.7;
+}