ADD: Contact page

Add contact page with socials

app/components/Booking.vue

@@ -1,7 +1,7 @@
 <template>
   <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>
+    <h1>Projektbuchungen</h1>
+    <h2>Du hast also beschlossen, dass du <span class="highlight">meine Hilfe</span> brauchst. Cool!</h2>
     <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>
 
@@ -48,14 +48,9 @@
       </article>
     </div>
 
-    <article class="z-2 card flex-col gap-default margin-top">
-      <h3>Keinen Bock auf Telen? Understandable.</h3>
-      <p>Dann schreib mir einfach gerne direkt eine E-Mail an
-        <ClientOnly><a class="mail" href="mailto:anfragen@webfussel.de">anfragen@webfussel.de<Icon name="ph:envelope-duotone" aria-hidden="true" alt="mail icon" size="1.2em" mode="svg" /></a></ClientOnly>
-      </p>
-      <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>
+    <div class="flex-col gap-sm margin-top">
+      <Spoiler v-for="entry in faq" v-bind="entry" class="z-2" />
+    </div>
   </section>
 </template>
 
@@ -129,7 +124,7 @@ const oneOff : Service[] = [
     button: 'Frag nach!',
     link: 'https://tidycal.com/webfussel/project-booking',
     list: [
-      'Anforderungsanalyse',
+      'Schulungsinhalte klären',
       'Team-Workshops',
       'Azubi-Betreuung',
       '1:1 Mentoring',
@@ -138,4 +133,36 @@ const oneOff : Service[] = [
   },
 ]
 
+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>