frequently-asked-questions page

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/functions.scss

@@ -1,45 +0,0 @@
-
-//перевод в %
-@function prc($pxOne, $pxTwo) {
-    $result: math.div($pxOne, $pxTwo) * 100%;
-    @return $result;
-  }
-  //перевод в rem
-  @function rem($px) {
-    $result: math.div($px, 8) + rem;
-    @return $result;
-  }
-  //перевод в em
-  @function em($px, $size:16) {
-    $result: math.div($px, $size) + em;
-    @return $result;
-  }
-  
-  
-  //адаптивное свойство
-  @mixin adaptiv-value($property, $startSize, $minSize, $type) {
-    $addSize: $startSize - $minSize;
-    @if $type == 1 {
-      //только если меньше контейнера, присутствует ограничение
-      #{$property}: $startSize+px;
-      @media (max-width: em($maxWidthContainer)) {
-        #{$property}: calc(
-                #{$minSize+px} + #{$addSize} *
-                ((100vw - 320px) / #{$maxWidthContainer - 320})
-        );
-      }
-    } @else if $type == 2 {
-      //только если больше контейнера, min-width
-      #{$property}: rem($startSize);
-      @media (min-width: #{$maxWidthContainer + px}) {
-        #{$property}: calc(
-                #{rem($minSize)} + #{$addSize} * ((100vw - 320px) / #{$maxWidth - 320})
-        );
-      }
-    } @else {
-      //всегда на всех экранах
-      #{$property}: calc(
-              #{rem($minSize)} + #{$addSize} * ((100vw - 320px) / #{$maxWidth - 320})
-      );
-    }
-  }

src/components/features/quiz/quiz.scss

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