feat: better layout in a lot of places

routes/index.tsx

@@ -2,6 +2,7 @@ import { Head } from "$fresh/runtime.ts";
 import { MainLayout } from "@components/layouts/main.tsx";
 import { Card } from "@components/Card.tsx";
 import { PageProps } from "$fresh/server.ts";
+import { menu } from "@lib/menus.ts";
 
 export default function Home(props: PageProps) {
   return (
@@ -10,17 +11,16 @@ export default function Home(props: PageProps) {
         <title>app</title>
       </Head>
       <MainLayout url={props.url}>
-        <div class="flex flex-wrap justify-center items-center gap-4 px-4">
-          <Card
-            title="🍽️ Recipes"
-            image="/placeholder.svg"
-            link="/recipes"
-          />
-          <Card
-            title="🍿 Movies"
-            image="/placeholder.svg"
-            link="/movies"
-          />
+        <div class="flex flex-wrap items-center gap-4 px-4">
+          {menu.map((m) => {
+            return (
+              <Card
+                title={m.name}
+                image="/placeholder.svg"
+                link={m.link}
+              />
+            );
+          })}
         </div>
       </MainLayout>
     </>