cleaner view for services

app/components/Services.tsx

@@ -21,7 +21,6 @@ const items = [
       { name: "Jellyseerr", url: "http://jellyseerr.aetoskia.com", desc: "Summon films and series from the digital void.", external: true },
       { name: "Sonarr", url: "http://sonarr.aetoskia.com", desc: "Keep the endless chronicles of TV under iron control.", external: true },
       { name: "Radarr", url: "http://radarr.aetoskia.com", desc: "Command the legions of cinema, enforce cinematic order.", external: true },
-      { name: "qBit", url: "http://qbit.aetoskia.com", desc: "Torrent war engine, fetching data across the nether realms.", external: true },
     ],
     description:
       "Behold the archive of visual legends, where the eternal campaigns of film and series march forth in eternal crusade against chaos and forgetfulness.",
@@ -108,7 +107,6 @@ export function MobileLayout({
         ))}
       </Box>
       <Card variant="outlined">
-        <ServiceList serviceList={selectedFeature.serviceList} />
         <Box sx={{ px: 2, pb: 2 }}>
           <Typography
             gutterBottom
@@ -120,6 +118,7 @@ export function MobileLayout({
             {selectedFeature.description}
           </Typography>
         </Box>
+        <ServiceList serviceList={selectedFeature.serviceList} />
       </Card>
     </Box>
   );
@@ -188,9 +187,7 @@ export default function Services() {
                     },
                   ]}
                 >
-                  {icon}
+                  <Typography variant="h6">{icon} {title}</Typography>
-
-                  <Typography variant="h6">{title}</Typography>
                   <Typography variant="body2">{description}</Typography>
                 </Box>
               </Box>

app/routes/home.tsx

@@ -1,12 +1,7 @@
 import * as React from "react";
 import Container from "@mui/material/Container";
-import Typography from "@mui/material/Typography";
 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 Services from "~/components/Services";
-import ServiceList from "~/components/ServiceList";
 
 export function meta() {
   return [
@@ -37,11 +32,13 @@ const services = {
 
 export default function Home() {
   return (
-    <Container maxWidth="lg">
+    <Container
+      maxWidth={false}
+    >
       <Box
         sx={{
           minHeight: "100vh",
-          backgroundImage: "url('/extended_sigil.png')",
+          backgroundImage: "url('/header_sigil.png')",
           backgroundSize: "cover",
           backgroundRepeat: "no-repeat",
           backgroundPosition: "top center",
@@ -51,7 +48,7 @@ export default function Home() {
       >
         <Box sx={{ flex: 1 }} />
 
-        <Box sx={{ height: "60vh", overflowY: "auto", p: 2 }}>
+        <Box sx={{ height: "60vh", overflowY: "auto" }}>
           <Services />
         </Box>
       </Box>