From 0ce3ca2fe575785ddcfadaac5be2947ccc508e30 Mon Sep 17 00:00:00 2001
From: webfussel <fiona@webfussel.de>
Date: Wed, 28 May 2025 13:49:53 +0200
Subject: [PATCH] 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    |  1 +
 app/components/Booking.vue    |  6 +++---
 app/components/Button.vue     | 20 ++++++++++++++------
 app/components/Flatrate.vue   |  6 +++---
 app/components/Skills.vue     |  6 ++----
 app/components/SkillsEasy.vue | 11 +++++++++--
 nuxt.config.ts                |  6 +++++-
 7 files changed, 37 insertions(+), 19 deletions(-)

diff --git a/app/assets/css/spoiler.css b/app/assets/css/spoiler.css
index 7367c1a..d94b8de 100644
--- a/app/assets/css/spoiler.css
+++ b/app/assets/css/spoiler.css
@@ -5,6 +5,7 @@
 
     & .icon {
         color: var(--color-orange);
+        flex: 0 0 1.5rem;
     }
 
     & summary {
diff --git a/app/components/Booking.vue b/app/components/Booking.vue
index 14623e3..3447646 100755
--- a/app/components/Booking.vue
+++ b/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,
diff --git a/app/components/Button.vue b/app/components/Button.vue
index 25bddc0..c8ce8b4 100755
--- a/app/components/Button.vue
+++ b/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,
-      target: href!.startsWith('https://') ? '_blank' : undefined,
+      to: href,
+      target: isExternal ? '_blank' : undefined,
+      external: isExternal,
     }
   }
 }
diff --git a/app/components/Flatrate.vue b/app/components/Flatrate.vue
index 3ed99f4..652e3b4 100755
--- a/app/components/Flatrate.vue
+++ b/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.'
     ]
   },
diff --git a/app/components/Skills.vue b/app/components/Skills.vue
index 0ac3604..56af613 100755
--- a/app/components/Skills.vue
+++ b/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 && 'margin-top bold']">{{t}}</p>
-        </main>
+        <p v-for="(t, i) in skill.text" :class="[i === skill.text.length - 1 && 'bold']">{{t}}</p>
       </article>
     </div>
     <article class="tech-list z-2 card flex-col gap-default margin-top">
diff --git a/app/components/SkillsEasy.vue b/app/components/SkillsEasy.vue
index eec91f8..58aa206 100755
--- a/app/components/SkillsEasy.vue
+++ b/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',
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 2ce7ccf..dc9835b 100755
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -59,7 +59,11 @@ export default defineNuxtConfig({
     }
   },
 
-  modules: ['@nuxt/icon', '@vueuse/nuxt'],
+  modules: [
+    '@nuxt/icon',
+    '@nuxt/fonts',
+    '@vueuse/nuxt',
+  ],
 
   icon: {
     customCollections: [