reza added some change

src/AppRouter.js

@@ -15,6 +15,7 @@ import Activation from './views/Activation/index';
 import ChatList from './views/ChatList/index';
 import Chatroom from './views/ChatRoom/index';
 import Cart from './views/Cart/index';
+import MyBooks from './views/MyBooks/index';
 
 class AppRouter extends Component {
   constructor(props) {
@@ -73,6 +74,9 @@ class AppRouter extends Component {
           <Route exact path={'/cart'}>
             <Cart />
           </Route>
+          <Route exact path={'/mybooks'}>
+            <MyBooks />
+          </Route>
           {
             window.innerWidth < 1000 ?
             <Route exact path={'/chatroom/:id'}>

src/views/Home/HomeStatic/Flex/index.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import {Link} from 'react-router-dom';
 
 const maxMobileSize = 550;
 
@@ -18,7 +19,7 @@ export default function Flex(props){
 
   }
   return(
-    <div className="mobile-home-static__flex d-flex align-items-center" style={style}>
+    <Link to={data.link} className="mobile-home-static__flex d-flex align-items-center" style={style}>
       <div className="mobile-home-static__flex--right d-flex flex-column">
         <h1 style={{ fontSize: fontSize.h1 }}>{data.title}</h1>
         {
@@ -28,7 +29,7 @@ export default function Flex(props){
         <span style={{ fontSize: fontSize.span }}>{data.subTitle}</span>
       </div>
       <img src={data.imageUrl} alt={data.title} />
-    </div>
+    </Link>
   );
 }
 

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import {Link} from 'react-router-dom';
 
 const maxMobileSize = 550;
 
@@ -29,11 +30,11 @@ export default function Simple(props){
     alignItems: data.alignItems
   };
   return(
-    <div className="mobile-home-static__simple d-flex" style={parentStyle}>
+    <Link to={data.link} className="mobile-home-static__simple d-flex" style={parentStyle}>
       <div style={childStyle} className="d-flex">
         <h1 style={{ fontSize: fontSize.h1 }}>{data.title}</h1>
       </div>
-    </div>
+    </Link>
   );
 }
 

src/views/Home/HomeStatic/Vitrin/index.js

@@ -32,7 +32,7 @@ export default function Vitrin(props){
             <Item data={item} key={i} />
           ))
         }
-        <span style={{fontSize: fontSize.span }}>مشاهده بیشتر</span>
+        <Link to={data.link} style={{fontSize: fontSize.span }}>مشاهده بیشتر</Link>
       </div>
     </div>
   );

src/views/Home/HomeStatic/index.scss

@@ -31,6 +31,7 @@
   &__flex{
     padding: 20px 10px;
     justify-content: space-around;
+    text-decoration: none;
     img {
       // margin-right: 20px;
       max-height: 55px;
@@ -65,16 +66,19 @@
         border-radius: 10px;
       }
     }
-    span{
+    a{
+      text-decoration: none;
       font-family: numeralLight;
       align-items: flex-end;
       margin-bottom: 5px;
       letter-spacing: -1px;
       margin-right: 5px;
+      color: white;
     }
   }
   &__simple{
     // padding: 0px 10px;
+    text-decoration: none;
     min-height: 50px;
     div{
       width: 100%;

src/views/Home/index.js

@@ -178,7 +178,7 @@ Home.defaultProps = {
           design: "flex",
           title: "QR خوان",
           subTitle: "در صفحات کتاب هوشمند",
-          link: '',
+          link: '/qr-scan',
           badge : '',
           flex : 1,
           fontSize : 'large',
@@ -195,7 +195,7 @@ Home.defaultProps = {
           design: "flex",
           title: "واقعیت افزوده",
           subTitle: "توضیحات مختصر در این رابطه",
-          link: '',
+          link: '/ar-scan',
           badge : '',
           flex : 1,
           fontSize : 'large',
@@ -234,11 +234,11 @@ Home.defaultProps = {
             angle: '180deg'
           },
           design: "simple",
-          title: "واقعیت افزوده",
+          title: "کتابهای من",
           subTitle: "",
           justifyContent: 'flex-start',
           alignItems: 'center',
-          link: '',
+          link: '/mybooks',
           badge : '',
           flex : 1,
           fontSize : 'large',
@@ -264,7 +264,7 @@ Home.defaultProps = {
           subTitle: "",
           justifyContent: 'center',
           alignItems: 'center',
-          link: '',
+          link: '/blog',
           badge : '',
           flex : 1.2,
           fontSize : 'normal',
@@ -287,7 +287,7 @@ Home.defaultProps = {
             { id: 1, imageUrl: book2 },
             { id: 2, imageUrl: book3},
           ],
-          link: '',
+          link: '/products',
           badge : '',
           flex : 2,
           fontSize : 'large',
@@ -318,7 +318,7 @@ Home.defaultProps = {
               subTitle: "",
               justifyContent: 'center',
               alignItems: 'center',
-              link: '',
+              link: '/contact',
               badge : '',
               flex : 1,
               fontSize : 'normal',
@@ -337,7 +337,7 @@ Home.defaultProps = {
               subTitle: "",
               justifyContent: 'center',
               alignItems: 'center',
-              link: '',
+              link: '/profile',
               badge : '',
               flex : 1,
               fontSize : 'normal',
@@ -358,7 +358,7 @@ Home.defaultProps = {
           subTitle: "",
           justifyContent: 'center',
           alignItems: 'center',
-          link: '',
+          link: '/activation',
           badge : '',
           flex : 1,
           fontSize : 'large',

src/views/MyBooks/index.js

@@ -0,0 +1,168 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+import Navbar from "../Home/Navbar/index";
+import Footer from "../Home/Footer/index";
+
+import book6 from "../../assets/images/book6.png";
+import book7 from "../../assets/images/book7.png";
+import book8 from "../../assets/images/book8.png";
+import book9 from "../../assets/images/book9.png";
+import basket from "../../assets/icons/basket.png";
+
+import "./index.scss";
+
+const maxDesktopSize = 1250;
+const maxMobileSize = 550;
+
+const fontSize = {
+  mobile: {
+    h1: window.innerWidth > maxMobileSize ? 24 : window.innerWidth / 15,
+    a: window.innerHeight > maxMobileSize ? 15 : window.innerWidth / 30,
+  },
+};
+
+export default class MyBooks extends React.Component {
+  render() {
+    const { books } = this.props;
+    return (
+      <>
+        {window.innerWidth > 1000 ? (
+          <>
+            <div className="mybooks d-flex flex-column">
+              <Navbar />
+            </div>
+            <Footer />
+          </>
+        ) : null}
+        {window.innerWidth < 1000 ? (
+          <>
+            <div className="mobile-mybooks d-flex flex-column">
+              <Navbar />
+              <h1 style={{ fontSize: fontSize.mobile.h1 }}>کتابهای من</h1>
+              <div className="d-flex flex-wrap p-1">
+                {books.map((item, i) => (
+                  <Item data={item} key={i} id={i} />
+                ))}
+              </div>
+            </div>
+          </>
+        ) : null}
+      </>
+    );
+  }
+}
+
+const Item = (props) => {
+  const { data, id } = props;
+  return (
+    <div
+      className="mobile-mybooks__item d-flex flex-column"
+      style={{
+        borderBottomLeftRadius: Number(id) % 2 === 1 ? 30 : 0,
+        borderBottomRightRadius: Number(id) % 2 === 0 ? 30 : 0,
+      }}
+    >
+      <img src={data.imageUrl} alt={"عکس مجصول"} />
+      <div className="mobile-mybooks__item--buttons d-flex flex-column">
+        <Link
+          style={{
+            background: data.status.digital ? "#FFEE00" : "#FFFFFF",
+            fontSize: fontSize.mobile.a,
+            color: data.status.ar ? "#4D4D4F" : "#4D4D4F",
+          }}
+        >
+          کتاب دیجیتال
+          { !data.status.digital ? <img src={basket} alt="افزودن به سبد خرید" /> : null}
+        </Link>
+        <Link
+          style={{
+            background: data.status.ar ? "#00CC69" : "#FFFFFF",
+            color: data.status.ar ? "#FFFFFF" : "#4D4D4F",
+            fontSize: fontSize.mobile.a,
+          }}
+        >
+          واقعیت افزوده
+          { !data.status.ar ? <img src={basket} alt="افزودن به سبد خرید" /> : null}
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+MyBooks.defaultProps = {
+  books: [
+    {
+      id: 0,
+      link: "",
+      imageUrl: book6,
+      status: {
+        digital: true,
+        ar: true,
+      },
+    },
+    {
+      id: 1,
+      link: "",
+      imageUrl: book7,
+      status: {
+        digital: false,
+        ar: true,
+      },
+    },
+    {
+      id: 2,
+      link: "",
+      imageUrl: book8,
+      status: {
+        digital: true,
+        ar: false,
+      },
+    },
+    {
+      id: 3,
+      link: "",
+      imageUrl: book9,
+      status: {
+        digital: true,
+        ar: true,
+      },
+    },
+    {
+      id: 4,
+      link: "",
+      imageUrl: book6,
+      status: {
+        digital: true,
+        ar: true,
+      },
+    },
+    {
+      id: 5,
+      link: "",
+      imageUrl: book7,
+      status: {
+        digital: true,
+        ar: true,
+      },
+    },
+    {
+      id: 6,
+      link: "",
+      imageUrl: book8,
+      status: {
+        digital: true,
+        ar: true,
+      },
+    },
+    {
+      id: 7,
+      link: "",
+      imageUrl: book9,
+      status: {
+        digital: true,
+        ar: true,
+      },
+    },
+  ],
+};

src/views/MyBooks/index.scss

@@ -0,0 +1,62 @@
+.mybooks{
+  width: 100vw;
+  max-width: 1250px;
+  margin: 0px auto;
+  padding : 0px 10px;
+  direction: rtl;
+  min-height: calc(100vh - 288px);
+}
+
+.mobile-mybooks{
+  width: 100vw;
+  max-width: 600px;
+  margin: 0px auto;
+  padding: 0px;
+  direction: rtl;
+  overflow-x: hidden;
+  padding-top: 70px;
+  h1{
+    padding: 0px 10px;
+    font-family: numeralBold;
+    color: #6F7074;
+    margin-bottom: 10px;
+  }
+  &__item{
+    background-color: #F2F2F2;
+    width: calc(100vw / 2 - 15px);
+    margin: 5px;
+    border-top-left-radius: 30px;
+    border-top-right-radius: 30px;
+    margin-bottom: 20px;
+    & img{
+      width: 100%;
+      height: calc(100vh / 3.5);
+      border-radius: 30px;
+      max-height: 200px;
+      margin-bottom: 10px;
+    }
+    &--buttons{
+      padding: 5px 9px;
+      a {
+        text-decoration: none;
+        width: 100%;
+        padding: 8px;
+        font-family: numeralLight;
+        margin-bottom: 10px;
+        border-radius: 10px;
+        text-align: center;
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        img{
+          position: absolute;
+          top: calc(50% - 8px);
+          left: 5px;
+          width: 20px;
+          height: 20px;
+        }
+      }
+    }
+  }
+}

src/views/Products/BreadCrumb/index.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import Breadcrumbs from '@material-ui/core/Breadcrumbs';
+import {Link} from 'react-router-dom';
+
+import './index.scss';
+
+function handleClick(event) {
+  event.preventDefault();
+  console.info('You clicked a breadcrumb.');
+}
+
+const maxDesktopSize = 1250;
+const maxMobileSize = 650;
+
+const fontSize = {
+  desktop: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90,
+  mobile : window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 25,
+};
+
+export default function ActiveLastBreadcrumb() {
+  return (
+    <Breadcrumbs aria-label="breadcrumb">
+      <Link style={{ fontSize: window.innerWidth > 1000 ? fontSize.desktop : fontSize.mobile}} to={'/'}  onClick={handleClick}>
+         صفحه اصلی
+      </Link>
+      <Link style={{ fontSize: window.innerWidth > 1000 ? fontSize.desktop : fontSize.mobile, color: '#00CC69'}} to="/products" onClick={handleClick}>
+        محصولات
+      </Link>
+    </Breadcrumbs>
+  );
+}
+

src/views/Products/BreadCrumb/index.scss

@@ -0,0 +1,8 @@
+.MuiBreadcrumbs-li{
+  a {
+    text-decoration: none;
+    font-family: numeralLight;
+    color: #6F7074;
+    letter-spacing: -1px;
+  }
+}

src/views/Products/Filters/AppliedFilters/index.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import CloseIcon from '@material-ui/icons/Close';
+
+import './index.scss';
+
+const maxDesktopSize = 1250;
+
+const fontSize = {
+  h2 : window.innerWidth > maxDesktopSize ? 13 : window.innerWidth / 85,
+}
+export default class AppliedFilters extends React.Component {
+  render() {
+    const {data} = this.props;
+    return(
+      <div className="products-filters-applied d-flex flex-column">
+        <header className="products-filters-applied__header d-flex align-items-center">
+          <span></span>
+          <h2 style={{ fontSize : fontSize.h2 }}>فیلترهای اعمال شده</h2>
+        </header>
+        <div className="products-filters-applied__items d-flex flex-wrap">
+          {
+            data.map((item,i) => (
+              <Item data={item} key={i} />
+            ))
+          }
+        </div>
+      </div>
+    );
+  }
+}
+
+const Item = (props) => {
+  const {data} = props;
+  return(
+    <button className="d-flex align-items-center">
+      <span>{data.name}</span>
+      <CloseIcon style={{ fontSize: 20 }} />
+    </button>
+  );
+}

src/views/Products/Filters/AppliedFilters/index.scss

@@ -0,0 +1,27 @@
+.products-filters-applied {
+  width: 100%;
+  margin-bottom: 20px;
+  &__header {
+    h2 {
+      font-family: numeralBold;
+      margin: 0px;
+      color: #373737;
+    }
+
+    span {
+      width: 3px;
+      border-radius: 100px;
+      background-color: #17dfff;
+      height: 100%;
+      margin-left: 5px;
+      min-height: 20px;
+    }
+  }
+  &__items {
+    margin-top: 10px;
+    box-shadow: 0px 0px 10px #70707028;
+    border-radius: 8px;
+    min-height: 30px;
+    padding: 10px 5px;
+  }
+}

src/views/Products/Filters/TypicalFilters/index.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Checkbox from '@material-ui/core/Checkbox';
+
+import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
+import CheckBoxIcon from '@material-ui/icons/CheckBox';
+import CloseIcon from '@material-ui/icons/Close';
+
+import './index.scss';
+
+const maxDesktopSize = 1250;
+
+const fontSize = {
+  h2 : window.innerWidth > maxDesktopSize ? 13 : window.innerWidth / 85,
+  strong: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90,
+}
+export default class TypicalFilters extends React.Component {
+  render() {
+    const {data, title, theme} = this.props;
+    return(
+      <div className="products-filters-typical d-flex flex-column">
+        <header className="products-filters-typical__header d-flex align-items-center">
+          <span style={{ background : theme }}></span>
+          <h2 style={{ fontSize : fontSize.h2 }}>{title}</h2>
+        </header>
+        <div className="products-filters-typical__items d-flex flex-column">
+          {
+            data.map((item,i) => (
+              <Item data={item} key={i} />
+            ))
+          }
+        </div>
+      </div>
+    );
+  }
+}
+
+const Item = (props) => {
+  const {data} = props;
+  return(
+    <div className="d-flex align-items-center mt-2">
+      <FormControlLabel
+        control={<Checkbox icon={<CheckBoxOutlineBlankIcon style={{ color: '#EAEAEA' }} />} checkedIcon={<CheckBoxIcon style={{ color: '#00CC69' }} />} name="checkedH" />}
+        label=""
+      />
+      <strong style={{ fontSize: fontSize.strong }}>{data}</strong>
+    </div>
+  );
+}

src/views/Products/Filters/TypicalFilters/index.scss

@@ -0,0 +1,39 @@
+.products-filters-typical{
+  width: 100%;
+  margin-bottom: 20px;
+  &__header{
+    h2{
+      font-family: numeralBold;
+      margin: 0px;
+      color: #373737;
+    }
+
+    span{
+      width: 4px;
+      border-radius: 4px;
+      height: 100%;
+      margin-left: 5px;
+      min-height: 20px;
+    }
+  }
+  &__items {
+    margin-top: 10px;
+    box-shadow: 0px 0px 10px #70707028;
+    border-radius: 8px;
+    min-height: 30px;
+    padding: 10px 5px;
+    .MuiFormControlLabel-root{
+      margin: 0px;
+    }
+    .MuiCheckbox-root{
+      padding: 0px;
+
+    }
+    strong{
+      font-weight: 100;
+      color: #6F7074;
+      font-family: numeralLight;
+      margin-right: 10px;
+    }
+  }
+}

src/views/Products/Filters/index.js

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import AppliedFiltesrs from './AppliedFilters/index';
+import TypicalFilters from './TypicalFilters/index';
+
+import './index.scss';
+export default class Filtesrs extends React.Component {
+  render() {
+    const {parent} = this.props;
+    return(
+      <div className="products-filters d-flex flex-column">
+        {
+          parent.state.selectedFilters.length !== 0 ?
+          <AppliedFiltesrs data={parent.state.selectedFilters} />: null
+        }
+        <TypicalFilters data={parent.props.subjects} title="دسته بندی موضوعی" theme="#D7FF17" />
+        <TypicalFilters data={parent.props.levels} title="پایه تحصیلی" theme="#FF8917" />
+      </div>
+    );
+  }
+}

src/views/Products/Filters/index.scss

@@ -0,0 +1,3 @@
+.products-filters{
+  flex: 1;
+}

src/views/Products/List/index.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import Product from '../Product/index';
+
+import './index.scss';
+export default class List extends React.Component {
+  render() {
+    const {parent} = this.props;
+    return(
+      <div className="products-list d-flex flex-wrap">
+        {
+          parent.props.products.map((item,i) => (
+            <Product product={item} key={i} />
+          ))
+        }
+      </div>
+    );
+  }
+}

src/views/Products/List/index.scss

@@ -0,0 +1,3 @@
+.products-list{
+  padding: 20px 20px;
+}

src/views/Products/Product/index.js

@@ -4,13 +4,20 @@ import { Link } from "react-router-dom";
 import "./index.scss";
 
 const maxMobileSize = 550;
+const maxDesktopSize = 1250;
 
 const fontSize = {
   mobile : {
     h1: window.innerWidth > maxMobileSize ? 18 : window.innerWidth / 26,
     h2: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 34,
     div: window.innerWidth > maxMobileSize ? 18 : window.innerWidth / 32,
-  }
+  },
+  desktop : {
+    h1: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 70,
+    div: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 85,
+    old: window.innerWidth > maxDesktopSize ? 9 : window.innerWidth / 120,
+  },
+
 }
 export default class Product extends Component {
   render() {
@@ -45,6 +52,33 @@ export default class Product extends Component {
             </Link>
           </article>
         ) : null}
+        {window.innerWidth > 1000 ? (
+          <article className="products-product d-flex flex-column align-items">
+            <Link to={`/products/${product.id}`}>
+              <img src={product.image} alt={product.title} />
+              <h1 style={{ fontSize: fontSize.desktop.h1 }}>{product.title  + ' ' +  product.subTitle}</h1>
+              {product.price ? (
+                <div className="products-product__price d-flex justify-content-center align-items-center">
+                  {product.oldPrice ? (
+                    <div>
+                      <div style={{ fontSize: fontSize.desktop.old }} className="products-product__price--old d-flex">
+                        {product.oldPrice} تومان
+                        <span></span>
+                      </div>
+                    </div>
+                  ) : null}
+                  <div style={{ fontSize: fontSize.desktop.div }} className="products-product__price--price">
+                    {product.price} تومان
+                  </div>
+                </div>
+              ) : (
+                <div style={{ fontSize: fontSize.desktop.div }} className="products-product__notAvailabe">
+                  ناموجود
+                </div>
+              )}
+            </Link>
+          </article>
+        ) : null}
       </>
     );
   }

src/views/Products/Product/index.scss

@@ -57,3 +57,58 @@
     }
   }
 }
+
+.products-product{
+  width: calc(100% / 4);
+  padding: 10px;
+  margin-bottom: 20px;
+  a{
+    width : 100%;
+    text-decoration: none;
+    &:hover{
+    }
+    img{
+      width: 100%;
+      height: 200px;
+      border-radius: 30px;
+    }
+    h1{
+      font-family: numeralBold;
+      margin-top: 15px;
+      color: #02A1A6;
+      letter-spacing: -1px;
+      text-align: center;
+    }
+  }
+  &__notAvailabe{
+    font-family: numeralBold;
+    width : 100%;
+    text-align: center;
+    color: #6f7074;
+    margin-top: 15px;
+  }
+  &__price{
+    width : 100%;
+    margin-top: 15px;
+    text-align: center;
+    &--old{
+      font-family: numeralBold;
+      color: #6f7074;
+      position: relative;
+      margin-left: 10px;
+      align-items:center;
+      span{
+        position: absolute;
+        left: 0px;
+        width : 100%;
+        height: 2px;
+        background-color: rgba(121, 121, 121, 0.534);
+        transform: rotate(-14deg);      
+      }
+    }
+    &--price{
+      color: #4d4d4d;
+      font-family: numeralBold;
+    }
+  }
+}

src/views/Products/Sort/index.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import SortIcon from '@material-ui/icons/Sort';
+
+import './index.scss';
+
+const maxDesktopSize = 1250;
+
+const fontSize = {
+  span : window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 90,
+  li: window.innerWidth > maxDesktopSize ? 13 : window.innerWidth / 95,
+}
+
+export default class Sort extends React.Component {
+  render() {
+    const {parent} = this.props;
+    return(
+      <div className="products-sort d-flex align-items-center">
+        <SortIcon style={{ fontSize: 30, color : '#A5A5A5', marginLeft : 10}} />
+        <span style={{ fontSize: fontSize.span }}>مرتب سازی بر اساس</span>
+        <ul className="d-flex justify-content-between align-items-center mr-2">
+          {
+            parent.props.sortItems.map((item, i) => (
+              <Item data={item} key={i} />
+            )) 
+          }
+        </ul>
+      </div>
+    );
+  }
+}
+
+const Item = (props) => {
+  return(
+    <li style={{ fontSize: fontSize.li }}>{props.data}</li>
+  );
+}

src/views/Products/Sort/index.scss

@@ -0,0 +1,21 @@
+.products-sort{
+  padding: 5px 15px;
+  box-shadow: 0px 0px 10px #70707028;
+  border-radius: 8px;
+  span{
+    font-family: numeralLight;
+    color: #373737;
+  }
+  ul{
+    padding: 0px;
+    margin: 0px;
+    list-style: none;
+    flex: 1;
+    padding-right: 60px;
+    li{
+      font-family: numeralLight;
+      color: #373737;
+      cursor: pointer;
+    }
+  }
+}

src/views/Products/index.js

@@ -5,6 +5,10 @@ import Navbar from "../Home/Navbar/index";
 import Footer from "../Home/Footer/index";
 import Select from "./Select/index";
 import Product from "./Product/index";
+import Breadcrumbs from "./BreadCrumb/index";
+import List from "./List/index";
+import Sort from "./Sort/index";
+import Filters from "./Filters/index";
 
 import book1 from "../../assets/images/book1.png";
 import book2 from "../../assets/images/book2.png";
@@ -16,6 +20,7 @@ import book5 from "../../assets/images/book5.png";
 import "./index.scss";
 export default class Products extends Component {
   state = {
+    selectedFilters : [],
     firstFilters: [
       { id: 0, value: "محبوب ترین" },
       { id: 1, value: "جدیدترین" },
@@ -44,6 +49,14 @@ export default class Products extends Component {
           <>
             <div className="products d-flex flex-column">
               <Navbar page={'products'} />
+              <Breadcrumbs />
+              <div className="products__body d-flex">
+                <Filters parent={this} />
+                <div className="products__body--left d-flex flex-column">
+                  <Sort parent={this} />
+                  <List parent={this} />
+                </div>
+              </div>
             </div>
             <Footer />
           </>
@@ -74,11 +87,33 @@ export default class Products extends Component {
 }
 
 Products.defaultProps = {
+  sortItems : [
+    'پربازدیدترین',
+    'پرفروش ترین',
+    'گران‌ترین',
+    'ارزان‌ترین',
+    'جدیدترین',
+    'بزودی',
+  ],
+  subjects: [
+    'فیزیک',
+    'زیست شناسی',
+    'شیمی آلی',
+    'روانشناسی',
+    'علوم تجربی',
+    'دین و زندگی',
+  ],
+  levels : [
+    'اول',
+    'دوم',
+    'سوم',
+    'چهارم',
+  ],
   products: [
     {
       id: 0,
       image: book1,
-      title: "منفجر کردن مغز خود را به ما بسپارید",
+      title: "کتاب علوم تجربی",
       subTitle: "پایه دهم ابتدایی",
       price: "78.000",
       oldPrice: "",
@@ -87,7 +122,7 @@ Products.defaultProps = {
     {
       id: 1,
       image: book2,
-      title: "منفجر کردن مغز خود را به ما بسپارید",
+      title: "کتاب علوم تجربی",
       subTitle: "پایه ششم ابتدایی",
       price: "39.000",
       oldPrice: "59.000",
@@ -96,7 +131,7 @@ Products.defaultProps = {
     {
       id: 2,
       image: book3,
-      title: "منفجر کردن مغز خود را به ما بسپارید",
+      title: "کتاب علوم تجربی",
       subTitle: "پایه ششم ابتدایی",
       price: "21.000",
       oldPrice: "",
@@ -104,7 +139,7 @@ Products.defaultProps = {
     {
       id: 3,
       image: book4,
-      title: "منفجر کردن مغز خود را به ما بسپارید",
+      title: "کتاب علوم تجربی",
       subTitle: "پایه دهم ابتدایی",
       price: "",
       oldPrice: "",
@@ -112,7 +147,7 @@ Products.defaultProps = {
     {
       id: 4,
       image: book5,
-      title: "منفجر کردن مغز خود را به ما بسپارید",
+      title: "کتاب علوم تجربی",
       subTitle: "پایه هفتم ابتدایی",
       price: "59.000",
       oldPrice: "",
@@ -120,7 +155,7 @@ Products.defaultProps = {
     {
       id: 5,
       image: book1,
-      title: "منفجر کردن مغز خود را به ما بسپارید",
+      title: "کتاب علوم تجربی",
       subTitle: "پایه دهم ابتدایی",
       price: "78.000",
       oldPrice: "",
@@ -129,7 +164,7 @@ Products.defaultProps = {
     {
       id: 6,
       image: book2,
-      title: "منفجر کردن مغز خود را به ما بسپارید",
+      title: "کتاب علوم تجربی",
       subTitle: "پایه ششم ابتدایی",
       price: "39.000",
       oldPrice: "59.000",
@@ -138,7 +173,7 @@ Products.defaultProps = {
     {
       id: 7,
       image: book3,
-      title: "منفجر کردن مغز خود را به ما بسپارید",
+      title: "کتاب علوم تجربی",
       subTitle: "پایه ششم ابتدایی",
       price: "21.000",
       oldPrice: "",
@@ -147,7 +182,7 @@ Products.defaultProps = {
     {
       id: 8,
       image: book4,
-      title: "منفجر کردن مغز خود را به ما بسپارید",
+      title: "کتاب علوم تجربی",
       subTitle: "پایه دهم ابتدایی",
       price: "",
       oldPrice: "",
@@ -156,7 +191,7 @@ Products.defaultProps = {
     {
       id: 9,
       image: book5,
-      title: "منفجر کردن مغز خود را به ما بسپارید",
+      title: "کتاب علوم تجربی",
       subTitle: "پایه هفتم ابتدایی",
       price: "59.000",
       oldPrice: "",

src/views/Products/index.scss

@@ -5,6 +5,13 @@
   padding : 0px 10px;
   direction: rtl;
   min-height: calc(100vh - 288px);
+  &__body{
+    margin-top: 20px;
+    &--left{
+      flex: 4;
+      padding-right: 20px;
+    }
+  }
 }