128 lines
3.5 KiB
Vue
Executable file
128 lines
3.5 KiB
Vue
Executable file
<template>
|
|
<section id="services" class="Services content">
|
|
<h2>Prepaid Flatrates.</h2>
|
|
<h3>Genieße fusselige Qualität ohne groß herumzurechnen.</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="Pricing margin-top">
|
|
<article v-for="(service, index) in flatrate" :class="{ 'z-3-all': index === 1, 'z-2-all': index !== 1}">
|
|
<header>
|
|
<strong>{{service.title}}</strong>
|
|
<p>{{service.smallClaim}}</p>
|
|
<div aria-hidden="true" class="bg-icon">
|
|
<Icon :name="`ph:${service.icon}-thin`" size="1.5em" mode="svg" />
|
|
</div>
|
|
</header>
|
|
<main>
|
|
<ul class="cols">
|
|
<li v-for="point in service.list">
|
|
<span class="value">{{ typeof point.value === 'number' ? intl.format(point.value) : point.value }}</span>
|
|
<span class="label">{{ point.label }}</span>
|
|
</li>
|
|
</ul>
|
|
</main>
|
|
<footer>
|
|
<!-- <span class="price">{{intl.format(service.price)}}</span>-->
|
|
<div class="button-wrapper z-2">
|
|
<Button :href="service.link" aria-label="Zur externen Seite Terminbuchung" :design="index === 1 ? 'default' : 'white'">
|
|
{{ service.button }}
|
|
</Button>
|
|
</div>
|
|
</footer>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
type Service = {
|
|
title: string
|
|
smallClaim: string
|
|
icon: string
|
|
button: string
|
|
link: string
|
|
list: {
|
|
label: string
|
|
value: string | number
|
|
}[]
|
|
}
|
|
|
|
const intl = new Intl.NumberFormat(
|
|
'de-DE',
|
|
{
|
|
style: 'currency',
|
|
currency: 'EUR',
|
|
minimumFractionDigits: 0,
|
|
maximumFractionDigits: 0,
|
|
})
|
|
|
|
|
|
const flatrate : Service[] =
|
|
[
|
|
{
|
|
title: 'Casual',
|
|
smallClaim: 'Für kleine Aufgaben nebenbei.',
|
|
icon: 'baby-carriage',
|
|
button: 'Jetzt klar machen',
|
|
link: 'https://tidycal.com/webfussel/flatrate-casual',
|
|
list: [
|
|
{
|
|
label: 'Ticket gleichzeitig',
|
|
value: '1',
|
|
},
|
|
{
|
|
label: 'Erreichbarkeit',
|
|
value: 'Ganz okay',
|
|
},
|
|
{
|
|
label: 'Monatlich',
|
|
value: 2950,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: 'Gold-Fussel',
|
|
smallClaim: 'Wenn\'s mal wieder zu viel wird.',
|
|
icon: 'coins',
|
|
button: 'Jetzt Gold schürfen',
|
|
link: 'https://tidycal.com/webfussel/flatrate-gold-fussel',
|
|
list: [
|
|
{
|
|
label: 'Tickets gleichzeitig',
|
|
value: '2',
|
|
},
|
|
{
|
|
label: 'Erreichbarkeit',
|
|
value: 'Mo - Fr',
|
|
},
|
|
{
|
|
label: 'Monatlich',
|
|
value: 4950,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: 'Big Chonker',
|
|
smallClaim: 'Für die richtig großen Sachen.',
|
|
icon: 'skull',
|
|
button: 'Jetzt Fett trimmen',
|
|
link: 'https://tidycal.com/webfussel/flatrate-big-chonker',
|
|
list: [
|
|
{
|
|
label: 'Tickets gleichzeitig',
|
|
value: '3',
|
|
},
|
|
{
|
|
label: 'Erreichbarkeit',
|
|
value: 'Ja.',
|
|
},
|
|
{
|
|
label: 'Monatlich',
|
|
value: 8950,
|
|
},
|
|
],
|
|
}
|
|
]
|
|
</script>
|