Added usage of MobileCard type on Service page

pages/services.tsx

@@ -4,17 +4,29 @@ import Dockerode from 'dockerode';
 import { ReactElement } from 'react'
 import useSWR from 'swr';
 import { CardContentService, PageContentBox, PageDescription, PageTitle } from '../components/styles/content';
+import { ServiceCardMobile } from '../components/styles/cards/mobile';
 import ServiceList from '../public/pages.json';
+import useWindowSize from '../components/windowsize';
 
 const fetcher = (url: string) => fetch(url).then((res) => res.json())
 
 function Services() {
   const { initialData, fullData, loadingFull, error } = useServices();
+  const isMobile = useWindowSize();
 
   let content: ReactElement = <></>;
 
   if (error) { content = <div>Error loading data</div> }
   else if (loadingFull) {
+    if (isMobile) {
+      content =
+        <PageContentBox>
+          {initialData?.map((item: Service) => (
+            <ServiceCardMobile key={item.name} content={item} />
+          ))}
+        </PageContentBox>
+    }
+    else {
       content =
         <PageContentBox>
           {initialData?.map((item: Service) => (
@@ -22,7 +34,17 @@ function Services() {
           ))}
         </PageContentBox>
     }
+  }
   else if (fullData) {
+    if (isMobile) {
+      content =
+        <PageContentBox>
+          {fullData.map((item: Service) => (
+            <ServiceCardMobile key={item.name} content={item} />
+          ))}
+        </PageContentBox>
+    }
+    else {
       content =
         <PageContentBox>
           {fullData.map((item: Service) => (
@@ -30,6 +52,7 @@ function Services() {
           ))}
         </PageContentBox>
     }
+  }
   else {
     content = <div>Error loading data</div>
   }