add: updated some stuff

assets/css/services.css

@@ -4,14 +4,14 @@
     background-repeat: no-repeat;
 
     .service-list {
-        display: flex;
-        flex-wrap: wrap;
-        align-items: stretch;
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+        grid-template-rows: repeat(4, auto);
 
         & article {
-            flex-grow: 1;
-            flex-shrink: 0;
-            flex-basis: clamp(350px, calc(33% - 3rem), 500px);
+            grid-row: span 4;
+            display: grid;
+            grid-template-rows: subgrid;
             position: relative;
 
             & .chip {
@@ -52,20 +52,20 @@
     }
 }
 
+@media (width < 1640px) {
+    .Services {
+        & .service-list article:last-child {
+            grid-column: 1/-1;
+        }
+    }
+}
+
 @media (width < 600px) {
     .Services {
-        & .service-list {
-            width: 80vw;
-
-            & article {
-                flex-basis: 100%;
-            }
-        }
-
         & .network-list {
             --height: 380px;
             & article {
-                flex-basis: 80vw;
+                flex-basis: 70vw;
             }
         }
     }

components/Services.vue

@@ -45,28 +45,34 @@
 
 <script setup lang="ts">
 import check from 'iconoir/icons/regular/double-check.svg'
-import type { Person } from '#components'
 import mail from 'iconoir/icons/regular/mail.svg'
 
+const slots : number = 0
+const slotsLabel = `${slots} ${slots === 1 ? `Slot` : `Slots`} frei`
+
+const freeFromDate = new Date(2025, 0, 1)
+const intl = new Intl.DateTimeFormat('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric'})
+const readableDate = intl.format(freeFromDate)
+
 const services = [
   {
-    title: 'Bug Research',
-    price: '99 € / Einmalig',
+    title: 'Quick Check',
+    price: '149 € / Einmalig',
     availability: 'Frei',
-    smallClaim: 'Du hast einen Bug, aber weißt nicht woher? Kein Ding.',
+    smallClaim: 'Du hast eine Homepage und willst mal drüber schauen lassen?',
     button: 'Jetzt untersuchen',
-    link: 'https://tidycal.com/webfussel/bug-research',
+    link: 'https://tidycal.com/webfussel/quick-check',
     list: [
       'Untersuchung des Quellcodes',
-      'Konkrete Lösungsvorschläge',
-      'Ergebnisse innerhalb von 7 Tagen',
+      'Untersuchung der Performance',
+      'Tipps zu CSS und Best Practices',
       'Behebung unkompliziert nachbuchen',
-      'JavaScript, TypeScript, Vue oder Nuxt',
+      'Für selbst gebaute Seiten',
     ],
   }, {
     title: 'Projektbuchung',
     price: 'ab 999 € je nach Umfang',
-    availability: '1 Slot Frei',
+    availability: slotsLabel,
     smallClaim: 'Umsetzung deiner Vision. Von einzelnen Tickets bis hin zu kompletten Anwendungen.',
     button: 'Jetzt durchstarten',
     link: 'https://tidycal.com/webfussel/project-booking',
@@ -78,7 +84,7 @@ const services = [
     ],
   }, {
     title: 'Stundenbuchung',
-    availability: 'Frei ab 01.01.2025',
+    availability: `Frei ab ${readableDate}`,
     price: '105 € / Stunde',
     smallClaim: 'Du brauchst einfach Unterstützung im Team, bis sich der Trubel legt?',
     button: 'Jetzt buchen',