From 8395825aea5fb7b45a20e28360ada402eb97d39c Mon Sep 17 00:00:00 2001
From: webfussel <fiona@webfussel.de>
Date: Tue, 21 May 2024 14:29:49 +0200
Subject: [PATCH] ADD: Calendar links

---
 components/Button/Button.vue     | 20 +++++++++++++++++---
 components/Intro/Intro.vue       |  2 +-
 components/Services/Services.vue |  5 ++++-
 components/Skills/Skills.vue     |  2 +-
 4 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/components/Button/Button.vue b/components/Button/Button.vue
index 4078e55..3d8eb99 100644
--- a/components/Button/Button.vue
+++ b/components/Button/Button.vue
@@ -1,15 +1,29 @@
 <style scoped src="./Button.css"/>
 
 <template>
-  <button :label="label" class="Button">
+  <component :is="type" v-bind="actualProps()" class="Button">
     {{ label }}
-  </button>
+  </component>
 </template>
 
 <script setup lang="ts">
+
 type Props = {
+  type ?: 'a' | 'button'
+  href ?: string
   label : string
 }
 
-defineProps<Props>()
+const props = withDefaults(defineProps<Props>(), {
+  type : 'a'
+})
+
+const actualProps = () => {
+  if (props.type === 'a') {
+    return {
+      href: props.href,
+      target: props.href!.startsWith('https://') ? '_blank' : undefined,
+    }
+  }
+}
 </script>
diff --git a/components/Intro/Intro.vue b/components/Intro/Intro.vue
index a6fd59d..ee41242 100644
--- a/components/Intro/Intro.vue
+++ b/components/Intro/Intro.vue
@@ -21,7 +21,7 @@
       <p class="fulltext">
         Du brauchst großartige Komponenten und saubere Schnittstellen?
       </p>
-      <Button class="cta" label="Lass mal reden" />
+      <Button href="#services" class="cta" label="Lass mal reden" />
     </div>
     <div class="intro-img">
       <img src="/profile.webp" alt="Bild von mir" />
diff --git a/components/Services/Services.vue b/components/Services/Services.vue
index cfb3205..25cba64 100644
--- a/components/Services/Services.vue
+++ b/components/Services/Services.vue
@@ -14,7 +14,7 @@
         </h3>
         <span class="chip">{{service.availability}}</span>
         <p>{{service.smallClaim}}</p>
-        <Button class="cta" :label="service.button" />
+        <Button :href="service.link" 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" />
@@ -49,6 +49,7 @@ const services = [
     availability: 'Frei',
     smallClaim: 'Du hast einen Bug, aber weißt nicht woher? Kein Ding.',
     button: 'Jetzt untersuchen lassen',
+    link: 'https://tidycal.com/webfussel/bug-research',
     list: [
       'Untersuchung des Source Code',
       'Konkrete Behebungsempfehlung',
@@ -61,6 +62,7 @@ const services = [
     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: [
       'Aufstellung der Anforderungen',
       'Untersuchung geeigneter Technologien',
@@ -74,6 +76,7 @@ const services = [
     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',
diff --git a/components/Skills/Skills.vue b/components/Skills/Skills.vue
index 9310a20..779dd26 100644
--- a/components/Skills/Skills.vue
+++ b/components/Skills/Skills.vue
@@ -14,7 +14,7 @@
     </div>
     <div class="bottom flex-col margin-top default-gap">
       <h3>Du brauchst was davon? Kein Ding.</h3>
-      <Button class="cta" label="Lass mal reden" />
+      <Button href="#services" class="cta" label="Lass mal reden" />
     </div>
   </section>
 </template>