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;
+    }
+  }
+}