FIX: fixes for typos and Link Component in button

Fixes some grammar issues and bad layouting, as well as wrong link usage

app/assets/css/spoiler.css

@@ -5,6 +5,7 @@
 
     & .icon {
         color: var(--color-orange);
+        flex: 0 0 1.5rem;
     }
 
     & summary {

app/components/Booking.vue

@@ -2,7 +2,7 @@
   <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 will sich nicht lange binden. Das ist natürlich
+    <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>
@@ -13,7 +13,7 @@
       <article v-for="(service, index) in oneOff" :class="{ 'z-3-all': index === 1, 'z-2-all': index !== 1}">
         <header>
           <strong>{{service.title}}</strong>
-          <p>{{service.smallClaim}}</p>
+          <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>
@@ -93,7 +93,7 @@ const oneOff : Service[] = [
       'Für selbst gebaute Seiten',
     ],
   }, {
-    title: 'Projektbuchung',
+    title: 'Projekt',
     price: {
       pre: 'ab',
       value: 999,

app/components/Button.vue

@@ -1,5 +1,5 @@
 <template>
-  <component :is="type" v-bind="actualProps()" class="Button" :class="[design]">
+  <component :is="actualComponent" v-bind="actualProps()" class="Button" :class="[design]">
     <slot />
   </component>
 </template>
@@ -7,22 +7,30 @@
 <script setup lang="ts">
 
 type Props = {
-  type ?: 'a' | 'button'
+  type ?: 'NuxtLink' | 'button'
   href ?: string
   design ?: 'default' | 'dark' | 'white'
 }
 
 const {
-  type = 'a',
+  type = 'NuxtLink',
   href = '#',
   design = 'default',
 } = defineProps<Props>()
 
+const isExternal = href.startsWith('http')
+
+const actualComponent = computed(() => {
+  if (type === 'NuxtLink') return resolveComponent('NuxtLink')
+  return type
+})
+
 const actualProps = () => {
-  if (type === 'a') {
+  if (type === 'NuxtLink') {
     return {
-      href: href,
+      to: href,
-      target: href!.startsWith('https://') ? '_blank' : undefined,
+      target: isExternal ? '_blank' : undefined,
+      external: isExternal,
     }
   }
 }

app/components/Flatrate.vue

@@ -109,7 +109,7 @@ const flatrate : Service[] =
         button: 'Jetzt Gold schürfen',
         link: 'https://tidycal.com/webfussel/flatrate-gold-fussel',
         best: true,
-        price: 4950,
+        price: 5555,
         hours: 10,
         contractMin: 3,
         checks: [
@@ -127,7 +127,7 @@ const flatrate : Service[] =
         button: 'Jetzt Fett trimmen',
         link: 'https://tidycal.com/webfussel/flatrate-big-chonker',
         best: false,
-        price: 8950,
+        price: 8550,
         hours: 15,
         contractMin: 6,
         checks: [
@@ -165,7 +165,7 @@ const faq = [
   {
     header: 'Kann ich den Retainer jederzeit kündigen?',
     content: [
-      'Ja klar. Du musst dabei nur die Mindestvertragslaufzeit beachten - die bezahlte Leistung steht dir weiterhin Fall zu.',
+      'Ja klar. Du musst dabei nur die Mindestvertragslaufzeit beachten - die bezahlte Leistung steht dir weiterhin zu.',
       'Falls wir merken, dass wir für eine Zusammenarbeit mehr als ungeeignet sind, bekommst du dein Geld anteilig der verbleibenden Zeit zurück und verlierst den Anspruch auf Leistungen ab diesem Zeitpunkt.'
     ]
   },

app/components/Skills.vue

@@ -3,11 +3,9 @@
     <h2>Meine Expertise.</h2>
     <h3>Dies sind meine <span class="highlight">Spezialgebiete</span> - aber ich bin flexibel!</h3>
     <div class="skill-list margin-top gap-default">
-      <article class="z-2 card flex-col gap-default" v-for="skill in skills">
+      <article class="z-2 card flex-col gap-sm" v-for="skill in skills">
         <h3>{{skill.title}}</h3>
-        <main>
+        <p v-for="(t, i) in skill.text" :class="[i === skill.text.length - 1 && 'bold']">{{t}}</p>
-          <p v-for="(t, i) in skill.text" :class="[i === skill.text.length - 1 && 'margin-top bold']">{{t}}</p>
-        </main>
       </article>
     </div>
     <article class="tech-list z-2 card flex-col gap-default margin-top">

app/components/SkillsEasy.vue

@@ -25,7 +25,7 @@
     </div>
     <div class="bottom flex-col margin-top gap-default">
       <h3>Verwirkliche jetzt dein Webprojekt.</h3>
-      <Button href="/contact" class="cta">
+      <Button href="/booking" class="cta">
         <Icon name="ph:chat-circle-text-duotone" size="1.5em" mode="svg" />
         Lass mal reden
       </Button>
@@ -86,7 +86,14 @@ const skills : Skill[] = [
         children: [
           {
             type: 'plain',
-            content: 'Diese Voraussicht, für den Fall der Fälle vorzusorgen: Die gibt\'s bei mir dazu. ',
+            content: 'Diese Voraussicht, für den Fall der Fälle vorzusorgen:',
+          },
+          {
+            type: 'br',
+          },
+          {
+            type: 'plain',
+            content: 'Die gibt\'s bei mir dazu.',
           },
           {
             type: 'br',

nuxt.config.ts

@@ -59,7 +59,11 @@ export default defineNuxtConfig({
     }
   },
 
-  modules: ['@nuxt/icon', '@vueuse/nuxt'],
+  modules: [
+    '@nuxt/icon',
+    '@nuxt/fonts',
+    '@vueuse/nuxt',
+  ],
 
   icon: {
     customCollections: [