From 12dd23bdf9b173c05c026a68aba3c698f8f69123 Mon Sep 17 00:00:00 2001
From: webfussel <fiona@webfussel.de>
Date: Sun, 23 Feb 2025 09:47:12 +0100
Subject: [PATCH] ADD: flexible price card

More options for price card
---
 app/components/Services.vue | 21 ++++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/app/components/Services.vue b/app/components/Services.vue
index 5d3dc69..c7ef656 100644
--- a/app/components/Services.vue
+++ b/app/components/Services.vue
@@ -3,12 +3,12 @@
     <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 alle Preise zzgl. 19 % Umsatzsteuer verstehen.</p>
+      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">
         <h3 class="flex-col gap-default">
           <span>{{service.title}}</span>
-          <span class="highlight">{{service.price}}</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>
@@ -59,7 +59,10 @@ const readableDate = intl.format(freeFromDate)
 const services = [
   {
     title: 'Quick Check',
-    price: '149 € / Einmalig',
+    price: {
+      value: 149,
+      period: '/ Einmalig',
+    },
     availability: 'Frei',
     smallClaim: 'Du hast eine Homepage und willst mal drüber schauen lassen?',
     icon: 'magnifying-glass',
@@ -74,7 +77,11 @@ const services = [
     ],
   }, {
     title: 'Projektbuchung',
-    price: 'ab 999 € je nach Umfang',
+    price: {
+      pre: 'ab',
+      value: 999,
+      period: '/ Gestaffelt'
+    },
     availability: slotsLabel,
     smallClaim: 'Umsetzung deiner Vision. Von einzelnen Tickets bis hin zu kompletten Anwendungen.',
     icon: 'trend-up',
@@ -85,11 +92,15 @@ const services = [
       'Kontinuierliche Projekt-Updates',
       'Fixe Kosten und Feature-Sets',
       'Nur 50 % Projektpreis als Anzahlung',
+      'Gestaffelte Abrechnung nach Milestones'
     ],
   }, {
     title: 'Stundenbuchung',
     availability: `Frei ab ${readableDate}`,
-    price: '105 € / Stunde',
+    price: {
+      value: 105,
+      period: '/ Stunde',
+    },
     smallClaim: 'Du brauchst einfach Unterstützung im Team, bis sich der Trubel legt?',
     icon: 'timer',
     button: 'Jetzt buchen',