diff --git a/src/assets/icons/Group 59.png b/src/assets/icons/Group 59.png new file mode 100644 index 0000000..0bb622e Binary files /dev/null and b/src/assets/icons/Group 59.png differ diff --git a/src/assets/icons/tick.png b/src/assets/icons/tick.png new file mode 100644 index 0000000..805f74a Binary files /dev/null and b/src/assets/icons/tick.png differ diff --git a/src/components/Navbar/index.scss b/src/components/Navbar/index.scss index 654a8c8..c494537 100644 --- a/src/components/Navbar/index.scss +++ b/src/components/Navbar/index.scss @@ -15,9 +15,6 @@ } } - .MuiButton-root{ - color: $gray5 !important; - } } &__container{ width: 100%; @@ -152,8 +149,8 @@ max-width: 500px; &--buttons{ li{ - padding: 6px; - border-radius: 7px; + padding: 8px 6px; + border-radius: 6px; min-width : 60px; text-align: center; font-size: calc(100vw / 32); diff --git a/src/components/StyledRating/index.tsx b/src/components/StyledRating/index.tsx index a22a0a4..4cef77a 100644 --- a/src/components/StyledRating/index.tsx +++ b/src/components/StyledRating/index.tsx @@ -3,22 +3,41 @@ import StarIcon from "@mui/icons-material/Star"; import Rating from "@mui/material/Rating"; export default function StyledRating({ rate, theme }: any) { + const mobile = window.innerWidth < 1008; return ( <> - } - emptyIcon={ - - } - /> + {mobile && ( + } + emptyIcon={ + + } + /> + )} + {!mobile && ( + } + emptyIcon={ + + } + /> + )} ); } diff --git a/src/custom.scss b/src/custom.scss index 1aab4f5..db86630 100644 --- a/src/custom.scss +++ b/src/custom.scss @@ -311,9 +311,13 @@ p { } //Menu +.bg-black{ + .MuiButton-root { + color: white !important; + } +} .MuiButton-root { font-family: numeralLight !important; - color: white !important; span { margin-left: 0px !important; margin-right: 5px; diff --git a/src/views/Course/Lesson/index.scss b/src/views/Course/Lesson/index.scss index 4dbe3e6..cd19f56 100644 --- a/src/views/Course/Lesson/index.scss +++ b/src/views/Course/Lesson/index.scss @@ -242,7 +242,7 @@ header { border-top-right-radius: 10px; border-top-left-radius: 10px; - padding: 10px 5px !important; + padding: 5px 5px !important; h4 { font-size: calc(100vw / 30); } diff --git a/src/views/Course/index.scss b/src/views/Course/index.scss index a585331..1b62202 100644 --- a/src/views/Course/index.scss +++ b/src/views/Course/index.scss @@ -34,6 +34,9 @@ background-color: $gray12; box-shadow: none; color: $gray5; + &__number i{ + color : $gray5 !important; + } } &--button { background-color: $gray12; @@ -90,6 +93,9 @@ border: 2px solid $gray7; box-shadow: 0px 0px 20px #f7ff0179; color: white; + &__number i{ + color: white !important; + } } &--button { background-color: #313131; @@ -386,7 +392,7 @@ // height: 160px; // margin-bottom: 30px; border: none; - box-shadow: 0px 0px 0px #f7ff01b3; + // box-shadow: 0px 0px 0px #f7ff01b3; &__number { i { font-size: calc(100vw / 40); @@ -460,6 +466,7 @@ } } &--description { + width: 100%; a { font-size: calc(100vw / 30); } @@ -480,18 +487,15 @@ // display : none !important; flex: 2; &--rate { - // width: 70%; + width: 100%; // height: 160px; // margin-bottom: 30px; - border: none; - box-shadow: 0px 0px 0px #f7ff01b3; + border: none !important; + background-color: transparent !important; + box-shadow: 0px 0px 0px #f7ff01b3 !important; &__number { - i { - font-size: calc(100vw / 40); - color: white; - } b { - font-size: calc(100vw / 30); + font-size: calc(100vw / 20); } span { font-size: calc(100vw / 28); @@ -500,7 +504,9 @@ } h2 { margin-top: 5px; - font-size: calc(100vw / 40); + font-size: calc(100vw / 38); + margin-bottom: 5px !important; + font-weight: 600; } } &--button { diff --git a/src/views/Home/Courses/index.scss b/src/views/Home/Courses/index.scss index e770728..6335471 100644 --- a/src/views/Home/Courses/index.scss +++ b/src/views/Home/Courses/index.scss @@ -15,7 +15,7 @@ border-bottom: 1px solid $gray12; header{ h1{ - color : $green4 !important; + color : $green !important; } a{ color: $green !important; diff --git a/src/views/Home/Header/index.scss b/src/views/Home/Header/index.scss index 5fc67bb..f818ccd 100644 --- a/src/views/Home/Header/index.scss +++ b/src/views/Home/Header/index.scss @@ -1,197 +1,132 @@ -.home-header { - position: relative; + +.home-slider { width: 100%; - margin: 0px auto; - margin-top: 10px; - &-dark{ - .carousel-indicators{ - li{ - background-color: inherit !important; - } - } + padding: 2px 0px 0px; + margin: 20px auto 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; } - &-light{ - .carousel-indicators{ - li{ - padding: 5px; - border-radius: 5px !important; - background-color: rgba(255, 255, 255, 0.281) !important; - } +} + +.rec-dot_active { + background-color: green !important; + color: white !important; + // box-shadow: 0 0 1px rgba(255, 255, 255, 1) !important; +} + +.Carousel-button-10 { + background-color: grey !important; +} +.rec-pagination { + z-index: 200; + // left: calc(50% - 20px) !important; + & button { + background-color: grey; + margin: 2px !important; + box-shadow: 0px 0px 0px rgba(100, 100, 100, 1); + &:focus { + box-shadow: 0px 0px 0px rgba(100, 100, 100, 1); } } - span { - height: 80%; - width: 8px; - background-color: white; - border-radius: 10px; +} + +.rec-slider-container { + margin: 0px !important; +} + +.rec-arrow { + position: absolute !important; + z-index: 100; + background-color: inherit !important; + box-shadow: none !important; + border: 0px !important; + color: grey !important; + &:focus { + color: grey !important; } - .item { - height: 460px; - background-size: 100% 100% !important; - background-repeat: no-repeat !important; - background-position: 0px 0px !important; - font-family: numeralLight; - color: white; - padding-right: 70%; - padding-top: 120px; - border-radius: 10px; - margin: 0px 10px; - h1 { - font-family: numeralBold; - } + &:disabled { + color: black !important; + display: none !important; } - strong { - font-weight: 300; + &:enabled { + color: grey; } - &__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) 44% - ); - border-radius: 10px; + &:hover { + color: white; } } -@media screen and (min-width: 1441px) { - .home-header { - max-width: 1350px; - font-family: numeralLight; - &__info{ - &--author{ - position: absolute; - left: 30px; - bottom: 100px; - h3{ - margin-right: 5px; - font-size: 15px; - } - i{ - margin-right: 5px; - font-size: 15px; - } - } - } - .item { - h1 { - font-family: numeralMedium; - font-size: 24px; - } - h2{ - font-size: 17px; - font-family: numeralMedium; - } - } - .carousel-indicators li { - margin-left: 20px !important; - max-width: 150px !important; - div { - margin-right: 10px; - } - strong { - font-size: 12px; - } - b { - font-size: 16px; - } - } - } +.rec-slider-container { + border-radius: 10px; } -@media screen and (min-width: 1008px) and (max-width: 1440px) { - .home-header { - max-width: 1250px; - .item { +.slider-header { + width: 100%; + justify-content: flex-end; + img{ + width: 100%; - padding-top: 360px; - h1 { - font-size: calc(100vw / 65); - } - h2 { - font-size: calc(100vw / 80); - } - } - &__info{ - &--author{ - position: absolute; - left: 30px; - bottom: 100px; - h3{ - margin-right: 5px; - font-size: calc(100vw / 100); - } - i{ - margin-right: 5px; - font-size: calc(100vw / 100); - } - } - } - .carousel-indicators li { - margin-left: 10px !important; - max-width: 200px !important; - div { - margin-right: 10px; - } - strong { - font-size: calc(100vw / 100); - } - b { - font-size: calc(100vw / 90); - } - } } -} + // &__right { + // width: 60%; + // height: 100%; + // // & img { -.carousel-indicators { - position: absolute !important; - left: 0px !important; - right: auto !important; - bottom: 40px !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: 30% !important; - justify-content: flex-start !important; + // // border-radius: 10px; + // // } + // } + // &__left { + // width: 40%; + // height: 100%; + // justify-content: center; + // align-items: flex-end; + // padding-left: 70px; - span.active { - height: 80% !important; - width: 8px !important; - background-color: yellow !important; - } + // h1 { + // font-size: calc(100vw / 55); + // color: white; + // font-family: numeralMedium; + // letter-spacing: -1px; + // } + // h2 { + // margin-top: 5px; + // font-size: calc(100vw / 78); + // color: white; + // font-family: numeralMedium; + // } + // a { + // text-decoration: none; + // color: white; + // margin-top: 10px; + // font-size: calc(100vw / 90); + // padding: 6px 10px; + // border: 1px solid white; + // border-radius: 5px; + // font-family: numeralMedium; + // &:hover { + // color: white; + // } + // } + // } } -.active span { - background-color: yellow !important; - height: 80% !important; - width: 8px !important; +@media screen and (min-width: 1441px) { + .home-slider { + max-width: 1440px; + width: 100%; + justify-content: flex-end; + } } -.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; +@media screen and (min-width : 1008px) and (max-width: 1440px){ + .home-slider{ + max-width: 1250px; } -} +} \ No newline at end of file diff --git a/src/views/Home/Header/index.tsx b/src/views/Home/Header/index.tsx index 6e48ffd..290381e 100644 --- a/src/views/Home/Header/index.tsx +++ b/src/views/Home/Header/index.tsx @@ -1,65 +1,48 @@ -import React from "react"; -import Avatar from "@mui/material/Avatar"; -import _ from "lodash"; +import React, { Component } from "react"; +import { Link } from "react-router-dom"; +import Carousel from "react-elastic-carousel"; -export default function Header(props: any) { - const { headerData, theme } = props; +import dropdown from "../../../assets/icons/dropdown.png"; + +import "./index.scss"; + +const HomeSlider = ({ headerData}: any) => { return ( -
-
-
- {headerData.map((item: any, i: any) => ( -
+ + {headerData.map((item: any, i: any) => ( +
+ {/* < + className="slider-header__right d-flex" + style={{ backgroundColor: item.backgroundColor }} + > */} + {item.title} + + {/*
-
-
-
- {item.authorImage && } -
-

{item.extraText}

- {/* نویسنده */} -
-
- {/*

{(Number(i) + 1)}

*/} -

{item.title}

-

{item.subTitle}

-
-
- ))} -
-
- {headerData.map((item1: any, i: any) => ( -
  • - -
    - {"."} - {item1.title} -
    -
    • - ))} -
    -
    -
    +

    {item.title}

    +

    {item.subTitle}

    + {item.buttonText && ( + {item.buttonText} + )} + */} + + ))} + + ); -} +}; + +export default HomeSlider; \ No newline at end of file