ADD: new offers

New offers (wip)

app/components/Services.vue

@@ -5,12 +5,11 @@
     <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 services" class="z-2 card flex-col gap-default">
+      <article v-for="service in oneOff" class="z-2 card flex-col gap-default">
         <h3 class="flex-col gap-default">
           <span>{{service.title}}</span>
           <span class="highlight">{{'pre' in service.price ? `${service.price.pre} ` : ''}}{{service.price.value}} €* {{service.price.period}}</span>
         </h3>
-        <span class="chip">{{service.availability}}</span>
         <p>{{service.smallClaim}}</p>
         <Button :href="service.link" class="cta" aria-label="Zur externen Seite von zur Terminbuchung">
           {{ service.button }}
@@ -47,23 +46,31 @@
 </template>
 
 <script setup lang="ts">
-import Person from '~/components/Person.vue'
-
 const slots : number = 0
 const slotsLabel = `${slots} ${slots === 1 ? `Slot` : `Slots`} frei`
 
-const freeFromDate = new Date(2025, 6, 1)
-const intl = new Intl.DateTimeFormat('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric'})
-const readableDate = intl.format(freeFromDate)
+type Service = {
+  title: string
+  price: {
+    pre ?: string
+    value: number
+    period: string
+  }
+  smallClaim: string
+  icon: string
+  button: string
+  link: string
+  list: string[]
+}
 
-const services = [
+
+const oneOff : Service[] = [
   {
     title: 'Quick Check',
     price: {
       value: 149,
       period: '/ Einmalig',
     },
-    availability: 'Frei',
     smallClaim: 'Du hast eine Homepage und willst mal drüber schauen lassen?',
     icon: 'magnifying-glass',
     button: 'Jetzt untersuchen',
@@ -82,7 +89,6 @@ const services = [
       value: 999,
       period: '/ Gestaffelt'
     },
-    availability: slotsLabel,
     smallClaim: 'Umsetzung deiner Vision. Von einzelnen Tickets bis hin zu kompletten Anwendungen.',
     icon: 'trend-up',
     button: 'Jetzt durchstarten',
@@ -94,28 +100,48 @@ const services = [
       'Nur 50 % Projektpreis als Anzahlung',
       'Gestaffelte Abrechnung nach Milestones'
     ],
-  }, {
-    title: 'Stundenbuchung',
-    availability: `Frei ab ${readableDate}`,
-    price: {
-      value: 105,
-      period: '/ Stunde',
-    },
-    smallClaim: 'Du brauchst einfach Unterstützung im Team, bis sich der Trubel legt?',
-    icon: 'timer',
-    button: 'Jetzt buchen',
-    link: 'https://tidycal.com/webfussel/hourly-booking',
-    list: [
-      'Flexible Aufgabenverteilung',
-      'Arbeiten nach agilen Prinzipien',
-      'Monatliche Abrechnung',
-      'Kündigungsfrist von einer Woche',
-      'Flexible Buchung ab 80 Stunden',
-    ],
-  }
+  },
 ]
 
 
+const flatrate : Service[] =
+    [
+      {
+        title: 'Casual',
+        price: {
+          value: 4950,
+          period: 'Monat',
+        },
+        smallClaim: 'Bei dir fällt immer mal was an und du willst nicht jedes mal neu buchen?',
+        icon: '',
+        button: 'Jetzt klar machen',
+        link: 'https://tidycal.com/webfussel/hourly-booking',
+        list: [
+          '1 Ticket gleichzeitig',
+          '72 h Reaktionszeit',
+          'Meetings alle 2 Wochen',
+          'Zur Mitte des Monats kündbar',
+        ],
+      }, {
+      title: 'Gold-Fussel',
+      price: {
+        value: 8450,
+        period: 'Monat',
+      },
+      smallClaim: 'Du hast häufig mehrere Aufgaben zu verteilen?',
+      icon: '',
+      button: 'Jetzt Gold schürfen',
+      link: 'https://tidycal.com/webfussel/hourly-booking',
+      list: [
+        '3 Tickets gleichzeitig',
+        '48 h Reaktionszeit',
+        'Wöchentliche Meetings',
+        'Zur Mitte des Monats kündbar',
+      ],
+    }
+  ]
+
+
 const shuffle = <T>(unshuffled : T[]) => unshuffled
     .map(value => ({ value, sort: Math.random() }))
     .sort((a, b) => a.sort - b.sort)