ADD: projects

components/Services/Services.css

@@ -0,0 +1,43 @@
+.Services {
+    background-image: radial-gradient(circle at 100vw 100vh, rgba(255,145,0,0.2) 0%, rgba(0,0,0,0) 63%, rgba(0,0,0,0) 100%);
+    background-color: var(--color-orange-black);
+    background-repeat: no-repeat;
+
+    .service-list {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: stretch;
+    }
+
+    & article {
+        flex-grow: 1;
+        flex-shrink: 0;
+        flex-basis: clamp(400px, calc(33% - 3rem), 500px);
+        position: relative;
+
+        & .chip {
+            position: absolute;
+            right: -1rem;
+            top: calc(-1rem - 3px);
+        }
+
+        & header {
+            display: flex;
+        }
+
+        & ul {
+            list-style: none;
+            gap: 1rem;
+
+            & li {
+                display: flex;
+                align-items: center;
+                gap: 1rem;
+            }
+        }
+
+        & .extra {
+            margin-top: auto;
+        }
+    }
+}

components/Services/Services.vue

@@ -0,0 +1,88 @@
+<style scoped src="./Services.css"/>
+
+<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 keinerlei Abos oder versteckte Kosten. Aus Transparenzgründen sei
+      aber gesagt, dass sich alle Preise <span class="highlight">zzgl. 19% Umsatzsteuer</span> 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 class="cta" :label="service.button" />
+        <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>
+        <div class="extra flex-col">
+          <small v-for="extra in service.extra">* {{ extra }}</small>
+        </div>
+      </article>
+    </div>
+    <h3 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>
+    <div class="network-list">
+
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import check from 'iconoir/icons/regular/double-check.svg'
+
+const services = [
+  {
+    title: 'Bug Research',
+    price: '149 € / Einmalig',
+    availability: 'Frei',
+    smallClaim: 'Du hast einen Bug, aber weißt nicht woher? Kein Ding.',
+    button: 'Jetzt untersuchen lassen',
+    list: [
+      'Untersuchung des Source Code',
+      'Konkrete Behebungsempfehlung',
+      'Ergebnisse in spätestens 7 Tagen',
+    ],
+    extra: [
+      'Behebung je nach Schwere gegen Aufpreis möglich'
+    ]
+  }, {
+    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',
+    list: [
+      'Arbeiten nach agilen Prinzipien',
+      'Teilnahme an agilen Meetings',
+      'Monatliche Rechnungsstellung',
+      'Kündigungsfrist von einer Woche',
+    ],
+    extra: [
+      'Mindestabnahme 160 Stunden'
+    ]
+  }, {
+    title: 'Projektbuchung',
+    price: 'ab 5.499 € je nach Umfang',
+    availability: '3 Slots Frei',
+    smallClaim: 'Umsetzung deiner Vision. Von einzelnen Tickets bis hin zu kompletten Anwendungen.',
+    button: 'Jetzt durchstarten',
+    list: [
+      'Aufstellung der Anforderungen',
+      'Untersuchung geeigneter Technologien',
+      'Regelmäßiger Austausch',
+      'Klare Kostenübersicht'
+    ],
+    extra: [
+      'Anzahlung 50% des Projektpreises',
+      'Enddatum je nach Umfang'
+    ]
+  }
+]
+</script>