reza added link to home page

src/components/GradeFilter/index.scss

@@ -134,7 +134,7 @@
     h1{
       font-size: calc(100vw / 30);
       background-color: #9CDF52;
-      box-shadow: 0px 0px 20px #9CDF52;
+      box-shadow: 0px 0px 2px #9CDF52;
       border-top-right-radius: 8px;
       border-bottom-right-radius: 8px;
       padding: 12px 15px;

src/components/Navbar/index.tsx

@@ -7,22 +7,26 @@ export default function Navbar() {
   return (
     <nav className="nav align-items-center justify-content-center">
       <div className="nav__container d-flex align-items-center justify-content-between">
-        {window.innerWidth > 1008 ? (
-          <ul className="nav__container--links d-flex align-items-center">
+        <ul className="nav__container--links desktop align-items-center">
           <li className="nav___logo d-flex align-items-center">
             <Link to="/">لوگو</Link>
             <span></span>
           </li>
-            <li><Link to="/lessons">دروس</Link></li>
-            <li><Link to="/courses">دوره‌ها</Link></li>
+          <li>
+            <Link to="/courses/1">دروس</Link>
+          </li>
+          <li>
+            <Link to="/video-tube">دوره‌ها</Link>
+          </li>
         </ul>
-        ) : (
-          <MenuRoundedIcon style={{ color: "white", fontSize : 40 }} />
-        )}
-
+        <MenuRoundedIcon className="mobile" style={{ color: "white", fontSize: 40 }} />
         <ul className="nav__container--buttons d-flex align-items-center">
-          <li className="nav___share"><Link to="/share">خرید اشتراک</Link></li>
-          <li className="nav___login"><Link to="/login">ورود</Link></li>
+          <li className="nav___share desktop">
+            <Link to="/subscribe">خرید اشتراک</Link>
+          </li>
+          <li className="nav___login">
+            <Link to="/login">ورود</Link>
+          </li>
         </ul>
       </div>
     </nav>

src/components/Select/index.tsx

@@ -2,12 +2,10 @@ import React from "react";
 import { makeStyles, withStyles } from "@mui/styles";
 import FormControl from "@mui/material/FormControl";
 import Select from "@mui/material/Select";
-import InputBase from "@mui/material/InputBase";
+import MenuItem from '@mui/material/MenuItem';
 import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 import InputLabel from "@mui/material/InputLabel";
 
-const BootstrapInput = withStyles((theme) => ({}))(InputBase);
-
 const useStyles = makeStyles((theme) => ({
   marginLeft: {
     // margin: theme.spacing(1),
@@ -15,27 +13,31 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-export default function CustomizedSelects({options, selectedOptions, name, label, onChange} : any) {
+export default function CustomizedSelects({
+  options,
+  selectedOptions,
+  name,
+  label,
+  onChange,
+}: any) {
   const classes = useStyles();
   return (
     <>
-      {window.innerWidth > 1000 ? (
       <div style={{ position: "relative" }}>
         <FormControl variant="outlined" className={classes.marginLeft}>
-            <InputLabel id="demo-simple-select-outlined-label">
+          <InputLabel id="demo-simple-select-label">
             {label}
           </InputLabel>
           <Select
-              labelId="demo-simple-select-outlined-label"
-              id="demo-simple-select-outlined"
+            labelId="demo-simple-select-label"
+            id="demo-simple-select"
             value={selectedOptions}
             onChange={(e: any) => onChange(e)}
           >
-              {/* 09366858119 */}
             {options.map((option: any, i: any) => (
-                <option key={i} value={option.name}>
+              <MenuItem key={i} value={option.name}>
                 {option.name}
-                </option>
+              </MenuItem>
             ))}
           </Select>
         </FormControl>
@@ -49,7 +51,6 @@ export default function CustomizedSelects({options, selectedOptions, name, label
           }}
         />
       </div>
-      ) : null}
     </>
   );
 }

src/custom.scss

@@ -136,23 +136,21 @@
 }
 
 .MuiMenu-list {
-  option {
-    background-color: #272727 !important;
-    font-family: numeralLight !important;
-    padding: 5px 5px !important;
-    color: #707070;
-    font-size: 20px;
-    border-bottom: 1px solid #707070;
-    z-index: 1000 !important;
-    padding: 10px !important;
-    &:focus:enabled:hover {
-      background-color: #272727 !important;
-      border: 1px solid #84DE56 !important;
-    }
+  
 }
+
+.MuiMenuItem-root{
+  background: #272727 !important;
+  border-bottom: 1px solid #707070 !important;
+  color: white !important;
+  font-size: 14px !important;
+  font-family: numeralLight !important;
+  padding: 20px !important;
 }
+
 .MuiSelect-root {
   font-family: numeralLight !important;
+  color: white !important;
 }
 
 .MuiOutlinedInput-notchedOutline legend{
@@ -175,7 +173,7 @@
 
 @media screen and (min-width: 1008px) and (max-width: 1440px){
   .submit{
-    font-size : calc(100vw / 70);
+    font-size : calc(100vw / 80);
   }
   .main{
     main {
@@ -200,7 +198,7 @@
   .desktop{
     display: none !important;
   }
-  .submit-large{
+  .submit{
     font-size: calc(100vw / 25);
   }
 }

src/redux/actions-type/public.tsx

@@ -13,6 +13,11 @@ interface getBlogInfo{
   data : any
 }
 
+interface setFaqActive{
+  type : "public/faq/activate"
+  data : any
+}
+
 interface error{
   type : "error"
   data : undefined
@@ -28,6 +33,6 @@ interface loading{
 // }
 
 
-type PublicAction = getBlogList | getBlogInfo | getHomeData | loading | error;
+type PublicAction = getBlogList | getBlogInfo | getHomeData | setFaqActive | loading | error;
 
 export default PublicAction;

src/redux/actions/book.tsx

@@ -36,6 +36,7 @@ const book = {
   // filterBook: (data) => async (dispatch) => {
   //   dispatch({ type: "book/filter", data: data });
   // },
+
 };
 
 export default book;

src/redux/actions/public.tsx

@@ -7,8 +7,8 @@ const publicApi = {
   // getFaqList: (data: undefined, history: any) => async (dispatch: Dispatch) =>
   //   await proxy.get("faq/list", data, { history, dispatch }),
 
-  // setFaqActive: (data: undefined) => async (dispatch: Dispatch) =>
-  //   await dispatch({ type: "public/faq/activate", data: data }),
+  setFaqActive: (data: {}) => async (dispatch: Dispatch) =>
+    await dispatch({ type: "public/faq/activate", data: data }),
 
   // searchFaq: (data: String) => async (dispatch: Dispatch) =>
   //   await dispatch({ type: "public/faq/search", data: data }),

src/redux/reducers/public.tsx

@@ -80,24 +80,28 @@ const initialState = {
   ],
   faqList: [
     {
+      id : 0,
       name: "نحوه خرید از سایت دانوین چگونه است ؟",
       active: true,
       value:
         "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی ",
     },
     {
+      id : 1,
       name: "در این قسمت متن جدید خواهد آمد؟",
       active: false,
       value:
         "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی ",
     },
     {
+      id : 2,
       name: "چرا باید در این قسمت پرسش های متداول طرح شود؟",
       active: false,
       value:
         "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی ",
     },
     {
+      id : 3,
       name : 'این متن جهت سردرگرمی شما نوشته شده و کاربرد دیگری ندارد',
       active : false,
       value : 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی '
@@ -223,17 +227,17 @@ export default function publicApi(state = initialState, action: PublicAction) {
     //   };
     // case "faq/list":
     //   return { ...state, loading: false, error: null, faqList: data };
-    // case "public/faq/activate":
-    //   return {
-    //     ...state,
-    //     loading: false,
-    //     error: null,
-    //     faqList: state.faqList.map((item) =>
-    //       item.id === data
-    //         ? { ...item, active: !item.active }
-    //         : { ...item, active: false }
-    //     ),
-    //   };
+    case "public/faq/activate":
+      return {
+        ...state,
+        loading: false,
+        error: null,
+        faqList: state.faqList.map((item : any) =>
+          item.id === data
+            ? { ...item, active: !item.active }
+            : { ...item, active: false }
+        ),
+      };
     // case "public/faq/search":
     //   return {
     //     ...state,

src/util/scroll.js

@@ -0,0 +1,11 @@
+import { toast } from "react-toastify";
+
+class scroll {
+  goToTop = () => {
+    window.scrollTo(0,0);
+  }
+}
+
+const _scroll = new scroll();
+
+export default _scroll;

src/views/Contact/index.scss

@@ -104,6 +104,7 @@
       font-family: numeralLight;
       font-size: 20px;
       background-color: #272727;
+      line-height: 1.5;
       &:focus{
         border: 0.2px solid #84de56 !important;
         border-radius: 10px;
@@ -116,7 +117,7 @@
       position: absolute;
       text-align: right !important;
       right: 15px;
-      top: 22px;
+      top: 18px;
       padding: 0px !important;
       transform: translate(0px, 0px) scale(1) !important;
     }
@@ -221,7 +222,7 @@
       position: absolute;
       text-align: right !important;
       right: 15px;
-      top: 18px;
+      top: 15px;
       padding: 0px !important;
       transform: translate(0px, 0px) scale(1) !important;
     }
@@ -482,7 +483,6 @@
       transform: translate(0px, 0px) scale(0.85) !important;
       padding: 0px 10px !important;
     }
-  
     label {
       background-color: #272727;
       width: fit-content;

src/views/Contact/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import "./index.scss";
 import Navbar from "../../components/Navbar/index";
 import Footer from "../../views/Home/Footer/index";
@@ -8,6 +8,7 @@ import Textarea from "../../components/Textarea/index";
 import Select from "../../components/Select/index";
 import Location from "../../components/Location/index";
 import { connect } from "react-redux";
+import scroll from '../../util/scroll';
 
 interface FormData {
   name?: string;
@@ -23,6 +24,10 @@ function Contact({ departmans, selectedDepartman, contactData }: any) {
     setFormData({ ...formData, [e.target.name]: e.target.value });
   };
 
+  useEffect(() => {
+    scroll.goToTop();
+  },[])
+
   return (
     <div className="contact main d-flex flex-column">
       <Navbar />
@@ -30,7 +35,7 @@ function Contact({ departmans, selectedDepartman, contactData }: any) {
         <header>
           <h1>تماس با ما</h1>
         </header>
-        <div className="mobile d-flex flex-column">
+        <div className="mobile flex-column">
           <div className="d-flex  contact__tab">
             <button
               className={unit === "info" ? "contact__tab--active" : ""}

src/views/Course/index.scss

@@ -44,7 +44,7 @@
   &__options{
     &--rate{
       border: 2px solid #707070;
-      box-shadow: 0px 0px 39px #f7ff01b3;
+      box-shadow: 0px 0px 20px #f7ff0179;
       border-radius: 15px;
       padding-top: 20px;
       color: white;

src/views/Course/index.tsx

@@ -11,6 +11,7 @@ import play from "../../assets/icons/play.png";
 import bookmark from "../../assets/icons/bookmark.png";
 import StyledRating from "../../components/StyledRating/index";
 import { connect, useSelector } from "react-redux";
+import scroll from '../../util/scroll';
 
 import "./index.scss";
 
@@ -30,6 +31,7 @@ function Course({ lessons }: any) {
       .catch((err) => {
         console.log(err);
       });
+    scroll.goToTop();
   }, []);
 
   return (

src/views/Faq/index.scss

@@ -36,7 +36,7 @@
     margin: 0px auto !important;
     padding-top: 30px !important;
     li{
-      background-color: #272727;
+      background-color: #424242;
       margin-bottom: 15px;
       cursor: pointer;
       border-radius: 5px;
@@ -96,26 +96,32 @@
     header {
       max-width: 700px;
       h1 {
-        font-size: calc(100vw / 35);
+        font-size: calc(100vw / 50);
       }
       p {
-        font-size: calc(100vw / 70);
+        font-size: calc(100vw / 90);
+        margin-bottom: 20px;
       }
       input {
-        padding: 10px 20px 10px 0px;
-        font-size: calc(100vw / 70);
+        padding: 5px 10px 5px 0px;
+        font-size: calc(100vw / 90);
       }
       img {
         width: 35px;
       }
+      button{
+        width: 60px;
+        height: 50px;
+      }
+
     }
     &__list{
       max-width: 900px;
-      h2{
-        font-size: calc(100vw / 75);
+      strong{
+        font-size: calc(100vw / 95);
       }
       p{
-        font-size: calc(100vw / 72);
+        font-size: calc(100vw / 90);
       }
     }
   }

src/views/Faq/index.tsx

@@ -1,13 +1,18 @@
-import React from "react";
+import React, { useEffect } from "react";
 import Navbar from "../../components/Navbar/index";
 import Footer from "../../views/Home/Footer/index";
 import search from "../../assets/icons/search.png";
 import dropdown from "../../assets/icons/dropdown.png";
 import whiteDropdown from "../../assets/icons/white-dropdown.png";
 import { connect } from "react-redux";
+import {publicApi} from '../../redux/actions';
+import scroll from "../../util/scroll.js";
 import "./index.scss";
 
-function Faq({ list }: any) {
+function Faq({ list, setFaqActive }: any) {
+  useEffect(() => {
+    scroll.goToTop();
+  }, []);
   return (
     <div className="faq main d-flex flex-column">
       <Navbar />
@@ -29,7 +34,7 @@ function Faq({ list }: any) {
         <ul className="faq__list d-flex flex-column">
           {list.map((item: any, i: any) => (
             <li className="d-flex flex-column" key={i}>
-              <div className="faq__list--itemHeader d-flex align-items-center justify-content-between p-4">
+              <div className="faq__list--itemHeader d-flex align-items-center justify-content-between p-4" onClick={() => setFaqActive(item.id) }>
                 <strong>{item.name}</strong>
                 {item.active ? (
                   <img src={dropdown} alt="" />
@@ -53,4 +58,4 @@ function Faq({ list }: any) {
 
 export default connect((state: any) => ({
   list: state.publicApi.faqList,
-}))(Faq);
+}), {setFaqActive : publicApi.setFaqActive,})(Faq);

src/views/Home/Blogs/index.tsx

@@ -37,7 +37,7 @@ function Blogs(props: any) {
             showArrows={false}
             pagination={false}
           >
-            {list.map((item: Object, i: Number) => (
+            {list?.map((item: Object, i: Number) => (
               <Blog data={item} key={i} />
             ))}
           </Carousell>
@@ -45,7 +45,7 @@ function Blogs(props: any) {
           <Carousel
             autoplay={false}
             arrows={false}
-            slides={list.map((item: Object, i: Number) => (
+            slides={list?.map((item: Object, i: Number) => (
               <Blog data={item} key={i} />
             ))}
           />

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

@@ -5,7 +5,7 @@ import "./index.scss";
 export default function Book(props: any) {
   const { data } = props;
   return (
-    <Link to={'/'} className="home-books-book d-flex flex-column" draggable={'false'}>
+    <Link to={`/courses/${data.id}`} className="home-books-book d-flex flex-column" draggable={'false'}>
       <img src={`https://dnvn.ir/api/v1/file/${data.fileIds}`} alt={data.name} draggable={'false'} />
       <footer className="d-flex">
         <div className="home-books-book__info d-flex flex-column">

src/views/Home/Books/index.tsx

@@ -30,7 +30,7 @@ function Books(props: any) {
       className="home-books d-flex flex-column"
       onClick={() => props.getList()}
     >
-      {window.innerWidth > 1007 && list.length > 0 ? (
+      {window.innerWidth > 1007 && list?.length > 0 ? (
         <Carousel
           itemsToShow={slideNumberHandler()}
           isRTL={true}
@@ -38,13 +38,13 @@ function Books(props: any) {
           showArrows={true}
           pagination={false}
         >
-          {list.map((item: Object, i: Number) => (
+          {list?.map((item: Object, i: Number) => (
             <Book data={item} key={i} />
           ))}
         </Carousel>
       ) : (
         <div className="home-books__list d-flex">
-          {courses.map((item: Object, i: Number) => (
+          {courses?.map((item: Object, i: Number) => (
             <Book data={item} key={i} />
           ))}
         </div>
@@ -54,7 +54,7 @@ function Books(props: any) {
 }
 
 export default connect(
-  ({ book }: any) => ({
+  ( state : any) => ({
     book,
   }),
   { getList: book.list }

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

@@ -3,6 +3,7 @@
   cursor: pointer;
   img{
     border-radius: 8px;
+    margin: 0px auto;
   }
   footer{
     margin-top: 20px;
@@ -49,7 +50,7 @@
 @media screen and (min-width : 1008px) and (max-width : 1440px){
   .home-courses-course{
     img{
-      height: 200px;
+      width: 180px;
     }
     h2{
       font-size: calc(100vw / 80);
@@ -83,8 +84,8 @@
 @media screen and (max-width : 640px){
   .home-courses-course{
     img{
-      width: calc(100vw / 1.7);
-      height: calc(100vw / 2.2);
+      width: calc(100vw / 1.9);
+      // height: calc(100vw / 2.2);
     }
     h2{
       font-size: calc(100vw / 25);

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

@@ -7,7 +7,7 @@ import "./index.scss";
 export default function Course(props: any) {
   const { data } = props;
   return (
-    <Link to={'/'} className="home-courses-course d-flex flex-column" draggable={'false'}>
+    <Link to={`/courses/${data.id}`} className="home-courses-course d-flex flex-column" draggable={'false'}>
       <img src={data.imageUrl} alt={data.name} draggable={'false'} />
       <footer className="d-flex">
         <Avatar src={data.user} style={{ width: 40, height: 40 }} />

src/views/Home/Footer/index.tsx

@@ -22,11 +22,11 @@ export default function Footer(props: any) {
 
 Footer.defaultProps = {
   links: [
-    { name: "تعرفه‌ها", link: "/" },
-    { name: "سوالات متداول", link: "/" },
-    { name: "درباره ما", link: "/" },
+    { name: "تعرفه‌ها", link: "/subscribe" },
+    { name: "سوالات متداول", link: "/faq" },
+    { name: "درباره ما", link: "/contact" },
     { name: "فروشگاه", link: "/" },
     { name: "اپلیکیشن", link: "/" },
-    { name: "تماس با ما", link: "/" },
+    { name: "تماس با ما", link: "/contact" },
   ],
 };

src/views/Home/index.scss

@@ -13,21 +13,7 @@
   .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%
-  );
+    background: rgb(0, 0, 0);
+  
   }
 }

src/views/Home/index.tsx

@@ -10,6 +10,7 @@ import Footer from "./Footer/index";
 import Header from "./Header/index";
 import AppDownload from "./AppDownload/index";
 import Vocal from "../../components/Vocal/Vocal";
+import scroll from '../../util/scroll';
 
 import olum7 from "../../assets/images/olum7.jpg";
 import olum8 from "../../assets/images/olum8.jpg";
@@ -30,6 +31,9 @@ export default function Home(props: any) {
       setVocal(false);
     }
   }, [inputValue]);
+  useEffect(() => {
+    scroll.goToTop();
+  },[])
   return (
     <>
       <div

src/views/Subscription/index.tsx

@@ -1,12 +1,16 @@
-import React from "react";
+import React, {useEffect} from "react";
 import Navbar from "../../components/Navbar/index";
 import Footer from "../../views/Home/Footer/index";
 import SubscribeRadio from "./SubscribeRadio/index";
 import DiscountCode from "./DiscountCode/index";
 import {connect} from 'react-redux';
+import scroll from '../../util/scroll';
 import "./index.scss";
 
 function Subscription({subscribes} : any) {
+  useEffect(() => {
+    scroll.goToTop();
+  },[])
   return (
     <div className="subscription main d-flex flex-column">
       <Navbar />

src/views/VideoTube/index.tsx

@@ -10,13 +10,13 @@ import AddComment from "./AddComment/index";
 import "./index.scss";
 import listIcon from "../../assets/icons/list.png";
 import { connect } from "react-redux";
+import scroll from "../../util/scroll.js";
 import { book } from "../../redux/actions";
 
-import user from "../../assets/images/user3.png";
-
 function VodTube({ videoList, getList, list, selectedVideo, comments }: any) {
   useEffect(() => {
     getList();
+    scroll.goToTop();
   }, []);
   return (
     <div className="video-tube main d-flex flex-column">