wf4/app/components/Booking.vue

<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>
    <p class="margin-top">Hinter meinen 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>
    </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 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" />
                <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 }}
            </Button>
          </div>
        </footer>
      </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>
    <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>

<script setup lang="ts">
type Service = {
  title: string
  smallClaim: string
  price: {
    value: number | string
    pre?: 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: 'magnifying-glass',
    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: 'trend-up',
    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: 'Enterprise',
    price: {
      value: 'Auf Anfrage',
    },
    smallClaim: 'Für die ganz großen Sachen.',
    icon: 'building-office',
    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'
        ],
    ],
  },
]

</script>