Introduced "Base" page as a component

app/pages/base.tsx

@@ -0,0 +1,17 @@
+import type { PropsWithChildren } from "react";
+import { Footer } from "~/components/footer";
+import { Header } from "~/components/header";
+
+export default function Base({ children }: PropsWithChildren) {
+    return (
+        <>
+            <div className="flex flex-col pt-20 min-h-dvh">
+                <div className="flex-1">
+                    {children}
+                </div>
+                <Footer />
+            </div>
+            <Header />
+        </>
+    );
+}

app/pages/gamemodes.tsx

@@ -1,5 +1,5 @@
-import { Header } from "~/components/header"
+import Base from "./base"
 
 export function GamemodesPage() {
-    return (<main><Header /></main>)
+    return <Base>GAMEMODES</Base>
 }

app/pages/home.tsx

@@ -1,21 +1,19 @@
-import { Header } from "~/components/header";
-import { Typography } from "@heroui/react";
-import { Surface } from "@heroui/react";
+import { Typography, Surface } from "@heroui/react";
 import background from "../images/background.jpg";
 import skins from "../images/skins.jpg";
 import maps from "../images/maps.jpg";
 import gamemodes from "../images/gamemodes.webp";
-import { Footer } from "~/components/footer";
+import Base from "./base";
 
 export function HomePage() {
     return (
-        <main>
+        <Base>
             <img
-                className="fixed object-cover h-full w-full -z-10 blur-xs"
+                className="fixed top-0 object-cover h-full w-full -z-10 blur-xs"
                 src={background}
                 alt="Background"
             />
-            <div className="flex flex-col items-center pt-20">
+            <div className="flex flex-col items-center">
                 <Surface
                     variant="tertiary"
                     className="flex shadow-lg shadow-indigo-900 rounded-2xl p-0 w-7/10 my-4 justify-end"
@@ -27,7 +25,10 @@ export function HomePage() {
                     />
                     <div className="absolute rounded-2xl w-2/3 right-1/8 h-full bg-linear-to-r from-surface-tertiary via-surface-tertiary to-transparent"></div>
                     <div className="absolute w-full h-full flex flex-col p-4">
-                        <Typography.Heading className="w-full text-shadow-lg" level={1}>
+                        <Typography.Heading
+                            className="w-full text-shadow-lg"
+                            level={1}
+                        >
                             Inventory management, the way you like it.
                         </Typography.Heading>
                         <div className="flex-1" />
@@ -82,7 +83,10 @@ export function HomePage() {
                     />
                     <div className="absolute rounded-2xl w-2/3 right-1/8 h-full bg-linear-to-r from-surface-tertiary via-surface-tertiary to-transparent"></div>
                     <div className="absolute w-full h-full flex flex-col p-4">
-                        <Typography.Heading className="w-full text-shadow-lg" level={1}>
+                        <Typography.Heading
+                            className="w-full text-shadow-lg"
+                            level={1}
+                        >
                             Different gamemodes, different ways to have fun.
                         </Typography.Heading>
                         <div className="flex-1" />
@@ -98,8 +102,6 @@ export function HomePage() {
                     </div>
                 </Surface>
             </div>
-            <Header />
-            <Footer />
-        </main>
+        </Base>
     );
 }

app/pages/inventory.tsx

@@ -1,5 +1,5 @@
-import { Header } from "~/components/header"
+import Base from "./base"
 
 export function InventoryPage() {
-    return (<main><Header /></main>)
+    return <Base>INVENTORY</Base>
 }

app/pages/maps.tsx

@@ -1,5 +1,5 @@
-import { Header } from "~/components/header"
+import Base from "./base"
 
 export function MapsPage() {
-    return (<main><Header /></main>)
+    return <Base>MAPS</Base>
 }