aetos sigil

app/routes/home.tsx

@@ -5,14 +5,11 @@ 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() {
     return [
-    { title: "Material UI - React Router example in TypeScript" },
+        {title: "Material UI - React Router example in TypeScript"},
         {
             name: "description",
             content:
@@ -69,21 +66,33 @@ export default function Home() {
     // @ts-ignore
     return (
         <Container maxWidth="lg">
-      {/* Dashboard section */}
-      <Box sx={{ py: 6 }}>
-        <Typography
-          variant="h3"
-          align="center"
-          gutterBottom
-          sx={{ color: "success.main" }}
+            <Box
+                sx={{
+                    minHeight: "100vh",
+                    backgroundImage: "url('/aetos_sigil.jpg')",
+                    backgroundSize: "cover",
+                    backgroundRepeat: "no-repeat",
+                    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"
-          sx={{ color: "warning.main", mt: 4, mb: 2 }}
+                        sx={{color: "warning.main", mt: 4, mb: 2}}
                     >
                         Core Services
                     </Typography>
@@ -104,11 +113,11 @@ export default function Home() {
                                         target={s.external ? "_blank" : undefined}
                                         rel="noopener"
                                         underline="none"
-                  sx={{ fontSize: 18, fontWeight: "bold", color: "success.main" }}
+                                        sx={{fontSize: 18, fontWeight: "bold", color: "success.main"}}
                                     >
                                         {s.name}
                                     </Link>
-                <Typography variant="body2" sx={{ mt: 1, color: "#ccc" }}>
+                                    <Typography variant="body2" sx={{mt: 1, color: "#ccc"}}>
                                         {s.desc}
                                     </Typography>
                                 </Paper>
@@ -119,7 +128,7 @@ export default function Home() {
                     <Typography
                         variant="h5"
                         align="center"
-          sx={{ color: "warning.main", mt: 4, mb: 2 }}
+                        sx={{color: "warning.main", mt: 4, mb: 2}}
                     >
                         Media Services
                     </Typography>
@@ -140,17 +149,18 @@ export default function Home() {
                                         target={s.external ? "_blank" : undefined}
                                         rel="noopener"
                                         underline="none"
-                  sx={{ fontSize: 18, fontWeight: "bold", color: "success.main" }}
+                                        sx={{fontSize: 18, fontWeight: "bold", color: "success.main"}}
                                     >
                                         {s.name}
                                     </Link>
-                <Typography variant="body2" sx={{ mt: 1, color: "#ccc" }}>
+                                    <Typography variant="body2" sx={{mt: 1, color: "#ccc"}}>
                                         {s.desc}
                                     </Typography>
                                 </Paper>
                             </Grid>
                         ))}
                     </Grid>
+                </Container>
             </Box>
         </Container>
     );