From e43366566efc2dcb0137bc4996863a0af5d45c47 Mon Sep 17 00:00:00 2001
From: webfussel <fiona@webfussel.de>
Date: Tue, 21 May 2024 12:01:11 +0200
Subject: [PATCH] ADD: projects

---
 Globals.css                        | 21 +++++++
 app.vue                            |  1 +
 components/Button/Button.css       |  3 +-
 components/Customers/Customers.vue |  4 +-
 components/Services/Services.css   | 43 +++++++++++++++
 components/Services/Services.vue   | 88 ++++++++++++++++++++++++++++++
 components/Skills/Skills.css       |  8 ---
 components/Skills/Skills.vue       |  3 +-
 8 files changed, 159 insertions(+), 12 deletions(-)
 create mode 100644 components/Services/Services.css
 create mode 100644 components/Services/Services.vue

diff --git a/Globals.css b/Globals.css
index 1a4cf9c..af59b09 100644
--- a/Globals.css
+++ b/Globals.css
@@ -126,6 +126,27 @@ span.highlight {
     color: var(--color-orange);
 }
 
+span.chip {
+    background: var(--color-orange);
+    border-radius: 999px;
+    font-size: 1rem;
+    color: var(--color-black);
+    height: max-content;
+    padding: .5em 1em;
+}
+
+.card {
+    padding: 2rem;
+    background: var(--color-black);
+    border-radius: 20px;
+    min-width: 300px;
+    flex: 1;
+}
+
+.color-icon {
+    filter: invert(50%) sepia(84%) saturate(868%) hue-rotate(1deg) brightness(103%) contrast(100%);
+}
+
 .content {
     position: relative;
     z-index: 100;
diff --git a/app.vue b/app.vue
index bfc6e3b..bb1c5f6 100644
--- a/app.vue
+++ b/app.vue
@@ -6,6 +6,7 @@
     <Intro />
     <Skills />
     <Customers />
+    <Services />
   </div>
 </template>
 <script setup lang="ts">
diff --git a/components/Button/Button.css b/components/Button/Button.css
index 0ae0566..964d68c 100644
--- a/components/Button/Button.css
+++ b/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);
diff --git a/components/Customers/Customers.vue b/components/Customers/Customers.vue
index 282374d..3e8d96e 100644
--- a/components/Customers/Customers.vue
+++ b/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">
diff --git a/components/Services/Services.css b/components/Services/Services.css
new file mode 100644
index 0000000..598cb7f
--- /dev/null
+++ b/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;
+        }
+    }
+}
diff --git a/components/Services/Services.vue b/components/Services/Services.vue
new file mode 100644
index 0000000..5fe42a0
--- /dev/null
+++ b/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>
diff --git a/components/Skills/Skills.css b/components/Skills/Skills.css
index 2a188ae..05d1ade 100644
--- a/components/Skills/Skills.css
+++ b/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;
     }
diff --git a/components/Skills/Skills.vue b/components/Skills/Skills.vue
index 641639d..9310a20 100644
--- a/components/Skills/Skills.vue
+++ b/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>