+ );
+ }
+}
diff --git a/src/views/Faq/Collapse/index.scss b/src/views/Faq/Collapse/index.scss
new file mode 100644
index 0000000..02ecc51
--- /dev/null
+++ b/src/views/Faq/Collapse/index.scss
@@ -0,0 +1,46 @@
+.collapse{
+ width: 100%;
+ margin-bottom: 6px;
+ margin-top: 6px;
+ font-family: numeralMedium;
+ &__header{
+ align-items: center;
+ width: 100%;
+ height: 50px;
+ justify-content: space-between;
+ align-items: center;
+ background-color: white;
+ border: 1px solid rgb(223, 223, 223);
+ border-radius: 6px;
+ padding : 0px 15px 0px;
+ cursor: pointer;
+ & h2{
+ font-size: calc(100vw / 80);
+ margin-bottom: 0px;
+ letter-spacing: -1px;
+ }
+ & img{
+ width: 22px;
+ height: 22px;
+ }
+ }
+ &__body{
+ font-family: numeralLight;
+ text-align: justify;
+ direction: rtl;
+ width: 100%;
+ padding : 10px 10px;
+ font-size: calc(100vw / 95);
+ color : #a5a5a5;
+ background-color: white;
+ border: 1px solid grey;
+ border-bottom-left-radius: 10px;
+ border-bottom-right-radius: 10px;
+ }
+}
+
+.collapse-header-border{
+ border-radius: 0px !important;
+ border-top-right-radius: 6px !important;
+ border-top-left-radius: 6px !important;
+}
\ No newline at end of file
diff --git a/src/views/Faq/index.js b/src/views/Faq/index.js
new file mode 100644
index 0000000..539db15
--- /dev/null
+++ b/src/views/Faq/index.js
@@ -0,0 +1,53 @@
+import React, { Component } from "react";
+import Navbar from "../Home/Navbar/index";
+import Footer from "../Home/Footer/index";
+import Collapse from './Collapse/index';
+
+import "./index.scss";
+export default class Faq extends Component {
+ state = {
+ messages: [
+ {id: 0, title : 'چگونه میتوانم در سایت ثبت نام کنم و کتاب سفارش دهم؟', description: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.', active: false},
+ {id: 1, title : 'نحوه سفارش برای خارج از کشور چگونه است؟', description: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.', active: false},
+ {id: 2, title : 'آیا داشتن رمز دوم برای خریدهای اینترنتی لازم است؟', description: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.', active: false},
+ {id: 3, title : 'در صورت فراموشی رمزعبور باید چکار کنیم؟', description: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.', active: false},
+ {id: 4, title : 'امکان بازگشت وجه تا چند روز ممکن است؟', description: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.', active: false},
+ ],
+ }
+
+ setMessageActive = (id, status) => {
+ if(status){
+ this.setState(prevState => ({
+ messages: prevState.messages.map(item => item.id === id ? {...item, active: false}: item)
+ }));
+ }else{
+ this.setState(prevState => ({
+ messages: prevState.messages.map(item => item.id === id ? {...item, active: true}: {...item, active: false})
+ }));
+ }
+ }
+ render() {
+ return (
+ <>
+