98 lines
3 KiB
Vue
Executable file
98 lines
3 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>
|
|
<div style="place-self: end; height: 1px;"/>
|
|
<p class="fat value">Gleichzeitige Tickets</p>
|
|
<p class="fat value odd">Erreichbarkeit</p>
|
|
<p class="fat value">Monatlicher Preis</p>
|
|
<div />
|
|
</article>
|
|
<article v-for="(service, index) in flatrate" :class=" { 'z-2' : index === 1, 'z-1' : 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>
|
|
<p v-for="(point, pIndex) in service.list" class="value" :class="{ odd: pIndex === 1}">{{ typeof point === 'number' ? intl.format(point) : point }}</p>
|
|
<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: (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: [
|
|
'1',
|
|
'E-Mail',
|
|
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: [
|
|
'2',
|
|
'E-Mail, Instant-Messaging',
|
|
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: [
|
|
'3',
|
|
'E-Mail, Instant-Messaging, Video-Chat',
|
|
8950,
|
|
],
|
|
}
|
|
]
|
|
</script>
|