src/pages/Stack/Stack.jsx

@@ -9,10 +9,10 @@ import cat from "assets/images/cat.png";
 import clue from "assets/images/clue.png";
 import code from "assets/images/landingBackgroundCode.png";
 import flag from "assets/images/stackProjectsFlag.png";
-import rabota from "assets/images/stackProjectsRabota.png";
-import hand from "assets/images/stackProjectsHand.png";
 import fly from "assets/images/stackProjectsFly.png";
-import portfolio from "assets/images/stackSteptsPortfolio.png"
+import hand from "assets/images/stackProjectsHand.png";
+import rabota from "assets/images/stackProjectsRabota.png";
+import portfolio from "assets/images/stackSteptsPortfolio.png";
 
 import "./stack.scss";
 
@@ -54,13 +54,13 @@ export const Stack = () => {
       description:
         "Импортозамещение в управлении проектами <span>таск-трекер ITGuild</span>",
       img: flag,
-      name: 'flag'
+      name: "flag"
     },
     {
       description:
         "<span>Работа Тудей</span> - это сервис, который специализируется на поиске работы на новых территориях Российской Федерации.",
       img: rabota,
-      name: 'rabota'
+      name: "rabota"
     },
     {
       description:
@@ -72,28 +72,28 @@ export const Stack = () => {
       description:
         "Новостной портал и удобный каталог компаний <span>DaInfo.pro</span> предоставляющих различные услуги и товары.",
       img: fly,
-      name: 'fly'
+      name: "fly"
     }
   ];
 
   const steps = [
     {
-      miniInfo: 'Окунитесь в экосистему ITGUIL',
+      miniInfo: "Окунитесь в экосистему ITGUIL",
       info: "<span>уточнение</span> деталей и <span>обсуждение</span> условий с менеджером ITGUILD"
     },
     {
-      miniInfo: 'Окунитесь в экосистему ITGUIL',
+      miniInfo: "Окунитесь в экосистему ITGUIL",
       info: "<span>подписание договора</span> без обязательств оплаты на данном этапе"
     },
     {
-      miniInfo: 'Окунитесь в экосистему ITGUIL',
+      miniInfo: "Окунитесь в экосистему ITGUIL",
       info: "<span>формирование</span> команды или подбор отдельных специалистов под требования клиентов"
     },
     {
-      miniInfo: 'Окунитесь в экосистему ITGUIL',
+      miniInfo: "Окунитесь в экосистему ITGUIL",
       info: "<span>интеграция специалистов</span> в команду клиента, ежедневная отчетность под контролем менеджера ITGUILD"
     }
-  ]
+  ];
   return (
     <section className="stack">
       <AuthHeader />
@@ -190,7 +190,11 @@ export const Stack = () => {
                 return (
                   <div key={index} className="stack__project">
                     <span className="project__img">
-                      <img className={project.name} src={project.img} alt='img' />
+                      <img
+                        className={project.name}
+                        src={project.img}
+                        alt="img"
+                      />
                     </span>
                     <p
                       dangerouslySetInnerHTML={{ __html: project.description }}
@@ -201,10 +205,10 @@ export const Stack = () => {
             </div>
             <div className="projects__info">
               <p>
-                <span>Мы обеспечиваем</span> финансовые, юридические и кадровые гарантии,
+                <span>Мы обеспечиваем</span> финансовые, юридические и кадровые
-                предоставляем SLA и берем на себя ответственность за работу
+                гарантии, предоставляем SLA и берем на себя ответственность за
-                команды. Вам не требуется заниматься поиском, оформлением или
+                работу команды. Вам не требуется заниматься поиском, оформлением
-                увольнением сотрудников —{" "}
+                или увольнением сотрудников —{" "}
                 <span>мы берем на себя все хлопоты.</span>
               </p>
               <button>оставить заявку</button>
@@ -218,34 +222,50 @@ export const Stack = () => {
             <h4>как это работает?</h4>
             <div className="steps__info">
               <p>
-                Аутстаффинг представляет собой специфическую модель найма персонала, отличающуюся от аутсорсинга.
+                Аутстаффинг представляет собой специфическую модель найма
+                персонала, отличающуюся от аутсорсинга.
               </p>
               <p>
-                <span>В контексте аутстаффинга вы нанимаете специалистов в
+                <span>
-                  области ИТ,</span> оплачивая их по их конкретным навыкам, и берете
+                  В контексте аутстаффинга вы нанимаете специалистов в области
-                на себя организацию их работы.
+                  ИТ,
+                </span>{" "}
+                оплачивая их по их конкретным навыкам, и берете на себя
+                организацию их работы.
               </p>
             </div>
           </div>
           <div className="steps__items">
             {steps.map((step, index) => {
-              return <div key={index} className="item__wrapper">
+              return (
-                <div className="item__head">
+                <div key={index} className="item__wrapper">
-                  <h4>{`${index + 1}.`}</h4>
+                  <div className="item__head">
-                  <p>{step.miniInfo}</p>
+                    <h4>{`${index + 1}.`}</h4>
+                    <p>{step.miniInfo}</p>
+                  </div>
+                  <div className="steps__item" key={index}>
+                    <p
+                      className="item__info"
+                      dangerouslySetInnerHTML={{ __html: step.info }}
+                    />
+                  </div>
                 </div>
-                <div className='steps__item' key={index}>
+              );
-                  <p className="item__info" dangerouslySetInnerHTML={{__html: step.info}}/>
+            })}
-                </div>
-              </div>
-            })
-            }
           </div>
           <div className="steps__portfolio">
-            <img src={portfolio} alt='portfolio' />
+            <img src={portfolio} alt="portfolio" />
           </div>
-          <img className="steps__code steps__code--first" src={code} alt='code'/>
+          <img
-          <img className="steps__code steps__code--second" src={code} alt='code'/>
+            className="steps__code steps__code--first"
+            src={code}
+            alt="code"
+          />
+          <img
+            className="steps__code steps__code--second"
+            src={code}
+            alt="code"
+          />
         </div>
         <img src={backgroundOpp} className="steps__background" />
       </section>