feat(services): style fix

src/components/HomepageFeatures/index.tsx

@@ -33,14 +33,24 @@ const PrivateServicesList: ServiceItem[] = [
     ),
   },
   {
-    title: "Cloud",
+    title: "Code",
-    Svg: require("@site/static/img/undraw_cloud_tjo_space.svg").default,
+    Svg: require("@site/static/img/undraw_code_tjo_space.svg").default,
     description: (
       <>
-        Use <a href="https://cloud.tjo.space">cloud.tjo.space</a> Nextcloud
+        Use <a href="https://code.tjo.space">cloud.tjo.space</a> Gitea server as
-        server as a personal cloud to store your <b>Photos</b>, <b>Videos</b>,
+        a Git repository and CI/CD system.
-        <b>Files</b>, <b>Calendar</b>, <b>Contacts</b> as well as share all that
+      </>
-        with other users of tjo.space or anyone else.
+    ),
+  },
+  {
+    title: "Paperless",
+    Svg: require("@site/static/img/undraw_paperless_tjo_space.svg").default,
+    description: (
+      <>
+        Use <a href="https://paperless.tjo.space">paperless.tjo.space</a>{" "}
+        Paperless server to archive your documents and make them searchable. Can
+        be connected to your email provider so that all attachments are
+        autmatically archived.
       </>
     ),
   },
@@ -125,7 +135,7 @@ const UpcomingServicesList: ServiceItem[] = [
 
 function Service({ title, Svg, description }: ServiceItem) {
   return (
-    <div className={clsx("col col--4")}>
+    <div className={clsx("col col--4 service")}>
       <div className="text--center">
         <Svg className={styles.featureSvg} role="img" />
       </div>
@@ -142,19 +152,19 @@ export default function HomepageFeatures(): JSX.Element {
     <section className={styles.features}>
       <div className="container">
         <h3>Public Services</h3>
-        <div className="row">
+        <div className={clsx("row", styles.row)}>
           {PublicServicesList.map((props, idx) => (
             <Service key={idx} {...props} />
           ))}
         </div>
         <h3>Private Services</h3>
-        <div className="row">
+        <div className={clsx("row", styles.row)}>
           {PrivateServicesList.map((props, idx) => (
             <Service key={idx} {...props} />
           ))}
         </div>
         <h3>Upcoming Services (not yet available)</h3>
-        <div className="row">
+        <div className={clsx("row", styles.row)}>
           {UpcomingServicesList.map((props, idx) => (
             <Service key={idx} {...props} />
           ))}

src/components/HomepageFeatures/styles.module.css

@@ -5,6 +5,10 @@
   width: 100%;
 }
 
+.row {
+  justify-content: center;
+}
+
 .featureSvg {
   height: 200px;
   width: 200px;