feat: add toaster

src/widgets/license-form/index.ts

@@ -0,0 +1 @@
+export { default as LicenseForm } from './ui';

src/widgets/license-form/styles.module.scss

@@ -0,0 +1,113 @@
+.Form {
+  position: relative;
+  background: #292E3D;
+  padding: rem(20px) rem(20px);
+  border-radius: rem(28px);
+  overflow: hidden;
+
+  display: flex;
+  flex-direction: column;
+  gap: rem(40px);
+
+  @include iftablet {
+    flex-direction: row;
+    padding: rem(40px) rem(40px);
+    gap: rem(20px);
+  }
+
+  @include iflaptop {
+    padding: rem(40px) rem(60px);
+    gap: rem(40px);
+  }
+
+  @include ifdesktop {
+  }
+
+  &:after {
+    content: '';
+    display: block;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    z-index: 1;
+    left: 0;
+    top: 0;
+    background-color: rgba(#163055, .6);
+    transition: 250ms background-color;
+  }
+
+  .Background {
+    position: absolute;
+    object-fit: cover;
+    z-index: 1;
+  }
+
+  .Offer {
+    flex: 2;
+
+    .Title {
+      position: relative;
+      z-index: 2;
+      font-family: $font-open-sans;
+      font-weight: $font-regular;
+      font-size: rem(26px);
+      line-height: 110%;
+      color: $color-white;
+      margin: 0 0 rem(20px);
+
+      @include iftablet {
+        font-size: rem(28px);
+        margin: 0 0 rem(36px);
+      }
+
+      @include iflaptop {
+        font-size: rem(32px);
+        margin: 0 0 rem(40px);
+      }
+
+      @include ifdesktop {
+        font-size: rem(48px);
+        margin: 0 0 rem(50px);
+      }
+    }
+
+    .SubTitle {
+      position: relative;
+      z-index: 2;
+      font-family: $font-open-sans;
+      font-weight: $font-light;
+      font-size: rem(16px);
+      line-height: 100%;
+      color: $color-white;
+
+      @include iftablet {
+        font-size: rem(20px);
+      }
+
+      @include ifdesktop {
+        font-size: rem(30px);
+        margin-bottom: rem(16px);
+        max-width: rem(820px);
+      }
+    }
+  }
+
+  .Inputs {
+    position: relative;
+    z-index: 2;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-self: center;
+    gap: rem(16px);
+
+    @include iftablet {
+    }
+
+    @include ifdesktop {
+      gap: rem(20px);
+    }
+  }
+
+}

src/widgets/license-form/ui.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import s from './styles.module.scss';
+import { Button, Input } from '@shared/ui';
+import Image from 'next/image';
+import toast from 'react-hot-toast';
+
+import bgForm from '@public/images/bg-form.jpg';
+
+export default function LicenseForm() {
+  const notify = () => toast.success('Заявка на консультацию принята');
+
+  return (
+    <div className={s.Form}>
+      <div className={s.Offer}>
+        <Image
+          className={s.Background}
+          src={bgForm}
+          placeholder='blur'
+          alt={''}
+          quality={75}
+          fill
+          priority
+        />
+        <h3 className={s.Title}>
+          Заключите договор до 1 июля и получите скидку на проведение пожарной
+          экспертизы 15 %
+        </h3>
+        <p className={s.SubTitle}>
+          Оставьте свои контактные данные и мы закрепим скидку до 1 июля за вами
+        </p>
+      </div>
+      <form className={s.Inputs}>
+        <Input placeholder={'Ваше имя'} fullWidth />
+        <Input placeholder={'+7 (999) 123 45 67'} fullWidth />
+        <Button variant='orange' fullWidth onClick={notify}>
+          Получить консультацию
+        </Button>
+      </form>
+    </div>
+  );
+}