ADD: new offers

New offers (wip)

app/components/Services.vue

@@ -4,6 +4,7 @@
     <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>
+
     <div class="service-list margin-top gap-default">
       <article v-for="service in oneOff" class="z-2 card flex-col gap-default">
         <h3 class="flex-col gap-default">
@@ -13,7 +14,7 @@
         <p>{{service.smallClaim}}</p>
         <Button :href="service.link" class="cta" aria-label="Zur externen Seite von zur Terminbuchung">
           {{ service.button }}
-          <Icon :name="`ph:${service.icon}-duotone`" size="1.5em" mode="svg"></Icon>
+          <Icon :name="`ph:${service.icon}-duotone`" size="1.5em" mode="svg" />
         </Button>
         <ul class="flex-col">
           <li v-for="point in service.list">
@@ -23,6 +24,31 @@
         </ul>
       </article>
     </div>
+
+    <h3 class="margin-top-big">Prepaid Flatrates</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="service-list margin-top default-gap">
+      <article v-for="service in flatrate" class="z-2 card flex-col default-gap">
+        <h3 class="flex-col default-gap">
+          <span>{{service.title}}</span>
+          <span class="highlight">{{'pre' in service.price ? `${service.price.pre} ` : ''}}{{service.price.value}} €* {{service.price.period}}</span>
+        </h3>
+        <p>{{service.smallClaim}}</p>
+        <Button :href="service.link" class="cta" aria-label="Zur externen Seite von zur Terminbuchung">
+          {{ service.button }}
+          <Icon :name="`ph:${service.icon}-duotone`" size="1.5em" mode="svg" />
+        </Button>
+        <ul class="flex-col">
+          <li v-for="point in service.list">
+            <Icon class="color-icon" name="ph:caret-circle-double-right-duotone" aria-hidden="true" alt="checkmark icon" size="1.5em" mode="svg" />
+            <span>{{point}}</span>
+          </li>
+        </ul>
+      </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
@@ -46,9 +72,6 @@
 </template>
 
 <script setup lang="ts">
-const slots : number = 0
-const slotsLabel = `${slots} ${slots === 1 ? `Slot` : `Slots`} frei`
-
 type Service = {
   title: string
   price: {