howitworksupdated

src/Components/HowItWorks.jsx

@@ -2,10 +2,11 @@ import { Box, Container, Image, Text } from "@chakra-ui/react";
 import React, { useEffect, useRef, useState } from "react";
 import patter1 from "../assets/asset3.png";
 import patter2 from "../assets/asset1.png";
+import signup from "../assets/signup.png";
+import browse from "../assets/browse.png";
+import invest from "../assets/invest.png";
+import monitor from "../assets/monitor.png";
 import cellFrame from "../assets/cellFrame.png";
-import cellScreen1 from "../assets/cellScreen1.png";
-import cellScreen2 from "../assets/cellScreen2.png";
-// import cellScreen3 from "../assets/cellScreen3.png";
 
 const HowItWorks = () => {
   const [spanHeight, setSpanHeight] = useState(25);
@@ -146,7 +147,7 @@ const HowItWorks = () => {
               position={"relative"}
               height={"100%"}
               backgroundColor={"green.50"}
-              w={300}
+              w={31}
               rounded={56}
               overflow={"hidden"}
               zIndex={1}
@@ -158,7 +159,7 @@ const HowItWorks = () => {
                 position={"absolute"}
                 top={0}
                 left={1}
-                src={cellScreen1}
+                src={signup}
                 w={"99%"}
                 h={"100%"}
                 zIndex={-1}
@@ -175,7 +176,7 @@ const HowItWorks = () => {
                 position={"absolute"}
                 top={0}
                 left={1}
-                src={cellScreen2}
+                src={invest}
                 w={"99%"}
                 h={"100%"}
                 zIndex={-1}
@@ -191,9 +192,9 @@ const HowItWorks = () => {
                 position={"absolute"}
                 top={0}
                 left={1}
-                src={cellScreen1}
-                w={"99%"}
-                h={"100%"}
+                src={browse}
+                w={"100%"}
+                h={"80%"}
                 zIndex={-1}
                 // transform={spanHeight === 75 ? "translateX(0px)": "translateY(-100%)"}
                 opacity={spanHeight === 75 ? 1: 0}
@@ -206,7 +207,7 @@ const HowItWorks = () => {
                 position={"absolute"}
                 top={0}
                 left={1}
-                src={cellScreen2}
+                src={monitor}
                 w={"99%"}
                 h={"100%"}
                 zIndex={-1}