fix: add sidebar

src/feature/article/index.ts

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

src/feature/article/sidebar/index.ts

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

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

@@ -0,0 +1,87 @@
+
+.Sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: rem(40px);
+
+  .Estimation {
+    background: $color-green;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: rem(20px);
+    border-radius: rem(20px);
+    padding: rem(40px);
+    margin-top: rem(16px);
+    margin-bottom: rem(16px);
+
+    .Title {
+      font-family: $font-roboto;
+      font-weight: 300;
+      font-size: rem(20px);
+      line-height: 100%;
+      color: $color-white;
+      text-transform: uppercase;
+    }
+
+    .Estimate {
+      font-family: $font-roboto;
+      font-weight: 500;
+      font-size: rem(24px);
+      line-height: 100%;
+      color: $color-white;
+    }
+
+    .Text {
+      font-family: $font-roboto;
+      font-weight: 300;
+      font-size: rem(20px);
+      line-height: 130%;
+      color: $color-white;
+      text-align: center;
+      max-width: 240px;
+    }
+
+    .Phone {
+      font-family: $font-roboto;
+      font-weight: 500;
+      font-size: rem(32px);
+      line-height: 100%;
+      color: $color-white;
+      text-transform: uppercase;
+    }
+  }
+
+  .Related, .Warranties {
+    display: flex;
+    flex-direction: column;
+    gap: rem(16px);
+    max-width: 300px;
+
+    .Title {
+      font-family: $font-roboto;
+      font-weight: 400;
+      font-size: rem(24px);
+      line-height: 100%;
+      color: $color-text;
+      text-transform: uppercase;
+    }
+
+    .List {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      list-style-type: disc;
+      margin-left: rem(40px);
+    }
+
+    .ListItem {
+      font-family: $font-roboto;
+      font-weight: 400;
+      font-size: rem(16px);
+      line-height: 130%;
+      color: $color-text;
+      list-style: unset;
+    }
+  }
+}

src/feature/article/sidebar/ui.tsx

@@ -0,0 +1,47 @@
+import s from './styles.module.scss';
+import { Button } from '@shared/ui';
+
+function Sidebar() {
+  return (
+    <div className={s.Sidebar}>
+      <div className={s.Estimation}>
+        <h4 className={s.Title}>Срок выполнения:</h4>
+        <p className={s.Estimate}>от 3 дней</p>
+        <p className={s.Text}>
+          Наш эксперт свяжется с вами для уточнения обстоятельств дела и
+          определения точной стоимости.
+        </p>
+        <p className={s.Text}>Оставьте заявку или позвоните по телефону</p>
+        <Button variant={'white'}>Записаться</Button>
+        <p className={s.Phone}>+7 (900) 241-34-34</p>
+      </div>
+      <div className={s.Related}>
+        <h4 className={s.Title}>Сопутствующие экспертизы</h4>
+        <ul className={s.List}>
+          <li className={s.ListItem}>Трасологическая</li>
+          <li className={s.ListItem}>Оценочная</li>
+          <li className={s.ListItem}>Товароведческая</li>
+          <li className={s.ListItem}>Рецензирование (проверка)</li>
+        </ul>
+      </div>
+      <div className={s.Warranties}>
+        <h4 className={s.Title}>Наши гарантии</h4>
+        <ul className={s.List}>
+          <li className={s.ListItem}>
+            Эксперты компании являются членами Саморегулируемой организации
+            судебных экспертов
+          </li>
+          <li className={s.ListItem}>
+            Деятельность компании застрахована на 60 000 000 рублей
+          </li>
+          <li className={s.ListItem}>
+            Экспертизы выполняются в соответствии с Федеральными
+            Законодательными Актами
+          </li>
+        </ul>
+      </div>
+    </div>
+  );
+}
+
+export { Sidebar };

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

@@ -46,4 +46,3 @@
     margin-bottom: 16px;
   }
 }
-

src/views/expertise/autotech/ui.tsx

@@ -1,6 +1,7 @@
 import s from './styles.module.scss';
 import { CallbackForm, Connect, OrderSchema } from '@/entities';
-import { Consultation, RelatedArticles } from '@/feature/article';
+import { Consultation, RelatedArticles, Sidebar } from '@/feature/article';
+import { Button } from '@shared/ui';
 
 function AutoTech() {
   return (
@@ -83,7 +84,9 @@ function AutoTech() {
             </p>
             <Connect />
           </div>
-          <div className={s.Sidebar}>sidebar</div>
+          <aside>
+            <Sidebar />
+          </aside>
         </div>
       </section>