aetos sigil

app/routes/home.tsx

@@ -1,43 +1,167 @@
-import * as React from 'react';
+import * as React from "react";
-import Container from '@mui/material/Container';
+import Container from "@mui/material/Container";
-import Typography from '@mui/material/Typography';
+import Typography from "@mui/material/Typography";
-import Box from '@mui/material/Box';
+import Box from "@mui/material/Box";
-import Link from '@mui/material/Link';
+import Link from "@mui/material/Link";
-import { Link as ReactRouterLink } from 'react-router';
+import Grid from "@mui/material/Grid";
-import ProTip from '~/components/ProTip';
+import Paper from "@mui/material/Paper";
-import Copyright from '~/components/Copyright';
+
 
 export function meta() {
-  return [
+    return [
-    { title: 'Material UI - React Router example in TypeScript' },
+        {title: "Material UI - React Router example in TypeScript"},
-    {
+        {
-      name: 'description',
+            name: "description",
-      content: 'Welcome to Material UI - React Router example in TypeScript!',
+            content:
-    },
+                "Welcome to Material UI - React Router example in TypeScript!",
-  ];
+        },
+    ];
 }
 
+const services = {
+    media: [
+        {
+            name: "Jellyseerr",
+            url: "http://jellyseerr.aetoskia.com",
+            desc: "Request movies & TV shows",
+        },
+        // {
+        //   name: "Ombi",
+        //   url: "http://ombi.aetoskia.com",
+        //   desc: "Request movies & TV shows",
+        // },
+        {
+            name: "Sonarr",
+            url: "http://sonarr.aetoskia.com",
+            desc: "TV series management",
+        },
+        {
+            name: "Radarr",
+            url: "http://radarr.aetoskia.com",
+            desc: "Movie management",
+        },
+        {
+            name: "Prowlarr",
+            url: "http://prowlarr.aetoskia.com",
+            desc: "Indexer management",
+        },
+        {
+            name: "qBittorrent",
+            url: "http://qbit.aetoskia.com",
+            desc: "Download client & torrent manager",
+            external: true,
+        },
+    ],
+    core: [
+        {
+            name: "Gitea",
+            url: "http://gitea.aetoskia.com",
+            desc: "Hosted on Core Server",
+            external: true,
+        },
+    ],
+};
+
 export default function Home() {
-  return (
+    // @ts-ignore
-    <Container maxWidth="lg">
+    return (
-      <Box
+        <Container maxWidth="lg">
-        sx={{
+            <Box
-          my: 4,
+                sx={{
-          display: 'flex',
+                    minHeight: "100vh",
-          flexDirection: 'column',
+                    backgroundImage: "url('/aetos_sigil.jpg')",
-          justifyContent: 'center',
+                    backgroundSize: "cover",
-          alignItems: 'center',
+                    backgroundRepeat: "no-repeat",
-        }}
+                    backgroundPosition: "center",
-      >
+                    display: "flex",
-        <Typography variant="h4" component="h1" sx={{ mb: 2 }}>
+                    flexDirection: "column",
-          Material UI - Next.js App Router example in TypeScript
+                }}
-        </Typography>
+            >
-        <Link to="/about" color="secondary" component={ReactRouterLink}>
+                {/* Top section */}
-          Go to the about page
+                <Box sx={{py: 6, textAlign: "center"}}>
-        </Link>
+                    <Typography variant="h3" sx={{color: "success.main"}}>
-        <ProTip />
+                        Aetos Hideout
-        <Copyright />
+                    </Typography>
-      </Box>
+                </Box>
-    </Container>
+
-  );
+                {/* 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}}
+                    >
+                        Core Services
+                    </Typography>
+                    <Grid container spacing={3} justifyContent="center">
+                        {services.core.map((s) => (
+                            <Grid item xs={12} sm={6} md={4} key={s.name}>
+                                <Paper
+                                    elevation={3}
+                                    sx={{
+                                        p: 2,
+                                        textAlign: "center",
+                                        bgcolor: "#2d2d2d",
+                                        borderRadius: 2,
+                                    }}
+                                >
+                                    <Link
+                                        href={s.url}
+                                        target={s.external ? "_blank" : undefined}
+                                        rel="noopener"
+                                        underline="none"
+                                        sx={{fontSize: 18, fontWeight: "bold", color: "success.main"}}
+                                    >
+                                        {s.name}
+                                    </Link>
+                                    <Typography variant="body2" sx={{mt: 1, color: "#ccc"}}>
+                                        {s.desc}
+                                    </Typography>
+                                </Paper>
+                            </Grid>
+                        ))}
+                    </Grid>
+
+                    <Typography
+                        variant="h5"
+                        align="center"
+                        sx={{color: "warning.main", mt: 4, mb: 2}}
+                    >
+                        Media Services
+                    </Typography>
+                    <Grid container spacing={3} justifyContent="center">
+                        {services.media.map((s) => (
+                            <Grid component="div" item xs={12} sm={6} md={4} key={s.name}>
+                                <Paper
+                                    elevation={3}
+                                    sx={{
+                                        p: 2,
+                                        textAlign: "center",
+                                        bgcolor: "#2d2d2d",
+                                        borderRadius: 2,
+                                    }}
+                                >
+                                    <Link
+                                        href={s.url}
+                                        target={s.external ? "_blank" : undefined}
+                                        rel="noopener"
+                                        underline="none"
+                                        sx={{fontSize: 18, fontWeight: "bold", color: "success.main"}}
+                                    >
+                                        {s.name}
+                                    </Link>
+                                    <Typography variant="body2" sx={{mt: 1, color: "#ccc"}}>
+                                        {s.desc}
+                                    </Typography>
+                                </Paper>
+                            </Grid>
+                        ))}
+                    </Grid>
+                </Container>
+            </Box>
+        </Container>
+    );
 }

package-lock.json

@@ -7,10 +7,12 @@
       "name": "material-ui-react-router-ts",
       "dependencies": {
         "@emotion/cache": "latest",
-        "@emotion/react": "latest",
+        "@emotion/react": "^11.14.0",
         "@emotion/server": "latest",
-        "@emotion/styled": "latest",
+        "@emotion/styled": "^11.14.1",
-        "@mui/material": "latest",
+        "@mui/icons-material": "^7.3.2",
+        "@mui/material": "^7.3.2",
+        "@mui/system": "^7.3.2",
         "@react-router/node": "latest",
         "@react-router/serve": "latest",
         "isbot": "latest",
@@ -1104,6 +1106,31 @@
         "url": "https://opencollective.com/mui-org"
       }
     },
+    "node_modules/@mui/icons-material": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-7.3.2.tgz",
+      "integrity": "sha512-TZWazBjWXBjR6iGcNkbKklnwodcwj0SrChCNHc9BhD9rBgET22J1eFhHsEmvSvru9+opDy3umqAimQjokhfJlQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.28.3"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@mui/material": "^7.3.2",
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@mui/material": {
       "version": "7.3.2",
       "resolved": "https://registry.npmjs.org/@mui/material/-/material-7.3.2.tgz",

package.json

@@ -10,10 +10,12 @@
   },
   "dependencies": {
     "@emotion/cache": "latest",
-    "@emotion/react": "latest",
+    "@emotion/react": "^11.14.0",
     "@emotion/server": "latest",
-    "@emotion/styled": "latest",
+    "@emotion/styled": "^11.14.1",
-    "@mui/material": "latest",
+    "@mui/icons-material": "^7.3.2",
+    "@mui/material": "^7.3.2",
+    "@mui/system": "^7.3.2",
     "@react-router/node": "latest",
     "@react-router/serve": "latest",
     "isbot": "latest",