bottomNavbarProblem

// layout.tsx
interface IRootLayoutProps {
  children: ReactNode;
}

const RootLayout = ({ children }: IRootLayoutProps) => {
  return (
    <html lang="en">
      <body className={`dark ${inter.className}`}>
        <MaxWidthWrapper className="">{children}</MaxWidthWrapper>
        <Navbar />
      </body>
    </html>
  );
};

// MaxWidthWrapper.tsx
interface IMaxWidthWrapperProps {
  className?: string;
  children: ReactNode;
}

const MaxWidthWrapper = ({ className, children }: IMaxWidthWrapperProps) => {
  return (
    <div
      className={cn(
        "mx-auto w-full max-w-screen-xl px-2.5 md:px-20",
        className
      )}
    >
      {children}
    </div>
  );
};

// page.tsx
const Home = () => {
  return (
    <main className="h-screen grid grid-flow-col grid-cols-3">
      <div className="flex flex-col gap-y-1 self-center justify-self-start">
        <h1 className="font-semibold text-5xl">/.</h1>
        <h2 className="font-light text-lg">subtitle</h2>
      </div>
      <div className="flex flex-row gap-y-1 self-center justify-self-center col-span-2">
        <h1 className="font-semibold text-5xl">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum sequi
          consequatur repellat harum iusto eligendi eum nisi fugit ex
          voluptates, modi officiis voluptatibus sunt quaerat odio recusandae
          minus, molestiae aperiam! Natus vel provident voluptas voluptate
          animi, dolor assumenda cupiditate odit aperiam obcaecati ratione
          adipisci est facere et maiores quos cumque. Quo nesciunt doloremque,
          deserunt et necessitatibus consequuntur cum animi laborum. Sint ad
          soluta aliquam officiis neque fugit dicta rem obcaecati itaque ex,
          enim in iusto temporibus iste dolorum doloremque eligendi ducimus sit
          vero alias deleniti architecto eum! Earum, corporis inventore.
        </h1>
      </div>
    </main>
  );
};