reza added about, contact

src/App.css

@@ -3,12 +3,26 @@
 
 
 * {
-  font-family: IRANSansNumeral !important;
   box-sizing: border-box !important;
   direction:  rtl;
 }
 
 @font-face {
-  font-family: IRANSansNumeral;
+  font-family: numeralMedium;
   src: url(assets/IRANSans/Farsi_numerals/IRANSans\(FaNum\)_Medium.ttf);
 }
+
+@font-face {
+  font-family: numeralLight;
+  src: url(assets/IRANSans/Farsi_numerals/IRANSans\(FaNum\).ttf);
+}
+
+@font-face {
+  font-family: numeralBold;
+  src: url(assets/IRANSans/IRANSans_Bold.ttf);
+}
+
+@font-face {
+  font-family: numeralUltraLight;
+  src: url(assets/IRANSans//IRANSans_UltraLight.ttf);
+}

src/AppRouter.js

@@ -3,8 +3,9 @@ import './App.css';
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 // import proxy from './Redux/proxy';
 import Home from './views/Home/index';
-
+import Faq from './views/Faq/index';
-
+import Contact from './views/Contact/index';
+import About from './views/About/index';
 class AppRouter extends Component {
   constructor(props) {
     super(props);
@@ -26,6 +27,15 @@ class AppRouter extends Component {
           {/* <Route path={'/list'}>
             <List />
           </Route> */}
+          <Route path={'/faq'}>
+            <Faq />
+          </Route>
+          <Route path={'/contact'}>
+            <Contact />
+          </Route>
+          <Route path={'/about'}>
+            <About />
+          </Route>
         </Switch>
       </Router>
     );

src/views/About/index.js

@@ -0,0 +1,83 @@
+import React, { Component, Fragment } from "react";
+import Navbar from "../Home/Navbar/index";
+import Footer from "../Home/Footer/index";
+
+import pic from "../../assets/images/pic.png";
+
+import "./index.scss";
+export default class About extends Component {
+  state = {
+    fury: {
+      title: "ماموریت ما در دانوین",
+      text: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت",
+    },
+
+    keywords: {
+      title: "کلمات کلیدی ماموریت",
+      list: [
+        "کیفیت آموزش",
+        "جذابیت",
+        "سازگار با نظام آموزش و پرورش",
+        "در راستای نیل به سند تحول",
+      ],
+    },
+    advantages: {
+      title: "مزیت رقابت اصلی",
+      list: [
+        "بکارگیری بروزترین تکنولوژی های تولید و مدیریت محتوای آموزشی-تربیتی (مانند واقعیت افزوده)",
+        "دارای رویکرد آموزش سرگرم کننده",
+        "بستر تعاملی و اشتراک گذاری فیلم و محتوای آموزشی",
+        "رویکرد معرفتی - ارزشی",
+        "ویدیوهای منحصر بفرد",
+        "متن گفتگو محور - روایی- قابل فهم - جذاب و سرگرم کننده",
+      ],
+    },
+  };
+  render() {
+    const { fury, advantages, keywords } = this.state;
+    return (
+      <>
+        <div className="about d-flex flex-column align-items-center">
+          <Navbar />
+          <div className="about__fury d-flex">
+            <div className="about__fury--right d-flex flex-column justify-content-center">
+              <div className="right-top align-self-start">
+                <h1>{fury.title}</h1>
+                <p>{fury.text}</p>
+              </div>
+              <div className="right-bottom align-self-end">
+                <h1>{keywords.title}</h1>
+                <ul>
+                  {keywords.list.map((item, i) => (
+                    <Fragment key={i}>
+                      <li>{item}</li><br/>
+                    </Fragment>
+                    
+                  ))}
+                </ul>
+              </div>
+            </div>
+            <div className="about__fury--left d-flex align-items-center"></div>
+          </div>
+          <div className="about__advantages d-flex">
+            <div className="about__advantages--right d-flex">
+              <img src={pic} alt={'عکس'} />
+            </div>
+            <div className="about__advantages--left">
+              <h1>{advantages.title}</h1>
+              <ul>
+                  {advantages.list.map((item, i) => (
+                    <Fragment key={i}>
+                      <li>{item}</li><br/>
+                    </Fragment>
+                    
+                  ))}
+                </ul>
+            </div>
+          </div>
+        </div>
+        <Footer />
+      </>
+    );
+  }
+}

src/views/About/index.scss

@@ -0,0 +1,101 @@
+.about {
+  width: 100vw;
+  max-width: 1250px;
+  margin: 0px auto;
+  padding: 0px 10px;
+  direction: rtl;
+  min-height: calc(100vh - 288px);
+  &__fury {
+    margin-top: 30px;
+    width: 100%;
+    height: 400px;
+    justify-content: space-between;
+    &--right {
+      align-items: center;
+      width: 35%;
+      .right-top {
+        h1 {
+          display: inline;
+          letter-spacing: -2px;
+          font-family: numeralBold;
+          font-size: calc(100vw / 55);
+          background-color: #7dc241;
+          color: white;
+        }
+        p {
+          margin-top: 10px;
+          text-align: justify;
+          font-family: numeralLight;
+          font-size: calc(100vw / 90);
+          color: #6d6d6d;
+        }
+      }
+      .right-bottom {
+        margin-top: 20px;
+        h1 {
+          display: inline;
+          font-family: numeralBold;
+          font-size: calc(100vw / 85);
+          background-color: #7dc241;
+          color: white;
+        }
+        ul {
+          margin: 0px;
+          list-style: none;
+          padding: 0px;
+          margin-top: 5px;
+          li {
+            display: inline;
+            border-bottom: 2px solid #7dc241;
+            font-family: numeralLight;
+            font-size: calc(100vw / 95);
+            color: #6d6d6d;
+          }
+        }
+      }
+    }
+    &--left {
+      width: 60%;
+      background-color: #eee;
+      height: 100%;
+    }
+  }
+  &__advantages {
+    width: 100%;
+    height: 300px;
+    margin-top: 50px;
+    margin-bottom: 50px;
+    justify-content: space-around;
+    &--right {
+      width: 48%;
+      height: 100%;
+    }
+    &--left {
+      padding-top: 80px;
+      width: 48%;
+      height: 100%;
+      align-items: flex-end;
+      margin-top: 20px;
+      h1 {
+        display: inline;
+        font-family: numeralBold;
+        font-size: calc(100vw / 55);
+        background-color: #7dc241;
+        color: white;
+      }
+      ul {
+        margin: 0px;
+        list-style: none;
+        padding: 0px;
+        margin-top: 5px;
+        li {
+          display: inline;
+          text-align: justify;
+          font-family: numeralLight;
+          font-size: calc(100vw / 90);
+          color: #6d6d6d;
+        }
+      }
+    }
+  }
+}

src/views/Contact/Input/index.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import TextField from '@material-ui/core/TextField';
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    '& .MuiTextField-root': {
+     
+      width: '350px',
+      position : 'relative',
+      marginTop : 20,
+    },
+  },
+}));
+
+export default function FormPropsTextFields(props) {
+  const classes = useStyles();
+
+  return (
+    <form className={classes.root} noValidate autoComplete="off">
+      <div>
+        <TextField id="outlined-basic" name={props.name} label={props.label} variant="outlined" />
+      </div>
+    </form>
+  );
+}

src/views/Contact/Select/index.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import { makeStyles, withStyles } from '@material-ui/core/styles';
+import FormControl from '@material-ui/core/FormControl';
+import NativeSelect from '@material-ui/core/NativeSelect';
+import InputBase from '@material-ui/core/InputBase';
+
+const BootstrapInput = withStyles((theme) => ({
+  root: {
+    'label + &': {
+      marginTop: theme.spacing(3),
+    },
+  },
+  input: {
+    width : 350,
+    borderRadius: 4,
+    position: 'relative',
+    backgroundColor: theme.palette.background.paper,
+    border: '0px solid #cecece',
+    fontSize: 16,
+    padding: '10px 26px 10px 12px',
+    transition: theme.transitions.create(['border-color', 'box-shadow']),
+    // Use the system font instead of the default Roboto font.
+    fontFamily: [
+      '-apple-system',
+      'BlinkMacSystemFont',
+      '"Segoe UI"',
+      'Roboto',
+      '"Helvetica Neue"',
+      'Arial',
+      'sans-serif',
+      '"Apple Color Emoji"',
+      '"Segoe UI Emoji"',
+      '"Segoe UI Symbol"',
+    ].join(','),
+    '&:focus': {
+      borderRadius: 4,
+    },
+  },
+}))(InputBase);
+
+const useStyles = makeStyles((theme) => ({
+  margin: {
+    // margin: theme.spacing(1),
+    marginTop: 20,
+  },
+}));
+
+export default function CustomizedSelects(props) {
+  const classes = useStyles();
+  const [age, setAge] = React.useState('');
+  const handleChange = (event) => {
+    setAge(event.target.value);
+  };
+  return (
+    <div className="home-search__select mr-2">
+      <FormControl className={classes.margin}>
+        <NativeSelect
+          id="demo-customized-select-native"
+          value={age}
+          onChange={handleChange}
+          input={<BootstrapInput />}
+        >
+          {
+            props.options.map(item => (
+              <option value={item}>{item}</option>
+            ))
+          }
+        </NativeSelect>
+      </FormControl>
+    </div>
+  );
+}

src/views/Contact/index.js

@@ -0,0 +1,63 @@
+import React, { Component } from "react";
+import Navbar from "../Home/Navbar/index";
+import Footer from "../Home/Footer/index";
+import Input from "./Input/index";
+import Select from "./Select/index";
+import location from "../../assets/icons/location.png";
+import home from "../../assets/icons/home.png";
+import contact from "../../assets/icons/contact.png";
+
+import "./index.scss";
+export default class Contact extends Component {
+  render() {
+    return (
+      <>
+        <div className="contact d-flex flex-column align-items-center">
+          <Navbar />
+          <div className="contact__forms d-flex">
+            <div className="contact__forms--right d-flex flex-column">
+              <h1>تماس با ما</h1>
+              <p>
+                برای ارتباط با دنیای شگفت انگیز دانوین از فرم زیر استفاده کنید و
+                پس از انتخاب دپارتمان مد نظر پیام خود را ارسال کنید.
+              </p>
+              <Input label={"نام‌و‌نام خانوادگی"} name={"name"} />
+              <Input label={"شماره تماس"} name={"mobile"} />
+              <Select options={["همه", "پرفروش"]} />
+              <Input label={"موضوع پیام"} name={"subject"} />
+              <textarea
+                placeholder="متن پیام"
+                name="description"
+                rows="5"
+              ></textarea>
+              <button>ارسال</button>
+            </div>
+            <div className="contact__forms--left d-flex flex-column">
+              <div className="contact__location d-flex align-items-center">
+                <img src={location} alt="آدرس" className="m-1" />
+                <p>تهران خیابان انقلاب اسلامی بن بست سروش پلاک 2 طبقه چهار</p>
+              </div>
+              <div
+                className="d-flex align-items-center mt-1"
+                style={{ width: "55%", justifyContent: "space-between" }}
+              >
+                <div className="d-flex align-items-center">
+                  <span>02163462405</span>
+                  <img src={contact} alt="تماس" className="m-1" />
+                </div>
+                <div className="d-flex align-items-center">
+                  <span>Info@Danovin.ir</span>
+                  <img src={home} alt="خانه" className="m-1" />
+                </div>
+              </div>
+              <div className="contact__map d-flex align-items-center">
+
+              </div>
+            </div>
+          </div>
+        </div>
+        <Footer />
+      </>
+    );
+  }
+}

src/views/Contact/index.scss

@@ -0,0 +1,156 @@
+.contact {
+  width: 100vw;
+  max-width: 1250px;
+  margin: 0px auto;
+  padding: 0px 10px;
+  direction: rtl;
+  min-height: calc(100vh - 288px);
+  &__forms {
+    width: 100%;
+    justify-content: space-between;
+    margin-top: 30px;
+    margin-bottom: 80px;
+    &--right {
+      width: 45%;
+      .MuiOutlinedInput-notchedOutline {
+        top: 0px !important;
+      }
+      .MuiOutlinedInput-notchedOutline {
+        border-color: #cecece !important;
+        border-width: 1px !important;
+        color: green !important;
+        font-size: calc(100vw / 85) !important;
+        border-radius: 10px !important;
+      }
+
+      .MuiOutlinedInput-input {
+        padding: 20px 14px !important;
+        font-size: calc(100vw / 85) !important;
+      }
+      .MuiInputLabel-outlined {
+        font-family: numeralLight !important;
+        display: inline !important;
+        position: absolute;
+        text-align: right !important;
+        right: 10px;
+        top: 12px;
+        padding: 0px !important;
+        transform: translate(0px, 0px) scale(1) !important;
+      }
+      .MuiInputLabel-shrink {
+        text-align: right !important;
+        display: inline;
+        position: absolute;
+        right: -5px;
+        top: -8px;
+        transform: translate(0px, 0px) scale(0.75) !important;
+        padding-right: 15px !important;
+      }
+
+      label {
+        background-color: white;
+        max-width: 120px;
+        text-align: center;
+        font-size: calc(100vw / 85) !important;
+        color: #797979 !important;
+        letter-spacing: -1px;
+      }
+      .Mui-focused {
+        color: rgba(0, 0, 0, 0.54) !important;
+        border-color: #c4c4c5 !important;
+      }
+      h1 {
+        letter-spacing: -2px;
+        color: #6cbe44;
+        font-family: numeralBold;
+        font-size: calc(100vw / 40);
+      }
+      p {
+        font-family: numeralLight;
+        font-size: calc(100vw / 95);
+        color: #6f7074;
+      }
+
+      button {
+        align-self: flex-start;
+        margin-top: 30px;
+        font-family: numeralLight;
+        text-decoration: none;
+        color: white;
+        background-color: #6cbe44;
+        border-radius: 6px;
+        padding: 5px 25px;
+        font-size: calc(100vw / 90);
+        max-width: 110px;
+        border: 0px;
+        &:hover {
+          color: white;
+        }
+      }
+
+      textarea {
+        width: 350px;
+        font-family: numeralLight;
+        border-radius: 10px;
+        font-size: calc(100vw / 90);
+        margin-top: 20px;
+        border: 1px solid #c4c4c5;
+        padding: 10px 8px;
+        color: #6f7074;
+        &::placeholder {
+          color: #797979;
+        }
+        &:focus {
+          outline: 0px;
+        }
+      }
+      .MuiFormControl-root {
+        select {
+          font-family: numeralLight;
+          height: 100%;
+          direction: rtl;
+          border: 1px solid #cecece !important;
+          text-align: center !important;
+          border-radius: 10px !important;
+          font-size: calc(100vw / 85);
+          color: #76797e !important;
+          &:focus {
+            background-color: white !important;
+          }
+          option {
+            font-size: calc(100vw / 80) !important;
+            padding: 5px !important;
+          }
+        }
+        .MuiNativeSelect-icon {
+          display: none;
+        }
+        .MuiNativeSelect-select {
+          padding: 8px 10px 8px 100px !important;
+        }
+      }
+    }
+    &--left {
+      width: 45%;
+      height: 100%;
+      p {
+        font-family: numeralLight;
+        font-size: calc(100vw / 95);
+        margin-bottom: 0px;
+        color: #6f7074;
+      }
+      span {
+        font-family: numeralLight;
+        font-size: calc(100vw / 95);
+        margin-bottom: 0px;
+        color: #6f7074;
+        margin-right: 5px;
+      }
+      .contact__map {
+        width: 100%;
+        height: 430px;
+        background-color: #eee;
+      }
+    }
+  }
+}

src/views/Faq/Collapse/index.js

@@ -0,0 +1,39 @@
+import React, { Component } from "react";
+import KeyboardArrowUpIcon from "@material-ui/icons/KeyboardArrowUp";
+import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown";
+
+import "./index.scss";
+
+export default class Collapse extends Component {
+  render() {
+    const { message, setMessageActive } = this.props;
+    return (
+      <div className="collapse d-flex flex-column">
+        <div
+          className={`collapse__header d-flex ${
+            message.active ? "collapse-header-border" : null
+          }`}
+          style={{ borderColor: message.active ? "#7dc241" : "rgb(223, 223, 223)", borderBottom: message.active ? 0 : '1px solid rgb(223, 223, 223)' }}
+          onClick={() => setMessageActive(message.id, message.active)}
+        >
+          <h2 style={message.active ? { color: "#7dc241" } : { color: "#666" }}>
+            {message.title}
+          </h2>
+          {message.active ? (
+            <KeyboardArrowUpIcon style={{ fontSize: 30, color: message.active ? "#7dc241" : 'grey' }} />
+          ) : (
+            <KeyboardArrowDownIcon style={{ fontSize: 30, color: message.active ? "#7dc241" : 'grey' }} />
+          )}
+        </div>
+        {message.active ? (
+          <div
+            className="collapse__body"
+            style={{ borderColor: message.active ? "#7dc241" : "rgb(223, 223, 223)", borderTop: 0}}
+          >
+            {message.description}
+          </div>
+        ) : null}
+      </div>
+    );
+  }
+}

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

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 (
+      <>
+        <div className="faq d-flex flex-column align-items-center">
+          <Navbar />
+          <header className="faq__header d-flex flex-column align-items-center">
+            <h1>سلام چطوری میتونم کمکتون کنم؟</h1>
+            <div className="faq__header--search d-flex align-items-center">
+              <input type="search" placeholder="دنبال چه چیزی برات باشیم؟" />
+              <button type="submit">جستجو</button>
+            </div>
+          </header>
+          <div className="faq__list d-flex flex-column">
+            {
+              this.state.messages.map((item,i) => (
+                <Collapse setMessageActive={this.setMessageActive} message={item} key={i} />
+              ))
+            }
+          </div>
+        </div>
+        <Footer />
+      </>
+    );
+  }
+}

src/views/Faq/index.scss

@@ -0,0 +1,56 @@
+.faq{
+  width: 100vw;
+  max-width: 1250px;
+  margin: 0px auto;
+  padding : 0px 10px;
+  direction: rtl;
+  min-height: calc(100vh - 288px);
+  &__header{
+    margin-top: 30px;
+    h1{
+      letter-spacing: -2px;
+      font-family: numeralBold;
+      font-size: calc(100vw / 25);
+      color: #424246;
+    }
+    &--search{
+      margin-top: 20px;
+      width: 100%;
+      border: 2px solid rgb(197, 197, 197);
+      border-radius: 10px;
+      padding: 5px;
+      justify-content:space-between;
+      input {
+        border: 0px;
+        flex: 1;
+        border: 0px;
+        font-size: calc(100vw / 90);
+        color: green;
+        padding: 0px 10px 0px;
+        font-size: 16px;
+        font-family: numeralMedium;
+        &::placeholder {
+          color: #d8dce5;
+          font-size: 16px;
+        }
+        &:focus {
+          outline: 0px !important;
+        }
+      }
+
+      button{
+        font-family: numeralMedium;
+        border: 0px;
+        background-color: #7dc241;
+        color: white;
+        border-radius: 10px;
+        padding : 7px 50px;
+      }
+    }
+  }
+  &__list{
+    width: 100%;
+    max-width: 1000px;
+    margin: 30px 0px;
+  }
+}

src/views/Home/Footer/index.js

@@ -1,68 +1,80 @@
 import React, { Component } from "react";
+import { Link } from "react-router-dom";
+import location from "../../../assets/icons/location.png";
+import home from "../../../assets/icons/home.png";
+import contact from "../../../assets/icons/contact.png";
 
-import './index.scss';
+import "./index.scss";
 export default class Footer extends Component {
   render() {
-    const {fastAccess} = this.props;
+    const { fastAccess } = this.props;
     return (
       <footer className="footer d-flex flex-column">
         <div className="footer-container d-flex">
           <div className="footer-container__content d-flex">
             <div className="footer-container__content--box first d-flex flex-column">
               <h1>دانوین کجاست؟</h1>
-              <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه </p>
+              <p className="mt-2">
-              <div className="footer__location d-flex">
+                لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
-                {/* <img src={} /> */}
+                استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله
+                در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد
+                نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد،
+                کتابهای زیادی در شصت و سه{" "}
+              </p>
+              <div className="footer__location d-flex align-items-center mt-2">
+                <img src={location} alt="آدرس" className="m-1" />
                 <p>تهران خیابان انقلاب اسلامی بن بست سروش پلاک 2 طبقه چهار</p>
               </div>
-              <div className="d-flex">
+              <div
-                <div className="d-flex">
+                className="d-flex align-items-center mt-1"
-                  {/* <img src={} /> */}
+                style={{ width: "55%", justifyContent: "space-between" }}
-                  <strong>Info@Danovin.ir</strong>
+              >
+                <div className="d-flex align-items-center">
+                  <span>02163462405</span>
+                  <img src={contact} alt="تماس" className="m-1" />
                 </div>
-                <div className="d-flex">
+                <div className="d-flex align-items-center">
-                  {/* <img src={} /> */}
+                  <span>Info@Danovin.ir</span>
-                  <strong>021-63462405</strong>
+                  <img src={home} alt="خانه" className="m-1" />
                 </div>
               </div>
             </div>
             <div className="footer-container__content--box second d-flex flex-column">
               <h1>دسترسی سریع</h1>
               <ul>
-                {
+                {fastAccess.map((item) => (
-                  fastAccess.map(item => (
+                  <li>
-                    <li>{item.name}</li>
+                    <Link to={item.link}>{item.name}</Link>
-                  ))
+                  </li>
-                }
+                ))}
               </ul>
             </div>
             <div className="footer-container__content--box second d-flex flex-column">
               <h1>دسترسی سریع</h1>
               <ul>
-                {
+                {fastAccess.map((item) => (
-                  fastAccess.map(item => (
+                  <li>
-                    <li>{item.name}</li>
+                    <Link to={item.link}>{item.name}</Link>
-                  ))
+                  </li>
-                }
+                ))}
-                </ul>
+              </ul>
             </div>
           </div>
-          
         </div>
         <div className="footer__privacy d-flex align-items-center">
-            <p>تمامی حقوق این وبسایت متعلق به دانوین می باشد. 1400</p>
+          <p>تمامی حقوق این وبسایت متعلق به دانوین می باشد. 1400</p>
-          </div>
+        </div>
       </footer>
     );
   }
 }
 
 Footer.defaultProps = {
-  fastAccess : [
+  fastAccess: [
-    {name : 'صفحه اصلی', to : '/'},
+    { name: "صفحه اصلی", link: "/" },
-    {name : 'فروشگاه', link : '/shop'},
+    { name: "فروشگاه", link: "/shop" },
-    {name : 'سوالات متداول', link : '/faq'},
+    { name: "سوالات متداول", link: "/faq" },
-    {name : 'درباره ما', link : '/about'},
+    { name: "درباره ما", link: "/about" },
-    {name : 'تماس با ما', link : '/call'},
+    { name: "تماس با ما", link: "/call" },
-  ]
+  ],
 };

src/views/Home/Footer/index.scss

@@ -1,44 +1,61 @@
-.footer{
+.footer {
-  width : 100%;
+  width: 100%;
   background-color: rgb(80, 80, 80);
-  &-container{
+  &-container {
-    width : 100%;
+    width: 100%;
     max-width: 1250px;
     margin: 0px auto;
-    &__content{
+    &__content {
       flex: 1;
       padding-bottom: 40px;
-      .first{
+      .first {
         color: white;
-        flex: 1;
+        flex: 2;
-        h1{
+        img {
+          width: 15px;
+          height: 17px;
+        }
+        h1 {
+          font-family: numeralBold;
+          color: #c4e14c;
           font-size: calc(100vw / 80);
         }
-        p{
+        p {
-          margin-top: 8px;
+          margin-bottom: 0px;
-          font-size: calc(100vw / 130);
+          font-family: numeralLight;
+          font-size: calc(100vw / 110);
           max-width: 80%;
         }
-        & strong{
+        span {
-          font-size: calc(100vw / 120);
+          font-family: numeralLight;
+          font-size: calc(100vw / 110);
+          color: #c4e14c;
+          margin-top: 2px;
         }
       }
-      .second{
+      .second {
-        flex: 0.75;
+        flex: 1;
         color: white;
-        h1{
+        h1 {
+          font-family: numeralBold;
+          color: #c4e14c;
           font-size: calc(100vw / 80);
         }
-        ul{
+        ul {
           list-style: none;
           padding: 0px;
-          li{
+          li {
-            font-size: calc(100vw / 130);
+            a {
-            margin-top: 5px;
+              font-family: numeralLight;
+              font-size: calc(100vw / 110);
+              margin-top: 5px;
+              color: white;
+              text-decoration: none;
+            }
           }
         }
       }
-      &--box{
+      &--box {
         margin-left: 15px;
         padding-top: 40px;
         justify-content: flex-start;
@@ -46,15 +63,16 @@
       }
     }
   }
-  &__privacy{
+  &__privacy {
-    width : 100%;
+    width: 100%;
     justify-content: center;
     color: white;
     background-color: rgba(34, 34, 34, 0.316);
     padding: 15px 0px;
-    p{
+    p {
+      font-family: numeralMedium;
       font-size: calc(100vw / 130);
-      margin-bottom:0px;
+      margin-bottom: 0px;
     }
   }
 }

src/views/Home/HomeScroll/index.js

@@ -2,6 +2,8 @@ import React, { Component } from "react";
 import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
 import { Link } from "react-router-dom";
 
+import dropdown from '../../../assets/icons/dropdown.png';
+
 import "./index.scss";
 export default class HomeScroll extends Component {
   render() {
@@ -12,12 +14,14 @@ export default class HomeScroll extends Component {
         style={{ height: height }}
       >
         <div className="home-scroll__header d-flex">
-          <h1>{title}</h1>
+          <div className="home-scroll__header--right d-flex">
+            <h1>{title}</h1>
+            <span></span>
+
+          </div>
           <div className="home-scroll__header--more d-flex">
-            <span>موارد بیشتر</span>
+            <span>ادامه لیست</span>
-            <ChevronLeftIcon
+            <img src={dropdown} alt='فلش' />
-              style={{ width: 20, height: 20, color: "black", marginRight: 1 }}
-            />
           </div>
         </div>
         <div className="home-scroll__list d-flex">

src/views/Home/HomeScroll/index.scss

@@ -7,10 +7,35 @@
     justify-content: space-between;
     align-items: center;
     padding : 0px 6px;
-    h1{
+    &--right{
-      font-size: 21px;
+      position: relative;
+      h1{
+        font-size: calc(100vw / 70);
+        font-family: numeralBold;
+        letter-spacing: -1px;
+      }
+      span{
+        position: absolute;
+        width: 40%;
+        height: 3px;
+        border-radius: 10px;
+        background-color: #7dc241;
+        bottom : 0px;
+        right: 0px;
+      }
     }
+    
     &--more{
+      span{
+        font-size: calc(100vw / 80);
+        color: #02733c;
+        font-family: numeralMedium;
+      }
+      img{
+        width: 20px;
+        height: 12px;
+        transform: rotate(90deg);
+      }
       margin-bottom: 5px;
       align-items: center;
     }

src/views/Home/HomeSearch/index.js

@@ -1,6 +1,7 @@
 import React, { Component } from "react";
 
 import Select from "./Select/index";
+import dropdown from "../../../assets/icons/dropdown.png";
 
 import "./index.scss";
 export default class HomeSearch extends Component {
@@ -14,7 +15,10 @@ export default class HomeSearch extends Component {
           type="text"
           name="search"
         />
-        <Select options={data} />
+        <div className="home-search__select">
+          <Select options={data} />
+          <img src={dropdown} alt='فلش' />
+        </div>
         <button className="home-search__submit">جستجو</button>
       </div>
     );

src/views/Home/HomeSearch/index.scss

@@ -7,6 +7,7 @@
   align-items:center;
   flex: 1;
   margin-top: 20px;
+  font-family: numeralLight;
   &__input {
     border: 0px;
     flex: 1;
@@ -16,8 +17,8 @@
     padding: 0px 10px 0px;
     font-size: 16px;
     &::placeholder {
-      color: #b6b6b6;
+      color: #d8dce5;
-      font-size: 13px;
+      font-size: 16px;
     }
     &:focus {
       outline: 0px !important;
@@ -27,6 +28,7 @@
     margin: 0px !important;
     margin-right: 10px !important;
     select {
+      font-family: numeralLight;
       height: 100%;
       direction: rtl;
       border: 0px !important;
@@ -34,7 +36,7 @@
       border-right: 1px solid #ccc !important;
       text-align: center !important;
       border-radius: 0px !important;
-      color: green !important;
+      color: #02733c !important;
       &:focus {
         background-color: white !important;
       }
@@ -43,15 +45,23 @@
       display: none;
     }
     .MuiNativeSelect-select {
-      padding: 5px 30px 5px 30px !important;
+      padding: 5px 10px 5px 100px !important;
     }
   }
   &__select {
+    position: relative;
     margin-left: 20px;
+    & img{
+      position: absolute;
+      left: 27px;
+      top: 12px;
+      width: 20px;
+      height: 10px;
+    }
   }
   &__submit {
     border: 0px;
-    background-color: green;
+    background-color: #7dc241;
     color: white;
     border-radius: 5px;
     padding : 7px 50px;

src/views/Home/HomeSlider/Blog/index.js

@@ -10,28 +10,22 @@ export default class Simple extends Component {
       style={{
       height: height,
     }}>
-        <Link to={`/books/${data.id}`}>
+        <div>
           <img src={data.image} alt={data.title} />
           <h1>{data.title}</h1>
           <h2>{data.subTitle}</h2>
-          {
+          <div className="slider-blog__footer d-flex mt-3">
-            data.price ? 
+            <div className="d-flex">
-            <div className="slider-blog__price d-flex justify-content-center">
+              {/* <img src={} /> */}
-              {
+              <div className="d-flex flex-column">
-                data.oldPrice ? 
+                <span>مطالعه کامل در {data.duration}</span>
-                <div>
+                <span>تاریخ انتشار {data.data}</span>
-                  <div className="slider-blog__price--old d-flex">
+              </div>
-                    {data.oldPrice} تومان 
+            </div>
-                    <span></span>
+            <Link to={data.link}>{data.buttonText}</Link>
-                  </div>
+          </div>
-                  
+          <span className="slider-blog__category" style={{backgroundColor: data.category.color}}>{data.category.name}</span>
-                </div> : null
+        </div>
-              }
-              <div>{data.price} تومان</div>
-            </div> : 
-            <div className="slider-blog__notAvailabe">ناموجود</div>
-          }
-        </Link>
       </article>
 
     );

src/views/Home/HomeSlider/Blog/index.scss

@@ -1,55 +1,60 @@
-.slider-blog{
+.slider-blog {
-  margin : 10px;
+  margin: 10px;
   padding: 10px 15px;
   box-shadow: 0px 0px 5px rgb(200, 200, 200);
   border-radius: 15px;
-  a{
+  width: 100%;
-    width : 100%;
+  text-decoration: none;
-    text-decoration: none;
+  position: relative;
-    color: green;
+  img {
-    &:hover{
+    width: 100%;
-      color: green;
+    height: 200px;
-    }
+    border-radius: 10px;
-    img{
-      width: 100%;
-      height: 300px;
-      border-radius: 10px;
-    }
-    h1{
-      margin-top: 15px;
-      font-size: calc(100vw / 80);
-    }
-    h2{
-      margin-top: 10px;
-      font-size: calc(100vw / 95);
-      color: #afafaf;
-    }
   }
-  &__notAvailabe{
+  h1 {
-    font-size: calc(100vw / 85);
+    font-family: numeralBold;
-    width : 100%;
-    text-align: center;
-    color: #afafaf;
     margin-top: 15px;
+    font-size: calc(100vw / 80);
+    color: #6f7074;
   }
-  &__price{
+  h2 {
-    font-size: calc(100vw / 85);
+    font-family: numeralLight;
-    width : 100%;
+    margin-top: 5px;
-    margin-top: 15px;
+    font-size: calc(100vw / 100);
-    text-align: center;
+    color: #a5a5a5;
-    &--old{
+  }
-      color: #afafaf;
+  &__category{
-      position: relative;
+    font-family: numeralMedium;
-      margin-left: 10px;
+    position: absolute;
-      align-items:center;
+    top: 20px;
-      span{
+    left: 23px;
-        position: absolute;
+    color: white;
-        left: 0px;
+    padding: 5px 7px;
-        width : 100%;
+    border-radius: 5px;
-        height: 2px;
+    font-size: calc(100vw / 120);
-        background-color: #afafafa3;
+  }
-        transform: rotate(-14deg);      
+
+  &__footer {
+    width: 100%;
+    align-items:center;
+    justify-content:space-between;
+    a {
+      font-family: numeralMedium;
+      padding: 6px 12px;
+      background-color: #e6e6e6;
+      color: #02733c;
+      text-decoration: none;
+      border-radius: 5px;
+      font-size: calc(100vw / 120);
+      &:hover{
+        color: #02733c;
       }
     }
+    span{
+      font-family: numeralLight;
+      font-size: calc(100vw / 120);
+      color: #a5a5a5;
+      letter-spacing: -1px;
+    }
   }
 }

src/views/Home/HomeSlider/Header/index.js

@@ -23,7 +23,7 @@ export default class Header extends Component {
         >
           <h1>{data.title}</h1>
           <h2>{data.subTitle}</h2>
-          <Link to={data.to}>اطلاعات بیشتر</Link>
+          <Link to={data.link}>{data.buttonText}</Link>
         </div>
       </div>
     );

src/views/Home/HomeSlider/Header/index.scss

@@ -16,20 +16,24 @@
     h1{
       font-size: calc(100vw / 50);
       color: white;
+      font-family: numeralBold;
+      letter-spacing: -1px;
     }
     h2{
       margin-top: 5px;
-      font-size: calc(100vw / 80);
+      font-size: calc(100vw / 78);
       color: white;
+      font-family: numeralBold;
     }
     a{
       text-decoration: none;
       color: white;
       margin-top: 10px;
-      font-size: calc(100vw / 95);
+      font-size: calc(100vw / 90);
       padding: 6px 10px;
       border : 1px solid white;
       border-radius: 5px;
+      font-family: numeralMedium;
     }
   }
 }

src/views/Home/HomeSlider/Simple/index.js

@@ -27,7 +27,7 @@ export default class Simple extends Component {
                   
                 </div> : null
               }
-              <div>{data.price} تومان</div>
+              <div className="slider-simple__price--price">{data.price} تومان</div>
             </div> : 
             <div className="slider-simple__notAvailabe">ناموجود</div>
           }

src/views/Home/HomeSlider/Simple/index.scss

@@ -1,12 +1,9 @@
 .slider-simple{
   padding: 10px;
-  border-bottom: 1px solid #dfdfdf;
   a{
     width : 100%;
     text-decoration: none;
-    color: green;
     &:hover{
-      color: green;
     }
     img{
       width: 100%;
@@ -15,20 +12,25 @@
       border-top-right-radius: 15px;
     }
     h1{
+      font-family: numeralBold;
       margin-top: 15px;
-      font-size: calc(100vw / 80);
+      font-size: calc(100vw / 70);
+      color: #7dc241;
+      letter-spacing: -1px;
     }
     h2{
+      font-family: numeralLight;
       margin-top: 10px;
       font-size: calc(100vw / 95);
-      color: #afafaf;
+      color: #6f7074;
     }
   }
   &__notAvailabe{
-    font-size: calc(100vw / 85);
+    font-family: numeralBold;
+    font-size: calc(100vw / 80);
     width : 100%;
     text-align: center;
-    color: #afafaf;
+    color: #6f7074;
     margin-top: 15px;
   }
   &__price{
@@ -37,18 +39,25 @@
     margin-top: 15px;
     text-align: center;
     &--old{
-      color: #afafaf;
+      font-family: numeralBold;
+      color: #6f7074;
       position: relative;
       margin-left: 10px;
       align-items:center;
+      font-size: calc(100vw / 80);
       span{
         position: absolute;
         left: 0px;
         width : 100%;
         height: 2px;
-        background-color: #afafafa3;
+        background-color: rgba(121, 121, 121, 0.534);
         transform: rotate(-14deg);      
       }
     }
+    &--price{
+      color: #02733c;
+      font-family: numeralBold;
+      font-size: calc(100vw / 80);
+    }
   }
 }

src/views/Home/HomeSlider/index.js

@@ -1,59 +1,52 @@
 import React, { Component } from "react";
 import Carousel from "react-elastic-carousel";
-import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
+import Simple from "./Simple/index";
-import Simple from './Simple/index';
 import Header from "./Header/index";
 import Blog from "./Blog/index";
 
+import dropdown from '../../../assets/icons/dropdown.png';
+
 import "./index.scss";
 
 const SimpleHeader = (props) => {
-  return(
+  return (
     <div className="home-scroll__header d-flex">
-      <h1>{props.title}</h1>
+      <div className="home-scroll__header--right d-flex">
+        <h1>{props.title}</h1>
+        <span></span>
+      </div>
       <div className="home-scroll__header--more d-flex">
-        <span>موارد بیشتر</span>
+        <span>ادامه لیست</span>
-        <ChevronLeftIcon
+        <img src={dropdown} alt="فلش" />
-          style={{
-            width: 20,
-            height: 20,
-            color: "black",
-            marginRight: 1,
-          }}
-        />
       </div>
     </div>
   );
-}
+};
 
 const TabHeader = (props) => {
-  return(
+  return (
     <div className="home-scroll__header d-flex">
-      <h1>{props.title}</h1>
+      <div className="home-scroll__header--right d-flex">
+        <h1>{props.title}</h1>
+        <span></span>
+      </div>
       <div className="home-scroll__header--more d-flex">
-        <span>موارد بیشتر</span>
+        <span>ادامه لیست</span>
-        <ChevronLeftIcon
+        <img src={dropdown} alt="فلش" />
-          style={{
-            width: 20,
-            height: 20,
-            color: "black",
-            marginRight: 1,
-          }}
-        />
       </div>
     </div>
   );
-}
+};
 
 export default class HomeSlider extends Component {
   render() {
     const { data, title, height, designType, number } = this.props;
     let header;
-    if(title){
+    if (title) {
-      if(designType === 'simple' || designType === 'blog'){
+      if (designType === "simple" || designType === "blog") {
-        header = (<SimpleHeader title={title} />);
+        header = <SimpleHeader title={title} />;
-      }else if(designType === 'tab'){
+      } else if (designType === "tab") {
-        header = (<TabHeader title={title} />);
+        header = <TabHeader title={title} />;
       }
     }
     return (
@@ -96,4 +89,3 @@ const Item = (props) => {
     //
   );
 };
-

src/views/Home/HomeSlider/index.scss

@@ -58,10 +58,10 @@
 
 .rec-arrow-left{
   top : calc(50% - 22px) !important;
-  right: 0px !important;
+  right: 10px !important;
 }
 
 .rec-arrow-right{
   top : calc(50% - 22px) !important;
-  left: 0px !important;
+  left: 10px !important;
 }

src/views/Home/HomeStatic/index.js

@@ -46,13 +46,13 @@ const Item = (props) => {
       }}
       className="home-static__list--item d-flex"
     >
+      <div className="d-flex flex-column">
+        <h2 style={{color : '#02733c'}}>{props.data.topText}</h2>
+        <h2 style={{color : '#7dc241'}}>{props.data.bottomText}</h2>
+      </div>
       <img
         src={props.data.image}
         alt="عکس"
-        style={{
-          width: '100%',
-          height: '100%',
-        }}
       />
     </div>
   );

src/views/Home/HomeStatic/index.scss

@@ -5,9 +5,21 @@
     justify-content: space-between;
     width: 100%;
     &--item{
+      box-shadow: 0px 0px 5px rgb(200,200,200);
+      font-family: numeralBold;
+      align-items: center;
+      border-radius: 10px;
+      padding: 0px 10px;
+      justify-content: space-around;
+      div{
+        h2{
+          font-size: calc(100vw / 95);
+          letter-spacing: -1px;
+        }
+      }
       img {
-        width: 100%;
+        margin-right: 20px;
-        height: 100%;
+        transform: scale(0.9);
         border-radius: 10px;
       }
     }

src/views/Home/Membership/index.scss

@@ -9,17 +9,22 @@
   margin-top: 20px;
   margin-bottom: 20px;
   h1{
-    font-size: calc(100vw / 60);
+    font-family: numeralBold;
+    font-size: calc(100vw / 50);
     margin-bottom: 0px;
-    color: green;
+    color: #1bbc6e;
     strong{
       color: white;
-      background-color: green;
+      background-color: #1bbc6e;
-      padding:0px 5px;
+      padding:0px 2px;
     }
   }
   p{
+    margin-top: 10px;
+    font-family: numeralMedium;
     margin-bottom: 0px;
+    font-size: calc(100vw / 90);
+    color: #6f7074;
   }
 
   .MuiOutlinedInput-notchedOutline{
@@ -30,6 +35,7 @@
     padding : 20px 14px !important;
   }
   .MuiInputLabel-outlined{
+    font-family: numeralLight !important;
     display : inline;
     position: absolute;
     right: 4px;
@@ -52,8 +58,10 @@
   }
   
   &__submit {
+    font-family: numeralMedium;
     border: 0px;
-    background-color: green;
+    font-size: calc(100vw / 100);
+    background-color: #1bbc6e;
     color: white;
     border-radius: 5px;
     padding : 7px 50px;

src/views/Home/Navbar/Laptop/index.js

@@ -1,6 +1,8 @@
 import React, { Component } from "react";
 import { Link } from "react-router-dom";
 
+import logo from '../../../../assets/icons/logo.png';
+
 import "./index.scss";
 export default class LaptopNavbar extends Component {
   render() {
@@ -8,7 +10,9 @@ export default class LaptopNavbar extends Component {
     return (
       <nav className="laptop-navbar d-flex">
         <div className="d-flex">
-          <div className="laptop-navbar__logo"></div>
+          <div className="laptop-navbar__logo">
+            <img src={logo} alt="لوگو"/>
+          </div>
           <ul className="laptop-navbar__list d-flex">
             {links.map((item, i) => (
               <li key={i}>

src/views/Home/Navbar/Laptop/index.scss

@@ -1,47 +1,52 @@
 .laptop-navbar{
   width: 100%;
-  height: 60px;
+  // height: 60px;
   justify-content: space-between;
   align-items: center;
+  font-family: numeralLight;
   z-index: 100;
   &__logo{
-    width: 100px;
+    // width: 100px;
-    height: 50px;
+    // height: 50px;
-    background : greenyellow;
+    // background : greenyellow;
   }
   &__list{
     margin : 0px;
     list-style: none;
     align-items: center;
     padding: 0px;
+    margin-right: 10px;
     li{
-      padding: 0px 20px;
+      margin: 0px 10px;
+      padding: 0px 15px;
       text-decoration: none;
       font-size: calc(100vw / 90);
       a{
         text-decoration: none;
-        color: rgb(65, 65, 65);
+        color: #6f7074;
         &:focus{
-          color: rgb(65, 65, 65);
+          color: #6f7074;
         }
       }
     }
   }
   &__signin{
+    font-family: numeralLight;
     text-decoration: none;
-    color: rgb(4, 160, 4);
+    color: #6cbe44;
     padding : 10px 20px;
     margin-left: 12px;
     font-size: calc(100vw / 90);
     &:hover{
-      color: rgb(4, 160, 4);
+      color: #6cbe44;
     }
   }
 
   &__signup{
+    font-family: numeralLight;
     text-decoration: none;
     color: white;
-    background-color: rgb(4, 160, 4);
+    background-color: #6cbe44;
     border-radius: 6px;
     padding : 10px 20px;
     font-size: calc(100vw / 90);

src/views/Home/SingleBlog/index.js

@@ -0,0 +1,33 @@
+import React, { Component } from "react";
+import {Link} from 'react-router-dom';
+
+import "./index.scss";
+export default class SingleBlog extends Component {
+  render() {
+    const { height, data, direction } = this.props;
+    return (
+      <div
+        style={{ height: height }}
+        className="single-blog d-flex"
+      >
+        <div className="single-blog__right d-flex flex-column justify-content-center">
+          <h1>{data.title}</h1>
+          <p>{data.subTitle}</p>
+          <Link to={data.link}>
+            {data.buttonText}
+          </Link>
+        </div>
+        <div className="single-blog__left d-flex">
+          {
+            data.image ? 
+            <img src={data.image} alt={data.title} /> : null
+          }
+          {
+            data.video ? 
+            <video sourcce={data.video} /> : null
+          }
+        </div>
+      </div>
+    );
+  }
+}

src/views/Home/SingleBlog/index.scss

@@ -0,0 +1,44 @@
+.single-blog{
+  width: 100%;
+  &__right{
+    width: 50%;
+    height: 100%;
+    align-items: flex-start;
+    padding-left: 15%;
+    h1{
+      font-family: numeralBold;
+      color: #1bbc6e;
+      font-size: calc(100vw / 45);
+      text-align: justify;
+    }
+    p{
+      font-family: numeralLight;
+      font-size: calc(100vw / 110);
+      text-align: justify;
+      margin-top: 15px;
+      color: #a5a5a5;
+    }
+    a{
+      font-family: numeralMedium;
+      align-self: flex-end;
+      padding: 8px 12px;
+      color: #1bbc6e;
+      text-decoration: none;
+      border-radius: 5px;
+      border: 1px solid #1bbc6e;
+      margin-top: 20px;
+      &:hover{
+        color: #1bbc6e;
+      }
+    }
+  }
+  &__left{
+    width: 50%;
+    height: 100%;
+    img{
+      width: 100%;
+      height: 100%;
+      border-radius: 20px;
+    }
+  }
+}

src/views/Home/index.js

@@ -8,8 +8,22 @@ import Footer from "./Footer/index";
 import HomeSlider from "./HomeSlider/index";
 import HomeSearch from "./HomeSearch/index";
 import Membership from "./Membership/index";
+import SingleBlog from "./SingleBlog/index";
 
 import pic from "../../assets/images/pic.png";
+import online from '../../assets/icons/online-education.png';
+import chemistry from '../../assets/icons/chemistry.png';
+import calculator from '../../assets/icons/calculator.png';
+import homework from '../../assets/icons/homework.png';
+import book1 from '../../assets/images/book1.png';
+import book2 from '../../assets/images/book2.png';
+import book3 from '../../assets/images/book3.png';
+import book4 from '../../assets/images/book4.png';
+import book5 from '../../assets/images/book5.png';
+import blog1 from '../../assets/images/blog1.png';
+import blog2 from '../../assets/images/blog2.png';
+import blog3 from '../../assets/images/blog3.png';
+
 
 import "./index.scss";
 export default class Home extends Component {
@@ -31,6 +45,8 @@ export default class Home extends Component {
               backgroundColor: "rgba(18, 159, 253,0.3)",
               title: "منفجر کردن مغز خود را به ما بسپارید",
               subTitle: "کاملا تضمینی با نمونه های موفق انفجاری",
+              link: '',
+              buttonText: 'اطلاعات بیشتر'
             },
             {
               id: 1,
@@ -39,6 +55,8 @@ export default class Home extends Component {
               backgroundColor: "rgba(18, 159, 253,0.3)",
               title: "منفجر کردن مغز خود را به ما بسپارید",
               subTitle: "کاملا تضمینی با نمونه های موفق انفجاری",
+              link: '',
+              buttonText: 'اطلاعات بیشتر'
             },
             {
               id: 2,
@@ -47,6 +65,8 @@ export default class Home extends Component {
               backgroundColor: "rgba(18, 159, 253,0.3)",
               title: "منفجر کردن مغز خود را به ما بسپارید",
               subTitle: "کاملا تضمینی با نمونه های موفق انفجاری",
+              link: '',
+              buttonText: 'اطلاعات بیشتر'
             },
           ],
         },
@@ -57,24 +77,32 @@ export default class Home extends Component {
           height: 150,
           data: [
             {
-              image: pic,
+              image: online,
               width: 24,
               link: "",
+              topText: 'دسترسی به محتوای آموزشی',
+              bottomText: 'از تمامی دستگاهها'
             },
             {
-              image: pic,
+              image: chemistry,
               width: 24,
               link: "",
+              topText: ' به صورت زنده و جالب انگیز',
+              bottomText: 'آزمایش انجام دهید'
             },
             {
-              image: pic,
+              image: calculator,
               width: 24,
               link: "",
+              topText: 'به صرفه تر هزینه کنید',
+              bottomText: 'با خرید یکی دوتا ببرید'
             },
             {
-              image: pic,
+              image: homework,
               width: 24,
               link: "",
+              topText: 'به صورت کاملا تعاملی',
+              bottomText: 'درسهای خود را یاد بگیرید'
             },
           ],
         },
@@ -91,7 +119,7 @@ export default class Home extends Component {
           data: [
             {
               id: 0,
-              image: pic,
+              image: book1,
               title: "منفجر کردن مغز خود را به ما بسپارید",
               subTitle: "پایه دهم ابتدایی",
               price : '78.000',
@@ -100,7 +128,7 @@ export default class Home extends Component {
             },
             {
               id: 1,
-              image: pic,
+              image: book2,
               title: "منفجر کردن مغز خود را به ما بسپارید",
               subTitle: "پایه ششم ابتدایی",
               price : '39.000',
@@ -109,7 +137,7 @@ export default class Home extends Component {
             },
             {
               id: 2,
-              image: pic,
+              image: book3,
               title: "منفجر کردن مغز خود را به ما بسپارید",
               subTitle: "پایه ششم ابتدایی",
               price : '21.000',
@@ -117,7 +145,7 @@ export default class Home extends Component {
             },
             {
               id: 3,
-              image: pic,
+              image: book4,
               title: "منفجر کردن مغز خود را به ما بسپارید",
               subTitle: "پایه دهم ابتدایی",
               price : '',
@@ -125,7 +153,7 @@ export default class Home extends Component {
             },
             {
               id: 4,
-              image: pic,
+              image: book5,
               title: "منفجر کردن مغز خود را به ما بسپارید",
               subTitle: "پایه هفتم ابتدایی",
               price : '59.000',
@@ -133,7 +161,7 @@ export default class Home extends Component {
             },
             {
               id: 5,
-              image: pic,
+              image: book1,
               title: "منفجر کردن مغز خود را به ما بسپارید",
               subTitle: "پایه دهم ابتدایی",
               price : '78.000',
@@ -142,7 +170,7 @@ export default class Home extends Component {
             },
             {
               id: 6,
-              image: pic,
+              image: book2,
               title: "منفجر کردن مغز خود را به ما بسپارید",
               subTitle: "پایه ششم ابتدایی",
               price : '39.000',
@@ -151,7 +179,7 @@ export default class Home extends Component {
             },
             {
               id: 7,
-              image: pic,
+              image: book3,
               title: "منفجر کردن مغز خود را به ما بسپارید",
               subTitle: "پایه ششم ابتدایی",
               price : '21.000',
@@ -160,7 +188,7 @@ export default class Home extends Component {
             },
             {
               id: 8,
-              image: pic,
+              image: book4,
               title: "منفجر کردن مغز خود را به ما بسپارید",
               subTitle: "پایه دهم ابتدایی",
               price : '',
@@ -169,7 +197,7 @@ export default class Home extends Component {
             },
             {
               id: 9,
-              image: pic,
+              image: book5,
               title: "منفجر کردن مغز خود را به ما بسپارید",
               subTitle: "پایه هفتم ابتدایی",
               price : '59.000',
@@ -187,7 +215,7 @@ export default class Home extends Component {
           data: [
             {
               id: 0,
-              image: pic,
+              image: book1,
               title: "منفجر کردن مغز خود را به ما بسپارید",
               subTitle: "پایه دهم ابتدایی",
               price : '78.000',
@@ -196,7 +224,7 @@ export default class Home extends Component {
             },
             {
               id: 1,
-              image: pic,
+              image: book2,
               title: "منفجر کردن مغز خود را به ما بسپارید",
               subTitle: "پایه ششم ابتدایی",
               price : '39.000',
@@ -205,7 +233,7 @@ export default class Home extends Component {
             },
             {
               id: 2,
-              image: pic,
+              image: book3,
               title: "منفجر کردن مغز خود را به ما بسپارید",
               subTitle: "پایه ششم ابتدایی",
               price : '21.000',
@@ -213,7 +241,7 @@ export default class Home extends Component {
             },
             {
               id: 3,
-              image: pic,
+              image: book4,
               title: "منفجر کردن مغز خود را به ما بسپارید",
               subTitle: "پایه دهم ابتدایی",
               price : '',
@@ -221,7 +249,7 @@ export default class Home extends Component {
             },
             {
               id: 4,
-              image: pic,
+              image: book5,
               title: "منفجر کردن مغز خود را به ما بسپارید",
               subTitle: "پایه هفتم ابتدایی",
               price : '59.000',
@@ -229,7 +257,7 @@ export default class Home extends Component {
             },
             {
               id: 5,
-              image: pic,
+              image: book1,
               title: "منفجر کردن مغز خود را به ما بسپارید",
               subTitle: "پایه دهم ابتدایی",
               price : '78.000',
@@ -238,7 +266,7 @@ export default class Home extends Component {
             },
             {
               id: 6,
-              image: pic,
+              image: book2,
               title: "منفجر کردن مغز خود را به ما بسپارید",
               subTitle: "پایه ششم ابتدایی",
               price : '39.000',
@@ -247,7 +275,7 @@ export default class Home extends Component {
             },
             {
               id: 7,
-              image: pic,
+              image: book3,
               title: "منفجر کردن مغز خود را به ما بسپارید",
               subTitle: "پایه ششم ابتدایی",
               price : '21.000',
@@ -256,7 +284,7 @@ export default class Home extends Component {
             },
             {
               id: 8,
-              image: pic,
+              image: book4,
               title: "منفجر کردن مغز خود را به ما بسپارید",
               subTitle: "پایه دهم ابتدایی",
               price : '',
@@ -265,7 +293,7 @@ export default class Home extends Component {
             },
             {
               id: 9,
-              image: pic,
+              image: book5,
               title: "منفجر کردن مغز خود را به ما بسپارید",
               subTitle: "پایه هفتم ابتدایی",
               price : '59.000',
@@ -274,99 +302,68 @@ export default class Home extends Component {
             },
           ],
         },
+        {
+          type: 'singleBlog',
+          height : 350,
+          direction: 'rtl',
+          data: {
+            id: 0, 
+            image: pic,
+            video : null,
+            title: "منفجر کردن مغز خود را به ما بسپارید",
+            subTitle: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.",
+            link: '',
+            buttonText: 'اطلاعات بیشتر'
+          }          
+        },
         {
           type: "slider",
           title: "بلاگ",
-          height: 470,
+          height: '',
           design: "blog",
           number: 3,
           data: [
             {
               id: 0,
-              image: pic,
+              image: blog1,
               title: "منفجر کردن مغز خود را به ما بسپارید",
-              subTitle: "پایه دهم ابتدایی",
+              subTitle: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه ",
-              price : '78.000',
-              oldPrice: '',
               date : new Date(),
+              link: '',
+              buttonText: 'ادامه مطلب',
+              category: {name : 'علمی تخیلی', color: 'red'},
+              duration: '۲۰ دقیقه',
             },
             {
               id: 1,
-              image: pic,
+              image: blog2,
               title: "منفجر کردن مغز خود را به ما بسپارید",
-              subTitle: "پایه ششم ابتدایی",
+              subTitle: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه ",
-              price : '39.000',
-              oldPrice: '59.000',
               date : new Date(),
+              link: '',
+              buttonText: 'ادامه مطلب',
+              category: {name: 'تاریخی', color: 'blue'},
+              duration: '۲۰ دقیقه'
             },
             {
               id: 2,
-              image: pic,
+              image: blog3,
               title: "منفجر کردن مغز خود را به ما بسپارید",
-              subTitle: "پایه ششم ابتدایی",
+              subTitle: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه ",
-              price : '21.000',
+              link: '',
-              oldPrice: '',
+              buttonText: 'ادامه مطلب',
+              category: {name : 'ورزشی', color: 'green'},
+              duration: '۲۰ دقیقه'
             },
             {
               id: 3,
               image: pic,
               title: "منفجر کردن مغز خود را به ما بسپارید",
-              subTitle: "پایه دهم ابتدایی",
+              subTitle: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه ",
-              price : '',
+              link: '',
-              oldPrice: '',
+              buttonText: 'ادامه مطلب',
-            },
+              category: {name: 'سیاسی', color: 'purple'},
-            {
+              duration: '۲۰ دقیقه'
-              id: 4,
-              image: pic,
-              title: "منفجر کردن مغز خود را به ما بسپارید",
-              subTitle: "پایه هفتم ابتدایی",
-              price : '59.000',
-              oldPrice: '',
-            },
-            {
-              id: 5,
-              image: pic,
-              title: "منفجر کردن مغز خود را به ما بسپارید",
-              subTitle: "پایه دهم ابتدایی",
-              price : '78.000',
-              oldPrice: '',
-              date : new Date(),
-            },
-            {
-              id: 6,
-              image: pic,
-              title: "منفجر کردن مغز خود را به ما بسپارید",
-              subTitle: "پایه ششم ابتدایی",
-              price : '39.000',
-              oldPrice: '59.000',
-              date : new Date(),
-            },
-            {
-              id: 7,
-              image: pic,
-              title: "منفجر کردن مغز خود را به ما بسپارید",
-              subTitle: "پایه ششم ابتدایی",
-              price : '21.000',
-              oldPrice: '',
-              date : new Date(),
-            },
-            {
-              id: 8,
-              image: pic,
-              title: "منفجر کردن مغز خود را به ما بسپارید",
-              subTitle: "پایه دهم ابتدایی",
-              price : '',
-              oldPrice: '',
-              date : new Date(),
-            },
-            {
-              id: 9,
-              image: pic,
-              title: "منفجر کردن مغز خود را به ما بسپارید",
-              subTitle: "پایه هفتم ابتدایی",
-              price : '59.000',
-              oldPrice: '',
-              date : new Date(),
             },
           ],
         },
@@ -433,6 +430,9 @@ const Identifier = (props) => {
       {props.item.type === "membership" ? (
         <Membership />
       ) : null}
+      {props.item.type === "singleBlog" ? (
+        <SingleBlog height={props.item.height} data={props.item.data} direction={props.item.direction} />
+      ) : null}
     </>
   );
 };