reza added some item

src/utils/scroll.js

@@ -90,8 +90,8 @@ class scroll {
   linearFormula = (currentScroll, position1, position2, scroll1, scroll2) => {
     const alpha = (currentScroll - scroll1) / (scroll2 - scroll1);
     const deltaPosition = position2 - position1;
-    const currectPosition = position1 + deltaPosition * alpha;
-    return currectPosition;
+    const currentPosition = position1 + deltaPosition * alpha;
+    return currentPosition;
   };
 
   videoLinearFormula = (currentScroll) => {

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

@@ -25,8 +25,8 @@ const Light = ({ degree }) => {
         draggable={false}
         src={lightIcon}
         alt=""
-        className={_.join(["absolute z-50 light-animation"], " ")}
-        style={{ transform: `scale(6) translateY(24%)` }}
+        className={_.join(["absolute z-50 light-animation opacity-50"], " ")}
+        style={{ transform: `scale(6) translateY(24%)`, pointerEvents : 'none' }}
       />
     </div>
   );

src/views/Home/Page1/Header/index.scss

@@ -6,42 +6,42 @@
 
 @keyframes light-animation {
   0% {
-    opacity: 1;
+    opacity: 0.5;
   }
   3% {
     opacity: 0;
   }
   6% {
-    opacity: 1;
+    opacity: 0.5;
   }
   9% {
     opacity: 0;
   }
   30% {
-    opacity: 1;
+    opacity: 0.5;
   }
   33% {
     opacity: 0;
   }
   36% {
-    opacity: 1;
+    opacity: 0.5;
   }
   39% {
     opacity: 0;
   }
   60% {
-    opacity: 1;
+    opacity: 0.5;
   }
   63% {
     opacity: 0;
   }
   66% {
-    opacity: 1;
+    opacity: 0.5;
   }
   69% {
     opacity: 0;
   }
   100% {
-    opacity: 1;
+    opacity: 0.5;
   }
 }

src/views/Home/Page2/Mobile/index.js

@@ -10,7 +10,7 @@ function Mobile({ mobilePosition, videoPosition, autoPlay, selectedVideo, unit }
   return (
     <div
       className={_.join(
-        ["fixed rounded-2xl flex flex-col overflow-hidden shadow-2xl"],
+        ["fixed rounded-2xl flex flex-col overflow-hidden shadow-xl"],
         " "
       )}
       style={{
@@ -19,6 +19,7 @@ function Mobile({ mobilePosition, videoPosition, autoPlay, selectedVideo, unit }
         width: (window.innerHeight * 10) / 20,
         left: mobilePosition + "%",
         // transform: `translateX(-${(window.innerHeight * 7) / 40 - 84}px)`,
+        border: '4px solid black'
       }}
     >
       <div className="relative w-full h-full flex">

src/views/Home/Page2/index.js

@@ -3,11 +3,13 @@ import _ from "lodash";
 import scroll from "../../../utils/scroll";
 import Mobile from "./Mobile";
 import qrImage from "../../../assets/images/qrImage.png";
-import leftBg from "../../../assets/images/page-bg.png";
+import rightBg from "../../../assets/images/page-bg.png";
+import leftBg from "../../../assets/images/page-bg-1.png";
 
 export default function Page2({ list, page, autoPlay }) {
   const height = window.innerHeight;
   const [top, setTop] = useState(window.innerHeight);
+  const [scale, setScale] = useState(null);
   const [videoPosition, setVideoPosition] = useState(null);
   const [unit, setUnit] = useState(null);
   const [boxPosition, setBoxPosition] = useState({
@@ -28,6 +30,16 @@ export default function Page2({ list, page, autoPlay }) {
         2.5 * height
       )
     );
+
+    setScale(
+      scroll.linearFormula(
+        window.scrollY > height ? height : window.scrollY,
+        0.8,
+        1,
+        0,
+        height
+      )
+    );
     if (window.scrollY > 3.5 * height && window.scrollY < 4 * height) {
       setVideoPosition(
         window.scrollY > 4 * height
@@ -90,6 +102,7 @@ export default function Page2({ list, page, autoPlay }) {
     window.addEventListener("scroll", (e) => {
       const scrollY = window.scrollY;
       setTop(scroll.homeScrollHandler(page));
+      setScale(scaleHandler(scrollY));
       boxPositionHandler(scrollY);
       mobilePositionHandler(scrollY);
       if (window.scrollY > 2 * height && window.scrollY < 3.5 * height) {
@@ -192,6 +205,24 @@ export default function Page2({ list, page, autoPlay }) {
       setUnit(4);
     }
   };
+
+  const scaleHandler = (scrollY) => {
+    if (scrollY === 0) {
+      setScale(0.8);
+    } else if (scrollY > 0 && scrollY <= height) {
+      setScale(
+        scroll.linearFormula(
+          scrollY,
+          0.8,
+          1,
+          0,
+          height
+        )
+      );
+    } else {
+      setScale(1);
+    }
+  };
   return (
     <div
       onClick={(e) => e.stopPropagation()}
@@ -207,12 +238,14 @@ export default function Page2({ list, page, autoPlay }) {
               ? 90 - (window.scrollY / height) * 90
               : 0
             : 90
-        }deg)`,
+        }deg)  scale(${scale})`,
       }}
     >
       <div
         className={_.join(
-          ["relative shadow-2xl transform flex bg-white text-center"],
+          [
+            "relative shadow-2xl transform flex bg-white text-center overflow-hidden",
+          ],
           " "
         )}
         style={{
@@ -223,11 +256,12 @@ export default function Page2({ list, page, autoPlay }) {
       >
         <div className="w-1/2 h-full relative">
           <img
-            src={leftBg}
+            src={rightBg}
             alt=""
             // style={{
             //   transform: `rotate(-${boxPosition.rotate}deg))`,
             // }}
+            className="w-full"
           />
           <video
             className={_.join(
@@ -244,18 +278,24 @@ export default function Page2({ list, page, autoPlay }) {
             />
           </video>
         </div>
-
-        <div className="absolute left-5 top-5 h-40 w-40">
-          <img src={qrImage} alt="" />
+        <div className="w-1/2 h-full relative">
+          <img
+            src={leftBg}
+            alt=""
+            className="absolute w-full h-full left-0 top-0"
+          />
+          <div className="absolute left-5 top-5 h-40 w-40 z-10 bg-white">
+            <img src={qrImage} alt="" />
+          </div>
+          <div
+            className="absolute left-7 bg-black z-10"
+            style={{
+              height: (window.innerHeight * 9) / 25 - 40,
+              width: (window.innerHeight * 10) / 20 - 16,
+              bottom: (window.innerHeight * 9) / 30,
+            }}
+          ></div>
         </div>
-        <div
-          className="absolute left-7 bg-black"
-          style={{
-            height: (window.innerHeight * 9) / 25 - 40,
-            width: (window.innerHeight * 10) / 20 - 16,
-            bottom: (window.innerHeight * 9) / 30,
-          }}
-        ></div>
       </div>
       {/* mobile phone */}
       <Mobile

src/views/Home/Page3/index.js

@@ -17,7 +17,7 @@ export default function Page3({ list, page }) {
       className={_.join(
         [
           "fixed left-0 h-screen w-full pt-20 bg-white transition-opacity duration-1000 flex flex-row justify-center items-end",
-          top > 0 ? "opacity-0 z-0" : "opacity-100 z-30",
+          top > 0 ? "opacity-0" : "opacity-100 z-10",
         ],
         " "
       )}

src/views/Home/VideoTube/index.js

@@ -20,12 +20,12 @@ function VodTube({
   page,
   selectedVideo,
   info,
-  bookSection,
-  loading,
+  // bookSection,
+  // loading,
   getInfo,
-  categories,
-  setVideoActive,
-  allBooks,
+  // categories,
+  // setVideoActive,
+  // allBooks,
   theme,
 }) {
   const [top, setTop] = useState(window.innerHeight);

src/views/Home/index.js

@@ -33,7 +33,7 @@ export default function Home() {
   return (
     <div
       className="flex flex-col bg-white relative w-full rtl"
-      style={{ height: "800vh" }}
+      style={{ height: "850vh" }}
     >
       <Dots />
       <Navbar />