correct spacer for sigil to be always visible

app/routes/home.tsx

@@ -68,8 +68,8 @@ export default function Home() {
         <Container maxWidth="lg">
             <Box
                 sx={{
-                    minHeight: "100vh",
+                    minHeight: "150vh",
-                    backgroundImage: "url('/aetos_sigil.jpg')",
+                    backgroundImage: "url('/extended_sigil.png')",
                     backgroundSize: "cover",
                     backgroundRepeat: "no-repeat",
                     backgroundPosition: "center",
@@ -77,28 +77,35 @@ export default function Home() {
                     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 */}
+                {/* Bottom dashboard: only 50% height of viewport */}
-                <Container maxWidth="lg" sx={{mb: 4}}>
+                <Box
-                    <Typography
+                    sx={{
-                        variant="h5"
+                        height: "80vh", // 50% of viewport height
-                        align="center"
+                        overflowY: "auto", // scroll if content overflows
-                        sx={{color: "warning.main", mt: 4, mb: 2}}
+                        p: 2,
+                    }}
+                >
+                    <Container
+                        maxWidth="lg"
+                        sx={{
+                            bgcolor: "#1a1a1a", // dark background
+                            borderRadius: 3,
+                            p: 3,
+                            boxShadow: 6,
+                        }}
                     >
-                        Core Services
+                        <Typography
-                    </Typography>
+                            variant="h5"
-                    <Grid container spacing={3} justifyContent="center">
+                            align="center"
-                        {services.core.map((s) => (
+                            sx={{color: "warning.main", mt: 4, mb: 2}}
-                            <Grid item xs={12} sm={6} md={4} key={s.name}>
+                        >
+                            Core Services
+                        </Typography>
+                        <Grid container spacing={3} justifyContent="center">
+                            {services.core.map((s) => (
                                 <Paper
                                     elevation={3}
                                     sx={{
@@ -121,20 +128,18 @@ export default function Home() {
                                         {s.desc}
                                     </Typography>
                                 </Paper>
-                            </Grid>
+                            ))}
-                        ))}
+                        </Grid>
-                    </Grid>
 
-                    <Typography
+                        <Typography
-                        variant="h5"
+                            variant="h5"
-                        align="center"
+                            align="center"
-                        sx={{color: "warning.main", mt: 4, mb: 2}}
+                            sx={{color: "warning.main", mt: 4, mb: 2}}
-                    >
+                        >
-                        Media Services
+                            Media Services
-                    </Typography>
+                        </Typography>
-                    <Grid container spacing={3} justifyContent="center">
+                        <Grid container spacing={3} justifyContent="center">
-                        {services.media.map((s) => (
+                            {services.media.map((s) => (
-                            <Grid component="div" item xs={12} sm={6} md={4} key={s.name}>
                                 <Paper
                                     elevation={3}
                                     sx={{
@@ -157,11 +162,12 @@ export default function Home() {
                                         {s.desc}
                                     </Typography>
                                 </Paper>
-                            </Grid>
+                            ))}
-                        ))}
+                        </Grid>
-                    </Grid>
+                    </Container>
-                </Container>
+                </Box>
             </Box>
         </Container>
+
     );
 }