reza pushed home page

src/utils/scroll.js

@@ -0,0 +1,96 @@
+class scroll {
+  homeScrollHandler = (index) => {
+    const height = Number(window.innerHeight);
+    const scrollY = Number(window.scrollY);
+    if (index === 1) {
+      if (scrollY === 0) {
+        return 0;
+      } 
+      if(scrollY > 0 && scrollY < height) {
+        return -scrollY;
+      } 
+      if(scrollY === height){
+        // return '-1' + height;
+        alert('kir');
+      }
+    }else
+    if (index === 2) {
+      if (scrollY === 0) {
+        return height;
+      } 
+      if (scrollY > 0 && scrollY < height) {
+        return height - scrollY;
+      } 
+      if(scrollY === 2 * height){
+        return -1 * height;
+      }
+    }else
+    if (index === 3) {
+      if (scrollY <= height) {
+        return height;
+      } 
+      if (scrollY > height && scrollY < 2 * height) {
+        return 2 * height - scrollY;
+      } 
+      if(scrollY === 3 * height){
+        return -height;
+      }
+    }else
+    if (index === 4) {
+      if (scrollY <= 2 * height) {
+        return height;
+      } else if (scrollY > 2 * height && scrollY < 3 * height) {
+        return 3 * height - scrollY;
+      } 
+      if(scrollY === 4 * height){
+        return -height;
+      }
+    }else
+    if (index === 5) {
+      if (scrollY <= 3 * height) {
+        return height;
+      } else if (scrollY > 3 * height && scrollY < 4 * height) {
+        return 4 * height - scrollY;
+      } 
+      if(scrollY === 5 * height){
+        return -height;
+      }
+    }else
+    if (index === 6) {
+      if (scrollY <= 4 * height) {
+        return height;
+      } else if (scrollY > 4 * height && scrollY < 5 * height) {
+        return 5 * height - scrollY;
+      } 
+      if(scrollY === 6 * height){
+        return -height;
+      }
+        
+    }else
+    if (index === 7) {
+      if (scrollY <= 5 * height) {
+        return height;
+      } else if (scrollY > 5 * height && scrollY < 6 * height) {
+        return 6 * height - scrollY;
+      } 
+      // if(scrollY === 7 * height){
+      //   return;
+      // }
+    }
+    // if (index !== 1) {
+    //   if (scrollY > (index - 2) * height) {
+    //     return (index - 1) * height - scrollY;
+    //   }
+    //   if (scrollY === (index - 1) * height) {
+    //     return 0;
+    //   }
+    //   if (scrollY > (index - 1) * height) {
+    //     return -height;
+    //   }
+    // }
+  };
+}
+
+const _scroll = new scroll();
+
+export default _scroll;

src/views/Home/Page1/Book/index.js

@@ -5,7 +5,7 @@ import { Link } from "react-router-dom";
 export default function Book({ book }) {
   return (
     <Link to={`{/products/${book.name}}`} className="flex group relative">
-      <img src={book.imageUrl} alt={book.name} />
+      <img src={book.imageUrl} alt={book.name} className="z-50" />
       <button className="py-1.5 px-5 border absolute border-white rounded-2xl group-hover:opacity-100 bottom-10 opacity-0 transition-all left-1/2 transform -translate-x-1/2 bg-blue90 bg-opacity-90 text-white text-sm">
         مشاهده و خرید
       </button>

src/views/Home/Page1/index.js

@@ -1,7 +1,10 @@
 import React, { useState, useEffect } from "react";
+import { Link } from "react-router-dom";
 import { Carousel } from "@trendyol-js/react-carousel";
 import Book from "./Book";
 import FloatWithMouse from "../../../components/FloatWidthMouse";
+import scroll from "../../../utils/scroll";
+
 import _ from "lodash";
 
 import olum1Image from "../../../assets/images/olum-1.svg";
@@ -12,9 +15,14 @@ import zist11Image from "../../../assets/images/zist-11.svg";
 import arrow from "../../../assets/icons/slider-arrow.svg";
 import flatFlower from "../../../assets/icons/flat-flower-white.svg";
 import line from "../../../assets/icons/line.svg";
+import arrowBottomIcon from "../../../assets/icons/arrows-bottom-blue.svg";
+import sheffImage from "../../../assets/images/sheff.svg";
+import arrowLeftWhite from "../../../assets/icons/arrow-left-white.svg";
 
-export default function Page1({ list }) {
+export default function Page1({ list, page }) {
   const [show, setShow] = useState(null);
+  const [top, setTop] = useState(0);
+
   useEffect(() => {
     const width = window.innerWidth;
     window.addEventListener(
@@ -32,9 +40,17 @@ export default function Page1({ list }) {
     } else if (width > 1024) {
       setShow(4);
     }
+    window.addEventListener("scroll", (e) => {
+      setTop(() => scroll.homeScrollHandler(page));
+    });
   }, []);
+
+  useEffect(() => {}, [page]);
   return (
-    <div className="home-page1 relative h-screen w-full pt-20">
+    <div
+      className={_.join(["home-page1 w-full pt-20 h-screen fixed left-0"], " ")}
+      style={{ top: top }}
+    >
       <FloatWithMouse />
       <img
         src={flatFlower}
@@ -47,8 +63,8 @@ export default function Page1({ list }) {
         className="absolute transform left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
       />
       <div className="container flex flex-col lg:px-8">
-        <header className="z-10 w-full h-10 flex flex-row justify-between bg-red-300 mb-10"></header>
-        <div className="w-full relative z-10" style={{ direction: "ltr" }}>
+        <header className="z-10 w-full h-10 flex flex-row justify-between mb-10"></header>
+        <div className="w-full relative z-10 px-4" style={{ direction: "ltr" }}>
           <Carousel
             show={show}
             slide={2}
@@ -76,6 +92,41 @@ export default function Page1({ list }) {
           </Carousel>
         </div>
       </div>
+      <div className="w-full relative lg:px-8">
+        <img
+          src={sheffImage}
+          alt=""
+          className="absolute bottom-0 left-1/2 transform -translate-x-1/2 translate-y-7"
+        />
+      </div>
+      <div className="container flex flex-row justify-between relative transform translate-y-9">
+        <div className="list-none flex flex-row items-center bg-blueB0 bg-opacity-40 p-2.5 rounded-md backdrop-filter backdrop-blur-md">
+          <strong className="text-white text-sm font-light ml-1 border-l-2 pl-2 border-gray-300">
+            لیست محصولات
+          </strong>
+          <Link to="/products" className="text-white text-xs mr-5">
+            کتاب ها
+          </Link>
+          <Link to="/products" className="text-white text-xs mr-5">
+            دوره ویديویی
+          </Link>
+          <Link to="/products" className="text-white text-xs mr-5">
+            آزمون ها
+          </Link>
+        </div>
+        <Link
+          to="/products"
+          className="flex flex-row items-center text-white text-xs bg-blueB0 bg-opacity-40  px-4 rounded-md backdrop-filter backdrop-blur-md"
+        >
+         ورود به فروشگاه <img src={arrowLeftWhite} alt="" className="mr-2" />
+        </Link>
+      </div>
+
+      <img
+        src={arrowBottomIcon}
+        alt=""
+        className="absolute transform left-1/2 bottom-5 -translate-x-1/2 cursor-pointer"
+      />
     </div>
   );
 }

src/views/Home/Page2/index.js

@@ -0,0 +1,28 @@
+import React, { useState, useEffect } from "react";
+import _ from "lodash";
+import scroll from "../../../utils/scroll";
+
+
+export default function Page2({ list, page }) {
+  const [top, setTop] = useState(window.innerHeight);
+
+  useEffect(() => {    
+    window.addEventListener("scroll", (e) => {
+      setTop(scroll.homeScrollHandler(page));
+    });
+  }, []);
+  return (
+    <div
+      className={_.join(
+        [
+          "h-screen w-full pt-20 fixed left-0 bg-gray-200",
+        ],
+        " "
+      )}
+      style={{ top: top }}
+    >
+      
+    </div>
+  );
+}
+

src/views/Home/Page3/index.js

@@ -0,0 +1,28 @@
+import React, { useState, useEffect } from "react";
+import _ from "lodash";
+import scroll from "../../../utils/scroll";
+
+
+export default function Page3({ list, page }) {
+  const [top, setTop] = useState(window.innerHeight);
+
+  useEffect(() => {    
+    window.addEventListener("scroll", (e) => {
+      setTop(scroll.homeScrollHandler(page));
+    });
+  }, []);
+  return (
+    <div
+      className={_.join(
+        [
+          "fixed left-0 h-screen w-full pt-20 bg-gray-300",
+        ],
+        " "
+      )}
+      style={{ top: top }}
+    >
+      
+    </div>
+  );
+}
+

src/views/Home/Page4/index.js

@@ -0,0 +1,29 @@
+import React, { useState, useEffect } from "react";
+import _ from "lodash";
+import scroll from "../../../utils/scroll";
+
+
+export default function Page4({ list, page }) {
+  const [top, setTop] = useState(window.innerHeight);
+
+  useEffect(() => {    
+    window.addEventListener("scroll", (e) => {
+      setTop(scroll.homeScrollHandler(page));
+    });
+  }, []);
+  return (
+    <div
+      className={_.join(
+        [
+          "fixed left-0 h-screen w-full pt-20 bg-gray-400",
+        ],
+        " "
+      )}
+      style={{ top: top }}
+
+    >
+      
+    </div>
+  );
+}
+

src/views/Home/Page5/index.js

@@ -0,0 +1,28 @@
+import React, { useState, useEffect } from "react";
+import _ from "lodash";
+import scroll from "../../../utils/scroll";
+
+
+export default function Page5({ list, page }) {
+  const [top, setTop] = useState(window.innerHeight);
+
+  useEffect(() => {    
+    window.addEventListener("scroll", (e) => {
+      setTop(scroll.homeScrollHandler(page));
+    });
+  }, []);
+  return (
+    <div
+      className={_.join(
+        [
+          "fixed left-0 h-screen w-full pt-20 bg-gray-500",
+        ],
+        " "
+      )}
+      style={{ top: top }}
+    >
+      
+    </div>
+  );
+}
+

src/views/Home/Page6/index.js

@@ -0,0 +1,28 @@
+import React, { useState, useEffect } from "react";
+import _ from "lodash";
+import scroll from "../../../utils/scroll";
+
+
+export default function Page6({ list, page }) {
+  const [top, setTop] = useState(window.innerHeight);
+
+  useEffect(() => {    
+    window.addEventListener("scroll", (e) => {
+      setTop(scroll.homeScrollHandler(page));
+    });
+  }, []);
+  return (
+    <div
+      className={_.join(
+        [
+          "fixed left-0 h-screen w-full pt-20 bg-gray-600",
+        ],
+        " "
+      )}
+      style={{ top: top }}
+    >
+      
+    </div>
+  );
+}
+

src/views/Home/Page7/index.js

@@ -0,0 +1,27 @@
+import React, { useState, useEffect } from "react";
+import _ from "lodash";
+import scroll from "../../../utils/scroll";
+
+export default function Page7({ list, page }) {
+  const [top, setTop] = useState(window.innerHeight);
+
+  useEffect(() => {    
+    window.addEventListener("scroll", (e) => {
+      setTop(scroll.homeScrollHandler(page));
+    });
+  }, []);
+  return (
+    <div
+      className={_.join(
+        [
+          "fixed left-0 h-screen w-full pt-20 bg-gray-700",
+        ],
+        " "
+      )}
+      style={{ top: top }}
+    >
+      
+    </div>
+  );
+}
+

src/views/Home/index.js

@@ -1,18 +1,30 @@
-import React, {useState} from 'react';
-import Navbar from '../../components/Navbar';
-import Dots from '../../components/Dots';
+import React, { useState, useEffect } from "react";
+import Navbar from "../../components/Navbar";
 
-import Page1 from './Page1/index';
+
+import Page1 from "./Page1";
+import Page2 from "./Page2";
+import Page3 from "./Page3";
+import Page4 from "./Page4";
+import Page5 from "./Page5";
+import Page6 from "./Page6";
+import Page7 from "./Page7";
+import { set } from "lodash";
 
 export default function Home() {
-  const [page, setPage] = useState(1);
   return (
-    <div className="home w-screen min-h-screen flex flex-col bg-white relative">
-      <Dots count={7} active={page} setPage={setPage} /> 
+    <div
+      className="flex flex-col bg-white relative w-full"
+      style={{ height: "700vh" }}
+    >
       <Navbar />
-      {
-        page === 1 && <Page1 />
-      }
+      <Page1 page={1} />
+      <Page2 page={2} />
+      <Page3 page={3} />
+      <Page4 page={4} />
+      <Page5 page={5} />
+      <Page6 page={6} />
+      <Page7 page={7} /> 
     </div>
-  )
+  );
 }