FIX: Directories
Better directory structure
This commit is contained in:
parent
726c54d11f
commit
8943512328
16 changed files with 16 additions and 21 deletions
163
app/components/Section/Booking.vue
Executable file
163
app/components/Section/Booking.vue
Executable file
|
|
@ -0,0 +1,163 @@
|
|||
<template>
|
||||
<section id="services" class="Services content">
|
||||
<h1>Projekt buchen</h1>
|
||||
<h2>Du hast also beschlossen, dass du <span class="highlight">meine Hilfe</span> brauchst. Cool!</h2>
|
||||
<p class="margin-top">Manchmal brauchen wir alle einfach nur eine Kleinigkeit und wollen uns 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>
|
||||
<p class="margin-top-small">Hinter diesen 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>
|
||||
|
||||
<FreeInfo />
|
||||
|
||||
<div class="Pricing margin-top">
|
||||
<article v-for="(service, index) in oneOff" :class="{ 'z-3-all': index === 1, 'z-2-all': index !== 1}">
|
||||
<header>
|
||||
<strong>{{service.title}}</strong>
|
||||
<p class="claim">{{service.smallClaim}}</p>
|
||||
<div class="price">
|
||||
<span v-if="service.price.pre">{{service.price.pre}}</span>
|
||||
<span>{{typeof service.price.value === 'number' ? intl.format(service.price.value) : service.price.value}}</span>
|
||||
<span v-if="service.price.post" class="post">{{service.price.post}}</span>
|
||||
</div>
|
||||
<div aria-hidden="true" class="bg-icon">
|
||||
<Icon :name="service.icon" size="1.5em" mode="svg" />
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<div class="list-container">
|
||||
<ul>
|
||||
<li v-for="point in service.list">
|
||||
<Icon class="icon yes" name="ph:caret-circle-double-right-duotone" size="1.5em" mode="svg" />
|
||||
<span class="label">{{ point }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</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>
|
||||
</footer>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="flex-col gap-sm margin-top">
|
||||
<Spoiler v-for="entry in faq" v-bind="entry" class="z-2" />
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
type Service = {
|
||||
title: string
|
||||
smallClaim: string
|
||||
price: {
|
||||
value: number | string
|
||||
pre?: string
|
||||
post?: string
|
||||
}
|
||||
icon: string
|
||||
button: string
|
||||
link: string
|
||||
list: string[]
|
||||
}
|
||||
|
||||
const intl = new Intl.NumberFormat(
|
||||
'de-DE',
|
||||
{
|
||||
style: 'currency',
|
||||
currency: 'EUR',
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: 0,
|
||||
})
|
||||
|
||||
const oneOff : Service[] = [
|
||||
{
|
||||
title: 'Quick Check',
|
||||
price: {
|
||||
value: 149,
|
||||
},
|
||||
smallClaim: 'A11y, bugs, schlechter Code.',
|
||||
icon: 'ph:magnifying-glass-thin',
|
||||
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: 'Projekt',
|
||||
price: {
|
||||
pre: 'ab',
|
||||
value: 999,
|
||||
},
|
||||
smallClaim: 'Deine Vision.',
|
||||
icon: 'ph:trend-up-thin',
|
||||
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',
|
||||
],
|
||||
}, {
|
||||
title: 'Schulung',
|
||||
price: {
|
||||
pre: 'ab',
|
||||
value: 1499,
|
||||
post: '/ Tag / Person',
|
||||
},
|
||||
smallClaim: 'Wenn man\'s selber können muss.',
|
||||
icon: 'ph:graduation-cap-thin',
|
||||
button: 'Frag nach!',
|
||||
link: 'https://tidycal.com/webfussel/teaching',
|
||||
list: [
|
||||
'Schulungsinhalte klären',
|
||||
'Team-Workshops',
|
||||
'Azubi-Betreuung',
|
||||
'1:1 Mentoring',
|
||||
'Abrechnung pro Person und Tag',
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
const faq = [
|
||||
{
|
||||
header: 'Warum machst du keine Stundensätze?',
|
||||
content: [
|
||||
'Ich finde Stundensätze haben für beide Seiten nur Nachteile:',
|
||||
'Wenn ich schnell und gut arbeite, dann bekomme ich weniger Geld. Hab ich mal einen Knoten im Gehirn und brauche sehr lange, muss der Kunde mehr zahlen.',
|
||||
'Klar kann man sagen, dass sich das irgendwann ausgleichen könnte - aber so weit will ich es garnicht erst kommen lassen.'
|
||||
]
|
||||
},
|
||||
{
|
||||
header: 'Welche Themen bietest du für deine Schulungen an?',
|
||||
content: [
|
||||
'Sprachen: JavaScript, TypeScript, HTML, CSS',
|
||||
'Frameworks: Vue, Nuxt',
|
||||
]
|
||||
},
|
||||
{
|
||||
header: 'Wo finden die Schulungen statt?',
|
||||
content: [
|
||||
'Die Schulungen finden online statt. Normalerweise nutze ich dafür Google Meet, aber wenn du oder deine Firma eine andere Plattform wünschen und bereitstellen bin ich natürlich flexibel.',
|
||||
'Wenn sich deine Firma in der Nähe meines Wohnortes befindet - und damit meine ich "In einer Stunde mit der Straßenbahn zu erreichen", dann kann alles natürlich auch vor Ort stattfinden.',
|
||||
]
|
||||
},
|
||||
{
|
||||
header: 'Ich hab ein cooles Projekt! Aber kein Geld...',
|
||||
content: [
|
||||
'Tja.',
|
||||
'Ne, awas. Meld dich einfach trotzdem über meine E-Mail-Adresse und vielleicht finden wir eine Lösung.'
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue