refactor: replace dice roller with menu button in home page

src/app/page.tsx

@@ -1,31 +1,11 @@
-"use client";
+import MenuButton from "@/components/MenuButton";
-import { useEffect, useRef, useState } from "react";
-import dynamic from "next/dynamic";
-import type { DiceRollerHandle, RollResult } from "@/components/DiceRoller";
-import { Button } from "@/components/DiceSelector";
-
-const DiceRoller = dynamic(() => import("@/components/DiceRoller"), {
-  ssr: false,
-});
 
 export default function Home() {
-  const rollerRef = useRef<DiceRollerHandle>(null);
-
-  const [savedRolls, setSavedRolls] = useState([])
-
   return (
-    <>
+    <div className="flex flex-col h-screen">
-      <div className="relative bg-bg w-screen h-screen">
+      <main className="flex-1 flex flex-col items-center justify-center gap-6">
-        <div className="absolute left-0 bottom-0">
+        <MenuButton text="Characters" url="/characters" />
-          <Button rollerRef={rollerRef} />
+      </main>
-        </div>
+    </div>
-        <div className="absolute right-0 top-0">
-          {savedRolls.map((roll, i) => (
-            <div key={i}>test</div>
-          ))}
-        </div>
-      </div>
-      <DiceRoller ref={rollerRef} />
-    </>
   );
 }