ADD: projects

components/Button/Button.css

@@ -8,7 +8,8 @@
     outline: 3px solid var(--color-black);
     box-shadow: 0 0 0 0 var(--color-orange);
     border-radius: 99999px;
-    width: max-content;
+    text-align: center;
+    white-space: nowrap;
 
     &:hover {
         box-shadow: 0 0 0 6px var(--color-orange);

components/Customers/Customers.vue

@@ -1,8 +1,8 @@
 <style scoped src="./Customers.css"/>
 
 <template>
-  <section class="Customers content">
-    <h2>Kunden <span class="highlight">&</span> Projekte</h2>
+  <section id="customers" class="Customers content">
+    <h2>Kunden <span class="highlight">&</span> Projekte.</h2>
     <h3>Meine bisherigen Geschäftpartner</h3>
     <div class="customer-list margin-top default-gap">
       <a v-for="customer in customers" :href="customer.link" target="_blank" rel="noopener noreferrer">

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>

components/Skills/Skills.css

@@ -8,14 +8,6 @@
         flex-wrap: wrap;
     }
 
-    & article {
-        padding: 2rem;
-        background: var(--color-black);
-        border-radius: 20px;
-        min-width: 300px;
-        flex: 1;
-    }
-
     & .bottom {
         align-items: center;
     }

components/Skills/Skills.vue

@@ -3,8 +3,9 @@
 <template>
   <section class="Skills content">
     <h2>Meine Expertise.</h2>
+    <h3>Dies sind meine <span class="highlight">Spezialgebiete</span> - aber ich bin flexibel!</h3>
     <div class="skills-wrapper margin-top default-gap">
-      <article class="z-2 flex-col default-gap" v-for="skill in skills">
+      <article class="z-2 card flex-col default-gap" v-for="skill in skills">
         <h3>{{skill.title}}</h3>
         <main>
           <p v-for="(t, i) in skill.text" :class="[i === skills.length - 1 && 'margin-top bold']">{{t}}</p>