feat: add toaster

src/widgets/contacts-form/index.ts

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

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

@@ -0,0 +1,120 @@
+.Form {
+  position: relative;
+  background: #292E3D;
+  display: flex;
+  flex-direction: column;
+  gap: rem(40px);
+  overflow: hidden;
+  padding: rem(60px) rem(50px);
+  border-radius: rem(28px);
+  margin-bottom: rem(80px);
+
+  @include iftablet {
+    flex-direction: row;
+    gap: unset;
+    padding: rem(60px) rem(50px);
+    border-radius: rem(28px);
+    margin-bottom: rem(120px);
+  }
+
+  @include iflaptop {
+    padding: rem(60px) rem(50px);
+    border-radius: rem(28px);
+    margin-bottom: rem(100px);
+  }
+
+  @include ifdesktop {
+    padding: rem(60px) rem(50px);
+    border-radius: rem(28px);
+    margin-bottom: rem(160px);
+  }
+
+  &: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;
+    display: flex;
+    flex-direction: column;
+
+    .Title {
+      position: relative;
+      z-index: 2;
+      font-family: $font-open-sans;
+      font-weight: $font-semi-bold;
+      font-size: rem(26px);
+      line-height: 100%;
+      color: $color-white;
+      margin-bottom: rem(16px);
+
+      @include iftablet {
+        font-size: rem(28px);
+        margin-bottom: rem(60px);
+      }
+
+      @include iflaptop {
+        font-size: rem(36px);
+        margin-bottom: rem(80px);
+      }
+
+      @include ifdesktop {
+        font-size: rem(48px);
+        margin-bottom: rem(80px);
+      }
+    }
+
+    .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(18px);
+      }
+
+      @include iflaptop {
+        font-size: rem(20px);
+      }
+
+      @include ifdesktop {
+        font-size: rem(32px);
+        max-width: rem(720px);
+      }
+    }
+  }
+
+  .Inputs {
+    position: relative;
+    z-index: 2;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-self: center;
+    gap: rem(20px);
+
+    @include iftablet {
+      align-self: unset;
+    }
+  }
+}

src/widgets/contacts-form/ui.tsx

@@ -0,0 +1,40 @@
+'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 ContactsForm() {
+  const notify = () => toast.success('Заявка на консультацию принята');
+
+  return (
+    <div className={s.Form}>
+      <Image
+        className={s.Background}
+        src={bgForm}
+        placeholder='blur'
+        alt={''}
+        quality={75}
+        fill
+        priority
+      />
+      <div className={s.Offer}>
+        <h3 className={s.Title}>Остались вопросы?</h3>
+        <p className={s.SubTitle}>
+          Наш эксперт свяжется с вами для уточнения подробностей и определения
+          точной стоимости работ
+        </p>
+      </div>
+      <form className={s.Inputs}>
+        <Input placeholder='Ваше имя' fullWidth />
+        <Input type='text' placeholder='+7 (999) 123 45 67' fullWidth />
+        <Button variant='orange' fullWidth onClick={notify}>
+          Получить консультацию
+        </Button>
+      </form>
+    </div>
+  );
+}

src/widgets/footer-form/index.ts

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

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

@@ -0,0 +1,45 @@
+.Form {
+  display: flex;
+  flex-direction: column;
+  gap: rem(20px);
+  width: 100%;
+
+  @include iftablet {
+    width: unset;
+    max-width: 100%;
+  }
+
+  @include iflaptop {
+    max-width: 60%;
+  }
+
+  @include ifdesktop {
+    max-width: 60%;
+  }
+
+  .Header {
+    font-family: $font-open-sans;
+    font-weight: $font-semi-bold;
+    font-size: rem(28px);
+    line-height: 100%;
+    color: $color-white;
+    margin-bottom: rem(30px);
+
+    @include iflaptop {
+      font-size: rem(42px);
+      margin-bottom: rem(30px);
+    }
+
+    @include ifdesktop {
+      font-size: rem(60px);
+      margin-bottom: rem(40px);
+    }
+  }
+
+  .SendBtn {
+    align-self: flex-end;
+    max-width: 33%;
+  }
+}
+
+

src/widgets/footer-form/ui.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import s from './styles.module.scss';
+import { Button, Input, Mark, TextArea } from '@shared/ui';
+import toast from 'react-hot-toast';
+
+export default function FooterForm() {
+  const notify = () => toast.success('Заявка на консультацию принята');
+
+  return (
+    <form className={s.Form}>
+      <h2 className={s.Header}>
+        Давайте <Mark>обсудим</Mark> ваши задачи
+      </h2>
+      <Input variant='ghost' placeholder={'Ваше имя'} fullWidth />
+      <Input variant='ghost' placeholder={'+7 999 1234567'} fullWidth />
+      <TextArea
+        variant='ghost'
+        placeholder={'Кратко опишите вашу задачу'}
+        fullWidth
+        id='story'
+        name='story'
+        rows={6}
+      />
+      <Button className={s.SendBtn} variant='orange' fullWidth onClick={notify}>
+        Отправить
+      </Button>
+    </form>
+  );
+}

src/widgets/index.ts

@@ -1 +1,6 @@
+export { ContactsForm } from './contacts-form';
+export { FooterForm } from './footer-form';
+export { LicenseForm } from './license-form';
 export { LicenseSlider } from './license-slider';
+export { OfferForm } from './offer-form';
+export { OfferRequestForm } from './offer-request';

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>
+  );
+}

src/widgets/license-slider/index.ts

@@ -1 +1 @@
-export { default as LicenseSlider } from './license-slider';
+export { default as LicenseSlider } from './ui';

src/widgets/license-slider/license-slider.module.scss

@@ -1,10 +0,0 @@
-.Slider {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-}
-
-.Slide {
-  cursor: pointer;
-  width: 100%;
-}

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

@@ -0,0 +1,20 @@
+.Slider {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin-bottom: rem(40px);
+  padding: 0 rem(20px) 0;
+
+  @include iftablet {
+    padding: unset;
+  }
+
+  @include ifdesktop {
+    margin-bottom: rem(80px);
+  }
+}
+
+.Slide {
+  cursor: pointer;
+  width: 100%;
+}

src/widgets/license-slider/ui.tsx

@@ -1,11 +1,10 @@
 'use client';
 
-import s from './license-slider.module.scss';
+import s from './styles.module.scss';
 
 import Image from 'next/image';
 import { StaticImport } from 'next/dist/shared/lib/get-img-props';
 import { clsx } from 'clsx';
-
 import { Swiper, SwiperSlide } from 'swiper/react';
 import { Grid } from 'swiper/modules';
 import 'swiper/css';
@@ -42,10 +41,7 @@ const swiperBreakpoints = {
   },
 };
 
-export default function LicenseSlider({
-  className,
-  images,
-}: LicenseSliderProps) {
+export default function Ui({ className, images }: LicenseSliderProps) {
   return (
     <Swiper
       className={clsx(s.Slider, className)}

src/widgets/offer-form/index.ts

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

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

@@ -0,0 +1,31 @@
+.RowForm {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+  gap: rem(10px);
+  margin-bottom: rem(80px);
+
+  @include iftablet {
+    flex-direction: row;
+    justify-content: center;
+    gap: rem(10px);
+  }
+
+  @include iflaptop {
+    justify-content: center;
+    gap: rem(20px);
+  }
+
+  @include ifdesktop {
+    justify-content: center;
+    gap: rem(40px);
+  }
+
+  .Unit {
+    width: 300px;
+    @include iftablet {
+      width: unset;
+    }
+  }
+}

src/widgets/offer-form/ui.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+import s from './styles.module.scss';
+import { Button, Input } from '@shared/ui';
+import { useState } from 'react';
+import toast from 'react-hot-toast';
+
+export default function OfferForm() {
+  const [name, setName] = useState('');
+  const notify = () => toast.success('Заявка на консультацию принята');
+
+  return (
+    <form className={s.RowForm}>
+      <Input className={s.Unit} type='text' placeholder='+7 (999) 123 45 67' />
+      <Input
+        className={s.Unit}
+        type='text'
+        placeholder='Ваше имя'
+        value={name}
+        onChange={(e) => setName(e.target.value)}
+      />
+      <Button className={s.Unit} variant='orange' onClick={notify}>
+        Получить консультацию
+      </Button>
+    </form>
+  );
+}

src/widgets/offer-request/index.ts

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

src/widgets/offer-request/styles.module.scss

@@ -0,0 +1,129 @@
+.Form {
+  position: relative;
+  background: #292E3D;
+  overflow: hidden;
+
+  display: grid;
+  grid-template-rows: auto 1fr;
+  grid-template-columns: 1fr;
+  gap: rem(20px);
+  padding: rem(25px) rem(20px);
+  border-radius: rem(28px);
+
+  @include iftablet {
+    padding: rem(30px);
+  }
+
+  @include iflaptop {
+    grid-template-rows: 1fr;
+    grid-template-columns: auto rem(400px);
+    padding: rem(40px);
+  }
+  @include ifdesktop {
+    grid-template-columns: auto rem(550px);
+    padding: rem(40px) rem(60px);
+  }
+
+  &: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;
+  }
+
+  .PanelLeft {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .PanelRight {
+    place-self: center center;
+
+    @include iftablet{
+      width: rem(400px);
+      place-self: end end;
+    }
+    @include iflaptop{
+      width: 100%;
+    }
+
+    .AdvPhoneInput{
+      display: none;
+      @include iftablet{
+        display: block;
+      }
+    }
+    .MobileBtns {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      gap: rem(12px);
+      z-index: 2;
+      max-width: rem(400px);
+      @include iftablet{
+        display: none;
+      }
+    }
+  }
+
+
+  .SubTitle {
+    position: relative;
+    z-index: 2;
+    font-family: $font-open-sans;
+    font-weight: $font-light;
+    font-size: rem(22px);
+    line-height: 100%;
+    color: $color-white;
+    margin-bottom: rem(16px);
+
+    @include iftablet {
+      margin-bottom: rem(20px);
+    }
+
+    @include iflaptop {
+      font-size: rem(24px);
+    }
+
+    @include ifdesktop {
+      font-size: rem(30px);
+      margin-bottom: rem(16px);
+    }
+  }
+
+  .Title {
+    position: relative;
+    z-index: 2;
+    font-family: $font-open-sans;
+    font-weight: $font-regular;
+    font-size: rem(26px);
+    line-height: 130%;
+    color: $color-white;
+    max-width: rem(660px);
+    margin: 0;
+
+    @include iftablet {
+      font-size: rem(28px);
+    }
+
+    @include iflaptop {
+      font-size: rem(32px);
+    }
+
+    @include ifdesktop {
+      font-size: rem(48px);
+    }
+  }
+}

src/widgets/offer-request/ui.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import s from './styles.module.scss';
+import { AdvancedPhoneInput, 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 OfferRequest() {
+  const notify = () => toast.success('Заявка на консультацию принята');
+
+  return (
+    <div className={s.Form}>
+      <Image
+        className={s.Background}
+        src={bgForm}
+        placeholder='blur'
+        alt={''}
+        quality={75}
+        fill
+        priority
+      />
+      <div className={s.PanelLeft}>
+        <p className={s.SubTitle}>Нужна помощь?</p>
+        <h3 className={s.Title}>Оставьте заявку на бесплатную консультацию</h3>
+      </div>
+      <div className={s.PanelRight}>
+        <AdvancedPhoneInput
+          containerClassName={s.AdvPhoneInput}
+          text='Отправить заявку'
+          placeholder={'+7 (999) 123 45 67'}
+          onClick={notify}
+        />
+
+        <div className={s.MobileBtns}>
+          <Input placeholder='Ваше имя' fullWidth />
+          <Input placeholder='+7 999 123 45 67' fullWidth />
+          <Button variant='orange' fullWidth onClick={notify}>
+            Отправить заявку
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}