119 lines
4.3 KiB
Vue
119 lines
4.3 KiB
Vue
<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 <span class="highlight">keinerlei Abos oder versteckte Kosten</span>.
|
||
Aus Transparenzgründen sei aber gesagt, dass sich alle Preise zzgl. 19 % Umsatzsteuer 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 :href="service.link" class="cta" :label="service.button" aria-label="Zur externen Seite von zur Terminbuchung" />
|
||
<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>
|
||
</article>
|
||
</div>
|
||
<h3 id="network" 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>
|
||
<client-only>
|
||
<div class="network-list margin-top">
|
||
<div class="scroll-container default-gap">
|
||
<Person ref="persons" v-for="person in network" v-bind="person" />
|
||
</div>
|
||
</div>
|
||
</client-only>
|
||
</section>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import check from 'iconoir/icons/regular/double-check.svg'
|
||
import type { Person } from '#components'
|
||
|
||
const services = [
|
||
{
|
||
title: 'Bug Research',
|
||
price: '99 € / Einmalig',
|
||
availability: 'Frei',
|
||
smallClaim: 'Du hast einen Bug, aber weißt nicht woher? Kein Ding.',
|
||
button: 'Jetzt untersuchen',
|
||
link: 'https://tidycal.com/webfussel/bug-research',
|
||
list: [
|
||
'Untersuchung des Quellcodes',
|
||
'Konkrete Lösungsvorschläge',
|
||
'Ergebnisse innerhalb von 7 Tagen',
|
||
'Behebung unkompliziert nachbuchen'
|
||
],
|
||
}, {
|
||
title: 'Projektbuchung',
|
||
price: 'ab 999 € je nach Umfang',
|
||
availability: '3 Slots Frei',
|
||
smallClaim: 'Umsetzung deiner Vision. Von einzelnen Tickets bis hin zu kompletten Anwendungen.',
|
||
button: 'Jetzt durchstarten',
|
||
link: 'https://tidycal.com/webfussel/project-booking',
|
||
list: [
|
||
'Anforderungsanalyse',
|
||
'Kontinuierliche Projekt-Updates',
|
||
'Fixe Kosten und Feature-Sets',
|
||
'Nur 50 % Projektpreis als Anzahlung'
|
||
],
|
||
}, {
|
||
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',
|
||
link: 'https://tidycal.com/webfussel/hourly-booking',
|
||
list: [
|
||
'Flexible Aufgabenverteilung',
|
||
'Arbeiten nach agilen Prinzipien',
|
||
'Monatliche Abrechnung',
|
||
'Kündigungsfrist von einer Woche',
|
||
'Flexible Buchung ab 80 Stunden',
|
||
],
|
||
}
|
||
]
|
||
|
||
|
||
const shuffle = <T>(unshuffled : T[]) => unshuffled
|
||
.map(value => ({ value, sort: Math.random() }))
|
||
.sort((a, b) => a.sort - b.sort)
|
||
.map(({ value }) => value)
|
||
|
||
const network = shuffle([
|
||
{
|
||
name: 'Robert Janus',
|
||
img: '/img/network/robert.webp',
|
||
tags: ['Digitalberatung', 'Webentwicklung', 'eCommerce'],
|
||
flavour: 'Website, SEO und Conversions. Auf einen Klick.',
|
||
link: 'https://robertjanus.de/webertoire',
|
||
}, {
|
||
name: 'Matthias Lehmann',
|
||
img: '/img/network/matthias.webp',
|
||
tags: ['Onlineportale für Patienten', 'Kunden', 'Mitarbeiter'],
|
||
flavour: 'Software die macht, was DU willst!',
|
||
link: 'https://mind-deploy.de',
|
||
}, {
|
||
name: 'Maximilian Schluer',
|
||
img: '/img/network/maximilian.webp',
|
||
tags: ['iOS Development', 'Software-QA'],
|
||
flavour: 'Kann dein iOS-Team unterstützen oder dein Software-Qualitätsproblem lösen – egal welches.',
|
||
link: 'https://max-schluer.de',
|
||
}, {
|
||
name: 'Maria Salcedo',
|
||
img: '/img/network/maria.webp',
|
||
tags: ['Backend', 'DevOps', 'Architektur'],
|
||
flavour: 'Effizient und kommunikativ. "You build it, you run it."',
|
||
link: 'https://masagu.dev',
|
||
},
|
||
])
|
||
</script>
|