refactor: create article model

public/svg/rotated-lines.svg

@@ -0,0 +1 @@
+<svg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' overflow='visible' height='100%' viewBox='0 0 20 16' fill='none' stroke='black' stroke-width='1' stroke-linecap='square' stroke-miterlimit='10'><g transform='translate(-12.000000, 0)'><path d='M28,0L10,18'/><path d='M18,0L0,18'/><path d='M48,0L30,18'/><path d='M38,0L20,18'/></g></svg>

src/core/types/expert.ts

@@ -0,0 +1,7 @@
+import { StaticImageData } from 'next/image';
+
+export type TExpert = {
+  position: string;
+  name: string;
+  photo: string | StaticImageData;
+};

src/core/types/relatedArticles.ts

@@ -0,0 +1,5 @@
+export type TRelatedArticles = {
+  title: string;
+  description: string;
+  link: string;
+};

src/core/types/sidebar.ts

@@ -0,0 +1,10 @@
+export type TSidebar = {
+  estimate: string;
+  relatedTitle?: string;
+  related?: {
+    title: string;
+    link: string;
+  }[];
+  warrantiesTitle?: string;
+  warranties?: string[];
+};

src/feature/article/consultation/ui.tsx

@@ -1,9 +1,11 @@
 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';
+import { TExpert } from '@core/types/expert';
 
-function Consultation() {
+type ConsultationProps = TExpert;
+
+function Consultation({ name, position, photo }: ConsultationProps) {
   return (
     <section className={s.Consultation}>
       <div className={s.Container}>
@@ -22,9 +24,9 @@ function Consultation() {
           </form>
         </div>
         <div className={s.Sidebar}>
-          <Image src={expertPhoto} alt={'Автоэксперт - Янцен Яна'} />
+          <Image src={photo} alt={`${position} - ${name}`} />
-          <p className={s.Title}>Янцен Яна</p>
+          <p className={s.Title}>{name}</p>
-          <p className={s.Description}>Автоэксперт</p>
+          <p className={s.Description}>{position}</p>
         </div>
       </div>
     </section>

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

@@ -1,7 +1,13 @@
 import s from './styles.module.scss';
+import Link from 'next/link';
+import { TRelatedArticles } from '@core/types/relatedArticles';
 import { CallbackForm } from '@/entities';
 
-function RelatedArticles() {
+type RelatedArticlesProps = {
+  related: TRelatedArticles[];
+};
+
+function RelatedArticles({ related }: RelatedArticlesProps) {
   return (
     <section className={s.Related}>
       <div className={s.Container}>
@@ -10,42 +16,16 @@ function RelatedArticles() {
             Похожие услуги, которые возможно Вас заинтересуют
           </h3>
           <div className={s.Grid}>
-            <div className={s.Promo}>
+            {related.map(({ title, description, link }, index) => (
-              <h4 className={s.Title}>Трасологическая экспертиза</h4>
+              <div key={index} className={s.Block}>
-              <p className={s.Description}>
+                <h4 className={s.Title}>
-                Эксперты нашей компании быстро и точно восстановят картину
+                  <Link href={link}>{title}</Link>
-                происшествия и дадут профессиональную оценку ситуации. Также во
+                </h4>
-                время трасологической экспертизы изучаются имеющиеся повреждения
+                <p className={s.Description}>
-                и следы на месте…
+                  <Link href={link}>{description}</Link>
-              </p>
+                </p>
-            </div>
+              </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>

src/feature/article/sidebar/ui.tsx

@@ -1,12 +1,22 @@
 import s from './styles.module.scss';
+import Link from 'next/link';
 import { Button } from '@shared/ui';
+import { TSidebar } from '@core/types/sidebar';
 
-function Sidebar() {
+type SidebarProps = TSidebar;
+
+function Sidebar({
+  estimate = '3',
+  relatedTitle,
+  related,
+  warrantiesTitle,
+  warranties,
+}: SidebarProps) {
   return (
     <div className={s.Sidebar}>
       <div className={s.Estimation}>
         <h4 className={s.Title}>Срок выполнения:</h4>
-        <p className={s.Estimate}>от 3 дней</p>
+        <p className={s.Estimate}>от {estimate} дней</p>
         <p className={s.Text}>
           Наш эксперт свяжется с вами для уточнения обстоятельств дела и
           определения точной стоимости.
@@ -15,31 +25,30 @@ function Sidebar() {
         <Button variant={'white'}>Записаться</Button>
         <p className={s.Phone}>+7 (900) 241-34-34</p>
       </div>
-      <div className={s.Related}>
+      {related && (
-        <h4 className={s.Title}>Сопутствующие экспертизы</h4>
+        <div className={s.Related}>
-        <ul className={s.List}>
+          <h4 className={s.Title}>{relatedTitle}</h4>
-          <li className={s.ListItem}>Трасологическая</li>
+          <ul className={s.List}>
-          <li className={s.ListItem}>Оценочная</li>
+            {related?.map(({ title, link }, index) => (
-          <li className={s.ListItem}>Товароведческая</li>
+              <li key={index} className={s.ListItem}>
-          <li className={s.ListItem}>Рецензирование (проверка)</li>
+                <Link href={link}>{title}</Link>
-        </ul>
+              </li>
-      </div>
+            ))}
-      <div className={s.Warranties}>
+          </ul>
-        <h4 className={s.Title}>Наши гарантии</h4>
+        </div>
-        <ul className={s.List}>
+      )}
-          <li className={s.ListItem}>
+      {warranties && (
-            Эксперты компании являются членами Саморегулируемой организации
+        <div className={s.Warranties}>
-            судебных экспертов
+          <h4 className={s.Title}>{warrantiesTitle}</h4>
-          </li>
+          <ul className={s.List}>
-          <li className={s.ListItem}>
+            {warranties.map((warranty, index) => (
-            Деятельность компании застрахована на 60 000 000 рублей
+              <li key={index} className={s.ListItem}>
-          </li>
+                {warranty}
-          <li className={s.ListItem}>
+              </li>
-            Экспертизы выполняются в соответствии с Федеральными
+            ))}
-            Законодательными Актами
+          </ul>
-          </li>
+        </div>
-        </ul>
+      )}
-      </div>
     </div>
   );
 }

src/views/expertise/autotech/model/expert.ts

@@ -0,0 +1,8 @@
+import { TExpert } from '@core/types/expert';
+import expertPhoto from '@public/images/photo/yancen-yana.png';
+
+export const expertData: TExpert = {
+  name: 'Янцен Яна',
+  position: 'Автоэксперт',
+  photo: expertPhoto,
+};

src/views/expertise/autotech/model/relatedArticles.ts

@@ -0,0 +1,29 @@
+import { TRelatedArticles } from '@core/types/relatedArticles';
+import { ROUTES } from '@core/constants/route';
+
+export const relatedArticlesData: TRelatedArticles[] = [
+  {
+    title: 'Трасологическая экспертиза',
+    description:
+      'Эксперты нашей компании быстро и точно восстановят картину происшествия и дадут профессиональную оценку ситуации. Также во время трасологической экспертизы изучаются имеющиеся повреждения и следы на месте…',
+    link: ROUTES.EXPERTIZA_TRASOLOGIA,
+  },
+  {
+    title: 'Оценочная экспертиза',
+    description:
+      'Судебная оценочная (стоимостная) экспертиза представляет собой вид экспертизы, главной задачей которой является определение рыночной стоимости объектов оценки…',
+    link: ROUTES.EXPERTIZA_OCENKI,
+  },
+  {
+    title: 'Товароведческая экспертиза',
+    description:
+      'Судебная экспертиза товаров должна проводиться только специалистом, получившим узкопрофильную квалификацию. Если Вам необходима товароведческая экспертиза и для суда, мы готовы подробно исследовать любой товар. Результат работы…',
+    link: ROUTES.EXPERTIZA_TOVAR,
+  },
+  {
+    title: 'Рецензия (Проверка) экспертизы',
+    description:
+      'Необходимость в составлении рецензии на судебную экспертизу появляется в ситуациях, когда выводы заключения являются не обоснованными, а квалификация и опыт эксперта не вызывают доверия. В ходе рецензирования экспертное заключение проверяется…',
+    link: ROUTES.EXPERTIZA_RECENZII,
+  },
+];

src/views/expertise/autotech/model/sidebar.ts

@@ -0,0 +1,33 @@
+import { TSidebar } from '@core/types/sidebar';
+import { ROUTES } from '@core/constants/route';
+
+const sidebarData: TSidebar = {
+  estimate: '3',
+  relatedTitle: 'Сопутствующие экспертизы',
+  related: [
+    {
+      title: 'Трасологическая',
+      link: ROUTES.EXPERTIZA_TRASOLOGIA,
+    },
+    {
+      title: 'Оценочная',
+      link: ROUTES.EXPERTIZA_OCENKI,
+    },
+    {
+      title: 'Товароведческая',
+      link: ROUTES.EXPERTIZA_TOVAR,
+    },
+    {
+      title: 'Рецензирование (проверка)',
+      link: ROUTES.EXPERTIZA_RECENZII,
+    },
+  ],
+  warrantiesTitle: 'Наши гарантии',
+  warranties: [
+    'Эксперты компании являются членами Саморегулируемой организации судебных экспертов',
+    'Деятельность компании застрахована на 60 000 000 рублей',
+    'Экспертизы выполняются в соответствии с Федеральными Законодательными Актами',
+  ],
+};
+
+export { sidebarData };

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

@@ -46,3 +46,24 @@
     margin-bottom: 16px;
   }
 }
+
+.Partners {
+  .Divider {
+    width: 100%;
+    display: flex;
+    text-align: center;
+    padding-top: 20px;
+    padding-bottom: 20px;
+
+    .Separator {
+      display: flex;
+      width: 100%;
+      margin: 0 auto;
+      min-height: 15px;
+      mask-size: 20px 100%;
+      mask-repeat: repeat-x;
+      background-color: $color-green;
+      mask-image: url(/svg/rotated-lines.svg);
+    }
+  }
+}

src/views/expertise/autotech/ui.tsx

@@ -1,7 +1,9 @@
 import s from './styles.module.scss';
 import { CallbackForm, Connect, OrderSchema } from '@/entities';
 import { Consultation, RelatedArticles, Sidebar } from '@/feature/article';
-import { Button } from '@shared/ui';
+import { sidebarData } from './model/sidebar';
+import { relatedArticlesData } from './model/relatedArticles';
+import { expertData } from './model/expert';
 
 function AutoTech() {
   return (
@@ -52,7 +54,9 @@ function AutoTech() {
                 изменен.
               </li>
             </ul>
+
             <CallbackForm pageName='Автотехническая экспертиза' />
+
             <h3 className={s.Header}>Документы, необходимые для экспертизы:</h3>
             <p className={s.Text}>
               Для начала работ по автомобильной экспертизе эксперту понадобятся
@@ -85,15 +89,22 @@ function AutoTech() {
             <Connect />
           </div>
           <aside>
-            <Sidebar />
+            <Sidebar {...sidebarData} />
           </aside>
         </div>
       </section>
 
-      <Consultation />
+      <Consultation {...expertData} />
-      <RelatedArticles />
+      <RelatedArticles related={relatedArticlesData} />
-
+      <section className={s.Partners}>
-      <section className={s.Partners}></section>
+        <div className={s.Divider}>
+          <span className={s.Separator} />
+        </div>
+        Slider
+        <div className={s.Divider}>
+          <span className={s.Separator} />
+        </div>
+      </section>
     </>
   );
 }