ADD: Calendar links

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>

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" />

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',

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>