reza designed mobile home

src/views/Home/Footer/index.js

@@ -9,62 +9,128 @@ export default class Footer extends Component {
   render() {
     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">
+          window.innerWidth > 1000 ? 
-            <div className="footer-container__content--box first d-flex flex-column">
+          <footer className="footer d-flex flex-column">
-              <h1>دانوین کجاست؟</h1>
+            <div className="footer-container d-flex">
-              <p className="mt-2">
+              <div className="footer-container__content d-flex">
-                لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
+                <div className="footer-container__content--box first d-flex flex-column">
-                استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله
+                  <h1>دانوین کجاست؟</h1>
-                در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد
+                  <p className="mt-2">
-                نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد،
+                    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
-                کتابهای زیادی در شصت و سه{" "}
+                    استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله
-              </p>
+                    در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد
-              <div className="footer__location d-flex align-items-center mt-2">
+                    نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد،
-                <img src={location} alt="آدرس" className="m-1" />
+                    کتابهای زیادی در شصت و سه{" "}
-                <p>تهران خیابان انقلاب اسلامی بن بست سروش پلاک 2 طبقه چهار</p>
+                  </p>
-              </div>
+                  <div className="footer__location d-flex align-items-center mt-2">
-              <div
+                    <img src={location} alt="آدرس" className="m-1" />
-                className="d-flex align-items-center mt-1"
+                    <p>تهران خیابان انقلاب اسلامی بن بست سروش پلاک 2 طبقه چهار</p>
-                style={{ width: "55%", justifyContent: "space-between" }}
+                  </div>
-              >
+                  <div
-                <div className="d-flex align-items-center">
+                    className="d-flex align-items-center mt-1"
-                  <span>02163462405</span>
+                    style={{ width: "55%", justifyContent: "space-between" }}
-                  <img src={contact} alt="تماس" className="m-1" />
+                  >
+                    <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>
+                <div className="footer-container__content--box second d-flex flex-column">
+                  <h1>دسترسی سریع</h1>
+                  <ul>
+                    {fastAccess.map((item) => (
+                      <li>
+                        <Link to={item.link}>{item.name}</Link>
+                      </li>
+                    ))}
+                  </ul>
                 </div>
-                <div className="d-flex align-items-center">
+                <div className="footer-container__content--box second d-flex flex-column">
-                  <span>Info@Danovin.ir</span>
+                  <h1>دسترسی سریع</h1>
-                  <img src={home} alt="خانه" className="m-1" />
+                  <ul>
+                    {fastAccess.map((item) => (
+                      <li>
+                        <Link to={item.link}>{item.name}</Link>
+                      </li>
+                    ))}
+                  </ul>
                 </div>
               </div>
             </div>
-            <div className="footer-container__content--box second d-flex flex-column">
+            <div className="footer__privacy d-flex align-items-center">
-              <h1>دسترسی سریع</h1>
+              <p>تمامی حقوق این وبسایت متعلق به دانوین می باشد. 1400</p>
-              <ul>
+            </div>
-                {fastAccess.map((item) => (
+          </footer>
-                  <li>
+          : null
-                    <Link to={item.link}>{item.name}</Link>
+        }
-                  </li>
+        {
-                ))}
+          window.innerWidth < 1000 ? 
-              </ul>
+          <footer className="mobile-footer d-flex flex-column">
+            <div className="mobile-footer-container d-flex">
+              <div className="mobile-footer-container__content d-flex flex-column">
+                <div className="mobile-footer-container__content--box first d-flex flex-column">
+                  <h1>دانوین کجاست؟</h1>
+                  <p className="mt-2">
+                    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
+                    استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله
+                    در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد
+                    نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد،
+                    کتابهای زیادی در شصت و سه{" "}
+                  </p>
+                  <div className="mobile-footer__location d-flex align-items-center mt-2">
+                    <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>
+                <div className="mobile-footer-container__content--box second d-flex flex-column">
+                  <h1>دسترسی سریع</h1>
+                  <ul>
+                    {fastAccess.map((item) => (
+                      <li>
+                        <Link to={item.link}>{item.name}</Link>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+                <div className="mobile-footer-container__content--box second d-flex flex-column">
+                  <h1>دسترسی سریع</h1>
+                  <ul>
+                    {fastAccess.map((item) => (
+                      <li>
+                        <Link to={item.link}>{item.name}</Link>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              </div>
             </div>
-            <div className="footer-container__content--box second d-flex flex-column">
+            <div className="mobile-footer__privacy d-flex align-items-center">
-              <h1>دسترسی سریع</h1>
+              <p>تمامی حقوق این وبسایت متعلق به دانوین می باشد. 1400</p>
-              <ul>
-                {fastAccess.map((item) => (
-                  <li>
-                    <Link to={item.link}>{item.name}</Link>
-                  </li>
-                ))}
-              </ul>
             </div>
-          </div>
+          </footer> : null
-        </div>
+        }
-        <div className="footer__privacy d-flex align-items-center">
+      </>
-          <p>تمامی حقوق این وبسایت متعلق به دانوین می باشد. 1400</p>
+      
-        </div>
-      </footer>
     );
   }
 }

src/views/Home/Footer/index.scss

@@ -76,3 +76,80 @@
     }
   }
 }
+
+
+.mobile-footer {
+  width: 100%;
+  background-color: rgb(80, 80, 80);
+  &-container {
+    width: 100%;
+    padding : 20px 20px;
+    margin: 0px auto;
+    &__content {
+      padding-bottom: 40px;
+      .first {
+        color: white;
+        img {
+          width: 15px;
+          height: 17px;
+        }
+        h1 {
+          font-family: numeralBold;
+          color: #c4e14c;
+          font-size: calc(100vw / 20);
+        }
+        p {
+          margin-bottom: 0px;
+          font-family: numeralLight;
+          font-size: calc(100vw / 40);
+          max-width: 90%;
+        }
+        span {
+          font-family: numeralLight;
+          font-size: calc(100vw / 40);
+          color: #c4e14c;
+          margin-top: 2px;
+        }
+      }
+      .second {
+        color: white;
+        h1 {
+          font-family: numeralBold;
+          color: #c4e14c;
+          font-size: calc(100vw / 20);
+        }
+        ul {
+          list-style: none;
+          padding: 0px;
+          li {
+            a {
+              font-family: numeralLight;
+              font-size: calc(100vw / 40);
+              margin-top: 5px;
+              color: white;
+              text-decoration: none;
+            }
+          }
+        }
+      }
+      &--box {
+        margin-left: 15px;
+        padding-top: 40px;
+        justify-content: flex-start;
+        text-align: right;
+      }
+    }
+  }
+  &__privacy {
+    width: 100%;
+    justify-content: center;
+    color: white;
+    background-color: rgba(34, 34, 34, 0.316);
+    padding: 15px 0px;
+    p {
+      font-family: numeralMedium;
+      font-size: calc(100vw / 50);
+      margin-bottom: 0px;
+    }
+  }
+}

src/views/Home/HomeScroll/MyProduct/index.js

@@ -0,0 +1,19 @@
+import React, { Component } from 'react';
+import {Link} from 'react-router-dom';
+
+import './index.scss';
+export default class MyProduct extends Component {
+  render() {
+    const {  data, number } = this.props;
+    return(
+      <article style={{minWidth : window.innerWidth / number}} className="scroll-my-product d-flex flex-column">
+        <Link to={`/books/${data.id}`}>
+          <img src={data.image} alt={data.title} />
+          <h1>{data.title}</h1>
+          <h2>{data.subTitle}</h2>
+        </Link>
+      </article>
+
+    );
+  }
+}

src/views/Home/HomeScroll/MyProduct/index.scss

@@ -0,0 +1,64 @@
+.scroll-my-product{
+  padding: 10px;
+  background-color: #ddd;
+  a{
+    width : 100%;
+    text-decoration: none;
+    &:hover{
+    }
+    img{
+      width: 100%;
+      height: 150px;
+      border-top-left-radius: 15px;
+      border-top-right-radius: 15px;
+    }
+    h1{
+      font-family: numeralLight;
+      margin-top: 5px;
+      font-size: calc(100vw / 34);
+      color: #7dc241;
+      letter-spacing: -1px;
+    }
+    h2{
+      font-family: numeralLight;
+      margin-top: 10px;
+      font-size: calc(100vw / 45);
+      color: #6f7074;
+    }
+  }
+  &__notAvailabe{
+    font-family: numeralBold;
+    font-size: calc(100vw / 45);
+    width : 100%;
+    text-align: center;
+    color: #6f7074;
+    margin-top: 15px;
+  }
+  &__price{
+    font-size: calc(100vw / 45);
+    width : 100%;
+    margin-top: 15px;
+    text-align: center;
+    &--old{
+      font-family: numeralBold;
+      color: #6f7074;
+      position: relative;
+      margin-left: 0px;
+      align-items:center;
+      font-size: calc(100vw / 45);
+      span{
+        position: absolute;
+        left: 0px;
+        width : 100%;
+        height: 2px;
+        background-color: rgba(121, 121, 121, 0.534);
+        transform: rotate(-14deg);      
+      }
+    }
+    &--price{
+      color: #02733c;
+      font-family: numeralBold;
+      font-size: calc(100vw / 45);
+    }
+  }
+}

src/views/Home/HomeScroll/Product/index.js

@@ -0,0 +1,36 @@
+import React, { Component } from 'react';
+import {Link} from 'react-router-dom';
+
+import './index.scss';
+export default class Product extends Component {
+  render() {
+    const {  data, number } = this.props;
+    return(
+      <article style={{minWidth : window.innerWidth / number}} className="scroll-product d-flex flex-column">
+        <Link to={`/books/${data.id}`}>
+          <img src={data.image} alt={data.title} />
+          <h1>{data.title}</h1>
+          <h2>{data.subTitle}</h2>
+          {
+            data.price ? 
+            <div className="scroll-product__price d-flex flex-column align-items-center">
+              {
+                data.oldPrice ? 
+                <div>
+                  <div className="scroll-product__price--old d-flex">
+                    {data.oldPrice} تومان 
+                    <span></span>
+                  </div>
+                  
+                </div> : null
+              }
+              <div className="scroll-product__price--price">{data.price} تومان</div>
+            </div> : 
+            <div className="scroll-product__notAvailabe">ناموجود</div>
+          }
+        </Link>
+      </article>
+
+    );
+  }
+}

src/views/Home/HomeScroll/Product/index.scss

@@ -0,0 +1,63 @@
+.scroll-product{
+  padding: 10px;
+  a{
+    width : 100%;
+    text-decoration: none;
+    &:hover{
+    }
+    img{
+      width: 100%;
+      height: 150px;
+      border-top-left-radius: 15px;
+      border-top-right-radius: 15px;
+    }
+    h1{
+      font-family: numeralLight;
+      margin-top: 5px;
+      font-size: calc(100vw / 34);
+      color: #7dc241;
+      letter-spacing: -1px;
+    }
+    h2{
+      font-family: numeralLight;
+      margin-top: 10px;
+      font-size: calc(100vw / 45);
+      color: #6f7074;
+    }
+  }
+  &__notAvailabe{
+    font-family: numeralBold;
+    font-size: calc(100vw / 45);
+    width : 100%;
+    text-align: center;
+    color: #6f7074;
+    margin-top: 15px;
+  }
+  &__price{
+    font-size: calc(100vw / 45);
+    width : 100%;
+    margin-top: 15px;
+    text-align: center;
+    &--old{
+      font-family: numeralBold;
+      color: #6f7074;
+      position: relative;
+      margin-left: 0px;
+      align-items:center;
+      font-size: calc(100vw / 45);
+      span{
+        position: absolute;
+        left: 0px;
+        width : 100%;
+        height: 2px;
+        background-color: rgba(121, 121, 121, 0.534);
+        transform: rotate(-14deg);      
+      }
+    }
+    &--price{
+      color: #02733c;
+      font-family: numeralBold;
+      font-size: calc(100vw / 45);
+    }
+  }
+}

src/views/Home/HomeScroll/Subject/index.js

@@ -0,0 +1,18 @@
+import React, { Component } from 'react';
+import {Link} from 'react-router-dom';
+
+import './index.scss';
+export default class Subject extends Component {
+  render() {
+    const {  data, number } = this.props;
+    return(
+        <Link 
+          className="scroll-subject d-flex justify-content-center align-items-center" 
+          style={{backgroundColor: data.backgroundColor, minWidth: window.innerWidth / number }} to={`/books`}
+        >
+          <h1>{data.name}</h1>          
+        </Link>
+
+    );
+  }
+}

src/views/Home/HomeScroll/Subject/index.scss

@@ -0,0 +1,12 @@
+.scroll-subject{
+  padding: 12px 0px;
+  font-family: numeralLight;
+  color: white;
+  text-decoration: none;
+  border-radius: 6px;
+
+  h1{
+    font-size: calc(100vw / 35);
+    margin: 0px;
+  }
+}

src/views/Home/HomeScroll/index.js

@@ -1,13 +1,15 @@
 import React, { Component } from "react";
-import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
-import { Link } from "react-router-dom";
 
+import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
+import Product from './Product/index';
+import Subject from './Subject/index';
+import MyProduct from './MyProduct/index';
 import dropdown from '../../../assets/icons/dropdown.png';
 
 import "./index.scss";
 export default class HomeScroll extends Component {
   render() {
-    const { data, height, title } = this.props;
+    const { data, height, title,designType, moreText, number } = this.props;
     return (
       <div
         className="home-scroll d-flex flex-column"
@@ -20,13 +22,13 @@ export default class HomeScroll extends Component {
 
           </div>
           <div className="home-scroll__header--more d-flex">
-            <span>ادامه لیست</span>
+            <span>{moreText}</span>
             <img src={dropdown} alt='فلش' />
           </div>
         </div>
         <div className="home-scroll__list d-flex">
           {data.map((item, i) => (
-            <Item data={item} key={i} />
+            <Item data={item} designType={designType} number={number} key={i} />
           ))}
         </div>
       </div>
@@ -36,18 +38,19 @@ export default class HomeScroll extends Component {
 
 const Item = (props) => {
   return (
-    <Link to={props.data.link} style={{
+    <>
-      minWidth: `${props.data.width}`,
+      {
-      height: "100%",
+        props.designType === 'product' ? 
-    }}>
+        <Product data={props.data} number={props.number} /> : null
-      <img
+      }
-        src={props.data.image}
+      {
-        alt="عکس"
+        props.designType === 'subjects' ? 
-        style={{
+        <Subject data={props.data} number={props.number} /> : null
-          width : '100%',
+      }
-          height: '100%',
+      {
-        }}
+        props.designType === 'myProduct' ? 
-      />
+        <MyProduct data={props.data} number={props.number} /> : null
-    </Link>
+      }
+    </>
   );
 };

src/views/Home/HomeScroll/index.scss

@@ -10,7 +10,7 @@
     &--right{
       position: relative;
       h1{
-        font-size: calc(100vw / 70);
+        font-size: calc(100vw / 30);
         font-family: numeralBold;
         letter-spacing: -1px;
       }
@@ -27,12 +27,12 @@
     
     &--more{
       span{
-        font-size: calc(100vw / 80);
+        font-size: calc(100vw / 35);
-        color: #02733c;
+        color: #7dc241;
         font-family: numeralMedium;
       }
       img{
-        width: 20px;
+        width: 15px;
         height: 12px;
         transform: rotate(90deg);
       }

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

@@ -6,27 +6,57 @@ export default class Simple extends Component {
   render() {
     const { height, data } = this.props;
     return(
-      <article className="slider-blog d-flex flex-column"  
+      <>
-      style={{
+        {
-      height: height,
+          window.innerWidth > 1000 ? 
-    }}>
+          <article className="slider-blog d-flex flex-column"  
-        <div>
+            style={{
-          <img src={data.image} alt={data.title} />
+            height: height,
-          <h1>{data.title}</h1>
+            }}>
-          <h2>{data.subTitle}</h2>
+              <div>
-          <div className="slider-blog__footer d-flex mt-3">
+                <img src={data.image} alt={data.title} />
-            <div className="d-flex">
+                <h1>{data.title}</h1>
-              {/* <img src={} /> */}
+                <h2>{data.subTitle}</h2>
-              <div className="d-flex flex-column">
+                <div className="slider-blog__footer d-flex mt-3">
-                <span>مطالعه کامل در {data.duration}</span>
+                  <div className="d-flex">
-                <span>تاریخ انتشار {data.data}</span>
+                    {/* <img src={} /> */}
+                    <div className="d-flex flex-column">
+                      <span>مطالعه کامل در {data.duration}</span>
+                      <span>تاریخ انتشار {data.data}</span>
+                    </div>
+                  </div>
+                  <Link to={data.link}>{data.buttonText}</Link>
+                </div>
+                <span className="slider-blog__category" style={{backgroundColor: data.category.color}}>{data.category.name}</span>
               </div>
-            </div>
+            </article> : null
-            <Link to={data.link}>{data.buttonText}</Link>
+         }
-          </div>
+         {
-          <span className="slider-blog__category" style={{backgroundColor: data.category.color}}>{data.category.name}</span>
+          window.innerWidth < 1000 ? 
-        </div>
+          <article className="mobile-slider-blog d-flex flex-column"  
-      </article>
+            style={{
+            height: height,
+            }}>
+              <div>
+                <img src={data.image} alt={data.title} />
+                <h1>{data.title}</h1>
+                <h2>{data.subTitle}</h2>
+                <div className="mobile-slider-blog__footer d-flex mt-3">
+                  <div className="d-flex">
+                    {/* <img src={} /> */}
+                    <div className="d-flex flex-column">
+                      <span>مطالعه کامل در {data.duration}</span>
+                      <span>تاریخ انتشار {data.data}</span>
+                    </div>
+                  </div>
+                  <Link to={data.link}>{data.buttonText}</Link>
+                </div>
+                <span className="mobile-slider-blog__category" style={{backgroundColor: data.category.color}}>{data.category.name}</span>
+              </div>
+            </article> : null
+         }
+      </>
+      
 
     );
   }

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

@@ -58,3 +58,65 @@
     }
   }
 }
+
+
+.mobile-slider-blog {
+  margin: 10px;
+  padding: 5px 8px;
+  box-shadow: 0px 0px 5px rgb(200, 200, 200);
+  border-radius: 15px;
+  width: 100%;
+  text-decoration: none;
+  position: relative;
+  img {
+    width: 100%;
+    height: 150px;
+    border-radius: 10px;
+  }
+  h1 {
+    font-family: numeralBold;
+    margin-top: 15px;
+    font-size: calc(100vw / 35);
+    color: #6f7074;
+  }
+  h2 {
+    font-family: numeralLight;
+    margin-top: 5px;
+    font-size: calc(100vw / 50);
+    color: #a5a5a5;
+  }
+  &__category{
+    font-family: numeralMedium;
+    position: absolute;
+    top: 10px;
+    left: 13px;
+    color: white;
+    padding: 5px 7px;
+    border-radius: 5px;
+    font-size: calc(100vw / 60);
+  }
+
+  &__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 / 50);
+      &:hover{
+        color: #02733c;
+      }
+    }
+    span{
+      font-family: numeralLight;
+      font-size: calc(100vw / 50);
+      color: #a5a5a5;
+      letter-spacing: -1px;
+    }
+  }
+}

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

@@ -6,26 +6,54 @@ export default class Header extends Component {
   render() {
     const { height, data } = this.props;
     return (
-      <div
+      <>
-        style={{
+        {
-          minWidth: `${data.width}`,
+          window.innerWidth > 1000 ? 
-          height: height,
+          <div
-          background: `url(${data.image})`,
+            style={{
-          backgroundRepeat: 'no-repeat',
+              minWidth: `${data.width}`,
-          backgroundSize: 'cover'
+              height: height,
-        }}
+            }}
-        className="slider-header d-flex"
+            className="slider-header d-flex"
-      >
+          >
-        {/* <img src={data.image} alt={data.title} /> */}
+            <div className="slider-header__right d-flex" style={{ backgroundColor: data.backgroundColor }}>
-        <div
+              <img src={data.image} alt={data.title} />
-          style={{ backgroundColor: data.backgroundColor }}
+            </div>
-          className="slider-header__left d-flex flex-column"
+            <div
-        >
+              style={{ backgroundColor: data.backgroundColor }}
-          <h1>{data.title}</h1>
+              className="slider-header__left d-flex flex-column"
-          <h2>{data.subTitle}</h2>
+            >
-          <Link to={data.link}>{data.buttonText}</Link>
+              <h1>{data.title}</h1>
-        </div>
+              <h2>{data.subTitle}</h2>
-      </div>
+              <Link to={data.link}>{data.buttonText}</Link>
+            </div>
+          </div> : null
+        }
+        {
+          window.innerWidth < 1000 ? 
+          <div
+            style={{
+              minWidth: `${data.width}`,
+              height: height,
+            }}
+            className="mobile-slider-header d-flex"
+          >
+            <div className="mobile-slider-header__right d-flex" style={{ backgroundColor: data.backgroundColor }}>
+              <img src={data.image} alt={data.title} />
+            </div>
+            <div
+              style={{ backgroundColor: data.backgroundColor }}
+              className="mobile-slider-header__left d-flex flex-column"
+            >
+              <h1>{data.title}</h1>
+              <h2>{data.subTitle}</h2>
+              <Link to={data.link}>{data.buttonText}</Link>
+            </div>
+          </div> : null
+        }
+      </>
+      
+      
     );
   }
 }

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

@@ -1,20 +1,22 @@
 .slider-header{
   width : 100%;
   justify-content: flex-end;
+  &__right{
+    width: 60%;
+    height: 100%;
+    & img{
+
+    }
+  }
   &__left{
     width: 40%;
     height: 100%;
     justify-content : center;
     align-items: flex-end;
     padding-left: 70px;
-    & img{
+    
-      width : 100%;
-      z-index: -1;
-      height : 100%;
-      object-fit: cover;
-    }
     h1{
-      font-size: calc(100vw / 50);
+      font-size: calc(100vw / 55);
       color: white;
       font-family: numeralBold;
       letter-spacing: -1px;
@@ -34,6 +36,60 @@
       border : 1px solid white;
       border-radius: 5px;
       font-family: numeralMedium;
+      &:hover{
+        color: white;
+      }
+    }
+  }
+}
+
+
+.mobile-slider-header{
+  width : 100%;
+  justify-content: flex-end;
+  &__right{
+    width: 50%;
+    height: 100%;
+    justify-content : center;
+    align-items: center;
+    & img{
+      position: relative;
+      width: 200%;
+      height: 110%;
+      right: 40px;
+      bottom: 10px;
+    }
+  }
+  &__left{
+    width: 50%;
+    height: 100%;
+    justify-content : center;
+    align-items: flex-end;
+    padding-left: 30px;
+    
+    h1{
+      font-size: calc(100vw / 37);
+      color: white;
+      font-family: numeralBold;
+    }
+    h2{
+      margin-top: 5px;
+      font-size: calc(100vw / 48);
+      color: white;
+      font-family: numeralBold;
+    }
+    a{
+      text-decoration: none;
+      color: white;
+      margin-top: 10px;
+      font-size: calc(100vw / 55);
+      padding: 6px 10px;
+      border : 1px solid white;
+      border-radius: 5px;
+      font-family: numeralMedium;
+      &:hover{
+        color: white;
+      }
     }
   }
 }

src/views/Home/HomeSlider/index.js

@@ -50,25 +50,54 @@ export default class HomeSlider extends Component {
       }
     }
     return (
-      <div
+      <>
-        className={
+        { 
-          title ? "home-slider d-flex flex-column" : "home-slider d-flex"
+          window.innerWidth > 1000 ? 
+          <div
+            className={
+              title ? "home-slider d-flex flex-column" : "home-slider d-flex"
+            }
+          >
+            {header}
+
+            <Carousel
+              itemsToShow={number}
+              isRTL={true}
+              enableTilt={false}
+              showArrows={true}
+              pagination={false}
+            >
+              {data.map((item, i) => (
+                <Item height={height} designType={designType} data={item} key={i} />
+              ))}
+            </Carousel>
+          </div> : null
         }
-      >
+        {
-        {header}
+          window.innerWidth < 1000 ? 
+          <div
+            className={
+              title ? "mobile-home-slider d-flex flex-column" : "mobile-home-slider d-flex"
+            }
+          >
+            {header}
 
-        <Carousel
+            <Carousel 
-          itemsToShow={number}
+              itemsToShow={number}
-          isRTL={true}
+              isRTL={true}
-          enableTilt={false}
+              enableTilt={false}
-          showArrows={true}
+              showArrows={true}
-          pagination={false}
+              pagination={false}
-        >
+            >
-          {data.map((item, i) => (
+              {data.map((item, i) => (
-            <Item height={height} designType={designType} data={item} key={i} />
+                <Item height={height} designType={designType} data={item} key={i} />
-          ))}
+              ))}
-        </Carousel>
+            </Carousel>
-      </div>
+          </div> : null
+        }
+        
+      </>
+      
     );
   }
 }

src/views/Home/HomeSlider/index.scss

@@ -1,10 +1,37 @@
+.mobile-home-slider{
+  width: 100%;
+  padding: 2px 0px 0px;
+  margin: 0px 0px 10px;
+  position: relative;
+  .rec-arrow-left{
+    top : calc(50% - 22px) !important;
+    right: -12px !important;
+  }
+  
+  .rec-arrow-right{
+    top : calc(50% - 22px) !important;
+    left: -12px !important;
+  }
+}
+
 .home-slider {
   width: 100%;
   padding: 2px 0px 0px;
   margin: 10px 0px 10px;
   position: relative;
+  .rec-arrow-left{
+    top : calc(50% - 22px) !important;
+    right: 5px !important;
+  }
+  
+  .rec-arrow-right{
+    top : calc(50% - 22px) !important;
+    left: 5px !important;
+  }
 }
 
+
+
 .rec-dot_active {
   background-color: green !important;
   color: white !important;
@@ -56,12 +83,3 @@
   border-radius: 10px;
 }
 
-.rec-arrow-left{
-  top : calc(50% - 22px) !important;
-  right: 10px !important;
-}
-
-.rec-arrow-right{
-  top : calc(50% - 22px) !important;
-  left: 10px !important;
-}

src/views/Home/Membership/index.js

@@ -5,17 +5,40 @@ import "./index.scss";
 export default class Membership extends Component {
   render() {
     return (
-      <div className="membership d-flex">
+      <>
-        <div className="d-flex flex-column">
+        {
-          <h1><strong>دانوینی</strong> شو</h1>
+          window.innerWidth > 1000 ?
-          <p>مشخصات خودت رو وارد کنید و امتیاز هدیه بگیرید</p>
+          <div className="membership d-flex">
-        </div>
+            <div className="d-flex flex-column">
-        <div className="d-flex">
+              <h1><strong>دانوینی</strong> شو</h1>
-          <Input label={'نام‌و‌نام خانوادگی'} name={'name'} />
+              <p>مشخصات خودت رو وارد کنید و امتیاز هدیه بگیرید</p>
-          <Input label={'شماره تماس'} name={'mobile'} />
+            </div>
-          <button className="membership__submit">دریافت هدیه</button>
+            <div className="d-flex">
-        </div>
+              <Input label={'نام‌و‌نام خانوادگی'} name={'name'} />
-      </div>
+              <Input label={'شماره تماس'} name={'mobile'} />
+              <button className="membership__submit">دریافت هدیه</button>
+            </div>
+          </div> : null
+        }
+        {
+          window.innerWidth < 1000 ?
+          <div className="mobile-membership d-flex">
+            <div className="d-flex flex-column">
+              <h1><strong>دانوینی</strong> شو</h1>
+              <p>مشخصات خودت رو وارد کنید و امتیاز هدیه بگیرید</p>
+            </div>
+            <div className="d-flex flex-column align-items-center">
+              <div>
+                <Input label={'نام‌و‌نام خانوادگی'} name={'name'} />
+              </div>
+              <div>
+                <Input label={'شماره تماس'} name={'mobile'} />
+              </div>
+              <button className="mobile-membership__submit">دریافت هدیه</button>
+            </div>
+          </div> : null
+        }
+      </>
     );
   }
 }

src/views/Home/Membership/index.scss

@@ -68,3 +68,75 @@
     margin-right: 20px;
   }
 }
+
+
+.mobile-membership {
+  width: 100%;
+  padding: 15px 20px;
+  box-shadow: 0px 0px 5px rgb(200, 200, 200);
+  border-radius: 7px;
+  justify-content: space-between;
+  align-items:center;
+  flex: 1;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  h1{
+    font-family: numeralBold;
+    font-size: calc(100vw / 20);
+    margin-bottom: 0px;
+    color: #1bbc6e;
+    strong{
+      color: white;
+      background-color: #1bbc6e;
+      padding:0px 2px;
+    }
+  }
+  p{
+    margin-top: 10px;
+    font-family: numeralMedium;
+    margin-bottom: 0px;
+    font-size: calc(100vw / 50);
+    color: #6f7074;
+  }
+
+  .MuiOutlinedInput-notchedOutline{
+    top: 0px !important;
+  }
+
+  .MuiOutlinedInput-input{
+    padding : 15px 14px !important;
+  }
+  .MuiInputLabel-outlined{
+    font-family: numeralLight !important;
+    display : inline;
+    position: absolute;
+    right: 4px;
+    top: 12px;
+    transform: translate(0px, 0px) scale(1) !important;
+  }
+  .MuiInputLabel-shrink{
+    display : inline;
+    position: absolute;
+    right: -23px;
+    top: -8px;
+    transform: translate(0px, 0px) scale(0.75) !important;
+  }
+
+  label{
+    background-color: white;
+    max-width: 120px;
+    text-align: center;
+    font-size: 14px !important;
+  }
+  
+  &__submit {
+    font-family: numeralMedium;
+    border: 0px;
+    font-size: calc(100vw / 100);
+    background-color: #1bbc6e;
+    color: white;
+    border-radius: 5px;
+    padding : 7px 50px;
+    margin-right: 20px;
+  }
+}

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

@@ -1,21 +1,26 @@
 import React, { Component } from "react";
-import SearchIcon from "@material-ui/icons/Search";
+
-import MenuIcon from "@material-ui/icons/Menu";
+import logo from '../../../../assets/icons/logoMobile.png';
+import hamburger from '../../../../assets/icons/hamburger.png';
+import ar from '../../../../assets/icons/ar.png';
+import qr from '../../../../assets/icons/qr.png';
+import search from '../../../../assets/icons/navbarSearch.png';
 
 import "./index.scss";
 export default class MobileNavbar extends Component {
   render() {
     return (
       <nav className="mobile-navbar d-flex">
-        <div>
+        <div className="mobile-navbar__menu">
-          <MenuIcon
+          <img src={hamburger} alt="منو" />
-            style={{ width: 40, height: 40, color: "black"}}
+        </div>
-          />
+        <div className="mobile-navbar__logo">
+          <img src={logo} alt="لوگو" />
         </div>
-        <div>
+        <div className="mobile-navbar__left">
-          <SearchIcon
+          <img src={search} alt="جستجو" />
-            style={{ width: 40, height: 40, color: "black"}}
+          <img src={ar} alt="واقعیت افزوده" className="m-2" />
-          />
+          <img src={qr} alt="کد QR" />
         </div>
       </nav>
     );

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

@@ -1,9 +1,26 @@
 .mobile-navbar{
   width: 100%;
-  height: 70px;
   position: fixed;
   top : 0px;
   left : 0px;
   justify-content: space-between;
   align-items: center;
+  background-color: white;
+  z-index: 200;
+  padding: 15px 10px;
+  &__menu{
+    img{
+      width : calc(100vw / 12);
+    }
+  }
+  &__logo{
+    img{
+      width: calc(100vw / 4);
+    }
+  }
+  &__left{
+    img{
+      width : calc(100vw / 15);
+    }
+  }
 }

src/views/Home/SingleBlog/index.scss

@@ -1,5 +1,6 @@
 .single-blog{
   width: 100%;
+  margin: 75px 0px;
   &__right{
     width: 50%;
     height: 100%;

src/views/Home/index.js

@@ -10,6 +10,7 @@ import HomeSearch from "./HomeSearch/index";
 import Membership from "./Membership/index";
 import SingleBlog from "./SingleBlog/index";
 
+import pic1 from "../../assets/images/pic1.png"
 import pic from "../../assets/images/pic.png";
 import online from '../../assets/icons/online-education.png';
 import chemistry from '../../assets/icons/chemistry.png';
@@ -34,15 +35,15 @@ export default class Home extends Component {
         {
           type: "slider",
           title: "",
-          height: 380,
+          height: window.innerWidth > 1000 ? 370 : 233,
           design: "header",
           number: 1,
           data: [
             {
               id: 0,
-              image: pic,
+              image: pic1,
               width: "100%",
-              backgroundColor: "rgba(18, 159, 253,0.3)",
+              backgroundColor: "rgba(18, 159, 253,0.6)",
               title: "منفجر کردن مغز خود را به ما بسپارید",
               subTitle: "کاملا تضمینی با نمونه های موفق انفجاری",
               link: '',
@@ -50,9 +51,9 @@ export default class Home extends Component {
             },
             {
               id: 1,
-              image: pic,
+              image: pic1,
               width: "100%",
-              backgroundColor: "rgba(18, 159, 253,0.3)",
+              backgroundColor: "rgba(18, 159, 253,0.6)",
               title: "منفجر کردن مغز خود را به ما بسپارید",
               subTitle: "کاملا تضمینی با نمونه های موفق انفجاری",
               link: '',
@@ -60,9 +61,9 @@ export default class Home extends Component {
             },
             {
               id: 2,
-              image: pic,
+              image: pic1,
               width: "100%",
-              backgroundColor: "rgba(18, 159, 253,0.3)",
+              backgroundColor: "rgba(18, 159, 253,0.6)",
               title: "منفجر کردن مغز خود را به ما بسپارید",
               subTitle: "کاملا تضمینی با نمونه های موفق انفجاری",
               link: '',
@@ -111,11 +112,95 @@ export default class Home extends Component {
           data: ["همه", "پرفروش"],
         },
         {
-          type: "slider",
+          type: window.innerWidth > 1000 ? "slider" : "scroll",
-          title: "پرفروش‌ترین کتاب‌های دانوین",
+          title: "کتاب‌های من",
-          height: 470,
+          moreText: 'لیست کتاب‌ها',
-          design: "simple",
+          height: window.innerWidth > 1000 ? 470 : 270,
+          design: window.innerWidth > 1000 ? "simple" : "myProduct", 
+          number: window.innerWidth > 1000 ? 4 : 2.8,
+          data: [
+            {
+              id: 0,
+              image: book1,
+              title: "منفجر کردن مغز خود را به ما بسپارید",
+              subTitle: "پایه دهم ابتدایی",
+            },
+            {
+              id: 1,
+              image: book2,
+              title: "منفجر کردن مغز خود را به ما بسپارید",
+              subTitle: "پایه ششم ابتدایی",
+            },
+            {
+              id: 2,
+              image: book3,
+              title: "منفجر کردن مغز خود را به ما بسپارید",
+              subTitle: "پایه ششم ابتدایی",
+            },
+            {
+              id: 3,
+              image: book4,
+              title: "منفجر کردن مغز خود را به ما بسپارید",
+              subTitle: "پایه دهم ابتدایی",
+            },
+            {
+              id: 4,
+              image: book5,
+              title: "منفجر کردن مغز خود را به ما بسپارید",
+              subTitle: "پایه هفتم ابتدایی",
+            },
+            {
+              id: 5,
+              image: book1,
+              title: "منفجر کردن مغز خود را به ما بسپارید",
+              subTitle: "پایه دهم ابتدایی",
+            },
+            {
+              id: 6,
+              image: book2,
+              title: "منفجر کردن مغز خود را به ما بسپارید",
+              subTitle: "پایه ششم ابتدایی",
+            },
+            {
+              id: 7,
+              image: book3,
+              title: "منفجر کردن مغز خود را به ما بسپارید",
+              subTitle: "پایه ششم ابتدایی",
+            },
+            {
+              id: 8,
+              image: book4,
+              title: "منفجر کردن مغز خود را به ما بسپارید",
+              subTitle: "پایه دهم ابتدایی",
+            },
+            {
+              id: 9,
+              image: book5,
+              title: "منفجر کردن مغز خود را به ما بسپارید",
+              subTitle: "پایه هفتم ابتدایی",
+            },
+          ],
+        },
+        {
+          type: 'scroll',
+          title : 'موضوعات',
+          moreText: 'تمام موضوعات',
+          design: 'subjects',
           number: 4,
+          data: [
+            {id: 0, name : 'علوم طبیعی', backgroundColor: 'yellow'},
+            {id: 1, name : 'شیمی الی', backgroundColor: 'red'},
+            {id: 2, name : 'زمین شناسی', backgroundColor: 'blue'},
+            {id: 3, name : 'ریاضیات', backgroundColor: 'purple'},
+          ]
+        },
+        {
+          type: window.innerWidth > 1000 ? "slider" : "scroll",
+          title: "پرفروش‌ترین کتاب‌های دانوین",
+          moreText: 'لیست کتاب‌ها',
+          height: window.innerWidth > 1000 ? 470 : 320,
+          design: window.innerWidth > 1000 ? "simple" : "product", 
+          number: window.innerWidth > 1000 ? 4 : 2.8,
           data: [
             {
               id: 0,
@@ -207,11 +292,12 @@ export default class Home extends Component {
           ],
         },
         {
-          type: "slider",
+          type: window.innerWidth > 1000 ? "slider" : "scroll",
           title: "جدیدترین کتاب‌های دانوین",
-          height: 470,
+          height: window.innerWidth > 1000 ? 470 : 320,
-          design: "tab",
+          design: window.innerWidth > 1000 ? "tab" : 'product',
-          number: 4,
+          number: window.innerWidth > 1000 ? 4 : 3.5,
+          moreText: 'لیست کتاب‌ها',
           data: [
             {
               id: 0,
@@ -321,7 +407,7 @@ export default class Home extends Component {
           title: "بلاگ",
           height: '',
           design: "blog",
-          number: 3,
+          number: window.innerWidth > 1000 ? 3 : 2,
           data: [
             {
               id: 0,
@@ -378,13 +464,31 @@ export default class Home extends Component {
     const { homeData } = this.state;
     return (
       <>
-      <div className="home d-flex flex-column">
+      {
-        <Navbar />
+        window.innerWidth > 1000 ? 
-        {homeData.map((item, i) => (
+        <>
-          <Identifier item={item} key={i} />
+          <div className="home d-flex flex-column">
-        ))}
+            <Navbar />
-      </div>
+            {homeData.map((item, i) => (
-      <Footer />
+              <Identifier item={item} key={i} />
+            ))}
+          </div>
+          <Footer /> 
+        </> : null
+      }
+      {
+        window.innerWidth < 1000 ?
+        <>
+          <div className="mobile-home d-flex flex-column">
+            <Navbar />
+            {homeData.map((item, i) => (
+              <Identifier item={item} key={i} />
+            ))}
+          </div>
+          <Footer /> 
+        </> : null
+      }
+      
 
       </>
     );
@@ -401,7 +505,7 @@ const Identifier = (props) => {
           data={props.item.data}
         />
       ) : null}
-      {props.item.type === "static" ? (
+      {props.item.type === "static" && window.innerWidth > 1000 ? (
         <HomeStatic
           height={props.item.height}
           title={props.item.title}
@@ -410,9 +514,12 @@ const Identifier = (props) => {
       ) : null}
       {props.item.type === "scroll" ? (
         <HomeScroll
+          number={props.item.number}
           height={props.item.height}
           title={props.item.title}
           data={props.item.data}
+          designType={props.item.design}
+          moreText={props.item.moreText}
         />
       ) : null}
       {props.item.type === "slider" ? (
@@ -424,13 +531,13 @@ const Identifier = (props) => {
           data={props.item.data}
         />
       ) : null}
-      {props.item.type === "search" ? (
+      {props.item.type === "search" && window.innerWidth > 1000 ? (
         <HomeSearch height={props.item.height} data={props.item.data} />
       ) : null}
-      {props.item.type === "membership" ? (
+      {props.item.type === "membership" && window.innerWidth > 1000 ? (
         <Membership />
       ) : null}
-      {props.item.type === "singleBlog" ? (
+      {props.item.type === "singleBlog" && window.innerWidth > 1000 ? (
         <SingleBlog height={props.item.height} data={props.item.data} direction={props.item.direction} />
       ) : null}
     </>

src/views/Home/index.scss

@@ -4,4 +4,15 @@
   margin: 0px auto;
   padding : 0px 10px;
   direction: rtl;
+}
+
+
+.mobile-home{
+  width: 100vw;
+  max-width: 600px;
+  margin: 0px auto;
+  padding: 0px 10px;
+  direction: rtl;
+  overflow-x: hidden;
+  padding-top: 90px;
 }