tanami/src/Components/HowItWorks.jsx

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 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);
  const intervalRef = useRef(null); // Use ref to store interval ID

  useEffect(() => {
    intervalRef.current = setInterval(() => {
      setSpanHeight((prevHeight) => (prevHeight >= 100 ? 25 : prevHeight + 25));
    }, 3000);

    return () => clearInterval(intervalRef.current); // Clean up the interval on component unmount
  }, []);

  const handleBoxClick = (index) => {
    const newHeight = (index + 1) * 25;
    setSpanHeight(newHeight);
    clearInterval(intervalRef.current); // Clear the interval when a box is clicked
  };


  return (
    <Box id="how-it-works" position={"relative"} backgroundColor={"#ffffff"} h={"120vh"} mt={28} mb={10}>
      <Image src={patter1} position={"absolute"} top={0} left={0} w={100} />
      <Container
        display={"flex"}
        flexDirection={"column"}
        maxW="container.xl"
        h={"100%"}
        p={4}
      >
        <Text
          mt={4}
          fontSize={34}
          fontWeight={"normal"}
          fontFamily={"Roca Two"}
          as={"h3"}
          textAlign={"center"}
          w={"100%"}
        >
          How does it work?
        </Text>

        <Box w={"100%"} display={"flex"} h={"100%"} p={32} pt={24} pb={0}>
          <Box
            w={"50%"}
            display={"flex"}
            justifyContent={"flex-start"}
            alignItems={"center"}
          >
            <Box position={"relative"}>
              <Box
                as="span"
                w={2}
                height={`${spanHeight}%`}
                position={"absolute"}
                transition={"height 0.5s ease-in-out"}
                backgroundColor={"#004118"}
              />
              <Box cursor={'pointer'} onClick={() => handleBoxClick(0)} p={12} pt={4} pb={2}>
                <Text as={"h4"} fontWeight={"500"} color={"#004118"}>
                  Sign-up
                </Text>
                <Text
                  as={"p"}
                  fontSize={"md"}
                  fontWeight={400}
                  color={"gray.500"}
                >
                  Create an account with Tanami and get approved in under 10
                  minutes.
                </Text>
              </Box>

              <Box cursor={'pointer'}  
          onClick={() => handleBoxClick(1)} p={12} pt={4} pb={2}>
                <Text as={"h4"} fontWeight={"500"} color={"#004118"}>
                  Browse
                </Text>
                <Text
                  as={"p"}
                  fontSize={"md"}
                  fontWeight={400}
                  color={"gray.500"}
                >
                  Select from top-tier funds approved on the Tanami platform.
                </Text>
              </Box>

              <Box cursor={'pointer'} 
          onClick={() => handleBoxClick(2)} p={12} pt={4} pb={2}>
                <Text as={"h4"} fontWeight={"500"} color={"#004118"}>
                  Invest
                </Text>
                <Text
                  as={"p"}
                  fontSize={"md"}
                  fontWeight={400}
                  color={"gray.500"}
                >
                  Fund investments using a bank transfer, debit or credit card.
                </Text>
              </Box>

              <Box  cursor={'pointer'} 
          onClick={() => handleBoxClick(3)} p={12} pt={4} pb={2}>
                <Text as={"h4"} fontWeight={"500"}>
                  Monitor
                </Text>
                <Text
                  as={"p"}
                  fontSize={"md"}
                  fontWeight={400}
                  color={"gray.500"}
                >
                  Stay up to date with the performance of your investment
                  portfolio, live on the app.
                </Text>
              </Box>
            </Box>
          </Box>

          <Box
            w={"50%"}
            display={"flex"}
            justifyContent={"flex-end"}
            pe={10}
            position={"relative"}
          >
            <Image
              src={patter2}
              position={"absolute"}
              top={-84}
              right={-4}
              width={220}
            />

            <Box
              position={"relative"}
              height={"100%"}
              backgroundColor={"green.50"}
              w={300}
              rounded={56}
              overflow={"hidden"}
              zIndex={1}
            >
              <Image src={cellFrame} w={"100%"} />


              <Image
                position={"absolute"}
                top={0}
                left={1}
                src={cellScreen1}
                w={"99%"}
                h={"100%"}
                zIndex={-1}
                // transform={spanHeight === 25 ? "translateX(-0px)": "translateY(-100%)"}
                opacity={spanHeight === 25 ? 1: 0}
                transition={"0.5s all"}
                
              />


              

<Image
                position={"absolute"}
                top={0}
                left={1}
                src={cellScreen2}
                w={"99%"}
                h={"100%"}
                zIndex={-1}
                // transform={spanHeight === 50 ? "translateX(0px)": "translateY(-100%)"}
                opacity={spanHeight === 50 ? 1: 0}
                transition={"0.5s all"}
              />


              

<Image
                position={"absolute"}
                top={0}
                left={1}
                src={cellScreen1}
                w={"99%"}
                h={"100%"}
                zIndex={-1}
                // transform={spanHeight === 75 ? "translateX(0px)": "translateY(-100%)"}
                opacity={spanHeight === 75 ? 1: 0}
                transition={"0.5s all"}
              />


              
<Image
                position={"absolute"}
                top={0}
                left={1}
                src={cellScreen2}
                w={"99%"}
                h={"100%"}
                zIndex={-1}
                // transform={spanHeight === 100 ? "translateX(0px)": "translateY(-100%)"}
                opacity={spanHeight === 100 ? 1: 0}
                transition={"0.5s all"}
              />
            </Box>
          </Box>
        </Box>
      </Container>
    </Box>
  );
};

export default HowItWorks;