88 lines
3 KiB
Vue
88 lines
3 KiB
Vue
<style scoped src="./Services.css"/>
|
|
|
|
<template>
|
|
<section id="services" class="Services content">
|
|
<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 keinerlei Abos oder versteckte Kosten. Aus Transparenzgründen sei
|
|
aber gesagt, dass sich alle Preise <span class="highlight">zzgl. 19% Umsatzsteuer</span> verstehen.</p>
|
|
<div class="service-list margin-top default-gap">
|
|
<article v-for="service in services" class="z-2 card flex-col default-gap">
|
|
<h3 class="flex-col default-gap">
|
|
<span>{{service.title}}</span>
|
|
<span class="highlight">{{service.price}}</span>
|
|
</h3>
|
|
<span class="chip">{{service.availability}}</span>
|
|
<p>{{service.smallClaim}}</p>
|
|
<Button class="cta" :label="service.button" />
|
|
<ul class="flex-col">
|
|
<li v-for="point in service.list">
|
|
<img class="color-icon" :src="check" aria-hidden="true" alt="checkmark icon" />
|
|
<span>{{point}}</span>
|
|
</li>
|
|
</ul>
|
|
<div class="extra flex-col">
|
|
<small v-for="extra in service.extra">* {{ extra }}</small>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
<h3 class="margin-top-big">Mein Netzwerk</h3>
|
|
<p class="margin-top">Doch auch wenn ich mal voll ausgelastet bin - keine Sorge! Mein <span class="highlight">Netzwerk an Profis</span> kann dir sicher auch weiterhelfen!</p>
|
|
<div class="network-list">
|
|
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import check from 'iconoir/icons/regular/double-check.svg'
|
|
|
|
const services = [
|
|
{
|
|
title: 'Bug Research',
|
|
price: '149 € / Einmalig',
|
|
availability: 'Frei',
|
|
smallClaim: 'Du hast einen Bug, aber weißt nicht woher? Kein Ding.',
|
|
button: 'Jetzt untersuchen lassen',
|
|
list: [
|
|
'Untersuchung des Source Code',
|
|
'Konkrete Behebungsempfehlung',
|
|
'Ergebnisse in spätestens 7 Tagen',
|
|
],
|
|
extra: [
|
|
'Behebung je nach Schwere gegen Aufpreis möglich'
|
|
]
|
|
}, {
|
|
title: 'Stundenbuchung',
|
|
availability: 'Frei ab 16.12.24',
|
|
price: '105 € / Stunde',
|
|
smallClaim: 'Du brauchst einfach Unterstützung im Team, bis sich der Trubel legt?',
|
|
button: 'Jetzt buchen',
|
|
list: [
|
|
'Arbeiten nach agilen Prinzipien',
|
|
'Teilnahme an agilen Meetings',
|
|
'Monatliche Rechnungsstellung',
|
|
'Kündigungsfrist von einer Woche',
|
|
],
|
|
extra: [
|
|
'Mindestabnahme 160 Stunden'
|
|
]
|
|
}, {
|
|
title: 'Projektbuchung',
|
|
price: 'ab 5.499 € je nach Umfang',
|
|
availability: '3 Slots Frei',
|
|
smallClaim: 'Umsetzung deiner Vision. Von einzelnen Tickets bis hin zu kompletten Anwendungen.',
|
|
button: 'Jetzt durchstarten',
|
|
list: [
|
|
'Aufstellung der Anforderungen',
|
|
'Untersuchung geeigneter Technologien',
|
|
'Regelmäßiger Austausch',
|
|
'Klare Kostenübersicht'
|
|
],
|
|
extra: [
|
|
'Anzahlung 50% des Projektpreises',
|
|
'Enddatum je nach Umfang'
|
|
]
|
|
}
|
|
]
|
|
</script>
|