landing page updated
This commit is contained in:
225
src/Components/HowItWorks.jsx
Normal file
225
src/Components/HowItWorks.jsx
Normal file
@@ -0,0 +1,225 @@
|
||||
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;
|
||||
Reference in New Issue
Block a user