ADD: Calendar links
This commit is contained in:
parent
55cc380b2b
commit
8395825aea
4 changed files with 23 additions and 6 deletions
|
@ -1,15 +1,29 @@
|
||||||
<style scoped src="./Button.css"/>
|
<style scoped src="./Button.css"/>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<button :label="label" class="Button">
|
<component :is="type" v-bind="actualProps()" class="Button">
|
||||||
{{ label }}
|
{{ label }}
|
||||||
</button>
|
</component>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
|
type ?: 'a' | 'button'
|
||||||
|
href ?: string
|
||||||
label : string
|
label : string
|
||||||
}
|
}
|
||||||
|
|
||||||
defineProps<Props>()
|
const props = withDefaults(defineProps<Props>(), {
|
||||||
|
type : 'a'
|
||||||
|
})
|
||||||
|
|
||||||
|
const actualProps = () => {
|
||||||
|
if (props.type === 'a') {
|
||||||
|
return {
|
||||||
|
href: props.href,
|
||||||
|
target: props.href!.startsWith('https://') ? '_blank' : undefined,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -21,7 +21,7 @@
|
||||||
<p class="fulltext">
|
<p class="fulltext">
|
||||||
Du brauchst großartige Komponenten und saubere Schnittstellen?
|
Du brauchst großartige Komponenten und saubere Schnittstellen?
|
||||||
</p>
|
</p>
|
||||||
<Button class="cta" label="Lass mal reden" />
|
<Button href="#services" class="cta" label="Lass mal reden" />
|
||||||
</div>
|
</div>
|
||||||
<div class="intro-img">
|
<div class="intro-img">
|
||||||
<img src="/profile.webp" alt="Bild von mir" />
|
<img src="/profile.webp" alt="Bild von mir" />
|
||||||
|
|
|
@ -14,7 +14,7 @@
|
||||||
</h3>
|
</h3>
|
||||||
<span class="chip">{{service.availability}}</span>
|
<span class="chip">{{service.availability}}</span>
|
||||||
<p>{{service.smallClaim}}</p>
|
<p>{{service.smallClaim}}</p>
|
||||||
<Button class="cta" :label="service.button" />
|
<Button :href="service.link" class="cta" :label="service.button" />
|
||||||
<ul class="flex-col">
|
<ul class="flex-col">
|
||||||
<li v-for="point in service.list">
|
<li v-for="point in service.list">
|
||||||
<img class="color-icon" :src="check" aria-hidden="true" alt="checkmark icon" />
|
<img class="color-icon" :src="check" aria-hidden="true" alt="checkmark icon" />
|
||||||
|
@ -49,6 +49,7 @@ const services = [
|
||||||
availability: 'Frei',
|
availability: 'Frei',
|
||||||
smallClaim: 'Du hast einen Bug, aber weißt nicht woher? Kein Ding.',
|
smallClaim: 'Du hast einen Bug, aber weißt nicht woher? Kein Ding.',
|
||||||
button: 'Jetzt untersuchen lassen',
|
button: 'Jetzt untersuchen lassen',
|
||||||
|
link: 'https://tidycal.com/webfussel/bug-research',
|
||||||
list: [
|
list: [
|
||||||
'Untersuchung des Source Code',
|
'Untersuchung des Source Code',
|
||||||
'Konkrete Behebungsempfehlung',
|
'Konkrete Behebungsempfehlung',
|
||||||
|
@ -61,6 +62,7 @@ const services = [
|
||||||
availability: '3 Slots Frei',
|
availability: '3 Slots Frei',
|
||||||
smallClaim: 'Umsetzung deiner Vision. Von einzelnen Tickets bis hin zu kompletten Anwendungen.',
|
smallClaim: 'Umsetzung deiner Vision. Von einzelnen Tickets bis hin zu kompletten Anwendungen.',
|
||||||
button: 'Jetzt durchstarten',
|
button: 'Jetzt durchstarten',
|
||||||
|
link: 'https://tidycal.com/webfussel/project-booking',
|
||||||
list: [
|
list: [
|
||||||
'Aufstellung der Anforderungen',
|
'Aufstellung der Anforderungen',
|
||||||
'Untersuchung geeigneter Technologien',
|
'Untersuchung geeigneter Technologien',
|
||||||
|
@ -74,6 +76,7 @@ const services = [
|
||||||
price: '105 € / Stunde',
|
price: '105 € / Stunde',
|
||||||
smallClaim: 'Du brauchst einfach Unterstützung im Team, bis sich der Trubel legt?',
|
smallClaim: 'Du brauchst einfach Unterstützung im Team, bis sich der Trubel legt?',
|
||||||
button: 'Jetzt buchen',
|
button: 'Jetzt buchen',
|
||||||
|
link: 'https://tidycal.com/webfussel/hourly-booking',
|
||||||
list: [
|
list: [
|
||||||
'Flexible Aufgabenverteilung',
|
'Flexible Aufgabenverteilung',
|
||||||
'Arbeiten nach agilen Prinzipien',
|
'Arbeiten nach agilen Prinzipien',
|
||||||
|
|
|
@ -14,7 +14,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="bottom flex-col margin-top default-gap">
|
<div class="bottom flex-col margin-top default-gap">
|
||||||
<h3>Du brauchst was davon? Kein Ding.</h3>
|
<h3>Du brauchst was davon? Kein Ding.</h3>
|
||||||
<Button class="cta" label="Lass mal reden" />
|
<Button href="#services" class="cta" label="Lass mal reden" />
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</template>
|
</template>
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue