reza created second page

src/App.scss

@@ -1,5 +1,7 @@
 @import "./constants/size.scss";
 @import "./views/Home/Page1/index.scss";
+@import "./views/Home/Page2/index.scss";
+
 
 .App {
   direction: rtl;

src/utils/scroll.js

@@ -3,16 +3,16 @@ class scroll {
     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');
-      }
+      return 0;
+      // if (scrollY === 0) {
+      //   return 0;
+      // } 
+      // if(scrollY > 0 && scrollY < 2 * height) {
+      //   return -scrollY;
+      // } 
+      // if(scrollY === 2 * height){
+      //   return  -height;
+      // }
     }else
     if (index === 2) {
       if (scrollY === 0) {
@@ -29,10 +29,10 @@ class scroll {
       if (scrollY <= height) {
         return height;
       } 
-      if (scrollY > height && scrollY < 2 * height) {
+      if (scrollY > height && scrollY < 3 * height) {
         return 2 * height - scrollY;
       } 
-      if(scrollY === 3 * height){
+      if(scrollY === 4 * height){
         return -height;
       }
     }else

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} className="z-50" />
+      <img src={book.imageUrl} alt={book.name} />
       <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

@@ -63,7 +63,6 @@ export default function Page1({ list, page }) {
         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 mb-10"></header>
         <div className="w-full relative z-10 px-4" style={{ direction: "ltr" }}>
           <Carousel
             show={show}
@@ -118,7 +117,7 @@ export default function Page1({ list, page }) {
           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" />
+          ورود به فروشگاه <img src={arrowLeftWhite} alt="" className="mr-2" />
         </Link>
       </div>
 

src/views/Home/Page2/index.js

@@ -2,27 +2,56 @@ 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(() => {    
+  const [boxPosition, setBoxPosition] = useState({
+    translateX : -12,
+    translateY : 5,
+    rotate : 5,
+  });
+  useEffect(() => {
     window.addEventListener("scroll", (e) => {
       setTop(scroll.homeScrollHandler(page));
+      boxPositionHandler(window.scrollY);
     });
   }, []);
+  const height = window.innerHeight;
+
+  const boxPositionHandler = (scrollY) => {
+    if(scrollY <= height){
+      setBoxPosition({
+        translateY : 5,
+        translateX : -12,
+        rotate : 5,
+      });
+    }
+    else if (scrollY > height && scrollY <= 2 * height) {
+      setBoxPosition({
+        translateY : (-9 + (scrollY + height) / 154) > 12 ? 12 : (-9 + (scrollY + height) / 154),
+        translateX : (-66 + (scrollY + height) / 40) > 15 ? 15 : (-66 + (scrollY + height) / 40),
+        rotate : (-((scrollY + height) / 214) + 15) < 0 ? 0 : (-((scrollY + height) / 214) + 15),
+      });
+    }else{
+      setBoxPosition({
+        translateY : 12,
+        translateX : 15,
+        rotate : 0,
+      });
+    }
+    
+  };
   return (
     <div
-      className={_.join(
-        [
-          "h-screen w-full pt-20 fixed left-0 bg-gray-200",
-        ],
-        " "
-      )}
+      className={_.join(["home-page2 h-screen w-full fixed left-0"], " ")}
       style={{ top: top }}
     >
-      
+      <div
+        className={_.join(
+          ["relative w-full h-full bg-blue-500 shadow-2xl transform"],
+          " "
+        )}
+        style={{ transform: `translateX(${boxPosition.translateX}%) rotate(${boxPosition.rotate}deg) translateY(${boxPosition.translateY}%)` }}
+      ></div>
     </div>
   );
 }
-

src/views/Home/Page2/index.scss

@@ -0,0 +1,3 @@
+.home-page2{
+  background-image: url(../../../assets/images/woody-background.svg);
+}

src/views/Home/index.js

@@ -20,8 +20,8 @@ export default function Home() {
       <Navbar />
       <Page1 page={1} />
       <Page2 page={2} />
-      <Page3 page={3} />
-      <Page4 page={4} />
+      {/* <Page3 page={3} /> */}
+      {/* <Page4 page={4} /> */}
       <Page5 page={5} />
       <Page6 page={6} />
       <Page7 page={7} />