wf4/app/components/Section/Flatrate.vue

<template>
  <section id="services" class="Services content">
    <h1>Prepaid Flatrates</h1>
    <h2>Genieße fusselige <Highlight>Qualität</Highlight> ohne groß herumzurechnen.</h2>

    <p class="margin-top">Bei dir fällt ständig was an oder du hast ein langlaufendes Projekt, bei dem du immer wieder mal Unterstützung brauchst? Kein Ding.
      Hier gibt's die <Highlight>Entwickler-Flat</Highlight> für planbare Kosten und On-Demand-Entwicklung.</p>
    <p class="margin-top-small">Aus Transparenzgründen sei gesagt, dass sich <Highlight>alle Preise zzgl. 19 % Umsatzsteuer</Highlight> verstehen.</p>

    <FreeInfo />

    <div class="Pricing margin-top">
      <article v-for="(service, index) in flatrate" :class=" { 'z-2' : index === 1, 'z-1' : index !== 1 }">
        <header>
          <span v-if="service.best" class="chip dark z-2"><Icon name="ph:fire-duotone" mode="svg"/> Beschd</span>
          <strong class="margin-top-small">{{service.title}}</strong>
          <p class="claim">{{service.smallClaim}}</p>
          <p class="price">{{intl.format(service.price)}}<span class="post">/ Monat</span></p>
          <div aria-hidden="true" class="bg-icon">
            <Icon :name="service.icon" size="1.5em" mode="svg" />
          </div>
        </header>
        <main>
          <ul>
            <li>
              <Icon class="icon yes" name="ph:check-circle-duotone" mode="svg" />
              <span class="value">{{ service.hours }} Stunden pro Woche zugesichert</span>
            </li>
            <li v-for="(check, index) in service.checks">
              <Icon class="icon" :class="{ 'yes' : check, 'no' : !check }" :name="check ? 'ph:check-circle-duotone' : 'ph:x-circle-duotone'" mode="svg" />
              <span class="value">{{ points[index] }}</span>
            </li>
          </ul>
        </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>
          <p class="conmin margin-top-small">Die Mindestvertragslaufzeit beträgt {{ service.contractMin }} Monate.</p>
        </footer>
      </article>
    </div>

    <div v-if="faq" class="flex-col gap-sm margin-top">
      <ContentRenderer :value="faq" :style="{ display: 'contents' }" />
    </div>
  </section>
</template>

<script setup lang="ts">
type Service = {
  title: string
  smallClaim: string
  icon: string
  button: string
  link: string
  best: boolean
  price: number
  hours: number
  contractMin: number
  checks: boolean[]
}

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

const points : string[] = [
  'Kontakt per E-Mail',
  'Kontakt per Instant Messaging',
  'Kontakt per Video Call',
  'Weiterführende Performance Optimierung',
  'Framework Migration',
]

const flatrate : Service[] =
    [
      {
        title: 'Casual',
        smallClaim: 'Für kleine Aufgaben nebenbei.',
        icon: 'ph:baby-carriage-thin',
        button: 'Jetzt klar machen',
        link: 'https://tidycal.com/webfussel/flatrate-casual',
        best: false,
        price: 2950,
        hours: 5,
        contractMin: 3,
        checks: [
          true,
          false,
          false,
          false,
          false,
        ],
      },
      {
        title: 'Gold-Fussel',
        smallClaim: 'Wenn\'s mal wieder zu viel wird.',
        icon: 'ph:coins-thin',
        button: 'Jetzt Gold schürfen',
        link: 'https://tidycal.com/webfussel/flatrate-gold-fussel',
        best: true,
        price: 5555,
        hours: 10,
        contractMin: 3,
        checks: [
          true,
          true,
          false,
          true,
          false,
        ],
      },
      {
        title: 'Big Chonker',
        smallClaim: 'Für die richtig großen Sachen.',
        icon: 'ph:skull-thin',
        button: 'Jetzt Fett trimmen',
        link: 'https://tidycal.com/webfussel/flatrate-big-chonker',
        best: false,
        price: 8550,
        hours: 15,
        contractMin: 6,
        checks: [
          true,
          true,
          true,
          true,
          true,
        ],
      }
    ]

const faq = await queryCollection('faq').path('/snippets/faq/flatrate').first()
</script>