blueberry-website/app/page.tsx

"use client";
import { useEffect, useState } from "react";
import { MobileLanding, DesktopLanding } from "@/components/landing_page";

export default function Home() {
  const [isMobile, setIsMobile] = useState(false); // start as null

  useEffect(() => {
    const handleResize = () => {
      const aspectRatio = window.innerWidth / window.innerHeight;
      console.log("Aspect Ratio:", aspectRatio);
      setIsMobile(aspectRatio < 1);
    };

    handleResize();
    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);
  return (
    <div
      id="main container"
      className="font-['Space_Grotesk'] flex flex-col items-center grow"
    >
      {isMobile ? <MobileLanding /> : <DesktopLanding />}
    </div>
  );
}