full integration of services in Services.tsx

app/components/Services.tsx

@@ -7,32 +7,16 @@ import Container from '@mui/material/Container';
 import Typography from '@mui/material/Typography';
 import { styled } from '@mui/material/styles';
 
-import DevicesRoundedIcon from '@mui/icons-material/DevicesRounded';
+import PermMediaIcon from '@mui/icons-material/PermMedia';
-import EdgesensorHighRoundedIcon from '@mui/icons-material/EdgesensorHighRounded';
+import CodeIcon from '@mui/icons-material/Code';
-import ViewQuiltRoundedIcon from '@mui/icons-material/ViewQuiltRounded';
+import MonitorHeartIcon from '@mui/icons-material/MonitorHeart';
-import ServiceList from "~/components/ServiceList";
 
-const services = {
+import ServiceList from "~/components/ServiceList";
-  media: [
-    { 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 },
-  ],
-  codebase: [
-    { name: "Gitea", url: "http://gitea.aetoskia.com", desc: "Forge and safeguard code like a sacred relic.", external: true },
-    { name: "Registry", url: "http://registry.aetoskia.com", desc: "Monitor core constructs of the digital empire.", external: true },
-    { name: "Drone", url: "http://drone.aetoskia.com", desc: "Automaton architect, building pipelines of perfection.", external: true },
-  ],
-  monitoring: [
-    { name: "Portainer", url: "http://portainer.aetoskia.com", desc: "Oversee the fleet of containers with unyielding vigilance.", external: true },
-  ],
-};
 
 const items = [
   {
-    icon: <ViewQuiltRoundedIcon />,
+    icon: <PermMediaIcon />,
-    title: 'Dashboard',
+    title: 'The Vox Sanctum',
     serviceList: [
       { 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 },
@@ -40,27 +24,28 @@ const items = [
       { name: "qBit", url: "http://qbit.aetoskia.com", desc: "Torrent war engine, fetching data across the nether realms.", external: true },
     ],
     description:
-      'This item could provide a snapshot of the most important metrics or data points related to the product.',
+      "Behold the archive of visual legends, where the eternal campaigns of film and series march forth in eternal crusade against chaos and forgetfulness.",
   },
   {
-    icon: <EdgesensorHighRoundedIcon />,
+    icon: <CodeIcon />,
-    title: 'Mobile integration',
+    title: 'The Forge Conclave',
     serviceList: [
       { name: "Gitea", url: "http://gitea.aetoskia.com", desc: "Forge and safeguard code like a sacred relic.", external: true },
       { name: "Registry", url: "http://registry.aetoskia.com", desc: "Monitor core constructs of the digital empire.", external: true },
       { name: "Drone", url: "http://drone.aetoskia.com", desc: "Automaton architect, building pipelines of perfection.", external: true },
     ],
     description:
-      'This item could provide information about the mobile app version of the product.',
+      "The bastion of creation — where code is forged in the fires of discipline, guarded like relics, and deployed with unyielding precision to uphold the empire's might.",
   },
   {
-    icon: <DevicesRoundedIcon />,
+    icon: <MonitorHeartIcon />,
-    title: 'Available on all platforms',
+    title: 'The Vigilant Watch',
     serviceList: [
       { name: "Portainer", url: "http://portainer.aetoskia.com", desc: "Oversee the fleet of containers with unyielding vigilance.", external: true },
+      { name: "Traefik", url: "http://traefik.aetoskia.com", desc: "Marshal your gateways and protect the flow between realms.", external: true },
     ],
     description:
-      'This item could let users know the product is available on all platforms, such as web, mobile, and desktop.',
+      "Eyes ever watchful, guarding the realm’s sanctity — these sentinels oversee the flow of life and command the paths between digital dominions.",
   },
 ];
 
@@ -221,7 +206,6 @@ export default function Services() {
           sx={{
             display: { xs: 'none', sm: 'flex' },
             width: { xs: '100%', md: '70%' },
-            height: 'var(--items-image-height)',
           }}
         >
           <Card