fix: add preview modal

src/app/layout.tsx

@@ -11,6 +11,7 @@ import {
   ScrollToTop,
 } from '@/widgets';
 import { ModalProvider } from '@core/providers/modal-provider';
+import { Toaster } from 'react-hot-toast';
 
 const roboto = Roboto({
   subsets: ['cyrillic'],
@@ -43,6 +44,7 @@ export default function RootLayout({
           <MobileCallback />
         </ModalProvider>
         <ScrollToTop />
+        <Toaster />
         <CookieNotice />
       </body>
     </html>

src/entities/beauty-button/ui.tsx

@@ -2,9 +2,9 @@
 
 import s from './styles.module.scss';
 import type { ReactNode } from 'react';
-import { useModal } from '@core/providers/modal-provider';
-import { ConsultationModal } from '@/feature/article';
 import { Icons } from '@/shared/ui/icon';
+import { useModal } from '@core/providers/modal-provider';
+import { ConsultationModal } from '@/widgets';
 
 type TBeautyButtonProps = {
   children?: ReactNode;

src/feature/article/index.ts

@@ -1,6 +1,5 @@
 export * from './related-articles';
 export * from './consultation';
 export * from './sidebar';
-export * from './consultation-modal';
 export * from './partners';
 export * from './documents';

src/feature/article/sidebar/ui.tsx

@@ -5,8 +5,8 @@ import Link from 'next/link';
 import { Button } from '@shared/ui';
 import { TSidebar } from '@shared/types/sidebar';
 import { useModal } from '@core/providers/modal-provider';
-import { ConsultationModal } from '@/feature/article';
 import { CONTACTS } from '@shared/const/contacts';
+import { ConsultationModal } from '@/widgets';
 
 type SidebarProps = { pageName?: string } & TSidebar;
 

src/views/home/about/styles.module.scss

@@ -1,8 +1,8 @@
-.About{
+.About {
   background: #f7f7f7;
 }
 
-.Inner{
+.Inner {
   margin: 0 auto;
   max-width: rem(1540px);
   padding: rem(80px) rem(10px);
@@ -20,13 +20,13 @@
   margin-bottom: rem(80px);
 }
 
-.Block{
+.Block {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: rem(40px);
 
-  @include iflaptop{
+  @include iflaptop {
     flex-direction: row;
   }
 }
@@ -49,17 +49,17 @@
   box-shadow: rem(15px) 0 rem(40px) 0 rgba(0, 0, 0, 0.5);
   transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
 
-  @include iftablet{
+  @include iftablet {
     gap: rem(80px) rem(20px);
     margin: 0 rem(40px);
     padding: rem(40px);
     max-width: rem(760px);
   }
-  @include iflaptop{
+  @include iflaptop {
     max-width: unset;
   }
 
-  .Left{
+  .Left {
     grid-area: left;
     display: flex;
     flex-direction: column;
@@ -72,24 +72,24 @@
     color: $color-white;
     text-align: center;
 
-    @include iftablet{
+    @include iftablet {
       font-size: rem(20px);
     }
 
 
-    & p:first-child{
+    & p:first-child {
       font-weight: 500;
       font-size: rem(20px);
       margin-bottom: rem(16px);
 
-      @include iftablet{
+      @include iftablet {
         font-size: rem(28px);
         margin-bottom: rem(16px);
       }
     }
   }
 
-  .Right{
+  .Right {
     grid-area: right;
     display: flex;
     flex-direction: column;
@@ -102,29 +102,39 @@
     color: $color-white;
     text-align: center;
 
-    @include iftablet{
+    @include iftablet {
       font-size: rem(20px);
     }
 
 
-    & p:first-child{
+    & p:first-child {
       font-weight: 500;
       font-size: rem(20px);
       margin-bottom: rem(16px);
 
-      @include iftablet{
+      @include iftablet {
         font-size: rem(28px);
         margin-bottom: rem(16px);
       }
     }
   }
 
-  .Bottom{
+  .Bottom {
     grid-area: bottom;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
+
+    .Btn {
+      background: #58c644;
+    }
+
+    .Icon {
+      path {
+        fill: $color-white;
+      }
+    }
   }
 
 }
@@ -134,7 +144,7 @@
   padding: rem(20px) rem(20px);
   width: 100%;
 
-  @include iftablet{
+  @include iftablet {
     flex: 1;
     display: block;
     padding: 0 rem(20px);
@@ -145,4 +155,33 @@
   display: flex;
   justify-content: center;
   align-items: center;
+}
+
+
+.ModalContainer {
+  background: $color-white;
+  width: 100%;
+  border-radius: rem(16px);
+  padding: rem(10px) rem(10px);
+  margin-bottom: 20px;
+  display: flex;
+  flex-direction: column;
+  max-width: 460px;
+  justify-content: center;
+  align-self: center;
+
+  @include iftablet{
+    max-width: unset;
+    align-self: unset;
+    width: max-content;
+    height: auto;
+  }
+
+  & > svg {
+    z-index: 1;
+    path {
+      stroke: #FFFFFF;
+      stroke-opacity: 0.8;
+    }
+  }
 }

src/views/home/about/ui.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import s from './styles.module.scss';
-import { Button } from '@shared/ui';
+import { Button, Icons } from '@shared/ui';
 import 'swiper/css';
 import 'swiper/css/navigation';
 import 'swiper/css/grid';
@@ -14,6 +14,8 @@ import lic1 from '@public/images/licence/dtr-eac-0.png';
 import lic2 from '@public/images/licence/dtr-eac-1.png';
 import lic3 from '@public/images/licence/dtr-eac-2.png';
 import lic4 from '@public/images/licence/dtr-eac-3.png';
+import { useModal } from '@core/providers/modal-provider';
+import { Preview } from '@/widgets';
 
 const slidesData = [
   {
@@ -63,6 +65,23 @@ const swiperBreakpoints = {
 };
 
 function About() {
+  const modal = useModal();
+  const openModal = () =>
+    modal.showModal(
+      <Preview className={s.ModalContainer}>
+        <iframe
+          width='560'
+          height='315'
+          src='https://www.youtube.com/embed/-CgIZzd4qNY?si=wSZSMXolujovqQxT'
+          title='YouTube video player'
+          frameBorder='0'
+          allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share'
+          referrerPolicy='strict-origin-when-cross-origin'
+          allowFullScreen
+        ></iframe>
+      </Preview>,
+    );
+
   return (
     <section className={s.About}>
       <div className={s.Inner}>
@@ -84,7 +103,10 @@ function About() {
               </p>
             </div>
             <div className={s.Bottom}>
-              <Button>Посмотреть видео о нас</Button>
+              <Button className={s.Btn} onClick={openModal}>
+                <Icons.Youtube className={s.Icon} />
+                Посмотреть видео о нас
+              </Button>
             </div>
           </div>
           <Swiper

src/views/home/call-us/styles.module.scss

@@ -45,3 +45,19 @@
     padding: rem(20px) rem(40px);
   }
 }
+
+.Btn {
+  border: 1px solid #eeeeee44;
+}
+
+.Icon {
+  width: rem(20px);
+
+  @include iftablet{
+    width: rem(40px);
+  }
+
+  path {
+    fill: $color-white;
+  }
+}

src/views/home/call-us/ui.tsx

@@ -1,7 +1,19 @@
+'use client';
+
 import s from './styles.module.scss';
-import { Button } from '@shared/ui';
+import { Button, Icons } from '@shared/ui';
+import { CONTACTS } from '@shared/const/contacts';
+import { useModal } from '@core/providers/modal-provider';
+import { ConsultationModal } from '@/widgets';
 
 function CallUs() {
+  const modal = useModal();
+  const openModal = () => modal.showModal(<ConsultationModal />);
+
+  const handlePhoneClick = () => {
+    window.open(`tel:${CONTACTS.PHONE}`, '_self');
+  };
+
   return (
     <section className={s.CallUs}>
       <div className={s.LeftBlock}>
@@ -9,8 +21,14 @@ function CallUs() {
         <p className={s.LineText}>Свяжитесь с нами любым удобным способом</p>
       </div>
       <div className={s.RightBlock}>
-        <Button>Написать в чат</Button>
-        <Button>Бесплатный звонок</Button>
+        <Button className={s.Btn} onClick={openModal}>
+          <Icons.MobilePhone className={s.Icon} />
+          Мы вам перезвоним
+        </Button>
+        <Button className={s.Btn} onClick={handlePhoneClick}>
+          <Icons.MobileContact className={s.Icon} />
+          Связаться с нами
+        </Button>
       </div>
     </section>
   );

src/widgets/index.ts

@@ -5,3 +5,5 @@ export * from './mobile-callback';
 export * from './sidebar';
 export * from './scroll-to-top';
 export * from './cookie-notice';
+export * from './consultation-modal';
+export * from './preview-modal';

src/widgets/mobile-callback/ui.tsx

@@ -5,7 +5,7 @@ import { Icons } from '@shared/ui';
 import { phoneBeautify } from '@shared/lib/phoneBeautify/phoneBeautify';
 import { CONTACTS } from '@shared/const/contacts';
 import { useModal } from '@core/providers/modal-provider';
-import { ConsultationModal } from '@/feature/article';
+import { ConsultationModal } from '@/widgets';
 
 function MobileCallback() {
   const modal = useModal();

src/widgets/preview-modal/index.ts

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

src/widgets/preview-modal/styles.module.scss

@@ -0,0 +1,27 @@
+.Container {
+  background: $color-white;
+  width: 100%;
+  border-radius: rem(16px);
+  padding: rem(10px) rem(10px);
+  margin-bottom: 20px;
+  display: flex;
+  flex-direction: column;
+  max-width: 460px;
+  justify-content: center;
+  align-self: center;
+
+  @include iftablet{
+    max-width: unset;
+    align-self: unset;
+    width: max-content;
+    height: auto;
+  }
+
+  & > svg {
+    z-index: 1;
+    path {
+      stroke: #FFFFFF;
+      stroke-opacity: 0.8;
+    }
+  }
+}

src/widgets/preview-modal/ui.tsx

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import { ModalContent } from '@shared/ui';
+
+type PreviewProps = {
+  className?: string;
+  children: ReactNode;
+};
+
+function Preview({ children, className }: PreviewProps) {
+  return (
+    <ModalContent closeByClickOutside className={className}>
+      {children}
+    </ModalContent>
+  );
+}
+
+export { Preview };