reza added some changes

public/index.html

@@ -15,6 +15,9 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

src/components/GradeFilter/index.tsx

@@ -10,7 +10,7 @@ export default function GradeFilter(props: any) {
       </h1>
       <ul className="d-flex align-items-center">
         {grades.map((item: String, i: any) => (
-          <li key={i} onClick={(e) => setGrade(item)} className={grade === item ? "grade-filter__active" : ""}>
+          <li key={i} onClick={(e) => grade !== item ? setGrade(item) : setGrade(null)} className={grade === item ? "grade-filter__active" : ""}>
             {item}
           </li>
         ))}

src/components/HomeSearchBox/index.scss

@@ -22,6 +22,9 @@
           color: #ddd;
           opacity: 0.4;
         }
+        &:focus{
+          outline: 2px solid #9CDF52 !important;
+        }
       }
   }
 }
@@ -46,13 +49,22 @@
         
       }
     }
+    ul{
+      width : 850px;
+      padding: 10px 0px !important;
+      li{
+        color: #A2B4CB;
+        margin-left: 25px;
+        font-size: 14px;
+      }
+    }
   }
 }
 
 @media screen and (min-width: 1008px) and (max-width: 1440px){
   .home-search-box{
     max-width: 1250px;
-    padding: 80px 0px 10px;
+    padding: 40px 0px 10px;
     form{
       width : 850px;
       input{
@@ -63,11 +75,20 @@
         }
       }
       button{
-        width : 100px;
+        width : 80px;
-        height: 80px;
+        height: 60px;
         
       }
     }
+    ul{
+      width : 850px;
+      padding: 10px 0px !important;
+      li{
+        color: #A2B4CB;
+        margin-left: 25px;
+        font-size: calc(100vw / 90);
+      }
+    }
   }
 }
 
@@ -90,6 +111,15 @@
         
       }
     }
+    ul{
+      width : 70%;
+      padding: 10px 0px !important;
+      li{
+        color: #A2B4CB;
+        margin-left: 25px;
+        font-size: calc(100vw / 80);
+      }
+    }
   }
 }
 
@@ -104,7 +134,7 @@
         font-size: calc(100vw / 25);
         padding-right: 20px;
         &::placeholder{
-          font-size: calc(100vw / 25);
+          font-size: calc(100vw / 30);
         }
       }
       button{
@@ -112,6 +142,15 @@
         height: 50px;
       }
     }
+    ul{
+      width : 100%;
+      padding: 10px 10px !important;
+      li{
+        color: #A2B4CB;
+        margin-left: 25px;
+        font-size: calc(100vw / 45);
+      }
+    }
   }
 }
 

src/components/HomeSearchBox/index.tsx

@@ -1,7 +1,8 @@
 import React from "react";
 import "./index.scss";
 import search from '../../assets/icons/search.png';
-export default function HomeSearchBox() {
+export default function HomeSearchBox(props : any) {
+  const {lastItems} = props;
   return (
     <section className="home-search-box d-flex flex-column align-items-center">
       <form className="d-flex">
@@ -10,7 +11,21 @@ export default function HomeSearchBox() {
           <img src={search} />
         </button>
       </form>
-      <ul className="d-flex"></ul>
+      <ul className="d-flex">
+        {
+          lastItems.map((item : any, i : any) => (
+            <li key={i} style={{color : i === 0 ? '#9CDF52' : ''}}>{item}</li>
+          ))
+        }
+      </ul>
     </section>
   );
 }
+
+HomeSearchBox.defaultProps = {
+  lastItems : [
+    'دوره علوم تجربی',
+    'دوره علوم انسانی',
+    'تمامی دوره‌ها'
+  ]
+}

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

@@ -1,4 +1,4 @@
-.home-blogs-blog{
+.home-blogs-blog {
   margin: 0px 10px;
   cursor: pointer;
   background-repeat: no-repeat !important;
@@ -6,68 +6,84 @@
   background-position: 0px 0px !important;
   border-radius: 10px;
   padding-bottom: 15px;
-  &__info{
+  position: relative;
+  &__cover {
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(
+      0deg,
+      hsla(0, 0%, 0%, 1) 0%,
+      hsla(250, 14%, 61%, 0) 64%
+    );
+    border-radius: 10px;
+  }
+  &__info {
     margin-right: 10px;
+    z-index: 100;
     p {
       margin: 0px;
       color: white;
     }
-    h2{
+    h2 {
       color: white;
       font-family: numeralBold;
     }
+    
   }
 }
 
-@media screen and (min-width : 1441px){
+@media screen and (min-width: 1441px) {
-  .home-blogs-blog{
+  .home-blogs-blog {
     height: 250px;
     width: 100%;
-    h2{
+    h2 {
       font-size: 20px;
     }
-    p{
+    p {
       font-size: 14px;
     }
   }
 }
 
-@media screen and (min-width : 1008px) and (max-width : 1440px){
+@media screen and (min-width: 1008px) and (max-width: 1440px) {
-  .home-blogs-blog{
+  .home-blogs-blog {
     height: 220px;
     width: 100%;
-    h2{
+    h2 {
       font-size: calc(100vw / 80);
     }
-    p{
+    p {
       font-size: calc(100vw / 130);
     }
   }
 }
 
-@media screen and (min-width : 641px) and (max-width : 1007px){
+@media screen and (min-width: 641px) and (max-width: 1007px) {
-  .home-blogs-blog{
+  .home-blogs-blog {
     height: 220px;
     width: 100%;
-    h2{
+    h2 {
       font-size: calc(100vw / 40);
     }
-    p{
+    p {
       font-size: calc(100vw / 60);
     }
   }
 }
 
-@media screen and (max-width : 640px){
+@media screen and (max-width: 640px) {
-  .home-blogs-blog{
+  .home-blogs-blog {
-    img{
+    img {
       height: 150px;
     }
-    h2{
+    h2 {
       font-size: calc(100vw / 25);
     }
-    p{
+    p {
       font-size: calc(100vw / 36);
     }
   }
-}
+}

src/views/Home/Blogs/Blog/index.tsx

@@ -10,6 +10,7 @@ export default function Blog(props: any) {
       style={{ background: `url(${data.imageUrl})` }}
     >
       {/* <img src={data.imageUrl} alt={data.name} /> */}
+      <div className="home-blogs-blog__cover"></div>
       <footer className="d-flex">
         <div className="home-blogs-blog__info d-flex flex-column">
           <h2>{data.name}</h2>

src/views/Home/Blogs/index.tsx

@@ -26,7 +26,7 @@ export default function Blogs(props: any) {
         itemsToShow={slideNumberHandler()}
         isRTL={true}
         enableTilt={false}
-        showArrows={true}
+        showArrows={false}
         pagination={false}
       >
         {blogs.map((item : Object, i : Number) => (

src/views/Home/Books/Book/index.scss

@@ -50,6 +50,7 @@
   .home-books-book{
     img{
       height: 200px;
+      width: 95%;
     }
     h2{
       font-size: calc(100vw / 80);

src/views/Home/Courses/Course/index.tsx

@@ -13,11 +13,16 @@ export default function Course(props: any) {
           <h2>{data.name}</h2>
           <p>{data.text.slice(0, 100)}</p>
           <ul className="d-flex flex-wrap">
-            {
+            {data.tags.length <= 2
-              data.tags.map((item : String , i : any) => (
+              ? data.tags.map((item: String, i: any) => <li key={i}>{item}</li>)
-                <li key={i}>{item}</li>
+              : null}
-              ))
+            {data.tags.length > 2 ? (
-            }
+              <>
+                <li key={1}>{data.tags[0]}</li>
+                <li key={2}>{data.tags[1]}</li>
+                <li key={3}>+</li>
+              </>
+            ) : null}
           </ul>
         </div>
       </footer>

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

@@ -2,7 +2,6 @@
   width: 100%;
   color: white;
   font-family: numeralLight;
-  margin: 0px 15px;
   border-radius: 10px;
 }
 

src/views/Home/Header/index.scss

@@ -1,18 +1,175 @@
-.home-header{
+.home-header {
   position: relative;
   width: 100%;
   margin: 0px auto;
   margin-top: 30px;
+  span {
+    height: 80%;
+    width: 8px;
+    background-color: white;
+    border-radius: 10px;
+  }
+  .item {
+    height: 420px;
+    background-size: 100% 100% !important;
+    background-repeat: no-repeat !important;
+    background-position: 0px 0px !important;
+    font-family: numeralLight;
+    color: white;
+    padding-right: 60%;
+    padding-top: 10%;
+    border-radius: 10px;
+    margin: 0px 10px;
+    h1 {
+      font-family: numeralBold;
+    }
+  }
+  strong {
+    font-weight: 300;
+  }
+  &__cover {
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(
+      0deg,
+      hsla(0, 0%, 0%, 1) 0%,
+      hsla(250, 14%, 61%, 0) 64%
+    );
+    border-radius: 10px;
+  }
 }
 
-@media screen and (min-width: 1441px){
+@media screen and (min-width: 1441px) {
-  .home-header{
+  .home-header {
     max-width: 1250px;
+    .item {
+      h1 {
+        font-size: 30px;
+      }
+      h2{
+        font-size: 20px;
+      }
+    }
+    .carousel-indicators li {
+      margin-left: 20px !important;
+      max-width: 200px !important;
+      div {
+        margin-right: 10px;
+      }
+      strong {
+        font-size: 14px;
+      }
+      b {
+        font-size: 20px;
+      }
+    }
   }
 }
 
-@media screen and (min-width: 1008px) and (max-width: 1440px) { 
+@media screen and (min-width: 1008px) and (max-width: 1440px) {
-  .home-header{
+  .home-header {
     max-width: 1250px;
+    .item {
+      h1 {
+        font-size: calc(100vw / 50);
+      }
+      h2 {
+        font-size: calc(100vw / 60);
+      }
+    }
+    .carousel-indicators li {
+      margin-left: 20px !important;
+      max-width: 200px !important;
+      div {
+        margin-right: 10px;
+      }
+      strong {
+        font-size: calc(100vw / 90);
+      }
+      b {
+        font-size: calc(100vw / 60);
+      }
+    }
   }
-}
+}
+
+@media screen and (min-width: 641px) and (max-width: 1007px) {
+  .home-header {
+    max-width: 900px;
+    .item {
+      padding-top: 15%;
+      h1 {
+        font-size: calc(100vw / 50);
+      }
+      h2 {
+        font-size: calc(100vw / 60);
+        margin-top: 10px;
+      }
+    }
+    .carousel-indicators li {
+      margin-left: 20px !important;
+      max-width: 200px !important;
+      div {
+        margin-right: 10px;
+      }
+      strong {
+        font-size: calc(100vw / 70);
+      }
+      b {
+        font-size: calc(100vw / 50);
+      }
+    }
+  }
+}
+
+.carousel-indicators {
+  position: absolute !important;
+  left: 0px !important;
+  right: auto !important;
+  bottom: 10px !important;
+  z-index: auto !important;
+  display: auto !important;
+  justify-content: auto !important;
+  padding: auto !important;
+  margin: 0px !important;
+  list-style: auto !important;
+  color: white;
+  width: 40% !important;
+  justify-content: flex-start !important;
+
+  span.active {
+    height: 80% !important;
+    width: 8px !important;
+    background-color: yellow !important;
+  }
+}
+
+.active span {
+  background-color: yellow !important;
+  height: 80% !important;
+  width: 8px !important;
+}
+
+.carousel-indicators li {
+  display: auto !important;
+  width: auto !important;
+  height: auto !important;
+  margin: 0px !important;
+  text-indent: 0px !important;
+  cursor: pointer !important;
+  background-color: inherit !important;
+  border: 0px !important;
+  border-radius: 0px !important;
+  text-align: right !important;
+  justify-content: flex-start !important;
+  font-family: numeralLight !important;
+  span {
+    height: 80%;
+    width: 8px;
+    background-color: white;
+    border-radius: 10px;
+  }
+}

src/views/Home/Header/index.tsx

@@ -1,24 +1,57 @@
-import React from 'react'
+import React from "react";
-import Carousel from 'react-elastic-carousel';
+import Carousel from "react-elastic-carousel";
-import './index.scss';
+import "./index.scss";
-import Item from './Item/index';
+import Item from "./Item/index";
 
-export default function Header(props : any) {
+export default function Header(props: any) {
-  const {headerData} = props;
+  const { headerData } = props;
   return (
     <header className="home-header">
-      <Carousel
+      <div id="myCarousel" className="carousel slide" data-ride="carousel">
-        itemsToShow={1}
+        {/* <ol className="carousel-indicators">
-        isRTL={true}
+          {headerData.map((item: any, i: any) => (
-        enableTilt={false}
+            <li
-        showArrows={true}
+              data-target="#myCarousel"
-        pagination={false}
+              data-slide-to={item.id}
-      >
+              className={item.id === 0 ? "active" : ""}
-        {headerData.map((item : Object, i : Number) => (
+              key={i}
-          <Item data={item} key={i} />
+            ></li>
-        ))}
+          ))}
-      </Carousel>
+        </ol> */}
+
+        <div className="carousel-inner">
+          {headerData.map((item: any, i: Number) => (
+            <div
+              className={item.id === 0 ? "item active" : "item"}
+              style={{
+                background: `url(${item.imageUrl})`,
+              }}
+            >
+              <div className="home-header__cover"></div>
+              <div className="home-header__info d-flex flex-column">
+                <h1>{item.name}</h1>
+                <h2>{item.subTitle}</h2>
+              </div>
+            </div>
+          ))}
+        </div>
+        <div className="carousel-indicators">
+          {headerData.map((item1: any, i: any) => (
+            <li
+              className="d-flex align-items-center"
+              data-target="#myCarousel"
+              data-slide-to={item1.id}
+              key={i}
+            >
+              <span className={i === 0 ? "active" : ""}></span>
+              <div className="d-flex flex-column">
+                <b>0{i + 1}</b>
+                <strong>{item1.name}</strong>
+              </div>
+            </li>
+          ))}
+        </div>
+      </div>
     </header>
-  )
+  );
 }
-