frequently-asked-questions page

src/App.js

@@ -35,10 +35,13 @@ import { AuthForCandidate } from "./pages/AuthForCandidate/AuthForCandidate";
 import { RegistrationForCandidate } from "./pages/RegistrationForCandidate/RegistrationForCandidate";
 import { ProfileCandidate } from "./pages/ProfileCandidate/ProfileCandidate";
 import { PassingTests } from "./pages/quiz/PassingTests";
-
 import "./assets/global.scss";
 import "./fonts/stylesheet.css";
 import "bootstrap/dist/css/bootstrap.min.css";
+import { FREQUENTLY_ASKED_QUESTIONS_ROUTE, FREQUENTLY_ASKED_QUESTION_ROUTE } from "./constants/router-path";
+import { FrequentlyAskedQuestions } from "./pages/FrequentlyAskedQuestions/FrequentlyAskedQuestions";
+import { FrequentlyAskedQuestion } from "./pages/FrequentlyAskedQuestion/FrequentlyAskedQuestion";
+
 
 const App = () => {
   return (
@@ -46,7 +49,10 @@ const App = () => {
       <Router>
         <Routes>
           <Route exact path="/authdev" element={<AuthForDevelopers />} />
-          <Route exact path="/auth" element={<AuthForPartners />} />
+          <Route exact path="/auth" element={<AuthForPartners />} />          
+          <Route exact path={FREQUENTLY_ASKED_QUESTIONS_ROUTE} element={<FrequentlyAskedQuestions />}/>
+          <Route exact path={FREQUENTLY_ASKED_QUESTION_ROUTE+'/:id'} element={<FrequentlyAskedQuestion />} />     
+        
           <Route exact path="/worker/:id" element={<FreeDevelopers />} />
           <Route
             exact
@@ -98,7 +104,7 @@ const App = () => {
             <Route index element={<ProfileCandidate />} />
           </Route>
 
-          <Route path="*" element={<Navigate to="/auth" replace />} />
+          {/* <Route path="*" element={<Navigate to="/auth" replace />} /> */}
         </Routes>
       </Router>
     </>

src/assets/functions.scss

@@ -1,4 +1,5 @@
-
+@use "sass:math";
+$maxWidthContainer: 1123;
 //перевод в %
 @function prc($pxOne, $pxTwo) {
     $result: math.div($pxOne, $pxTwo) * 100%;

src/components/FrequentlyAskedQuestionsItem/FrequentlyAskedQuestionsItem.jsx

@@ -0,0 +1,27 @@
+import React from "react";
+import "./FrequentlyAskedQuestionsItem.scss";
+import { FREQUENTLY_ASKED_QUESTION_ROUTE } from "../../constants/router-path";
+import { Link } from "react-router-dom";
+import questionIcon from "./../../images/faq/question.svg";
+
+export const FrequentlyAskedQuestionsItem = ({ rubric }) => {
+  return (
+    <div className="frequently-asked-questions-item">
+      <div className="frequently-asked-questions-item__head">
+        <div className="frequently-asked-questions-item__icon-question"><img src={questionIcon} alt="" /></div>
+        <div className="frequently-asked-questions-item__title">
+          {rubric?.title}
+        </div>
+      </div>
+      {rubric?.questions?.map((question) => (
+        <Link
+          key={question.id}
+          to={FREQUENTLY_ASKED_QUESTION_ROUTE + "/" + question.id}
+          className="frequently-asked-questions-item__body"
+        >
+          <p>{question.title}</p>
+        </Link>
+      ))}
+    </div>
+  );
+};

src/components/FrequentlyAskedQuestionsItem/FrequentlyAskedQuestionsItem.scss

@@ -0,0 +1,43 @@
+@import "./../../assets/functions.scss";
+
+.frequently-asked-questions-item {
+  &__head {
+    display: flex;
+    gap: 19px;
+    margin: 0 0 -5px 29px;
+  }
+
+  &__icon-question {
+
+  }
+  &__title {
+    font-weight: 700;
+    @include adaptiv-value("font-size", 28, 22, 1);
+    line-height: 79%;
+    color: #1458dd;
+  }
+  &__body {
+    position: relative;
+    z-index: 2;
+    display: block;
+    &:not(:last-child) {
+      margin: 0 0 13px 0;
+    }
+    p {      
+      word-break: break-word;
+      background: #ffffff;
+      border-radius: 12px;
+      @include adaptiv-value("padding-top", 23, 15, 1);
+      @include adaptiv-value("padding-bottom", 23, 15, 1);
+      @include adaptiv-value("padding-left", 41, 22, 1);
+      @include adaptiv-value("padding-right", 41, 22, 1);
+      font-weight: 500;
+      @include adaptiv-value("font-size", 18, 16, 1);
+      line-height: 122%;
+      color: #000000;
+      min-height: 91px;
+      display: flex;
+      align-items: center;
+    }
+  }
+}

src/components/SideBar/SideBar.js

@@ -4,6 +4,8 @@ import arrow from "../../images/sideBarArrow.svg";
 import LogoITguild from "../../images/LogoITguild.svg";
 
 import "./sidebar.scss";
+import { Link } from "react-router-dom";
+import { FREQUENTLY_ASKED_QUESTIONS_ROUTE } from "../../constants/router-path";
 
 export const SideBar = () => {
   const [active, setActive] = useState(false);
@@ -64,7 +66,7 @@ export const SideBar = () => {
             <a href="#">Блог</a>
           </li>
           <li>
-            <a href="#">FAQ</a>
+            <Link to={FREQUENTLY_ASKED_QUESTIONS_ROUTE}>FAQ</Link>
           </li>
         </ul>
         <p className="auth-body__politic">Политика конфиденциальности</p>

src/components/features/quiz/quiz.scss

@@ -1,5 +1,5 @@
 @use "sass:math";
-@import "functions.scss";
+@import "./../../../assets/functions.scss";
 
 $maxWidthContainer: 1123;
 

src/constants/router-path.js

@@ -0,0 +1,2 @@
+export const FREQUENTLY_ASKED_QUESTIONS_ROUTE = '/frequently-asked-questions'
+export const FREQUENTLY_ASKED_QUESTION_ROUTE = '/frequently-asked-question'

src/images/faq/arrow.svg

@@ -0,0 +1,9 @@
+<svg width="11" height="7" viewBox="0 0 11 7" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect x="10.5625" y="6.3125" width="10.0195" height="5.625" transform="rotate(180 10.5625 6.3125)" fill="url(#pattern0)"/>
+<defs>
+<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_1082_1100" transform="matrix(0.0244088 0 0 0.0434783 -0.000381388 0)"/>
+</pattern>
+<image id="image0_1082_1100" width="41" height="23" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACkAAAAXCAMAAAChzpYZAAAAAXNSR0IB2cksfwAAAEJQTFRFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAjuH28gAAABZ0Uk5TAEK0Cvb/vgaIlxC7oNwcwg/J2f1bS4SvOREAAABWSURBVHicY2CAA0YmZgaiACMLKxs7kQpZOUYV4lPIyUUYgBUSBRiYiFTIysDMBiS5eQgDBrBSXj5ifESSUn6ilQoIDi2lQkTlDqBSYRGiFAKViuKVBgCepwfqGDtvmgAAAABJRU5ErkJggg=="/>
+</defs>
+</svg>

src/images/faq/question.svg

@@ -0,0 +1,3 @@
+<svg width="40" height="65" viewBox="0 0 40 65" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M39.712 16.829C39.712 19.1756 39.272 21.2583 38.392 23.077C37.5707 24.7783 36.544 26.3036 35.312 27.653C34.1387 29.0023 32.408 30.645 30.12 32.581L28.096 34.429C25.632 36.541 23.872 38.3303 22.816 39.797C21.8187 41.1463 21.232 42.9063 21.056 45.077L20.792 47.629H14.544V44.461C14.6027 40.941 15.072 38.3596 15.952 36.717C16.8907 35.0743 19.12 32.669 22.64 29.501L24.224 28.181C27.04 25.893 28.976 23.9863 30.032 22.461C31.1467 20.877 31.704 19.0583 31.704 17.005C31.704 14.2476 30.7067 12.077 28.712 10.493C26.7173 8.85028 24.048 8.02895 20.704 8.02895C18.064 8.02895 15.5707 8.58628 13.224 9.70095C10.936 10.757 8.17867 12.605 4.952 15.245L0.376 10.053C7.12267 4.01029 13.9573 0.988952 20.88 0.988952C26.2187 0.988952 30.6773 2.42628 34.256 5.30095C37.8933 8.11695 39.712 11.9596 39.712 16.829ZM22.288 55.373V64.877H13.312V55.373H22.288Z" fill="#6F6F6F" fill-opacity="0.66"/>
+</svg>

src/pages/FrequentlyAskedQuestion/FrequentlyAskedQuestion.jsx

@@ -0,0 +1,60 @@
+import { useNavigate, useParams } from "react-router";
+import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs";
+import SideBar from "../../components/SideBar/SideBar";
+import AuthHeader from "../../components/AuthHeader/AuthHeader";
+import { Footer } from "../../components/Footer/Footer";
+import arrowBtn from "../../images/arrowRight.png";
+import "./FrequentlyAskedQuestion.scss";
+import { useEffect, useState } from "react";
+import {
+  FREQUENTLY_ASKED_QUESTIONS_ROUTE,
+  FREQUENTLY_ASKED_QUESTION_ROUTE,
+} from "../../constants/router-path";
+
+export const FrequentlyAskedQuestion = () => {
+  const params = useParams();
+  const navigate = useNavigate()
+  const [question, setQuestion] = useState({
+    id: params.id,
+    title: "Это фриланс-платформа?",
+    answer:
+      "Нет, мы работаем только с юридическими лицами и индивидуальными предпринимателями и тщательно проверяем своих партнеров. Партнерами являются агентства, которые специализируются на оказании услуг в формате аутстафф-модели и обладают глубокой экспертизой в разработке и внедрении ИТ-проектов.",
+  });
+
+  useEffect(() => {
+    //тут запрос
+  }, []);
+
+  return (
+    <div className="frequently-asked-question">
+      <AuthHeader />
+      <SideBar />
+      <div className="frequently-asked-question__container container">
+        <ProfileBreadcrumbs
+          links={[
+            { name: "Главная", link: "/profile-candidate" },
+            {
+              name: "FAQ (часто задаваемые вопросы)",
+              link: FREQUENTLY_ASKED_QUESTIONS_ROUTE,
+            },
+            {
+              name: question.title,
+              link: FREQUENTLY_ASKED_QUESTION_ROUTE + "/" + params.id,
+            },
+          ]}
+        />
+        <div className="frequently-asked-question__title">{question.title}</div>
+        <div className="frequently-asked-question__back" onClick={()=>navigate(-1)}>
+          <div className="frequently-asked-question__arrow">
+            <img src={arrowBtn}></img>
+          </div>
+          <p>вернуться к списку вопросов</p>
+        </div>
+        <div className="frequently-asked-question__answer">
+          <p>{question.answer}</p>
+        </div>
+      </div>
+      <Footer />
+    </div>
+  );
+};

src/pages/FrequentlyAskedQuestion/FrequentlyAskedQuestion.scss

@@ -0,0 +1,60 @@
+@import './../../assets/functions.scss';
+
+.frequently-asked-question {
+	background: #f5f5f5;
+	height: 100%;
+	min-height: 100vh;
+	font-family: "LabGrotesque", sans-serif;
+	display: flex;
+	flex-direction: column;
+	@media (max-width: 1375px) {
+	 margin-top: 80px;
+  }
+	&__container {
+	  flex: 1 1 auto;
+	  margin-top: 30px;
+	}
+	&__title {
+	  font-weight: 500;
+	  @include adaptiv-value("font-size", 38, 24, 1);
+	  line-height: 84%;
+	  margin: 42px 0 30px 0;
+	  color: #000000;
+	}
+	&__back {
+	  margin: 0 0 30px 0;
+	  display: flex;
+	  align-items: center;
+	  cursor: pointer;
+	  gap: 19px;
+	  p {
+		 font-size: 12px;
+		 line-height: 167%;
+		 color: #6f6f6f;
+	  }
+	}
+	&__arrow {
+	  background: rgba(141, 198, 63, 0.5098039216);	 
+	  width: 48px;
+	  height: 48px;
+	  border-radius: 44px;
+	  display: flex;
+	  align-items: center;
+	  justify-content: center;
+	  transform: rotate(180deg);
+	}
+	&__answer {
+	  font-weight: 400;
+	  font-size: 20px;
+	  line-height: 120%;
+	  background: #ffffff;
+	  border-radius: 12px;
+	  word-break: break-word;
+	  color: #000000;
+	  @include adaptiv-value("padding-top", 33, 15, 1);
+	  @include adaptiv-value("padding-bottom", 33, 15, 1);
+	  @include adaptiv-value("padding-left", 41, 22, 1);
+	  @include adaptiv-value("padding-right", 41, 22, 1);
+	}
+ }
+ 

src/pages/FrequentlyAskedQuestions/FrequentlyAskedQuestions.jsx

@@ -0,0 +1,110 @@
+import React from "react";
+import "./FrequentlyAskedQuestions.scss";
+import AuthHeader from "../../components/AuthHeader/AuthHeader";
+import SideBar from "../../components/SideBar/SideBar";
+import arrow from "./../../images/faq/arrow.svg";
+import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs";
+import { Footer } from "../../components/Footer/Footer";
+import { FREQUENTLY_ASKED_QUESTIONS_ROUTE } from "../../constants/router-path";
+import { FrequentlyAskedQuestionsItem } from "../../components/FrequentlyAskedQuestionsItem/FrequentlyAskedQuestionsItem";
+
+
+export const FrequentlyAskedQuestions = () => {
+
+  const rubrics = [
+    {
+      title: 'Общие вопросы ',
+      questions: [
+        {
+          id: 1,
+          title: 'Это фриланс-платформа?'
+        },
+        {
+          id: 2,
+          title: 'Чем вы отличаетесь от традиционного процесса выбора исполнителя?'
+        },
+        {
+          id: 3,
+          title: 'Это фриланс-платформа?'
+        },
+        {
+          id: 4,
+          title: 'Чем вы отличаетесь от традиционного процесса выбора исполнителя?'
+        }
+      ]
+    },
+    {
+      title: 'Поиск специалиста',
+      questions: [
+        {
+          id: 11,
+          title: 'Это фриланс-платформа?'
+        },
+        {
+          id: 22,
+          title: 'Чем вы отличаетесь от традиционного процесса выбора исполнителя?'
+        },
+        {
+          id: 33,
+          title: 'Это фриланс-платформа?'
+        },
+        {
+          id: 44,
+          title: 'Чем вы отличаетесь от традиционного процесса выбора исполнителя?'
+        }
+      ]
+    },
+    {
+      title: 'Бронирование специалиста',
+      questions: [
+        {
+          id: 11,
+          title: 'Это фриланс-платформа?'
+        }        
+      ]
+    },
+    {
+      title: 'Работа с выбранным специалистом',
+      questions: [
+        {
+          id: 11,
+          title: 'Чем вы отличаетесь от традиционного процесса выбора исполнителя?'
+        }        
+      ]
+    },
+  ]
+
+  return (
+    <div className="frequently-asked-questions">
+      <AuthHeader />
+      <SideBar />
+
+      <div className="frequently-asked-questions__container container">
+        <ProfileBreadcrumbs
+          links={[
+            { name: "Главная", link: "/profile-candidate" },
+            { name: "FAQ (часто задаваемые вопросы)", link: FREQUENTLY_ASKED_QUESTIONS_ROUTE },
+          ]}
+        />
+        <div className="frequently-asked-questions__about">
+          <div className="frequently-asked-questions__title">FAQ</div>
+          <div className="frequently-asked-questions__arrow">
+            <img src={arrow} alt="arrow" />
+          </div>
+          <div className="frequently-asked-questions__description">
+            База знаний, которая дает ответы на популярные вопросы, тем самым
+            помогая нашим клиентам разобраться в продукте, сервисе и вариантах
+            сотрудничества с нашей компанией.
+          </div>
+        </div>
+        <div className="frequently-asked-questions__items">
+          {
+            rubrics.map((rubric,index)=><FrequentlyAskedQuestionsItem rubric={rubric} key={index} />)
+          }          
+        </div>       
+      </div>
+		<Footer />
+    </div>
+  );
+};
+

src/pages/FrequentlyAskedQuestions/FrequentlyAskedQuestions.scss

@@ -0,0 +1,66 @@
+.frequently-asked-questions {
+  background: #f5f5f5;
+  height: 100%;
+  min-height: 100vh;
+  font-family: "LabGrotesque", sans-serif;
+  display: flex;
+  flex-direction: column;
+  @media (max-width: 1375px) {
+    margin-top: 80px;
+  }
+  &__container {
+    flex: 1 1 auto;
+    margin-top: 30px;
+  }
+  &__about {
+    display: flex;
+    align-items: center;
+    margin: 0 0 70px 0;
+    @media (max-width: 600px) {
+      flex-wrap: wrap;
+      row-gap: 25px;
+    }
+  }
+  &__title {
+    font-weight: 500;
+    font-size: 48px;
+    line-height: 67%;
+    color: #000000;
+    margin: 0 13px 0 0;
+    @media (max-width: 600px) {
+      order: 1;
+    }
+  }
+  &__arrow {
+    background: rgba(128, 119, 119, 0.3);
+    flex: 0 0 27px;
+    height: 27px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 24px 0 0;
+    @media (max-width: 600px) {
+      order: 2;
+    }
+  }
+  &__description {
+    font-weight: 400;
+    font-size: 18px;
+    line-height: 156%;
+    word-break: break-word;
+    color: #000000;
+    white-space: pre-line;
+  }
+  &__rubrics {
+    display: grid;
+    grid-row-gap: 49px;
+    grid-column-gap: 29px;
+    grid-template-columns: 1fr 1fr;
+    @media (max-width: 750px) {
+      grid-template-columns: 1fr;
+      grid-gap: 60px;
+    }
+  }
+}
+