aetos sigil

app/routes/home.tsx

@@ -5,9 +5,6 @@ import Box from "@mui/material/Box";
 import Link from "@mui/material/Link";
 import Grid from "@mui/material/Grid";
 import Paper from "@mui/material/Paper";
-import { Link as ReactRouterLink } from "react-router";
-import ProTip from "~/components/ProTip";
-import Copyright from "~/components/Copyright";
 
 
 export function meta() {
@@ -69,17 +66,29 @@ export default function Home() {
     // @ts-ignore
     return (
         <Container maxWidth="lg">
-      {/* Dashboard section */}
+            <Box
-      <Box sx={{ py: 6 }}>
+                sx={{
-        <Typography
+                    minHeight: "100vh",
-          variant="h3"
+                    backgroundImage: "url('/aetos_sigil.jpg')",
-          align="center"
+                    backgroundSize: "cover",
-          gutterBottom
+                    backgroundRepeat: "no-repeat",
-          sx={{ color: "success.main" }}
+                    backgroundPosition: "center",
+                    display: "flex",
+                    flexDirection: "column",
+                }}
             >
+                {/* Top section */}
+                <Box sx={{py: 6, textAlign: "center"}}>
+                    <Typography variant="h3" sx={{color: "success.main"}}>
                         Aetos Hideout
                     </Typography>
+                </Box>
 
+                {/* Spacer pushes bottom part down */}
+                <Box sx={{flex: 1}}/>
+
+                {/* Bottom dashboard */}
+                <Container maxWidth="lg" sx={{mb: 4}}>=
                     <Typography
                         variant="h5"
                         align="center"
@@ -151,6 +160,7 @@ export default function Home() {
                             </Grid>
                         ))}
                     </Grid>
+                </Container>
             </Box>
         </Container>
     );