src/entities/index.ts

@@ -2,3 +2,4 @@ export * from './top-menu';
 export * from './base-menu';
 export * from './callback-form';
 export * from './connect';
+export * from './order-schema';

src/entities/order-schema/index.ts

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

src/entities/order-schema/styles.module.scss

@@ -0,0 +1,29 @@
+.Container {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  background: $color-green;
+  padding: rem(20px);
+  border-radius: rem(16px);
+  margin-bottom: rem(40px);
+
+  .Block{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: rem(4px);
+
+    .Arrow{
+      margin-top: rem(50px);
+    }
+
+    .Text{
+      font-family: $font-roboto;
+      font-weight: 400;
+      font-size: rem(14px);
+      line-height: 150%;
+      color: $color-white;
+      text-align: center;
+      text-transform: uppercase;
+    }
+  }
+}

src/entities/order-schema/ui.tsx

@@ -0,0 +1,52 @@
+import s from './styles.module.scss';
+import Image from 'next/image';
+import stepOne from '@public/images/step1.png';
+import stepTwo from '@public/images/step2.png';
+import stepThree from '@public/images/step3.png';
+import stepFour from '@public/images/step4.png';
+import arrow from '@public/images/arrow.png';
+
+function OrderSchema() {
+  return (
+    <div className={s.Container}>
+      <div className={s.Block}>
+        <Image className={s.Image} src={stepOne} alt={''} height={120} />
+        <p className={s.Text}> Заявка на сайте </p>
+        <p className={s.Text}> или </p>
+        <p className={s.Text}> звонок по телефону </p>
+        <p className={s.Text}> +7 (900) 241-34-34 </p>
+      </div>
+      <div className={s.Block}>
+        <Image className={s.Arrow} src={arrow} alt={''} height={16} />
+      </div>
+      <div className={s.Block}>
+        <Image className={s.Image} src={stepTwo} alt={''} height={120} />
+        <p className={s.Text}>Мы свяжемся </p>
+        <p className={s.Text}> с вами</p>
+        <p className={s.Text}>и уточним</p>
+        <p className={s.Text}>детали</p>
+      </div>
+      <div className={s.Block}>
+        <Image className={s.Arrow} src={arrow} alt={''} height={16} />
+      </div>
+      <div className={s.Block}>
+        <Image className={s.Image} src={stepThree} alt={''} height={120} />
+        <p className={s.Text}>Подписываем договор,</p>
+        <p className={s.Text}>Вы оплачиваете услуги,</p>
+        <p className={s.Text}>предоставляете необходимые </p>
+        <p className={s.Text}>документы</p>
+      </div>
+      <div className={s.Block}>
+        <Image className={s.Arrow} src={arrow} alt={''} height={16} />
+      </div>
+      <div className={s.Block}>
+        <Image className={s.Image} src={stepFour} alt={''} height={120} />
+        <p className={s.Text}>Составляем</p>
+        <p className={s.Text}>Экспертное заключение,</p>
+        <p className={s.Text}>вы получаете результат</p>
+      </div>
+    </div>
+  );
+}
+
+export { OrderSchema };

src/views/expertise/autotech/ui.tsx

@@ -1,5 +1,5 @@
 import s from './styles.module.scss';
-import { CallbackForm, Connect } from '@/entities';
+import { CallbackForm, Connect, OrderSchema } from '@/entities';
 
 function AutoTech() {
   return (
@@ -64,7 +64,9 @@ function AutoTech() {
             <li className={s.ListItem}>паспортные данные заказчика;</li>
           </ul>
           <h3 className={s.Header}>Заказать экспертизу очень просто:</h3>
-          WIDGET
+
+          <OrderSchema />
+
           <p className={s.Text}>
             Экспертное заключение, полученный от компании «ДИ ТРАСО», будет
             являться официальным документом, подтверждающим результат работы