reza fixed some bug

src/components/GradeFilter/index.scss

@@ -16,7 +16,7 @@
     span{
       width: 2px;
       height: 20px;
-      background-color: white;
+      background-color: rgb(143, 142, 142);
       margin-right: 15px;
     }
   }
@@ -38,7 +38,7 @@
 
 @media screen and (min-width: 1441px){
   .grade-filter{
-    max-width: 1250px;
+    max-width: 1350px;
     h1{
       font-size: calc(100vw / 120);
     }
@@ -171,7 +171,7 @@
       padding: 10px 20px;
       border-radius: 10px;
       li{
-        width: calc(100% / 4.5) !important;
+        width: calc(100% / 4.45) !important;
         margin: 8px 5px;
         font-size: calc(100vw / 28);
         padding: 5px 0px;

src/components/HomeSearchBox/index.scss

@@ -32,13 +32,13 @@
 @media screen and (min-width: 1441px) {
   .home-search-box {
     width: 100%;
-    max-width: 1250px;
-    padding: 80px 0px 30px;
+    max-width: 1350px;
+    padding: 40px 0px 10px;
     &__voice {
       display: none;
     }
     form {
-      width: 850px;
+      width: 1000px;
       input {
         font-size: 20px;
         padding-right: 20px;
@@ -47,12 +47,12 @@
         }
       }
       button {
-        width: 100px;
-        height: 80px;
+        width: 80px;
+        height: 60px;
       }
     }
     ul {
-      width: 850px;
+      width: 1000px;
       padding: 10px 0px !important;
       li {
         color: #a2b4cb;
@@ -147,8 +147,8 @@
     &__searchIcon {
       position: absolute;
       left: 62px;
-      top: 6px;
-      width: 33px;
+      top: 9px;
+      width: 27px;
     }
     form {
       width: 100%;

src/components/Navbar/index.scss

@@ -25,7 +25,7 @@
 @media screen and (min-width: 1441px){
   .nav{
     &__container{
-      max-width: 1250px;
+      max-width: 1350px;
       &--links{
         li{
           padding: 0px 20px;
@@ -121,7 +121,7 @@
 
 @media screen and (max-width: 640px){
   .nav{
-    background-color: #010101;
+    background-color: hsla(0, 0%, 31%, 1);
     &__container{
       max-width: 500px;
       &--buttons{
@@ -136,7 +136,7 @@
       }
     }
     &___share{
-      margin-left: 10px;
+      display : none;
     }
     &___login{
     }

src/components/Vocal/Vocal.tsx

@@ -26,7 +26,7 @@ const Vocal = (props: any) => {
         SpeechRecognition.stopListening();
         setPause(true);
       }
-    }, 5000);
+    }, 7000);
   };
 
   useEffect(() => {

src/views/Home/AppDownload/index.scss

@@ -44,7 +44,11 @@
 
 @media screen and (min-width: 1441px) {
   .app-download{
-    max-width: 1250px;
+    max-width: 1350px;
+    h1{
+      font-size: 40px;
+      line-height: 2em;
+    }
     &__figure{
       h2{
         font-size: 16px;
@@ -52,6 +56,37 @@
       p{
         font-size: 13px;
       }
+      &--screen{
+        width: 300px;
+        height: 255px;
+        border-top: 12px solid black;
+        border-right: 12px solid black;
+        border-left: 12px solid black;
+        border-top-left-radius: 30px;
+        border-top-right-radius: 30px;
+        background-color: #E3E3E3;
+      }
+      &--details{
+        width: 440px;
+        padding: 10px;
+        background-color: black;
+        border-radius: 10px;
+        h2,p{
+          margin: 0px;
+          margin-right: 5px;
+        }
+        h2{
+          color: white;
+          font-family: numeralBold;
+          margin-bottom: 5px;
+          font-size: 17px;
+        }
+        p{
+          color: #FFD70F;
+          font-family: numeralLight;
+          font-size: 13px;
+        }
+      }
     }
   }
 }

src/views/Home/AppDownload/index.tsx

@@ -5,7 +5,7 @@ import "./index.scss";
 
 export default function AppDownload() {
   return (
-    <section className="app-download d-flex justify-content-between align-items-end">
+    <section className="app-download d-flex justify-content-between align-items-center">
       <h1>
         اینجا جایگاه یک <br /> متن ویژه است که باید در این <br /> قسمت قرار
         بگیرد.

src/views/Home/Blogs/index.scss

@@ -2,8 +2,8 @@
   width: 100%;
   margin: 0px auto;
   position: relative;
-  margin-top: 30px;
-  padding: 20px 10px 50px;
+  margin-top: 10px;
+  padding: 0px 10px 50px;
   font-family: numeralLight;
   &__list{
     width: 100%;
@@ -25,7 +25,7 @@
 
 @media screen and (min-width: 1441px) {
   .home-blogs {
-    max-width: 1250px;
+    max-width: 1350px;
     header{
       h1{
         font-size: 20px;

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

@@ -9,6 +9,8 @@
     
   }
   &__info{
+    border-bottom: 1px solid #424242;
+    padding-bottom: 15px;
     margin-right: 10px;
     p {
       margin: 0px;

src/views/Home/Books/index.scss

@@ -2,7 +2,7 @@
   width: 100%;
   margin: 0px auto;
   position: relative;
-  padding: 10px 10px 50px;
+  padding: 10px 10px 30px;
   font-family: numeralLight;
   header{
     margin-bottom: 20px;
@@ -46,7 +46,7 @@
 
 @media screen and (min-width: 1008px) and (max-width: 1440px) {
   .home-books {
-    max-width: 1250px;
+    max-width: 1350px;
     header{
       h1{
         font-size: calc(100vw / 60);

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

@@ -41,7 +41,7 @@
       font-size: 14px;
     }
     li{
-      font-size: 13px;
+      font-size: 11px;
     }
   }
 }

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

@@ -8,7 +8,7 @@ export default function Course(props: any) {
     <article className="home-courses-course d-flex flex-column">
       <img src={data.imageUrl} alt={data.name} />
       <footer className="d-flex">
-        <Avatar src={data.user} style={{width : 50, height : 50}} />
+        <Avatar src={data.user} style={{width : 40, height : 40}} />
         <div className="home-courses-course__info d-flex flex-column">
           <h2>{data.name}</h2>
           {

src/views/Home/Courses/index.scss

@@ -17,7 +17,9 @@
     span{
       color: #aaa;
     }
-
+    a{
+      display: none;
+    }
   }
   &__more{
     position: absolute;
@@ -35,7 +37,7 @@
 
 @media screen and (min-width: 1441px) {
   .home-courses {
-    max-width: 1250px;
+    max-width: 1350px;
     header{
       h1{
         font-size: 20px;
@@ -96,6 +98,11 @@
       span{
         font-size: calc(100vw / 34);
       }
+      a{
+        display: flex;
+        color: #9CDF52;
+        font-size: calc(100vw / 28);
+      }
     }
     &__more{
       display : none !important;

src/views/Home/Courses/index.tsx

@@ -7,25 +7,29 @@ import "./index.scss";
 
 export default function Courses(props: any) {
   const slideNumberHandler = () => {
-    if(window.innerWidth >= 1440){
+    if (window.innerWidth >= 1440) {
       return 4;
-    }else if(window.innerWidth >= 1008 && window.innerWidth < 1440){
+    } else if (window.innerWidth >= 1008 && window.innerWidth < 1440) {
       return 4;
-    }else if(window.innerWidth > 640 && window.innerWidth < 1008 ){
+    } else if (window.innerWidth > 640 && window.innerWidth < 1008) {
       return 3;
-    }else{
+    } else {
       return 2;
     }
-  }
+  };
   const { number, courses } = props;
   return (
     <section className="home-courses d-flex flex-column">
-      <header className="d-flex flex-column">
+      <header className="d-flex justify-content-between">
+        <div className="d-flex flex-column">
           <h1>جدیدترین دوره‌ها</h1>
           <span>در این قسمت شاید یک متن جهت زیباسازی قرار بگیرد.</span>
+        </div>
+        <Link to="/">
+          بیشتر
+        </Link>
       </header>
-      {
-        window.innerWidth > 1007 ?
+      {window.innerWidth > 1007 ? (
         <Carousel
           itemsToShow={slideNumberHandler()}
           isRTL={true}
@@ -33,22 +37,24 @@ export default function Courses(props: any) {
           showArrows={true}
           pagination={false}
         >
-        {courses.map((item : Object, i : Number) => (
+          {courses.map((item: Object, i: Number) => (
             <Course data={item} key={i} />
           ))}
-      </Carousel> : 
+        </Carousel>
+      ) : (
         <div className="home-courses__list d-flex">
-        {courses.map((item : Object, i : Number) => (
+          {courses.map((item: Object, i: Number) => (
             <Course data={item} key={i} />
           ))}
         </div>
-      }
+      )}
 
       <Link
         className="home-courses__more d-flex align-items-center"
         to="/courses"
       >
-         مشاهده بیشتر <ExpandMoreRoundedIcon style={{ fontSize: 25, color : '#9CDF52' }} />
+        مشاهده بیشتر{" "}
+        <ExpandMoreRoundedIcon style={{ fontSize: 25, color: "#9CDF52" }} />
       </Link>
     </section>
   );

src/views/Home/Footer/index.scss

@@ -18,7 +18,7 @@
 @media screen and (min-width: 1441px){
   .footer{
     &__container{
-      max-width: 1250px;
+      max-width: 1350px;
     }
     li{
       font-size: 14px;

src/views/Home/Header/index.scss

@@ -44,7 +44,7 @@
 
 @media screen and (min-width: 1441px) {
   .home-header {
-    max-width: 1250px;
+    max-width: 1350px;
     .item {
       h1 {
         font-size: 30px;

src/views/Home/index.scss

@@ -31,5 +31,21 @@
   .home{
     padding: 60px 10px 0px;
     position: relative;
+    background: hsla(0, 0%, 31%, 1);
+  background: linear-gradient(
+    90deg,
+    hsla(0, 0%, 0%, 1) 0%,
+    hsla(0, 0%, 31%, 1) 100%
+  );
+  background: -moz-linear-gradient(
+    90deg,
+    hsla(0, 0%, 0%, 1) 0%,
+    hsla(0, 0%, 31%, 1) 100%
+  );
+  background: -webkit-linear-gradient(
+    90deg,
+    hsla(0, 0%, 0%, 1) 0%,
+    hsla(0, 0%, 31%, 1) 100%
+  );
   }
 }