reza added faq desktop

src/custom.scss

@@ -158,10 +158,20 @@
   .submit{
     font-size: 20px;
   }
+  .main{
+    main {
+      max-width: 1350px;
+    }
+  }
 }
 
 @media screen and (min-width: 1008px) and (max-width: 1440px){
   .submit{
     font-size : calc(100vw / 70);
   }
+  .main{
+    main {
+      max-width: 1250px;
+    }
+  }
 }

src/redux/reducers/public.tsx

@@ -3,82 +3,106 @@ const initialState = {
   homeData: [],
   newProducts: [],
   levels: [],
-  faqList: [],
   loading: false,
   error: null,
   searchResult: [],
   arList: [],
   blogList: [],
   blog: null,
-  mockSubscribes : [
+  mockSubscribes: [
     {
-      id : 0,
-      name : 'اشتراک 3 ماهه',
-      finalPrice : '19.000',
-      offPercent : 0,
-      off : 0,
+      id: 0,
+      name: "اشتراک 3 ماهه",
+      finalPrice: "19.000",
+      offPercent: 0,
+      off: 0,
     },
     {
-      id : 1,
-      name : 'اشتراک 3 ماهه',
-      finalPrice : '19.000',
-      offPercent : 0,
-      off : 0,
+      id: 1,
+      name: "اشتراک 3 ماهه",
+      finalPrice: "19.000",
+      offPercent: 0,
+      off: 0,
     },
     {
-      id : 2,
-      name : 'اشتراک 6 ماهه',
-      finalPrice : '30.000',
-      offPercent : 30,
-      off : '10.000',
+      id: 2,
+      name: "اشتراک 6 ماهه",
+      finalPrice: "30.000",
+      offPercent: 30,
+      off: "10.000",
     },
     {
-      id : 3,
-      name : 'اشتراک 6 ماهه',
-      finalPrice : '40.000',
-      offPercent : 0,
-      off : 0,
-    }
+      id: 3,
+      name: "اشتراک 6 ماهه",
+      finalPrice: "40.000",
+      offPercent: 0,
+      off: 0,
+    },
   ],
   selectedSubscripe: {
-    id : 0,
-    name : 'اشتراک 3 ماهه',
-    finalPrice : '19.000',
-    offPercent : 0,
-    off : 0,
+    id: 0,
+    name: "اشتراک 3 ماهه",
+    finalPrice: "19.000",
+    offPercent: 0,
+    off: 0,
   },
-  departmans : [
+  departmans: [
     {
       id: 0,
-      name : 'محتوا'
+      name: "محتوا",
     },
     {
       id: 0,
-      name : 'دیزاین'
+      name: "دیزاین",
     },
     {
       id: 0,
-      name : 'برنامه نویسی'
+      name: "برنامه نویسی",
     },
   ],
-  contactData : [
+  contactData: [
     {
-      name : 'آدرس ما',
-      value : 'تهران خیابان انقلاب بین ابوریحان و فلسطین بن بست سروش پلاک 2'
+      name: "آدرس ما",
+      value: "تهران خیابان انقلاب بین ابوریحان و فلسطین بن بست سروش پلاک 2",
     },
     {
-      name : 'شماره تماس',
-      value : '02163462405 - 02163462406'
+      name: "شماره تماس",
+      value: "02163462405 - 02163462406",
     },
     {
-      name : 'شماره پیامک',
-      value : '300000000008762144'
+      name: "شماره پیامک",
+      value: "300000000008762144",
     },
     {
-      name : 'ایمیل سازمانی',
-      value : 'Info@Danovin.ir'
+      name: "ایمیل سازمانی",
+      value: "Info@Danovin.ir",
+    },
+  ],
+  faqList: [
+    {
+      name: "نحوه خرید از سایت دانوین چگونه است ؟",
+      active: true,
+      value:
+        "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی ",
+    },
+    {
+      name: "در این قسمت متن جدید خواهد آمد؟",
+      active: false,
+      value:
+        "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی ",
+    },
+    {
+      name: "چرا باید در این قسمت پرسش های متداول طرح شود؟",
+      active: false,
+      value:
+        "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی ",
+    },
+    {
+      name : 'این متن جهت سردرگرمی شما نوشته شده و کاربرد دیگری ندارد',
+      active : false,
+      value : 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی '
     }
-  ]
+  ],
 };
 
 const grades = [
@@ -103,12 +127,12 @@ export default function publicApi(state = initialState, action: PublicAction) {
       let itemsLevel;
       if (window.innerWidth > 1000) {
         const jadidTarin = data.filter(
-          (item : any) => item.title === "جدیدترین کتاب‌های دانوین"
+          (item: any) => item.title === "جدیدترین کتاب‌های دانوین"
         );
         itemsLevel = jadidTarin[0].data
-          .map((item : any) => item.book.gradeId * 1)
-          .sort((a : any, b : any) => a - b)
-          .map((e : any) => grades[e]);
+          .map((item: any) => item.book.gradeId * 1)
+          .sort((a: any, b: any) => a - b)
+          .map((e: any) => grades[e]);
         itemsLevel.unshift("همه");
       }
 

src/router.tsx

@@ -12,6 +12,7 @@ import Course from "./views/Course/index";
 import VideoTube from "./views/VideoTube/index";
 import Subscription from "./views/Subscription/index";
 import Contact from "./views/Contact/index";
+import Faq from "./views/Faq/index";
 
 function router(){
     return (
@@ -41,6 +42,9 @@ function router(){
           <Route exact path={'/contact'}>
             <Contact />
           </Route>
+          <Route exact path={'/faq'}>
+            <Faq />
+          </Route>
         </Switch>
       </Router>
     );

src/views/Faq/index.scss

@@ -0,0 +1,121 @@
+.faq {
+  header {
+    width: 100%;
+    margin: 0px auto;
+    padding-top: 40px;
+    h1 {
+      color: white;
+      margin-bottom: 15px;
+    }
+    p {
+      color: #969696;
+    }
+    input {
+      background-color: #424242;
+      border-top-right-radius: 10px;
+      border-bottom-right-radius: 10px;
+      border: none;
+      color: white;
+      flex: 1;
+      &::placeholder {
+        color: #969696;
+      }
+    }
+    button {
+      background-color: #39383d;
+      border: none;
+      margin-right: 2px;
+      width: 70px;
+      height: 60px;
+      border-radius: 5px;
+    }
+  }
+  &__list {
+    width: 100%;
+    margin: 0px auto !important;
+    padding-top: 30px !important;
+    li{
+      background-color: #242424;
+      margin-bottom: 15px;
+      cursor: pointer;
+      border-radius: 5px;
+    }
+    &--itemHeader {
+      border-top-right-radius: 5px;
+      border-top-left-radius: 5px;
+      strong {
+        color: #4dd35b;
+      }
+      img{
+        width: 30px;
+      }
+    }
+    &--itemBody {
+      border-bottom-right-radius: 5px;
+      border-bottom-left-radius: 5px;
+      p {
+        color: white;
+      }
+    }
+  }
+}
+
+@media screen and (min-width: 1441px) {
+  .faq {
+    header {
+      max-width: 800px;
+      h1 {
+        font-size: 44px;
+      }
+      p {
+        font-size: 21px;
+      }
+      input {
+        padding: 10px 20px 10px 0px;
+        font-size: 21px;
+      }
+      img {
+        width: 35px;
+      }
+    }
+    &__list{
+      max-width: 1040px;
+      h2{
+        font-size: 19px;
+      }
+      p{
+        font-size: 21px;
+      }
+    }
+  }
+}
+
+@media screen and (min-width: 1008px) and (max-width: 1440px) {
+  .faq {
+    header {
+      max-width: 700px;
+      h1 {
+        font-size: calc(100vw / 35);
+      }
+      p {
+        font-size: calc(100vw / 70);
+      }
+      input {
+        padding: 10px 20px 10px 0px;
+        font-size: calc(100vw / 70);
+      }
+      img {
+        width: 35px;
+      }
+    }
+    &__list{
+      max-width: 900px;
+      h2{
+        font-size: calc(100vw / 75);
+      }
+      p{
+        font-size: calc(100vw / 72);
+      }
+    }
+  }
+}

src/views/Faq/index.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import Navbar from "../../components/Navbar/index";
+import Footer from "../../views/Home/Footer/index";
+import search from "../../assets/icons/search.png";
+import dropdown from "../../assets/icons/dropdown.png";
+import whiteDropdown from "../../assets/icons/white-dropdown.png";
+import { connect } from "react-redux";
+import "./index.scss";
+
+function Faq({ list }: any) {
+  return (
+    <div className="faq main d-flex flex-column">
+      <Navbar />
+      <main className="d-flex flex-column">
+        <header className="d-flex flex-column">
+          <h1>پرسش های متداول</h1>
+          <p>
+            لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با
+            استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در
+            ستون و سطرآنچنان که لازم است و برای شرایط{" "}
+          </p>
+          <div className="d-flex">
+            <input type="search" placeholder="سوال خود را جستجو کنید" />
+            <button>
+              <img src={search} alt="جستجو" />
+            </button>
+          </div>
+        </header>
+        <ul className="faq__list d-flex flex-column">
+          {list.map((item: any, i: any) => (
+            <li className="d-flex flex-column" key={i}>
+              <div className="faq__list--itemHeader d-flex align-items-center justify-content-between p-4">
+                <strong>{item.name}</strong>
+                {item.active ? (
+                  <img src={dropdown} alt="" />
+                ) : (
+                  <img src={whiteDropdown} alt="" />
+                )}
+              </div>
+              {item.active && (
+                <div className="faq__list--itemBody d-flex px-4">
+                  <p>{item.value}</p>
+                </div>
+              )}
+            </li>
+          ))}
+        </ul>
+      </main>
+      <Footer />
+    </div>
+  );
+}
+
+export default connect((state: any) => ({
+  list: state.publicApi.faqList,
+}))(Faq);