ADD: A LOT of pricing chart stuff

Added new pricing chart layout

app/components/Flatrate.vue

@@ -0,0 +1,128 @@
+<template>
+  <section id="services" class="Services content">
+    <h2>Prepaid Flatrates.</h2>
+    <h3>Genieße fusselige Qualität ohne groß herumzurechnen.</h3>
+
+    <p class="margin-top-small">Bei dir fällt ständig was an oder du hast ein langlaufendes Projekt, bei dem du immer wieder mal Unterstützung brauchst? Kein Ding.
+      Hier gibt's die <span class="highlight">Entwickler-Flat</span> für planbare Kosten und On-Demand-Entwicklung.</p>
+
+    <div class="Pricing margin-top">
+      <article v-for="(service, index) in flatrate" :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>
+          <ul class="cols">
+            <li v-for="point in service.list">
+              <span class="value">{{ typeof point.value === 'number' ? intl.format(point.value) : point.value }}</span>
+              <span class="label">{{ point.label }}</span>
+            </li>
+          </ul>
+        </main>
+        <footer>
+<!--          <span class="price">{{intl.format(service.price)}}</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>
+  </section>
+</template>
+
+<script setup lang="ts">
+type Service = {
+  title: string
+  smallClaim: string
+  icon: string
+  button: string
+  link: string
+  list: {
+    label: string
+    value: string | number
+  }[]
+}
+
+const intl = new Intl.NumberFormat(
+  'de-DE',
+  {
+    style: 'currency',
+    currency: 'EUR',
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0,
+  })
+
+
+const flatrate : Service[] =
+    [
+      {
+        title: 'Casual',
+        smallClaim: 'Für kleine Aufgaben nebenbei.',
+        icon: 'baby-carriage',
+        button: 'Jetzt klar machen',
+        link: 'https://tidycal.com/webfussel/flatrate-casual',
+        list: [
+          {
+            label: 'Ticket gleichzeitig',
+            value: '1',
+          },
+          {
+            label: 'Erreichbarkeit',
+            value: 'Ganz okay',
+          },
+          {
+            label: 'Monatlich',
+            value: 2950,
+          },
+        ],
+      },
+      {
+        title: 'Gold-Fussel',
+        smallClaim: 'Wenn\'s mal wieder zu viel wird.',
+        icon: 'coins',
+        button: 'Jetzt Gold schürfen',
+        link: 'https://tidycal.com/webfussel/flatrate-gold-fussel',
+        list: [
+          {
+            label: 'Tickets gleichzeitig',
+            value: '2',
+          },
+          {
+            label: 'Erreichbarkeit',
+            value: 'Mo - Fr',
+          },
+          {
+            label: 'Monatlich',
+            value: 4950,
+          },
+        ],
+      },
+      {
+        title: 'Big Chonker',
+        smallClaim: 'Für die richtig großen Sachen.',
+        icon: 'skull',
+        button: 'Jetzt Fett trimmen',
+        link: 'https://tidycal.com/webfussel/flatrate-big-chonker',
+        list: [
+          {
+            label: 'Tickets gleichzeitig',
+            value: '3',
+          },
+          {
+            label: 'Erreichbarkeit',
+            value: 'Ja.',
+          },
+          {
+            label: 'Monatlich',
+            value: 8950,
+          },
+        ],
+      }
+    ]
+</script>