reza pushed some changes

src/components/GradeFilter/index.scss

@@ -3,12 +3,13 @@
   margin: 40px auto;
   color: white;
   font-family: numeralLight;
-  background-color: rgb(59, 59, 59);
+  background-color: #383838;
-  border-radius: 10px;
+  border-radius: 6px;
+  height: 36px;
   h1{
     margin: 0px;
     padding: 0px 15px;
-    color: #a3a2a2;
+    color: #6C6C6C;
     span{
       width: 2px;
       height: 20px;
@@ -22,12 +23,13 @@
       width: calc(100% / 12);
       text-align: center;
       cursor: pointer;
-      padding: 5px 0px;
+      padding: 6px 0px;
     }
   }
   &__active{
-    background-color: green;
+    background-color: #9CDF52;
-    box-shadow: 0px 0px 1px rgb(176, 240, 163);
+    box-shadow: 0px 0px 24px #9CDF52;
+    border-radius: 5px;
   }
 }
 

src/components/HomeSearchBox/index.scss

@@ -4,7 +4,7 @@
   margin: 0px auto;
   form{
     button{
-        background-color : rgb(117, 117, 117);
+        background-color : #39383D;
         margin-right: 3px;
         border-top-left-radius: 9px;
         border-bottom-left-radius: 9px;
@@ -12,7 +12,7 @@
       }
       input{
         width : 100%;
-        background-color: rgb(136, 135, 135);
+        background-color: #46454A;
         border: 0px;
         border-top-right-radius: 9px;
         border-bottom-right-radius: 9px;
@@ -20,7 +20,7 @@
         &::placeholder{
           padding-right: 0px;
           color: #ddd;
-          opacity: 0.6;
+          opacity: 0.4;
         }
       }
   }
@@ -52,14 +52,14 @@
 @media screen and (min-width: 1008px) and (max-width: 1440px){
   .home-search-box{
     max-width: 1250px;
-    padding: 80px 0px 30px;
+    padding: 80px 0px 10px;
     form{
       width : 850px;
       input{
-        font-size: calc(100vw / 60);
+        font-size: calc(100vw / 65);
         padding-right: 20px;
         &::placeholder{
-          font-size: calc(100vw / 70);
+          font-size: calc(100vw / 75);
         }
       }
       button{
@@ -74,7 +74,7 @@
 @media screen and (min-width: 641px) and (max-width: 1007px){
   .home-search-box{
     max-width: 900px;
-    padding: 50px 0px 30px;
+    padding: 50px 0px 10px;
     form{
       width : 70%;
       input{

src/components/HomeSearchBox/index.tsx

@@ -1,14 +1,13 @@
 import React from "react";
 import "./index.scss";
-import SearchRoundedIcon from "@material-ui/icons/SearchRounded";
+import search from '../../assets/icons/search.png';
-
 export default function HomeSearchBox() {
   return (
     <section className="home-search-box d-flex flex-column align-items-center">
       <form className="d-flex">
         <input type="search" placeholder="نام درس یا دوره را جستجو کنید" />
         <button type="submit">
-          <SearchRoundedIcon style={{ color: "white", fontSize: 45 }} />
+          <img src={search} />
         </button>
       </form>
       <ul className="d-flex"></ul>

src/components/Navbar/index.scss

@@ -1,10 +1,11 @@
 .nav{
   width: 100%;
-  background-color: #080416;
+  background-color: #292929;
   height: 60px;
   padding: 0px 10px;
-  position: sticky !important;
+  position: fixed !important;
   top: 0px !important;
+  left: 0px;
   z-index: 100;
   &__container{
     width: 100%;
@@ -13,6 +14,12 @@
       color: white;
     }
   }
+  &___share{
+    background-color: #46454A;
+  }
+  &___login{
+    background-color: #81C342;
+  }
 }
 
 @media screen and (min-width: 1441px){
@@ -47,12 +54,9 @@
       padding-right: 0px !important;
     }
     &___share{
-      background-color: #888;
       margin-left: 20px;
     }
-    &___login{
+
-      background-color: rgb(91, 223, 58);
-    }
   }
 }
 
@@ -67,7 +71,7 @@
           span{
             width: 2px;
             height: 15px;
-            background-color: rgb(197, 197, 197);
+            background-color: #3F3F3F;
             margin-right: 15px;
             // transform: translateY(-1px);
           }
@@ -89,11 +93,7 @@
       padding-right: 0px !important;
     }
     &___share{
-      background-color: #888;
+      margin-left: 12px;
-      margin-left: 20px;
-    }
-    &___login{
-      background-color: rgb(91, 223, 58);
     }
   }
 }
@@ -114,12 +114,8 @@
       }
     }
     &___share{
-      background-color: #888;
       margin-left: 15px;
     }
-    &___login{
-      background-color: rgb(91, 223, 58);
-    }
   }
 }
 
@@ -139,11 +135,9 @@
       }
     }
     &___share{
-      background-color: #888;
       margin-left: 10px;
     }
     &___login{
-      background-color: rgb(91, 223, 58);
     }
   }
 }

src/types/images.d.ts

@@ -1,2 +1,3 @@
 declare module '*.jpg';
-declare module '*.jpeg';
+declare module '*.jpeg';
+declare module '*.png';

src/views/Home/AppDownload/index.scss

@@ -0,0 +1,29 @@
+.app-download{
+  width: 100%;
+  margin: 0px auto;
+  padding: 30px 0px;
+  color: white;
+  h1{
+    font-family: numeralBold;
+  }
+}
+
+@media screen and (min-width: 1441px) {
+  .app-download{
+    max-width: 1250px;
+  }
+}
+
+@media screen and (min-width: 1008px) and (max-width: 1440px) {
+  .app-download{
+    max-width: 1250px;
+    h1{
+      font-size: calc(100vw / 40);
+      line-height: 2em;
+    }
+    img{
+      height: 60px;
+    }
+  }
+  
+}

src/views/Home/AppDownload/index.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import bazar from '../../../assets/images/bazar.png';
+import './index.scss';
+
+export default function AppDownload() {
+  return (
+    <section className="app-download d-flex justify-content-between align-items-end">
+      <h1>اینجا جایگاه یک <br/> متن ویژه است که باید در این <br/> قسمت قرار بگیرد.</h1>
+      <img src={bazar} />
+    </section>
+  )
+}

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

@@ -1,18 +1,20 @@
 .home-blogs-blog{
   margin: 0px 10px;
   cursor: pointer;
-  // background-repeat: no-repeat;
+  background-repeat: no-repeat !important;
-  background-size: 100%;
+  background-size: 100% 100% !important;
-  background-position: 0px 0px;
+  background-position: 0px 0px !important;
   border-radius: 10px;
+  padding-bottom: 15px;
   &__info{
     margin-right: 10px;
     p {
       margin: 0px;
-      color: rgb(173, 172, 172);
+      color: white;
     }
     h2{
       color: white;
+      font-family: numeralBold;
     }
   }
 }

src/views/Home/Blogs/index.tsx

@@ -16,7 +16,7 @@ export default function Blogs(props: any) {
       return 1;
     }
   }
-  const { number, courses } = props;
+  const { number, blogs } = props;
   return (
     <section className="home-books d-flex flex-column">
       <header className="d-flex flex-column">
@@ -29,7 +29,7 @@ export default function Blogs(props: any) {
         showArrows={true}
         pagination={false}
       >
-        {courses.map((item : Object, i : Number) => (
+        {blogs.map((item : Object, i : Number) => (
           <Blog data={item} key={i} />
         ))}
       </Carousel>

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

@@ -12,7 +12,7 @@
     margin-right: 10px;
     p {
       margin: 0px;
-      color: rgb(173, 172, 172);
+      color: #8C8C8C;
     }
     h2{
       color: white;

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

@@ -12,17 +12,17 @@
     margin-right: 10px;
     p {
       margin: 0px;
-      color: rgb(173, 172, 172);
+      color: #C9C9C9;
     }
     h2{
       color: white;
     }
     li{
-      background-color: rgb(85, 85, 85);
+      background-color: #4F4F4F;
       border-radius: 15px;
       padding: 3px 6px;
       margin-left: 3px;
-      color: white;
+      color: #C4C4C4;
       font-family: numeralLight;
       margin-top: 5px;
     }

src/views/Home/Courses/index.scss

@@ -1,8 +1,8 @@
 .home-courses {
   width: 100%;
   margin: 0px auto;
-  border-top: 1px solid rgb(139, 139, 139);
+  border-top: 1px solid #424242;
-  border-bottom: 1px solid rgb(141, 141, 141);
+  border-bottom: 1px solid #424242;
   position: relative;
   margin-top: 30px;
   padding: 20px 10px 50px;
@@ -24,9 +24,12 @@
     bottom: 0px;
     left: 50%;
     transform: translate(-50%, +50%);
-    background-color: #0f0f0f;
+    background-color: #292929;
     padding-right: 5px;
-    color: green;
+    color: #9CDF52;
+    &:hover{
+      color: #9CDF52;
+    }
   }
 }
 

src/views/Home/Courses/index.tsx

@@ -39,7 +39,7 @@ export default function Courses(props: any) {
         className="home-courses__more d-flex align-items-center"
         to="/courses"
       >
-         مشاهده بیشتر <ExpandMoreRoundedIcon style={{ fontSize: 25, color : 'green' }} />
+         مشاهده بیشتر <ExpandMoreRoundedIcon style={{ fontSize: 25, color : '#9CDF52' }} />
       </Link>
     </section>
   );

src/views/Home/Footer/index.scss

@@ -0,0 +1,82 @@
+.footer{
+  width: 100%;
+  font-family: numeralLight;
+  background-color: #1a1a1a;
+  &__container{
+    width: 100%;
+    margin : 0px auto;
+    p{
+      margin: 0px;
+      color: #A2A2A2;
+    }
+    a{
+      color: #A2A2A2;
+    }
+  }
+}
+
+@media screen and (min-width: 1441px){
+  .footer{
+    &__container{
+      max-width: 1250px;
+    }
+    li{
+      font-size: 14px;
+    }
+    p{
+      font-size: 14px;
+    }
+    ul{
+      li{
+        padding: 6px 0px 6px 60px;
+      }
+    }
+  }
+}
+
+
+@media screen and (min-width: 1008px) and (max-width: 1440px){
+  .footer{
+    &__container{
+      max-width: 1250px;
+    }
+    li{
+      font-size: calc(100vw / 100);
+    }
+    p{
+      font-size: calc(100vw / 100);
+    }
+    ul{
+      li{
+        padding: 6px 0px 6px 60px;
+      }
+    }
+  }
+}
+
+
+@media screen and (min-width: 641px) and (max-width: 1007px){
+  .footer{
+    &__container{
+      max-width: 900px;
+    }
+    li{
+      font-size: calc(100vw / 80);
+    }
+    p{
+      font-size: calc(100vw / 80);
+    }
+    ul{
+      li{
+        padding: 6px 0px 6px 30px;
+      }
+    }
+  }
+}
+
+
+@media screen and (max-width: 640px){
+  .footer{
+    display : none !important;
+  }
+}

src/views/Home/Footer/index.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import './index.scss';
+
+export default function Footer(props: any) {
+  const { links } = props;
+  return (
+    <footer className="footer d-flex">
+      <div className="footer__container d-flex justify-content-between align-items-center">
+        <ul className="d-flex">
+          {links.map((item: any, i: any) => (
+            <li key={i}>
+              <Link to={item.link}>{item.name}</Link>
+            </li>
+          ))}
+        </ul>
+        <p>تمامی حقوق این سایت متلعق به دانوین می‌باشد 1400</p>
+      </div>
+    </footer>
+  );
+}
+
+Footer.defaultProps = {
+  links: [
+    { name: "تعرفه‌ها", link: "/" },
+    { name: "سوالات متداول", link: "/" },
+    { name: "درباره ما", link: "/" },
+    { name: "فروشگاه", link: "/" },
+    { name: "اپلیکیشن", link: "/" },
+    { name: "تماس با ما", link: "/" },
+  ],
+};

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

@@ -0,0 +1,72 @@
+.home-header-item{
+  width: 100%;
+  color: white;
+  font-family: numeralLight;
+  margin: 0px 15px;
+  border-radius: 10px;
+}
+
+@media screen and (min-width: 1441px){
+  .home-header-item{
+    max-width: 1250px;
+    height: 400px;
+    div{
+      width: 29%;
+      h1{
+        font-family: numeralMedium;
+        font-size: 24px;
+      }
+      h2{
+        font-size: 20px;
+      }
+      p{
+        margin-top: 20px;
+        font-size: 16px;
+      }
+    }
+    
+  }
+}
+
+@media screen and (min-width: 1008px) and (max-width: 1440px) { 
+  .home-header-item{
+    max-width: 1250px;
+    height: 400px;
+    div{
+      width: 31%;
+      h1{
+        font-family: numeralBold;
+        font-size: calc(100vw / 60);
+      }
+      h2{
+        font-size: calc(100vw / 70);
+        font-family: numeralMedium;
+      }
+      p{
+        margin-top: 20px;
+        font-size:calc(100vw / 90);
+      }
+    }
+  }
+}
+
+@media screen and (min-width: 640px) and (max-width: 1007px) { 
+  .home-header-item{
+    max-width: 900px;
+    height: 235px;
+    div{
+      width: 31%;
+      h1{
+        font-family: numeralBold;
+        font-size: calc(100vw / 50);
+      }
+      h2{
+        font-size: calc(100vw / 60);
+      }
+      p{
+        margin-top: 20px;
+        font-size: calc(100vw / 70);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,25 @@
+import React from "react";
+import './index.scss';
+
+export default function Item(props: any) {
+  const { data } = props;
+  const style = {
+    background: `url(${data.imageUrl})`,
+    backgroundSize : '100% 100%',
+    backgroundRepeat : 'no-repeat',
+    backgroundAttachment : 'fixed',
+    backgroundPosition: '0px 0px',
+  };
+  return (
+    <div
+      className="home-header-item d-flex justify-content-end align-items-center"
+      style={style}
+    >
+      <div>
+        <h1>{data.name}</h1>
+        <h2>{data.subTitle}</h2>
+        <p>{data.text}</p>
+      </div>
+    </div>
+  );
+}

src/views/Home/Header/index.scss

@@ -0,0 +1,18 @@
+.home-header{
+  position: relative;
+  width: 100%;
+  margin: 0px auto;
+  margin-top: 30px;
+}
+
+@media screen and (min-width: 1441px){
+  .home-header{
+    max-width: 1250px;
+  }
+}
+
+@media screen and (min-width: 1008px) and (max-width: 1440px) { 
+  .home-header{
+    max-width: 1250px;
+  }
+}

src/views/Home/Header/index.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import Carousel from 'react-elastic-carousel';
+import './index.scss';
+import Item from './Item/index';
+
+export default function Header(props : any) {
+  const {headerData} = props;
+  return (
+    <header className="home-header">
+      <Carousel
+        itemsToShow={1}
+        isRTL={true}
+        enableTilt={false}
+        showArrows={true}
+        pagination={false}
+      >
+        {headerData.map((item : Object, i : Number) => (
+          <Item data={item} key={i} />
+        ))}
+      </Carousel>
+    </header>
+  )
+}
+

src/views/Home/index.scss

@@ -1,6 +1,21 @@
-.home{
+.home {
-  background-color: #0f0f0f;
+  background: hsla(0, 0%, 31%, 1);
+  background: linear-gradient(
+    90deg,
+    hsla(0, 0%, 31%, 1) 0%,
+    hsla(0, 0%, 0%, 1) 100%
+  );
+  background: -moz-linear-gradient(
+    90deg,
+    hsla(0, 0%, 31%, 1) 0%,
+    hsla(0, 0%, 0%, 1) 100%
+  );
+  background: -webkit-linear-gradient(
+    90deg,
+    hsla(0, 0%, 31%, 1) 0%,
+    hsla(0, 0%, 0%, 1) 100%
+  );
   width: 100%;
   overflow-x: hidden;
-  padding: 0px 10px;
+  padding-top: 60px;
-}
+}

src/views/Home/index.tsx

@@ -6,22 +6,32 @@ import Courses from "./Courses/index";
 import GradeFilter from "../../components/GradeFilter/index";
 import Books from './Books/index';
 import Blogs from "./Blogs/index";
+import Footer from "./Footer/index";
+import Header from "./Header/index";
+import AppDownload from "./AppDownload/index";
 
 import olum7 from  "../../assets/images/olum7.jpg";
 import olum8 from "../../assets/images/olum8.jpg";
 import olum9 from "../../assets/images/olum9.jpg";
+import header from "../../assets/images/header.png";
+import blog1 from "../../assets/images/blog1.png";
+import blog2 from "../../assets/images/blog2.png";
+import blog3 from "../../assets/images/blog3.png";
 
 export default function Home(props : any) {
   const [grade, setGrade] = useState(null);
-  const {courses, grades} = props;
+  const {courses, grades, headerData, blogs} = props;
   return (
     <div className="home d-flex flex-column">
       <Navbar />
+      <Header headerData={headerData} />
+      <HomeSearchBox />
       <Courses courses={courses} />
       <GradeFilter grades={grades} grade={grade} setGrade={setGrade} />
       <Books courses={courses} />
-      <HomeSearchBox />
+      <Blogs blogs={blogs} />
-      <Blogs courses={courses} />
+      <AppDownload />
+      <Footer />
     </div>
   );
 }
@@ -84,5 +94,54 @@ Home.defaultProps = {
     'دهم',
     'یازدهم',
     'دوازدهم',
+  ],
+  headerData : [
+    {
+      id : 0,
+      name : "آیا هیجان زندگی همچنان باقی است؟",
+      subTitle : "سوالاتی که پاسخی برای آنها نیست!",
+      text: 'آیا ذهن نویسنده به این سمت رفته که شما این متن را بخوانید؟ نویسنده درست حدس زده شما در حال خواندن هستید. لطفا خواندن را تمام کنید ',
+      author : 'جورج جونیور',
+      imageUrl : header,
+    },
+    {
+      id : 1,
+      name : "آیا هیجان زندگی همچنان باقی است؟",
+      subTitle : "سوالاتی که پاسخی برای آنها نیست!",
+      text: 'آیا ذهن نویسنده به این سمت رفته که شما این متن را بخوانید؟ نویسنده درست حدس زده شما در حال خواندن هستید. لطفا خواندن را تمام کنید ',
+      author : 'جورج جونیور',
+      imageUrl : header,
+    },
+  ],
+  blogs : [
+    {
+      id: 0,
+      name: "فیزیک کوانتوم و موارد مشابه",
+      text: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.",
+      imageUrl: blog1,
+      tags: ["دوره جدید", "تخفیف‌های هفتگی", "پایه هفتم"],
+    },
+    {
+      id: 1,
+      name: "فیزیک کوانتوم و موارد مشابه",
+      text: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.",
+      imageUrl: blog2,
+      tags: ["دوره جدید", "تخفیف‌های هفتگی", "پایه هفتم"],
+    },
+    {
+      id: 2,
+      name: "فیزیک کوانتوم و موارد مشابه",
+      text: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.",
+      imageUrl: blog3,
+      tags: ["دوره جدید", "تخفیف‌های هفتگی", "پایه هفتم"],
+    },
+    {
+      id: 3,
+      name: "فیزیک کوانتوم و موارد مشابه",
+      text: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.",
+      imageUrl: blog1,
+      tags: ["دوره جدید", "تخفیف‌های هفتگی", "پایه هفتم"],
+    },
   ]
 };
+