wf4/app/components/Booking.vue

<template>
  <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">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. Januar 2026</span>.</p>
    </article>

    <h3 class="margin-top-big">One off Projekte</h3>
    <p class="margin-top-small">Manchmal brauchen wir alle einfach nur eine Kleinigkeit und will sich 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>

    <div class="Pricing margin-top">
      <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>
          <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="service.icon" size="1.5em" mode="svg" />
          </div>
        </header>
        <main>
          <div class="list-container">
            <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>
          <div class="button-wrapper z-2">
            <Button :href="service.link" aria-label="Zur externen Seite Terminbuchung" :design="index === 1 ? 'default' : 'white'">
              {{ service.button }}
            </Button>
          </div>
        </footer>
      </article>
    </div>

    <div class="flex-col gap-sm margin-top">
      <Spoiler v-for="entry in faq" v-bind="entry" class="z-2" />
    </div>
  </section>
</template>

<script setup lang="ts">
type Service = {
  title: string
  smallClaim: string
  price: {
    value: number | string
    pre?: string
    post?: string
  }
  icon: string
  button: string
  link: string
  list: string[]
}

const intl = new Intl.NumberFormat(
    'de-DE',
    {
      style: 'currency',
      currency: 'EUR',
      minimumFractionDigits: 0,
      maximumFractionDigits: 0,
    })

const oneOff : Service[] = [
  {
    title: 'Quick Check',
    price: {
      value: 149,
    },
    smallClaim: 'A11y, bugs, schlechter Code.',
    icon: 'ph:magnifying-glass-thin',
    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',
    ],
  }, {
    title: 'Projektbuchung',
    price: {
      pre: 'ab',
      value: 999,
    },
    smallClaim: 'Deine Vision.',
    icon: 'ph:trend-up-thin',
    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',
    ],
  }, {
    title: 'Schulung',
    price: {
      pre: 'ab',
      value: 1499,
      post: '/ Tag / Person',
    },
    smallClaim: 'Wenn man\'s selber können muss.',
    icon: 'ph:graduation-cap-thin',
    button: 'Frag nach!',
    link: 'https://tidycal.com/webfussel/project-booking',
    list: [
      'Schulungsinhalte klären',
      'Team-Workshops',
      'Azubi-Betreuung',
      '1:1 Mentoring',
      'Abrechnung pro Person und Tag',
    ],
  },
]

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>