fix: optimize CSS

components/Services.vue

@@ -0,0 +1,119 @@
+<template>
+  <section id="services" class="Services content">
+    <h2>Services.</h2>
+    <h3>Du hast also beschlossen, dass du <span class="highlight">meine Hilfe</span> brauchst. Cool!</h3>
+    <p class="margin-top">Hinter meinen Angeboten gibt es <span class="highlight">keinerlei Abos oder versteckte Kosten</span>.
+      Aus Transparenzgründen sei aber gesagt, dass sich alle Preise zzgl. 19 % Umsatzsteuer verstehen.</p>
+    <div class="service-list margin-top default-gap">
+      <article v-for="service in services" class="z-2 card flex-col default-gap">
+        <h3 class="flex-col default-gap">
+          <span>{{service.title}}</span>
+          <span class="highlight">{{service.price}}</span>
+        </h3>
+        <span class="chip">{{service.availability}}</span>
+        <p>{{service.smallClaim}}</p>
+        <Button :href="service.link" class="cta" :label="service.button" aria-label="Zur externen Seite von zur Terminbuchung" />
+        <ul class="flex-col">
+          <li v-for="point in service.list">
+            <img class="color-icon" :src="check" aria-hidden="true" alt="checkmark icon" />
+            <span>{{point}}</span>
+          </li>
+        </ul>
+      </article>
+    </div>
+    <h3 id="network" class="margin-top-big">Mein Netzwerk</h3>
+    <p class="margin-top">Doch auch wenn ich mal voll ausgelastet bin - keine Sorge!
+      Mein <span class="highlight">Netzwerk an Profis</span> kann dir sicher auch weiterhelfen.
+    </p>
+    <client-only>
+      <div class="network-list margin-top">
+        <div class="scroll-container default-gap">
+          <Person ref="persons" v-for="person in network" v-bind="person" />
+        </div>
+      </div>
+    </client-only>
+  </section>
+</template>
+
+<script setup lang="ts">
+import check from 'iconoir/icons/regular/double-check.svg'
+import type { Person } from '#components'
+
+const services = [
+  {
+    title: 'Bug Research',
+    price: '99 € / Einmalig',
+    availability: 'Frei',
+    smallClaim: 'Du hast einen Bug, aber weißt nicht woher? Kein Ding.',
+    button: 'Jetzt untersuchen',
+    link: 'https://tidycal.com/webfussel/bug-research',
+    list: [
+      'Untersuchung des Quellcodes',
+      'Konkrete Lösungsvorschläge',
+      'Ergebnisse innerhalb von 7 Tagen',
+      'Behebung unkompliziert nachbuchen'
+    ],
+  }, {
+    title: 'Projektbuchung',
+    price: 'ab 999 € je nach Umfang',
+    availability: '3 Slots Frei',
+    smallClaim: 'Umsetzung deiner Vision. Von einzelnen Tickets bis hin zu kompletten Anwendungen.',
+    button: 'Jetzt durchstarten',
+    link: 'https://tidycal.com/webfussel/project-booking',
+    list: [
+      'Anforderungsanalyse',
+      'Kontinuierliche Projekt-Updates',
+      'Fixe Kosten und Feature-Sets',
+      'Nur 50 % Projektpreis als Anzahlung'
+    ],
+  }, {
+    title: 'Stundenbuchung',
+    availability: 'Frei ab 16.12.24',
+    price: '105 € / Stunde',
+    smallClaim: 'Du brauchst einfach Unterstützung im Team, bis sich der Trubel legt?',
+    button: 'Jetzt buchen',
+    link: 'https://tidycal.com/webfussel/hourly-booking',
+    list: [
+      'Flexible Aufgabenverteilung',
+      'Arbeiten nach agilen Prinzipien',
+      'Monatliche Abrechnung',
+      'Kündigungsfrist von einer Woche',
+      'Flexible Buchung ab 80 Stunden',
+    ],
+  }
+]
+
+
+const shuffle = <T>(unshuffled : T[]) => unshuffled
+    .map(value => ({ value, sort: Math.random() }))
+    .sort((a, b) => a.sort - b.sort)
+    .map(({ value }) => value)
+
+const network = shuffle([
+  {
+    name: 'Robert Janus',
+    img: '/img/network/robert.webp',
+    tags: ['Digitalberatung', 'Webentwicklung', 'eCommerce'],
+    flavour: 'Website, SEO und Conversions. Auf einen Klick.',
+    link: 'https://robertjanus.de/webertoire',
+  }, {
+    name: 'Matthias Lehmann',
+    img: '/img/network/matthias.webp',
+    tags: ['Onlineportale für Patienten', 'Kunden', 'Mitarbeiter'],
+    flavour: 'Software die macht, was DU willst!',
+    link: 'https://mind-deploy.de',
+  }, {
+    name: 'Maximilian Schluer',
+    img: '/img/network/maximilian.webp',
+    tags: ['iOS Development', 'Software-QA'],
+    flavour: 'Kann dein iOS-Team unterstützen oder dein Software-Qualitätsproblem lösen – egal welches.',
+    link: 'https://max-schluer.de',
+  }, {
+    name: 'Maria Salcedo',
+    img: '/img/network/maria.webp',
+    tags: ['Backend', 'DevOps', 'Architektur'],
+    flavour: 'Effizient und kommunikativ. "You build it, you run it."',
+    link: 'https://masagu.dev',
+  },
+])
+</script>