criação do menu

pages/game/index.tsx

@@ -97,7 +97,7 @@ export default function Game() {
                 <img className={filter ? styles.filter : styles.image} src={`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/dream-world/${pokemonNumber + 1}.svg`} alt="" />
               </div>
 
-              <Div>Who is that Pokémon ?</Div>
+              <Div>Who's That Pokémon?</Div>
 
 
               <div className={styles.answers}>

pages/index.module.css

@@ -0,0 +1,16 @@
+.menu {
+    margin: auto;
+    max-width: 400px;
+    padding: 50px 0px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 120px;
+}
+
+.options {
+    min-width: 300px;
+    display: flex;
+    flex-direction: column;
+    gap: 50px;
+}

pages/index.tsx

@@ -1,8 +1,21 @@
 import type { NextPage } from 'next'
+import styles from './index.module.css';
+import Div from '../components/div';
+import Link from 'next/link';
+import Image from 'next/image';
+import logo from '../public/logo.png'
 
 const Home: NextPage = () => {
   return (
-    <>ola</>
+    <div className={styles.menu}>
+      <Image src={logo} alt="logo"></Image>
+      <div className={styles.options}>
+        <Link href='/game'><Div button={true}>Iniciar</Div></Link>
+        <Link href='/about'><Div button={true}>Sobre</Div></Link>
+        <Link href='/settings'><Div button={true}>Opções</Div></Link>
+
+      </div>
+    </ div>
   )
 }