226 lines
8.2 KiB
Vue
226 lines
8.2 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 <span class="highlight">*alle Preise zzgl. 19 % Umsatzsteuer</span>. verstehen.</p>
|
||
|
||
<article class="z-2 card flex-col margin-top font-big text-center">
|
||
<p>Derzeit habe ich <span class="highlight">keine freien Plätze</span>.</p>
|
||
<p class="margin-top-small">Das ändert sich ab <span class="highlight">01. Juli 2025</span>.</p>
|
||
</article>
|
||
|
||
<h3 class="margin-top-big">One off Projekte</h3>
|
||
<p class="margin-top-small">Manchmal brauchen wir alle einfach nur eine Kleinigkeit und will sich nicht lange binden. Das ist natürlich
|
||
völlig in Ordnung und genau deshalb biete ich dir die Möglichkeit mich gezielt für <span class="highlight">kleinere Projekte</span> zu buchen.</p>
|
||
|
||
<div class="service-list margin-top gap-default">
|
||
<article v-for="service in oneOff" class="z-2 card flex-col gap-default">
|
||
<h3 class="flex-col gap-default">
|
||
<span>{{service.title}}</span>
|
||
<span class="highlight">{{'pre' in service.price ? `${service.price.pre} ` : ''}}{{service.price.value}} €* {{service.price.period}}</span>
|
||
</h3>
|
||
<p>{{service.smallClaim}}</p>
|
||
<Button :href="service.link" class="cta" aria-label="Zur externen Seite Terminbuchung">
|
||
{{ service.button }}
|
||
<Icon :name="`ph:${service.icon}-duotone`" size="1.5em" mode="svg" />
|
||
</Button>
|
||
<ul class="flex-col">
|
||
<li v-for="point in service.list">
|
||
<Icon class="color-icon" name="ph:caret-circle-double-right-duotone" aria-hidden="true" alt="checkmark icon" size="1.5em" mode="svg" />
|
||
<span>{{point}}</span>
|
||
</li>
|
||
</ul>
|
||
</article>
|
||
</div>
|
||
|
||
<h3 class="margin-top-big">Prepaid Flatrates</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="service-list margin-top default-gap">
|
||
<article v-for="service in flatrate" class="z-2 card flex-col default-gap">
|
||
<h3 class="flex-col default-gap">
|
||
<span>{{service.title}}</span>
|
||
<span class="highlight">{{'pre' in service.price ? `${service.price.pre} ` : ''}}{{service.price.value}} €* {{service.price.period}}</span>
|
||
</h3>
|
||
<p>{{service.smallClaim}}</p>
|
||
<Button :href="service.link" class="cta" aria-label="Zur externen Seite Terminbuchung">
|
||
{{ service.button }}
|
||
<Icon :name="`ph:${service.icon}-duotone`" size="1.5em" mode="svg" />
|
||
</Button>
|
||
<ul class="flex-col">
|
||
<li v-for="point in service.list">
|
||
<Icon class="color-icon" name="ph:caret-circle-double-right-duotone" aria-hidden="true" alt="checkmark icon" size="1.5em" mode="svg" />
|
||
<span>{{point}}</span>
|
||
</li>
|
||
</ul>
|
||
</article>
|
||
</div>
|
||
|
||
<article class="z-2 card flex-col gap-default margin-top">
|
||
<h3>Keinen Bock auf Telen? Understandable.</h3>
|
||
<p>Dann schreib mir einfach gerne direkt eine E-Mail an
|
||
<ClientOnly><a class="mail" href="mailto:anfragen@webfussel.de">anfragen@webfussel.de<Icon name="ph:envelope-duotone" aria-hidden="true" alt="mail icon" size="1.2em" mode="svg" /></a></ClientOnly>
|
||
</p>
|
||
<h3>Keine Kohle? Kommt vor.</h3>
|
||
<p>Meld dich trotzdem. Eventuell ist dein Projekt ja cool genug, dass ich dir da auch entsprechend entgegenkommen kann. :)</p>
|
||
</article>
|
||
<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>
|
||
<ClientOnly>
|
||
<div class="network-list margin-top">
|
||
<div class="scroll-container gap-default">
|
||
<Person ref="persons" v-for="person in network" v-bind="person" />
|
||
</div>
|
||
</div>
|
||
</ClientOnly>
|
||
</section>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
type Service = {
|
||
title: string
|
||
price: {
|
||
pre ?: string
|
||
value: number
|
||
period: string
|
||
}
|
||
smallClaim: string
|
||
icon: string
|
||
button: string
|
||
link: string
|
||
list: string[]
|
||
}
|
||
|
||
|
||
const oneOff : Service[] = [
|
||
{
|
||
title: 'Quick Check',
|
||
price: {
|
||
value: 149,
|
||
period: '/ Einmalig',
|
||
},
|
||
smallClaim: 'Du hast eine Homepage und willst mal drüber schauen lassen?',
|
||
icon: 'magnifying-glass',
|
||
button: 'Jetzt untersuchen',
|
||
link: 'https://tidycal.com/webfussel/quick-check',
|
||
list: [
|
||
'Untersuchung des Quellcodes',
|
||
'Untersuchung der Performance',
|
||
'Tipps zu CSS und Best Practices',
|
||
'Behebung unkompliziert nachbuchen',
|
||
'Für selbst gebaute Seiten',
|
||
],
|
||
}, {
|
||
title: 'Projektbuchung',
|
||
price: {
|
||
pre: 'ab',
|
||
value: 999,
|
||
period: '/ Gestaffelt'
|
||
},
|
||
smallClaim: 'Umsetzung deiner Vision. Von einzelnen Tickets bis hin zu kompletten Anwendungen.',
|
||
icon: 'trend-up',
|
||
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',
|
||
'Gestaffelte Abrechnung nach Milestones'
|
||
],
|
||
},
|
||
]
|
||
|
||
|
||
const flatrate : Service[] =
|
||
[
|
||
{
|
||
title: 'Casual',
|
||
price: {
|
||
value: 4950,
|
||
period: 'Monat',
|
||
},
|
||
smallClaim: 'Bei dir fällt immer mal was an und du willst nicht jedes mal neu buchen?',
|
||
icon: '',
|
||
button: 'Jetzt klar machen',
|
||
link: 'https://tidycal.com/webfussel/hourly-booking',
|
||
list: [
|
||
'1 Ticket gleichzeitig',
|
||
'72 h Reaktionszeit',
|
||
'Meetings alle 2 Wochen',
|
||
'Zur Mitte des Monats kündbar',
|
||
],
|
||
}, {
|
||
title: 'Gold-Fussel',
|
||
price: {
|
||
value: 8450,
|
||
period: 'Monat',
|
||
},
|
||
smallClaim: 'Du hast häufig mehrere Aufgaben zu verteilen?',
|
||
icon: '',
|
||
button: 'Jetzt Gold schürfen',
|
||
link: 'https://tidycal.com/webfussel/hourly-booking',
|
||
list: [
|
||
'3 Tickets gleichzeitig',
|
||
'48 h Reaktionszeit',
|
||
'Wöchentliche Meetings',
|
||
'Zur Mitte des Monats kündbar',
|
||
],
|
||
}
|
||
]
|
||
|
||
|
||
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: 'robert',
|
||
tags: ['Digitalberatung', 'Webentwicklung', 'eCommerce'],
|
||
flavour: 'Website, SEO und Conversions. Auf einen Klick.',
|
||
link: 'https://robertjanus.de/webertoire',
|
||
},
|
||
// {
|
||
// name: 'Matthias Lehmann',
|
||
// img: 'matthias',
|
||
// tags: ['Onlineportale für Patienten', 'Kunden', 'Mitarbeiter'],
|
||
// flavour: 'Software die macht, was DU willst!',
|
||
// link: 'https://mind-deploy.de',
|
||
// },
|
||
{
|
||
name: 'Maximilian Schluer',
|
||
img: 'max',
|
||
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: 'maria',
|
||
// tags: ['Backend', 'DevOps', 'Architektur'],
|
||
// flavour: 'Effizient und kommunikativ. "You build it, you run it."',
|
||
// link: 'https://masagu.dev',
|
||
// },
|
||
{
|
||
name: 'Judith Böhlert',
|
||
img: 'judith',
|
||
tags: ['Full-stack', 'Frontend'],
|
||
flavour: 'MVPs und Prototypen - schnell, schick und ohne Drama.',
|
||
link: 'https://judithboehlert.com',
|
||
},
|
||
{
|
||
name: 'Kevin Damiani',
|
||
img: 'kevin',
|
||
tags: ['Webentwicklung', 'Frontend'],
|
||
flavour: 'Erfahrener Frontend-Entwickler mit Fokus auf Performance, Barrierefreiheit und moderne Technologien.',
|
||
link: 'https://kevin-damiani.de',
|
||
},
|
||
])
|
||
</script>
|