FIX: mpa, nuxt4 future, improvements in intro and services
Added mpa support, nuxt4 future compatibility, improvements in intro and services
This commit is contained in:
parent
078d4bfd82
commit
9642496e5a
35 changed files with 324 additions and 172 deletions
|
|
@ -1,151 +0,0 @@
|
|||
<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">
|
||||
<Icon class="color-icon" name="ri:check-double-line" 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 default-gap 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="ri:mail-line" aria-hidden="true" alt="mail icon" 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 default-gap">
|
||||
<Person ref="persons" v-for="person in network" v-bind="person" />
|
||||
</div>
|
||||
</div>
|
||||
</ClientOnly>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Person from '~/components/Person.vue'
|
||||
|
||||
const slots : number = 0
|
||||
const slotsLabel = `${slots} ${slots === 1 ? `Slot` : `Slots`} frei`
|
||||
|
||||
const freeFromDate = new Date(2025, 6, 1)
|
||||
const intl = new Intl.DateTimeFormat('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric'})
|
||||
const readableDate = intl.format(freeFromDate)
|
||||
|
||||
const services = [
|
||||
{
|
||||
title: 'Quick Check',
|
||||
price: '149 € / Einmalig',
|
||||
availability: 'Frei',
|
||||
smallClaim: 'Du hast eine Homepage und willst mal drüber schauen lassen?',
|
||||
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: 'ab 999 € je nach Umfang',
|
||||
availability: slotsLabel,
|
||||
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 ${readableDate}`,
|
||||
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: '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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue