ADD: A LOT of pricing chart stuff

Added new pricing chart layout

app/components/Booking.vue

@@ -0,0 +1,150 @@
+<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 <span class="highlight">keinerlei Abos oder versteckte Kosten</span>.
+      Aus Transparenzgründen sei aber gesagt, dass sich <span class="highlight">*alle Preise zzgl. 19 % Umsatzsteuer</span>. verstehen.</p>
+
+    <article class="z-2 card flex-col margin-top font-big text-center">
+      <p>Derzeit habe ich <span class="highlight">keine freien Plätze</span>.</p>
+      <p class="margin-top-small">Das ändert sich ab <span class="highlight">01. Juli 2025</span>.</p>
+    </article>
+
+    <h3 class="margin-top-big">One off Projekte</h3>
+    <p class="margin-top-small">Manchmal brauchen wir alle einfach nur eine Kleinigkeit und will sich nicht lange binden. Das ist natürlich
+      völlig in Ordnung und genau deshalb biete ich dir die Möglichkeit mich gezielt für <span class="highlight">kleinere Projekte</span> zu buchen.</p>
+
+    <div class="Pricing margin-top">
+      <article v-for="(service, index) in oneOff" :class="{ 'z-3-all': index === 1, 'z-2-all': index !== 1}">
+        <header>
+          <strong>{{service.title}}</strong>
+          <p>{{service.smallClaim}}</p>
+          <div aria-hidden="true" class="bg-icon">
+            <Icon :name="`ph:${service.icon}-thin`" size="1.5em" mode="svg" />
+          </div>
+        </header>
+        <main>
+          <div class="list-container">
+            <ul class="list" v-for="(list, index) in service.list" :key="index">
+              <li v-for="point in list">
+                <Icon class="point-icon" name="ph:caret-circle-double-right-duotone" size="1.5em" mode="svg" />
+                <span class="label">{{ point }}</span>
+              </li>
+            </ul>
+          </div>
+        </main>
+        <footer>
+          <span class="price">{{service.price.pre ? `${service.price.pre} ` : '' }}{{typeof service.price.value === 'number' ? intl.format(service.price.value) : service.price.value}}</span>
+          <div class="button-wrapper z-2">
+            <Button :href="service.link" aria-label="Zur externen Seite Terminbuchung" :design="index === 1 ? 'default' : 'white'">
+              {{ service.button }}
+            </Button>
+          </div>
+        </footer>
+      </article>
+    </div>
+
+    <article class="z-2 card flex-col gap-default margin-top">
+      <h3>Keinen Bock auf Telen? Understandable.</h3>
+      <p>Dann schreib mir einfach gerne direkt eine E-Mail an
+        <ClientOnly><a class="mail" href="mailto:anfragen@webfussel.de">anfragen@webfussel.de<Icon name="ph:envelope-duotone" aria-hidden="true" alt="mail icon" size="1.2em" mode="svg" /></a></ClientOnly>
+      </p>
+      <h3>Keine Kohle? Kommt vor.</h3>
+      <p>Meld dich trotzdem. Eventuell ist dein Projekt ja cool genug, dass ich dir da auch entsprechend entgegenkommen kann. :)</p>
+    </article>
+    <h3 id="network" 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>
+  </section>
+</template>
+
+<script setup lang="ts">
+type Service = {
+  title: string
+  smallClaim: string
+  price: {
+    value: number | string
+    pre?: string
+  }
+  icon: string
+  button: string
+  link: string
+  list: string[][]
+}
+
+const intl = new Intl.NumberFormat(
+    'de-DE',
+    {
+      style: 'currency',
+      currency: 'EUR',
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 0,
+    })
+
+const oneOff : Service[] = [
+  {
+    title: 'Quick Check',
+    price: {
+      value: 149,
+    },
+    smallClaim: 'A11y, bugs, schlechter Code.',
+    icon: 'magnifying-glass',
+    button: 'Jetzt untersuchen',
+    link: 'https://tidycal.com/webfussel/quick-check',
+    list: [
+        [
+          'Untersuchung des Quellcodes',
+          'Untersuchung der Performance',
+          'Tipps zu CSS und Best Practices',
+        ],
+        [
+          'Behebung unkompliziert nachbuchen',
+          'Für selbst gebaute Seiten',
+        ]
+    ],
+  }, {
+    title: 'Projektbuchung',
+    price: {
+      pre: 'ab',
+      value: 999,
+    },
+    smallClaim: 'Deine Vision.',
+    icon: 'trend-up',
+    button: 'Jetzt durchstarten',
+    link: 'https://tidycal.com/webfussel/project-booking',
+    list: [
+        [
+          'Anforderungsanalyse',
+          'Kontinuierliche Projekt-Updates',
+          'Fixe Kosten und Feature-Sets',
+        ],
+        [
+          'Nur 50 % Projektpreis als Anzahlung',
+          'Gestaffelte Abrechnung nach Milestones',
+        ]
+    ],
+  }, {
+    title: 'Enterprise',
+    price: {
+      value: 'Auf Anfrage',
+    },
+    smallClaim: 'Für die ganz großen Sachen.',
+    icon: 'building-office',
+    button: 'Frag nach!',
+    link: 'https://tidycal.com/webfussel/project-booking',
+    list: [
+        [
+          'Anforderungsanalyse',
+          'Kontinuierliche Projekt-Updates',
+          'Fixe Kosten und Feature-Sets',
+        ],
+        [
+          'Nur 50 % Projektpreis als Anzahlung',
+          'Gestaffelte Abrechnung nach Milestones'
+        ],
+    ],
+  },
+]
+
+</script>