Function HomeIndex

src/Components/Home/home.jsx:45–92

()

}

export function HomeIndex() {
    const [width, setWidth] = useState(window.innerWidth);
    const [height, setHeight] = useState(window.innerHeight);
    const nodeRef = useRef(null);
    useEffect(() => {
        const handleResize = () => {
            setWidth(window.innerWidth);
            setHeight(window.innerHeight);
        };
        const node = nodeRef.current;
        node.addEventListener("click", clickHandler);
        window.addEventListener("resize", handleResize);
        return () => {
            node.removeEventListener("click", clickHandler);
            window.removeEventListener("resize", handleResize);
        };
    }, []);
    return (
        <Box
            ref={nodeRef}
            sx={{
                bgcolor: (theme) => theme.palette.background.default,
                height: "100%",
                width: "100%",
                display: 'flex',
                justifyContent: 'center',
            }}
        >
            {/* full-viewport soft wash — gives the frosted cards smooth tonal
                variation to refract. It's fixed so it spans edge to edge instead
                of being clipped by the 1700px content cap. */}
            <Box aria-hidden sx={{
                position: 'fixed',
                top: 60,
                left: 0,
                right: 0,
                bottom: 0,
                zIndex: 0,
                pointerEvents: 'none',
                background: (theme) => theme.palette.mode === 'dark'
                    ? 'linear-gradient(155deg, #141B26 0%, #0F1318 52%, #12171F 100%)'
                    : 'linear-gradient(155deg, #EEF4FD 0%, #D8E4F6 48%, #E7ECF6 100%)',
            }}/>
            <WorldMap width={width} height={height}/>
            <HomeIndexContent/>
        </Box>
    )
}

function HomeIndexContent() {
    const [pageIndex, setPageIndex] = useState(0);