webfussel/wf4
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ADD: flexible price card

Browse source 
More options for price card
This commit is contained in:
webfussel 2025-02-23 09:47:12 +01:00
parent 8235c6cbfd
commit 12dd23bdf9
1 changed files with 16 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

21
app/components/Services.vue
View file

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