feat: add consultation section

src/core/styles/variables.scss

@@ -22,7 +22,7 @@ $color-black: #000000;
 $color-lightgray: #E4E1E1;
 $color-darkgray: #999999;
 $color-text: #333333;
-$color-text-light: #222222;
+$color-text-light: #777777;
 $color-green: #23A455;
 $color-link: #333333;
 $color-link-hover: #009283;

src/feature/article/consultation/index.ts

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

src/feature/article/consultation/styles.module.scss

@@ -0,0 +1,65 @@
+.Container {
+  margin: 0 auto;
+  width: rem(1540px);
+  display: grid;
+  grid-template-columns: auto 360px;
+  gap: 160px;
+}
+
+.Consultation {
+  background: $color-green;
+  margin-bottom: rem(40px);
+
+  .Block {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: rem(60px);
+    padding: rem(20px) 0;
+
+    .Header {
+      font-family: $font-roboto;
+      font-weight: 300;
+      font-size: rem(38px);
+      line-height: 100%;
+      color: $color-white;
+      text-transform: uppercase;
+    }
+
+    .Form {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: rem(20px);
+      width: 100%;
+    }
+  }
+
+  .Sidebar {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: rem(16px);
+    background: $color-white;
+    margin: rem(20px) 0;
+    padding: rem(20px);
+    border-radius: rem(20px);
+
+    .Title {
+      font-family: $font-roboto;
+      font-weight: 500;
+      font-size: rem(16px);
+      line-height: 100%;
+      color: $color-text;
+    }
+
+    .Description {
+      font-family: $font-roboto;
+      font-weight: 400;
+      font-size: rem(14px);
+      line-height: 100%;
+      color: $color-text-light;
+    }
+  }
+}
+

src/feature/article/consultation/ui.tsx

@@ -0,0 +1,34 @@
+import s from './styles.module.scss';
+import { Button, Input, PhoneInput } from '@shared/ui';
+import Image from 'next/image';
+import expertPhoto from '@public/images/photo/yancen-yana.png';
+
+function Consultation() {
+  return (
+    <section className={s.Consultation}>
+      <div className={s.Container}>
+        <div className={s.Block}>
+          <h3 className={s.Header}>Бесплатная консультация специалиста</h3>
+          <form className={s.Form}>
+            <Input variant={'ghost'} placeholder={'Имя'} fullWidth />
+            <PhoneInput
+              variant={'ghost'}
+              placeholder={'+7 999 123-45-67'}
+              fullWidth
+            />
+            <Button variant={'white'} fullWidth>
+              Записаться
+            </Button>
+          </form>
+        </div>
+        <div className={s.Sidebar}>
+          <Image src={expertPhoto} alt={'Автоэксперт - Янцен Яна'} />
+          <p className={s.Title}>Янцен Яна</p>
+          <p className={s.Description}>Автоэксперт</p>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export { Consultation };

src/feature/article/index.ts

@@ -0,0 +1,2 @@
+export * from './related-articles';
+export * from './consultation';

src/feature/article/related-articles/index.ts

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

src/feature/article/related-articles/styles.module.scss

@@ -0,0 +1,42 @@
+.Related {
+  .Container {
+    margin: 0 auto;
+    width: rem(1540px);
+    display: grid;
+    grid-template-columns: auto 360px;
+    gap: 160px;
+  }
+
+  .Header {
+    font-family: $font-roboto;
+    font-weight: 300;
+    font-size: 32px;
+    line-height: 130%;
+    color: $color-text;
+    margin-bottom: 16px;
+  }
+
+  .Grid {
+    display: grid;
+    grid-template-columns: auto auto;
+    gap: 16px;
+    margin-bottom: 20px;
+
+    .Title {
+      font-family: $font-roboto;
+      font-weight: 500;
+      font-size: 20px;
+      line-height: 130%;
+      color: $color-text;
+      margin-bottom: 16px;
+    }
+
+    .Description {
+      font-family: $font-roboto;
+      font-weight: 400;
+      font-size: 16px;
+      line-height: 130%;
+      color: $color-text;
+    }
+  }
+}

src/feature/article/related-articles/ui.tsx

@@ -0,0 +1,58 @@
+import s from './styles.module.scss';
+import { CallbackForm } from '@/entities';
+
+function RelatedArticles() {
+  return (
+    <section className={s.Related}>
+      <div className={s.Container}>
+        <div>
+          <h3 className={s.Header}>
+            Похожие услуги, которые возможно Вас заинтересуют
+          </h3>
+          <div className={s.Grid}>
+            <div className={s.Promo}>
+              <h4 className={s.Title}>Трасологическая экспертиза</h4>
+              <p className={s.Description}>
+                Эксперты нашей компании быстро и точно восстановят картину
+                происшествия и дадут профессиональную оценку ситуации. Также во
+                время трасологической экспертизы изучаются имеющиеся повреждения
+                и следы на месте…
+              </p>
+            </div>
+            <div className={s.Promo}>
+              <h4 className={s.Title}>Товароведческая экспертиза</h4>
+              <p className={s.Description}>
+                Судебная экспертиза товаров должна проводиться только
+                специалистом, получившим узкопрофильную квалификацию. Если Вам
+                необходима товароведческая экспертиза и для суда, мы готовы
+                подробно исследовать любой товар. Результат работы…
+              </p>
+            </div>
+            <div className={s.Promo}>
+              <h4 className={s.Title}>Оценочная экспертиза</h4>
+              <p className={s.Description}>
+                Судебная оценочная (стоимостная) экспертиза представляет собой
+                вид экспертизы, главной задачей которой является определение
+                рыночной стоимости объектов оценки…
+              </p>
+            </div>
+            <div className={s.Promo}>
+              <h4 className={s.Title}>Рецензия (Проверка) экспертизы</h4>
+              <p className={s.Description}>
+                Необходимость в составлении рецензии на судебную экспертизу
+                появляется в ситуациях, когда выводы заключения являются не
+                обоснованными, а квалификация и опыт эксперта не вызывают
+                доверия. В ходе рецензирования экспертное заключение
+                проверяется…
+              </p>
+            </div>
+          </div>
+          <CallbackForm pageName='Автотехническая экспертиза' />
+        </div>
+        <div />
+      </div>
+    </section>
+  );
+}
+
+export { RelatedArticles };

src/views/expertise/autotech/styles.module.scss

@@ -47,38 +47,3 @@
   }
 }
 
-
-.Related {
-  .Header {
-    font-family: $font-roboto;
-    font-weight: 300;
-    font-size: 32px;
-    line-height: 130%;
-    color: $color-text;
-    margin-bottom: 16px;
-  }
-
-  .Grid {
-    display: grid;
-    grid-template-columns: auto auto;
-    gap: 16px;
-    margin-bottom: 20px;
-
-    .Title {
-      font-family: $font-roboto;
-      font-weight: 500;
-      font-size: 20px;
-      line-height: 130%;
-      color: $color-text;
-      margin-bottom: 16px;
-    }
-
-    .Description {
-      font-family: $font-roboto;
-      font-weight: 400;
-      font-size: 16px;
-      line-height: 130%;
-      color: $color-text;
-    }
-  }
-}

src/views/expertise/autotech/ui.tsx

@@ -1,5 +1,6 @@
 import s from './styles.module.scss';
 import { CallbackForm, Connect, OrderSchema } from '@/entities';
+import { Consultation, RelatedArticles } from '@/feature/article';
 
 function AutoTech() {
   return (
@@ -85,59 +86,10 @@ function AutoTech() {
           <div className={s.Sidebar}>sidebar</div>
         </div>
       </section>
-      <section className={s.Consultation}>
-        <div></div>
-        <div></div>
-      </section>
-      <section className={s.Related}>
-        <div className={s.Container}>
-          <div>
-            <h3 className={s.Header}>
-              Похожие услуги, которые возможно Вас заинтересуют
-            </h3>
-            <div className={s.Grid}>
-              <div className={s.Promo}>
-                <h4 className={s.Title}>Трасологическая экспертиза</h4>
-                <p className={s.Description}>
-                  Эксперты нашей компании быстро и точно восстановят картину
-                  происшествия и дадут профессиональную оценку ситуации. Также
-                  во время трасологической экспертизы изучаются имеющиеся
-                  повреждения и следы на месте…
-                </p>
-              </div>
-              <div className={s.Promo}>
-                <h4 className={s.Title}>Товароведческая экспертиза</h4>
-                <p className={s.Description}>
-                  Судебная экспертиза товаров должна проводиться только
-                  специалистом, получившим узкопрофильную квалификацию. Если Вам
-                  необходима товароведческая экспертиза и для суда, мы готовы
-                  подробно исследовать любой товар. Результат работы…
-                </p>
-              </div>
-              <div className={s.Promo}>
-                <h4 className={s.Title}>Оценочная экспертиза</h4>
-                <p className={s.Description}>
-                  Судебная оценочная (стоимостная) экспертиза представляет собой
-                  вид экспертизы, главной задачей которой является определение
-                  рыночной стоимости объектов оценки…
-                </p>
-              </div>
-              <div className={s.Promo}>
-                <h4 className={s.Title}>Рецензия (Проверка) экспертизы</h4>
-                <p className={s.Description}>
-                  Необходимость в составлении рецензии на судебную экспертизу
-                  появляется в ситуациях, когда выводы заключения являются не
-                  обоснованными, а квалификация и опыт эксперта не вызывают
-                  доверия. В ходе рецензирования экспертное заключение
-                  проверяется…
-                </p>
-              </div>
-            </div>
-            <CallbackForm pageName='Автотехническая экспертиза' />
-          </div>
-          <div />
-        </div>
-      </section>
+
+      <Consultation />
+      <RelatedArticles />
+
       <section className={s.Partners}></section>
     </>
   );