reza added BooToggle

src/components/BookToggle/index.scss

@@ -0,0 +1,69 @@
+.book-toggle {
+  width: calc(100% - 60px);
+  background-color: transparent;
+  height: calc(100vh / 1.8);
+  &__info {
+    width: calc(100% / 2.5);
+  }
+  img {
+    height: 90%;
+    border-radius: 8px;
+  }
+  p {
+    margin-top: 20px;
+  }
+  a {
+    transition: all 0.3s;
+    width: fit-content;
+    border-radius: 4px;
+    padding: 10px 35px;
+    align-self: end;
+    margin-top: 60px;
+    border: 1px solid white;
+    color: white;
+    &:hover{
+      border-color: $green;
+      color: $green;
+    }
+  }
+  &-light {
+    strong,
+    p {
+      color: $gray5;
+    }
+  }
+  &-dark {
+    strong,
+    p {
+      color: $gray12;
+    }
+  }
+}
+
+@media screen and (min-width: 1441px) {
+  .book-toggle {
+    strong {
+      font-size: 21px;
+    }
+    p {
+      font-size: 14px;
+    }
+    a {
+      font-size: 16px;
+    }
+  }
+}
+
+@media screen and (min-width: 1008px) and (max-width: 1440px) {
+  .book-toggle {
+    strong {
+      font-size: calc(100vw / 70);
+    }
+    p {
+      font-size: calc(100vw / 100);
+    }
+    a {
+      font-size: calc(100vw / 80);
+    }
+  }
+}

src/components/BookToggle/index.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import {Link} from 'react-router-dom';
+import _ from "lodash";
+import { connect } from "react-redux";
+
+function BookToggle({ book, theme }: any) {
+  return (
+    <div
+      className={_.join(
+        [
+          "book-toggle desktop justify-content-between align-items-center mx-auto px-2",
+          theme === "light" ? "book-toggle-light" : "book-toggle-dark",
+        ],
+        " "
+      )}
+    >
+      <div className="book-toggle__info d-flex flex-column">
+        <strong>{book.name}</strong>
+        <p>
+          روز بلوا ۱۲+۱۳۹۸۸۹٪ عماد که یک روحانی خوشنام و چهره تلویزیونی مورد
+          توجه است، ناگهان با اتهام‌هایی جدی مواجه می‌شود که خود و خانواده اش را
+          در موقعیت پیچیده‌ای قرار می‌دهد و...
+        </p>
+        <Link to={'/courses/' + book.id}>ادامه</Link>
+      </div>
+      <img src={`https://dnvn.ir/api/v1/file/${book.fileIds}`} alt="" />
+    </div>
+  );
+}
+
+export default connect(
+  (state: any) => ({
+    theme: state.publicApi.theme,
+  }),
+  {}
+)(BookToggle);

src/components/ThemeSwitch/index.scss

@@ -83,8 +83,8 @@
 }
 .toggle--label {
   /** Placeholder element, starting at blue **/
-  width: 70px;
-  height: 35px;
+  width: 65px;
+  height: 30px;
   margin-right: 60px;
   background: var(--blue-color);
   border-radius: 100px;
@@ -135,8 +135,8 @@
   animation-fill-mode: forwards;
   transition: all 350ms ease-in;
   content: "";
-  width: 25px;
-  height: 25px;
+  width: 20px;
+  height: 20px;
   border: 5px solid var(--yellow-border);
   top: 1px;
   left: 0px;
@@ -165,23 +165,23 @@
   }
   60% {
     left: 0px;
-    width: 62px;
+    width: 55px;
   }
   100% {
-    left: 33px;
-    width: 25px;
+    left: 35px;
+    width: 20px;
   }
 }
 @keyframes reverse {
   0% {
-    left: 33px;
-    width: 38px;
+    left: 30px;
+    width: 20px;
   }
   60% {
-    left: 2px;
-    width: 62px;
+    left: 1px;
+    width: 55px;
   }
   100% {
-    left: 2px;
+    left: 1px;
   }
 }

src/constants/width.scss

@@ -1 +1 @@
-$maxWidth : calc(100% - 120px);
+$maxWidth : calc(100% - 120px);

src/custom.scss

@@ -1,5 +1,6 @@
 @import "./constants/colors.scss";
 @import "./constants/width.scss";
+@import "./components/BookToggle/index.scss";
 @import "./components/BreadCrumbs/index.scss";
 @import "./components/GradeFilter/index.scss";
 @import "./components/HomeSearchBox/index.scss";

src/util/scroll.js

@@ -2,11 +2,22 @@ import { toast } from "react-toastify";
 
 class scroll {
   goToTop = () => {
-    window.scrollTo(0,0);
-  }
-  listScroll = () => {
-    
-  }
+    window.scrollTo(0, 0);
+  };
+  bookScroll = (option) => {
+    const height = window.innerHeight;
+    const bookToggle1 = localStorage.getItem('bookToggle1');
+    if (option === 1) {
+      localStorage.setItem('bookToggle1', 1);
+      window.scrollTo(0, 1.1 * height);
+    } else if (option === 2) {
+      if(bookToggle1) {
+        window.scrollTo(0, 2.3 * height);
+      }else{
+        window.scrollTo(0, 1.8 * height);
+      }
+    }
+  };
 }
 
 const _scroll = new scroll();

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

@@ -3,8 +3,7 @@ import { Link } from "react-router-dom";
 import { connect } from "react-redux";
 import _ from "lodash";
 
-function Book(props: any) {
-  const { data, theme } = props;
+function Book({ data, theme, setActiveBook }: any) {
   const desc: any = {
     ریاضی: "ریاضی از ریاضت میاد ولی دانوین آسون و لذت بخشش کرده",
     "علوم تجربی": "علوم تجربی تو دانوین واقعا تجربی و محسوس میشه",
@@ -13,31 +12,58 @@ function Book(props: any) {
     فیزیک: "با دانوین فیزیکو با یه لنز جدید ببنید",
   };
   return (
-    <Link
-      to={`/courses/${data.id}`}
-      className={_.join(
-        [
-          "home-books-book d-flex flex-column",
-          theme === "light"
-            ? "home-books-book-light"
-            : "home-books-book-dark",
-        ],
-        " "
-      )}
-      draggable={"false"}
-    >
-      <img
-        src={`https://dnvn.ir/api/v1/file/${data.fileIds}`}
-        alt={data.name}
+    <>
+      <div
+        className={_.join(
+          [
+            "home-books-book desktop flex-column",
+            theme === "light"
+              ? "home-books-book-light"
+              : "home-books-book-dark",
+          ],
+          " "
+        )}
+        onClick={() => setActiveBook(data)}
         draggable={"false"}
-      />
-      <footer className="d-flex">
-        <div className="home-books-book__info d-flex flex-column">
-          <h2>{data.name}</h2>
-          <p>{desc[data.name] || ""}</p>
-        </div>
-      </footer>
-    </Link>
+      >
+        <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">
+            <h2>{data.name}</h2>
+            <p>{desc[data.name] || ""}</p>
+          </div>
+        </footer>
+      </div>
+      <Link
+        to={"/courses/" + data.id}
+        className={_.join(
+          [
+            "home-books-book mobile flex-column",
+            theme === "light"
+              ? "home-books-book-light"
+              : "home-books-book-dark",
+          ],
+          " "
+        )}
+        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">
+            <h2>{data.name}</h2>
+            <p>{desc[data.name] || ""}</p>
+          </div>
+        </footer>
+      </Link>
+    </>
   );
 }
 

src/views/Home/Books/index.tsx

@@ -1,10 +1,12 @@
-import React, { useEffect } from "react";
-import { useSelector, connect } from "react-redux";
+import React, { useState } from "react";
+import { connect } from "react-redux";
 import Carousel from "react-elastic-carousel";
 import Book from "./Book/index";
-import { book } from "../../../redux/actions";
+import BookToggle from "../../../components/BookToggle";
+import scroll from "../../../util/scroll";
 
-function Books({list, number}: any) {
+function Books({ list, number }: any) {
+  const [activeBook, setActiveBook] = useState(null);
   const slideNumberHandler = () => {
     if (window.innerWidth >= 1440) {
       return 5;
@@ -17,36 +19,31 @@ function Books({list, number}: any) {
     }
   };
 
-
   return (
-    <section
-      className="home-books d-flex flex-column"
-    >
-      {window.innerWidth > 1007 ? (
-        <Carousel
-          itemsToShow={slideNumberHandler()}
-          isRTL={true}
-          enableTilt={false}
-          showArrows={true}
-          pagination={false}
-        >
-          {list?.map((item: Object, i: any) => (
-            <Book data={item} key={i} />
-          ))}
-        </Carousel>
-      ) : (
-        <div className="home-books__list d-flex">
-          {list?.map((item: Object, i: any) => (
-            <Book data={item} key={i} />
-          ))}
+    <section className="home-books d-flex flex-column">
+      <div className="desktop flex-column" onClick={() => scroll.bookScroll(2)}>
+        <div className="position-relative">
+          <Carousel
+            itemsToShow={slideNumberHandler()}
+            isRTL={true}
+            enableTilt={false}
+            showArrows={true}
+            pagination={false}
+          >
+            {list?.map((item: Object, i: any) => (
+              <Book data={item} key={i} setActiveBook={setActiveBook} />
+            ))}
+          </Carousel>
         </div>
-      )}
+        {activeBook && <BookToggle book={activeBook} />}
+      </div>
+      <div className="home-books__list mobile">
+        {list?.map((item: Object, i: any) => (
+          <Book data={item} key={i} />
+        ))}
+      </div>
     </section>
   );
 }
 
-export default connect(
-  ( state : any) => ({
-  }),
-  { }
-)(Books);
+export default connect((state: any) => ({}), {})(Books);

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

@@ -4,55 +4,66 @@ import { Link } from "react-router-dom";
 import { connect } from "react-redux";
 import _ from "lodash";
 
-function Course(props: any) {
-  const { data, theme } = props;
+function Course({ data, theme, setActiveBook }: any) {
   return (
-    <Link
-      to={`/courses/${data.id}`}
-      className={_.join(
-        [
-          "home-courses-course d-flex flex-column",
-          theme === "light"
-            ? "home-courses-course-light"
-            : "home-courses-course-dark",
-        ],
-        " "
-      )}
-      draggable={"false"}
-    >
-      <img
-        src={`https://dnvn.ir/api/v1/file/${data.fileIds}`}
-        alt={data.name}
+    <>
+      <div
+        className={_.join(
+          [
+            "home-courses-course desktop flex-column",
+            theme === "light"
+              ? "home-courses-course-light"
+              : "home-courses-course-dark",
+          ],
+          " "
+        )}
+        onClick={() => setActiveBook(data)}
         draggable={"false"}
-      />
-      <footer className="d-flex">
-        <Avatar
+      >
+        <img
           src={`https://dnvn.ir/api/v1/file/${data.fileIds}`}
-          style={{ width: 40, height: 40 }}
+          alt={data.name}
+          draggable={"false"}
         />
-        <div className="home-courses-course__info d-flex flex-column">
-          <h2>{data.name}</h2>
-          {/* {window.innerWidth > 1007 ? (
-            <p>{data.text.slice(0, 100)}</p>
-          ) : (
-            <p>{data.text.slice(0, 50)}</p>
-          )} */}
-
-          {/* <ul className="d-flex flex-wrap">
-            {data.tags.length <= 2
-              ? data.tags.map((item: String, i: any) => <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>
-    </Link>
+        <footer className="d-flex">
+          <Avatar
+            src={`https://dnvn.ir/api/v1/file/${data.fileIds}`}
+            style={{ width: 40, height: 40 }}
+          />
+          <div className="home-courses-course__info d-flex flex-column">
+            <h2>{data.name}</h2>
+          </div>
+        </footer>
+      </div>
+      <Link
+        to={`/courses/${data.id}`}
+        className={_.join(
+          [
+            "home-courses-course mobile flex-column",
+            theme === "light"
+              ? "home-courses-course-light"
+              : "home-courses-course-dark",
+          ],
+          " "
+        )}
+        draggable={"false"}
+      >
+        <img
+          src={`https://dnvn.ir/api/v1/file/${data.fileIds}`}
+          alt={data.name}
+          draggable={"false"}
+        />
+        <footer className="d-flex">
+          <Avatar
+            src={`https://dnvn.ir/api/v1/file/${data.fileIds}`}
+            style={{ width: 40, height: 40 }}
+          />
+          <div className="home-courses-course__info d-flex flex-column">
+            <h2>{data.name}</h2>
+          </div>
+        </footer>
+      </Link>
+    </>
   );
 }
 

src/views/Home/Courses/index.tsx

@@ -1,12 +1,15 @@
-import React, { useEffect } from "react";
+import React, { useState } from "react";
 import Carousel from "react-elastic-carousel";
 import Course from "./Course/index";
 import { Link } from "react-router-dom";
 import ExpandMoreRoundedIcon from "@mui/icons-material/ExpandMoreRounded";
 import { connect } from "react-redux";
 import _ from "lodash";
+import BookToggle from "../../../components/BookToggle";
+import scroll from "../../../util/scroll";
 
 function Courses({ number, courses, selectedSort, theme }: any) {
+  const [activeBook, setActiveBook] = useState(null);
   const slideNumberHandler = () => {
     if (window.innerWidth >= 1440) {
       return 5;
@@ -21,10 +24,13 @@ function Courses({ number, courses, selectedSort, theme }: any) {
   const light = theme === "light";
   return (
     <section
-      className={_.join([
-        "home-courses d-flex flex-column",
-        light ? "home-courses-light" : "home-courses-dark",
-      ], " ")}
+      className={_.join(
+        [
+          "home-courses d-flex flex-column",
+          light ? "home-courses-light" : "home-courses-dark",
+        ],
+        " "
+      )}
     >
       <header className="d-flex justify-content-between align-items-center">
         <div className="d-flex flex-column">
@@ -33,25 +39,27 @@ function Courses({ number, courses, selectedSort, theme }: any) {
         </div>
         <Link to="/">بیشتر</Link>
       </header>
-      {window.innerWidth > 1007 ? (
-        <Carousel
-          itemsToShow={slideNumberHandler()}
-          isRTL={true}
-          enableTilt={false}
-          showArrows={true}
-          pagination={false}
-        >
-          {courses?.map((item: Object, i: any) => (
-            <Course data={item} key={i} />
-          ))}
-        </Carousel>
-      ) : (
-        <div className="home-courses__list d-flex">
-          {courses?.map((item: Object, i: any) => (
-            <Course data={item} key={i} />
-          ))}
+      <div className="desktop flex-column" onClick={() => scroll.bookScroll(1)}>
+        <div className="position-relative">
+          <Carousel
+            itemsToShow={slideNumberHandler()}
+            isRTL={true}
+            enableTilt={false}
+            showArrows={true}
+            pagination={false}
+          >
+            {courses?.map((item: Object, i: any) => (
+              <Course data={item} key={i} setActiveBook={setActiveBook} />
+            ))}
+          </Carousel>
         </div>
-      )}
+        {activeBook && <BookToggle book={activeBook} />}
+      </div>
+      <div className="home-courses__list mobile">
+        {courses?.map((item: Object, i: any) => (
+          <Course data={item} key={i} />
+        ))}
+      </div>
 
       <Link
         className="home-courses__more align-items-center hidden"

src/views/Home/Header/index.scss

@@ -70,6 +70,7 @@
 .slider-header {
   width: 100%;
   justify-content: flex-end;
+  min-height : calc(100vh - 150px);
   img{
     width: 100%;
 

src/views/Home/Header/index.tsx

@@ -4,28 +4,31 @@ import Carousel from "react-elastic-carousel";
 
 import dropdown from "../../../assets/icons/dropdown.png";
 
-const HomeSlider = ({ headerData}: any) => {
+const HomeSlider = ({ headerData }: any) => {
   return (
     <div className="home-slider d-flex">
       <Carousel
         itemsToShow={1}
         isRTL={true}
-        enableTilt={false}
+        enableTilt={true}
         showArrows={true}
         pagination={true}
         enableAutoPlay={true}
       >
         {headerData.map((item: any, i: any) => (
-          <div className="slider-header d-flex">
+          <div
+            className="slider-header d-flex"
+            style={{
+              background: `url(https://dnvn.ir/api/v1/file/${item.fileId})`,
+              backgroundRepeat : 'no-repeat',
+              backgroundClip : 'content-box',
+              backgroundSize : '100% 100%',
+            }}
+          >
             {/* <
               className="slider-header__right d-flex"
               style={{ backgroundColor: item.backgroundColor }}
             > */}
-              <img
-                src={`https://dnvn.ir/api/v1/file/${item.fileId}`}
-                alt={item.title}
-              />
-            
             {/* <div
               style={{ backgroundColor: item.backgroundColor }}
               className="slider-header__left d-flex flex-column"
@@ -43,4 +46,4 @@ const HomeSlider = ({ headerData}: any) => {
   );
 };
 
-export default HomeSlider;
+export default HomeSlider;

src/views/Home/index.tsx

@@ -30,6 +30,7 @@ function Home({
   const [gradeDropdown, setGradeDropdown] = useState(false);
 
   useEffect(() => {
+    localStorage.removeItem('bookToggle1');
     getCourseList();
     scroll.goToTop();
     getHeader({ device: 1 });