rubix/src/pages/BuildPage.jsx

import BuildBanner from "../components/BuildPage/BuildBanner";
import WhyBuild from "../components/BuildPage/WhyBuild";
import Solve from "../components/BuildPage/Solve";
import Tools from "../components/BuildPage/Tools";
import Connect from "../components/BuildPage/Connect";
import { useEffect, useState } from "react";
// import Footer from "../components/Footer/Footer";
import LearnMore from "../components/BuildPage/LearnMore";
import ToolMobile from "../components/MobileComponent/ToolMobile";
import MobileSolve from "../components/MobileComponent/MobileSolve";
import { useGetBuildPageQuery } from "../Redux/slice/bannerSlice";

const BuildPage = () => {
  const { data, isLoading } = useGetBuildPageQuery();
  const buildBanner = data?.data?.data;
  console.log(buildBanner);

  const [windowWidth, setWindowWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => {
      setWindowWidth(window.innerWidth);
    };

    window.addEventListener("resize", handleResize);

    return () => {
      window.removeEventListener("resize", handleResize);
    };
  }, []);

  useEffect(() => {
    // Scroll to the top of the page when the component mounts
    window.scrollTo(0, 0);
  }, []);

  const isMobile = windowWidth <= 996;

  return (
    <>
      <BuildBanner data={buildBanner} isLoading={isLoading} />
      <WhyBuild />
      {!isMobile ? <Solve /> : <MobileSolve />}
      {!isMobile ? <Tools /> : <ToolMobile />}
      <Connect />
      <LearnMore />
    </>
  );
};

export default BuildPage;