169 lines
4.7 KiB
Vue
Executable file
169 lines
4.7 KiB
Vue
Executable file
<template>
|
|
<section id="services" class="Services content">
|
|
<h1>Prepaid Flatrates</h1>
|
|
<h2>Genieße fusselige
|
|
<Highlight>Qualität</Highlight>
|
|
ohne groß herumzurechnen.
|
|
</h2>
|
|
|
|
<p class="margin-top">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
|
|
<Highlight>Entwickler-Flat</Highlight>
|
|
für planbare Kosten und On-Demand-Entwicklung.
|
|
</p>
|
|
<p class="margin-top-small">Aus Transparenzgründen sei gesagt, dass sich
|
|
<Highlight>alle Preise zzgl. 19 % Umsatzsteuer</Highlight>
|
|
verstehen.
|
|
</p>
|
|
|
|
<FreeInfo/>
|
|
|
|
<div class="Pricing margin-top">
|
|
<article v-for="(service, index) in flatrate" :class=" { 'z-2' : index === 1, 'z-1' : index !== 1 }">
|
|
<header>
|
|
<span v-if="service.best" class="chip dark z-2"><Icon name="ph:fire-duotone" mode="svg"/> Beschd</span>
|
|
<strong class="margin-top-small">{{ service.title }}</strong>
|
|
<p class="claim">{{ service.smallClaim }}</p>
|
|
<p class="price">{{ intl.format(service.price) }}<span class="post">/ Monat</span></p>
|
|
<div aria-hidden="true" class="bg-icon">
|
|
<Icon :name="service.icon" size="1.5em" mode="svg"/>
|
|
</div>
|
|
</header>
|
|
<main>
|
|
<ul>
|
|
<li>
|
|
<Icon class="icon yes" name="ph:check-circle-duotone" mode="svg"/>
|
|
<span class="value">{{ service.hours }} Stunden pro Woche zugesichert</span>
|
|
</li>
|
|
<li v-for="(check, index) in service.checks">
|
|
<Icon class="icon" :class="{ 'yes' : check, 'no' : !check }" :name="check ? 'ph:check-circle-duotone' : 'ph:x-circle-duotone'"
|
|
mode="svg"/>
|
|
<span class="value">{{ points[index] }}</span>
|
|
</li>
|
|
</ul>
|
|
</main>
|
|
<footer>
|
|
<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>
|
|
<p class="conmin margin-top-small">Die Mindestvertragslaufzeit beträgt {{ service.contractMin }} Monate.</p>
|
|
</footer>
|
|
</article>
|
|
</div>
|
|
|
|
<div v-if="faq" class="flex-col gap-sm margin-top">
|
|
<ContentRenderer :value="faq" :style="{ display: 'contents' }"/>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
type Service = {
|
|
title: string
|
|
smallClaim: string
|
|
icon: string
|
|
button: string
|
|
link: string
|
|
best: boolean
|
|
price: number
|
|
hours: number
|
|
contractMin: number
|
|
checks: boolean[]
|
|
}
|
|
|
|
const intl = new Intl.NumberFormat(
|
|
'de-DE',
|
|
{
|
|
style: 'currency',
|
|
currency: 'EUR',
|
|
minimumFractionDigits: 0,
|
|
maximumFractionDigits: 0,
|
|
})
|
|
|
|
const points: string[] = [
|
|
'Kontakt per E-Mail',
|
|
'Kontakt per Instant Messaging',
|
|
'Kontakt per Video Call',
|
|
'Weiterführende Performance Optimierung',
|
|
'Framework Migration',
|
|
]
|
|
|
|
const flatrate: Service[] =
|
|
[
|
|
{
|
|
title: 'Casual',
|
|
smallClaim: 'Für kleine Aufgaben nebenbei.',
|
|
icon: 'ph:baby-carriage-thin',
|
|
button: 'Jetzt klar machen',
|
|
link: 'https://tidycal.com/webfussel/flatrate-casual',
|
|
best: false,
|
|
price: 2950,
|
|
hours: 5,
|
|
contractMin: 3,
|
|
checks: [
|
|
true,
|
|
false,
|
|
false,
|
|
false,
|
|
false,
|
|
],
|
|
},
|
|
{
|
|
title: 'Gold-Fussel',
|
|
smallClaim: 'Wenn\'s mal wieder zu viel wird.',
|
|
icon: 'ph:coins-thin',
|
|
button: 'Jetzt Gold schürfen',
|
|
link: 'https://tidycal.com/webfussel/flatrate-gold-fussel',
|
|
best: true,
|
|
price: 5555,
|
|
hours: 10,
|
|
contractMin: 3,
|
|
checks: [
|
|
true,
|
|
true,
|
|
false,
|
|
true,
|
|
false,
|
|
],
|
|
},
|
|
{
|
|
title: 'Big Chonker',
|
|
smallClaim: 'Für die richtig großen Sachen.',
|
|
icon: 'ph:skull-thin',
|
|
button: 'Jetzt Fett trimmen',
|
|
link: 'https://tidycal.com/webfussel/flatrate-big-chonker',
|
|
best: false,
|
|
price: 8550,
|
|
hours: 15,
|
|
contractMin: 6,
|
|
checks: [
|
|
true,
|
|
true,
|
|
true,
|
|
true,
|
|
true,
|
|
],
|
|
},
|
|
]
|
|
|
|
const { data: faq } = await useAsyncData('faq_flatrate', () => queryCollection('faq').path('/snippets/faq/flatrate').first())
|
|
const texts = generatePlainText<['title']>(faq.value?.body.value)
|
|
|
|
if (faq) {
|
|
useSchemaOrg({
|
|
'@context': 'https://schema.org',
|
|
'@type': 'FAQPage',
|
|
'mainEntity': texts.map(entity => ({
|
|
'@type': 'Question',
|
|
'name': entity.meta.title,
|
|
'acceptedAnswer': {
|
|
'@type': 'Answer',
|
|
'text': entity.text,
|
|
},
|
|
})),
|
|
})
|
|
}
|
|
</script>
|