ADD: Pricing charts layout
Finished Pricing Charts
This commit is contained in:
parent
84a295f011
commit
a1a711b015
7 changed files with 300 additions and 97 deletions
|
|
@ -2,12 +2,12 @@
|
|||
<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>.
|
||||
<p class="margin-top">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>
|
||||
|
||||
<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>
|
||||
<p class="margin-top-small">Das ändert sich ab <span class="highlight">01. Januar 2026</span>.</p>
|
||||
</article>
|
||||
|
||||
<h3 class="margin-top-big">One off Projekte</h3>
|
||||
|
|
@ -19,22 +19,26 @@
|
|||
<header>
|
||||
<strong>{{service.title}}</strong>
|
||||
<p>{{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="`ph:${service.icon}-thin`" size="1.5em" mode="svg" />
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<div class="list-container">
|
||||
<ul class="list" v-for="(list, index) in service.list" :key="index">
|
||||
<li v-for="point in list">
|
||||
<Icon class="point-icon" name="ph:caret-circle-double-right-duotone" size="1.5em" mode="svg" />
|
||||
<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>
|
||||
<span class="price">{{service.price.pre ? `${service.price.pre} ` : '' }}{{typeof service.price.value === 'number' ? intl.format(service.price.value) : service.price.value}}</span>
|
||||
<div class="button-wrapper z-2">
|
||||
<Button :href="service.link" aria-label="Zur externen Seite Terminbuchung" :design="index === 1 ? 'default' : 'white'">
|
||||
{{ service.button }}
|
||||
|
|
@ -52,10 +56,6 @@
|
|||
<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>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
|
|
@ -66,11 +66,12 @@ type Service = {
|
|||
price: {
|
||||
value: number | string
|
||||
pre?: string
|
||||
post?: string
|
||||
}
|
||||
icon: string
|
||||
button: string
|
||||
link: string
|
||||
list: string[][]
|
||||
list: string[]
|
||||
}
|
||||
|
||||
const intl = new Intl.NumberFormat(
|
||||
|
|
@ -93,15 +94,11 @@ const oneOff : Service[] = [
|
|||
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',
|
||||
]
|
||||
'Untersuchung des Quellcodes',
|
||||
'Untersuchung der Performance',
|
||||
'Tipps zu CSS und Best Practices',
|
||||
'Behebung unkompliziert nachbuchen',
|
||||
'Für selbst gebaute Seiten',
|
||||
],
|
||||
}, {
|
||||
title: 'Projektbuchung',
|
||||
|
|
@ -114,35 +111,29 @@ const oneOff : Service[] = [
|
|||
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',
|
||||
]
|
||||
'Anforderungsanalyse',
|
||||
'Kontinuierliche Projekt-Updates',
|
||||
'Fixe Kosten und Feature-Sets',
|
||||
'Nur 50 % Projektpreis als Anzahlung',
|
||||
'Gestaffelte Abrechnung nach Milestones',
|
||||
],
|
||||
}, {
|
||||
title: 'Enterprise',
|
||||
title: 'Schulung',
|
||||
price: {
|
||||
value: 'Auf Anfrage',
|
||||
pre: 'ab',
|
||||
value: 1499,
|
||||
post: '/ Tag / Person',
|
||||
},
|
||||
smallClaim: 'Für die ganz großen Sachen.',
|
||||
icon: 'building-office',
|
||||
smallClaim: 'Wenn man\'s selber können muss.',
|
||||
icon: 'graduation-cap',
|
||||
button: 'Frag nach!',
|
||||
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'
|
||||
],
|
||||
'Anforderungsanalyse',
|
||||
'Team-Workshops',
|
||||
'Azubi-Betreuung',
|
||||
'1:1 Mentoring',
|
||||
'Abrechnung pro Person und Tag',
|
||||
],
|
||||
},
|
||||
]
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue