added ServiceList.tsx for handling individual services

app/routes/home.tsx

@@ -6,6 +6,7 @@ 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 [
@@ -52,44 +53,6 @@ export default function Home() {
 
         <Box sx={{ height: "60vh", overflowY: "auto", p: 2 }}>
           <Services />
-          <Container
-            maxWidth="lg"
-            sx={{ bgcolor: "#1a1a1a", borderRadius: 3, p: 3, boxShadow: 6 }}
-          >
-            {Object.entries(services).map(([sectionName, serviceList]) => (
-              <React.Fragment key={sectionName}>
-                <Typography
-                  variant="h5"
-                  align="center"
-                  sx={{ color: "warning.main", mt: 4, mb: 2 }}
-                >
-                  {sectionName.charAt(0).toUpperCase() + sectionName.slice(1)} Services
-                </Typography>
-                <Grid container spacing={3} justifyContent="center">
-                  {serviceList.map((s) => (
-                    <Paper
-                      key={s.name}
-                      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>
-              </React.Fragment>
-            ))}
-          </Container>
         </Box>
       </Box>
     </Container>