105 lines
3.9 KiB
Vue
105 lines
3.9 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 <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" />
|
|
<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 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 default-gap margin-top">
|
|
<article v-for="person in network" class="flex-col">
|
|
<img :src="person.img" :alt="`Bild von ${person.name}`" />
|
|
<h3>{{person.name}}</h3>
|
|
<main>
|
|
<span v-for="tag in person.tags">{{tag}}</span>
|
|
</main>
|
|
<p>{{person.flavour}}</p>
|
|
<Button :href="person.link" target="_blank" rel="noreferrer noopener" label="Zur Homepage" />
|
|
</article>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import check from 'iconoir/icons/regular/double-check.svg'
|
|
|
|
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 lassen',
|
|
link: 'https://tidycal.com/webfussel/bug-research',
|
|
list: [
|
|
'Untersuchung des Source Code',
|
|
'Konkrete Behebungsempfehlung',
|
|
'Ergebnisse in spätestens 7 Tagen',
|
|
'Fix problemlos anschließend buchen'
|
|
],
|
|
}, {
|
|
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: [
|
|
'Aufstellung der Anforderungen',
|
|
'Untersuchung geeigneter Technologien',
|
|
'Regelmäßige Projektupdates',
|
|
'Fixe Kosten und Featuresets',
|
|
'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 Rechnungsstellung',
|
|
'Kündigungsfrist von einer Woche',
|
|
'Ab 80 Stunden flexibel buchbar',
|
|
],
|
|
}
|
|
]
|
|
|
|
const network = [
|
|
{
|
|
name: 'Robert Janus',
|
|
img: '/img/network/robert.jpg',
|
|
tags: ['Digitalberatung', 'Webentwicklung', 'eCommerce'],
|
|
flavour: 'Website, SEO und Conversions. Auf einen Klick.',
|
|
link: 'https://roberjanus.de/webertoire',
|
|
}, {
|
|
name: 'Matthias Lehmann',
|
|
img: '/img/network/matthias.jpg',
|
|
tags: ['Onlineportale für Patienten', 'Kunden', 'Mitarbeiter'],
|
|
flavour: 'Software die macht, was DU willst!',
|
|
link: 'https://mind-deploy.de',
|
|
}
|
|
]
|
|
</script>
|