ADD: projects

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>