reza added mobile box

src/App.scss

@@ -2,6 +2,9 @@
 @import "./views/Home/Page1/index.scss";
 @import "./views/Home/Page2/index.scss";
 
+*{
+  font-family: Regular;
+}
 
 .App {
   direction: rtl;

src/components/Dots/index.js

@@ -1,7 +1,7 @@
 import _ from "lodash";
 import React from "react";
 
-export default function Dots({ count, active, setPage }) {
+export default function Dots({ count = 7, active, setPage }) {
   return (
     <div className="flex flex-col items-center fixed z-50 top-1/2 lg:right-5 xl:right-10 transform -translate-y-1/2">
       {[...Array(count)].map((dot, index) => (

src/components/FloatWidthMouse/index.js

@@ -14,12 +14,12 @@ export default function FloatWithMouse() {
     <div
       className="absolute rounded-full"
       style={{
-        left: left - 350,
-        top: top - 350,
-        width: 700,
-        height: 700,
+        left: left - 500,
+        top: top - 500,
+        width: 1000,
+        height: 1000,
         background:
-          "radial-gradient(circle, hsla(230, 100%, 87%, 1) 0%, hsla(230, 100%, 87%, 1) 0%, hsla(0, 0%, 100%, 0) 81%)",
+          "radial-gradient(circle, hsla(230, 100%, 87%, 1) 0%, hsla(230, 100%, 87%, 1) 0%, hsla(0, 0%, 100%, 0) 55%)",
       }}
     ></div>
   );

src/utils/scroll.js

@@ -7,10 +7,10 @@ class scroll {
       if (scrollY === 0) {
         return 0;
       } 
-      if(scrollY > 0 && scrollY < 2 * height) {
+      if(scrollY > 0 && scrollY < 7 * height) {
         return -scrollY;
       } 
-      if(scrollY === 2 * height){
+      if(scrollY === 7 * height){
         return  -height;
       }
     }else
@@ -21,7 +21,7 @@ class scroll {
       if (scrollY > 0 && scrollY < height) {
         return height - scrollY;
       } 
-      if(scrollY === 3 * height){
+      if(scrollY === 7 * height){
         return -1 * height;
       }
     }

src/views/Home/Page2/index.js

@@ -10,11 +10,35 @@ export default function Page2({ list, page }) {
     translateX: null,
     rotate: null,
   });
+  const [mobilePosition, setMobilePosition] = useState(null);
   useEffect(() => {
+    setMobilePosition(
+      boxPositionFormula(
+        window.scrollY > 3 * height ? 3 * height : window.scrollY,
+        -(window.innerHeight * 7) / 20,
+        1.37,
+        "increase"
+      )
+    );
     setBoxPosition({
-      translateY: boxPositionFormula(window.scrollY, 5, 7, "increase"),
-      translateX: boxPositionFormula(window.scrollY, 5, 7, "increase"),
-      rotate: boxPositionFormula(window.scrollY, 5, 10, "decrease"),
+      translateY: boxPositionFormula(
+        window.scrollY > 2 * height ? 2 * height : window.scrollY,
+        5,
+        7,
+        "increase"
+      ),
+      translateX: boxPositionFormula(
+        window.scrollY > 2 * height ? 2 * height : window.scrollY,
+        -12,
+        1.5,
+        "increase"
+      ),
+      rotate: boxPositionFormula(
+        window.scrollY > 2 * height ? 2 * height : window.scrollY,
+        5,
+        10,
+        "decrease"
+      ),
     });
     window.addEventListener("scroll", (e) => {
       setTop(scroll.homeScrollHandler(page));
@@ -27,7 +51,7 @@ export default function Page2({ list, page }) {
     if (scrollY <= height) {
       setBoxPosition({
         translateY: 5,
-        translateX: -12,
+        translateX: -15,
         rotate: 5,
       });
     } else if (scrollY > height && scrollY <= 2 * height) {
@@ -46,19 +70,46 @@ export default function Page2({ list, page }) {
     }
   };
 
-  const mobilePositionHandler = (scrollY) => {};
+  const mobilePositionHandler = (scrollY) => {
+    if (scrollY <= 2 * height) {
+      setMobilePosition(-70);
+    } else if (scrollY > 2 * height && scrollY <= 3 * height) {
+      setMobilePosition(
+        boxPositionFormula(
+          scrollY - height,
+          (-(window.innerHeight * 7) / 20 / window.innerWidth) * 100,
+          1.3,
+          "increase"
+        )
+      );
+    }
+  };
 
   const boxPositionFormula = (scrollY, first, speed, direction) => {
+    console.log(scrollY);
     if (direction === "increase") {
       return first + (((scrollY - height) / scrollY) * 100) / speed;
     } else {
       return first - (((scrollY - height) / scrollY) * 100) / speed;
     }
   };
+
+  // const mobilePositionFormula = (scrollY) => {
+  //   return - + ((scrollY - 2 * height) / height * 100);
+  // };
   return (
     <div
-      className={_.join(["home-page2 h-screen w-full fixed left-0"], " ")}
-      style={{ top: top }}
+      className={_.join(["home-page2 h-screen w-full fixed left-0 origin-top"], " ")}
+      style={{
+        top: top,
+        transform: `rotateX(${
+          window.scrollY > 0
+            ? window.scrollY <= height
+              ? 90 - (window.scrollY / height) * 90
+              : 0
+            : 90
+        }deg)`,
+      }}
     >
       <div
         className={_.join(
@@ -73,6 +124,19 @@ export default function Page2({ list, page }) {
       >
         <div className="absolute left-4 top-4 h-40 w-40 bg-red-500"></div>
       </div>
+      {/* mobile phone */}
+      <div
+        className="fixed border"
+        style={{
+          top: "10%",
+          height: (window.innerHeight * 7) / 10,
+          width: (window.innerHeight * 7) / 20,
+          left: mobilePosition + "%",
+          // transform: `translateX(-${(window.innerHeight * 7) / 40 - 84}px)`,
+        }}
+      >
+        {mobilePosition}
+      </div>
     </div>
   );
 }

src/views/Home/index.js

@@ -1,7 +1,6 @@
 import React, { useState, useEffect } from "react";
 import Navbar from "../../components/Navbar";
 
-
 import Page1 from "./Page1";
 import Page2 from "./Page2";
 import Page3 from "./Page3";
@@ -9,6 +8,7 @@ import Page4 from "./Page4";
 import Page5 from "./Page5";
 import Page6 from "./Page6";
 import Page7 from "./Page7";
+import Dots from "../../components/Dots";
 import { set } from "lodash";
 
 export default function Home() {
@@ -17,6 +17,7 @@ export default function Home() {
       className="flex flex-col bg-white relative w-full"
       style={{ height: "700vh"}}
     >
+      <Dots page={1} />
       <Navbar />
       <Page1 page={1} />
       <Page2 page={2} />