wf4/app/components/Services.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>
    <div class="service-list margin-top gap-default">
      <article v-for="service in services" class="z-2 card flex-col gap-default">
        <h3 class="flex-col gap-default">
          <span>{{service.title}}</span>
          <span class="highlight">{{'pre' in service.price ? `${service.price.pre} ` : ''}}{{service.price.value}} €* {{service.price.period}}</span>
        </h3>
        <span class="chip">{{service.availability}}</span>
        <p>{{service.smallClaim}}</p>
        <Button :href="service.link" class="cta" aria-label="Zur externen Seite von zur Terminbuchung">
          {{ service.button }}
          <Icon :name="`ph:${service.icon}-duotone`" size="1.5em" mode="svg"></Icon>
        </Button>
        <ul class="flex-col">
          <li v-for="point in service.list">
            <Icon class="color-icon" name="ph:caret-circle-double-right-duotone" aria-hidden="true" alt="checkmark icon" size="1.5em" mode="svg" />
            <span>{{point}}</span>
          </li>
        </ul>
      </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>
    <ClientOnly>
      <div class="network-list margin-top">
        <div class="scroll-container gap-default">
          <Person ref="persons" v-for="person in network" v-bind="person" />
        </div>
      </div>
    </ClientOnly>
  </section>
</template>

<script setup lang="ts">
import Person from '~/components/Person.vue'

const slots : number = 0
const slotsLabel = `${slots} ${slots === 1 ? `Slot` : `Slots`} frei`

const freeFromDate = new Date(2025, 6, 1)
const intl = new Intl.DateTimeFormat('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric'})
const readableDate = intl.format(freeFromDate)

const services = [
  {
    title: 'Quick Check',
    price: {
      value: 149,
      period: '/ Einmalig',
    },
    availability: 'Frei',
    smallClaim: 'Du hast eine Homepage und willst mal drüber schauen lassen?',
    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,
      period: '/ Gestaffelt'
    },
    availability: slotsLabel,
    smallClaim: 'Umsetzung deiner Vision. Von einzelnen Tickets bis hin zu kompletten Anwendungen.',
    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: 'Stundenbuchung',
    availability: `Frei ab ${readableDate}`,
    price: {
      value: 105,
      period: '/ Stunde',
    },
    smallClaim: 'Du brauchst einfach Unterstützung im Team, bis sich der Trubel legt?',
    icon: 'timer',
    button: 'Jetzt buchen',
    link: 'https://tidycal.com/webfussel/hourly-booking',
    list: [
      'Flexible Aufgabenverteilung',
      'Arbeiten nach agilen Prinzipien',
      'Monatliche Abrechnung',
      'Kündigungsfrist von einer Woche',
      'Flexible Buchung ab 80 Stunden',
    ],
  }
]


const shuffle = <T>(unshuffled : T[]) => unshuffled
    .map(value => ({ value, sort: Math.random() }))
    .sort((a, b) => a.sort - b.sort)
    .map(({ value }) => value)

const network = shuffle([
  {
    name: 'Robert Janus',
    img: 'robert',
    tags: ['Digitalberatung', 'Webentwicklung', 'eCommerce'],
    flavour: 'Website, SEO und Conversions. Auf einen Klick.',
    link: 'https://robertjanus.de/webertoire',
  },
  // {
  //   name: 'Matthias Lehmann',
  //   img: 'matthias',
  //   tags: ['Onlineportale für Patienten', 'Kunden', 'Mitarbeiter'],
  //   flavour: 'Software die macht, was DU willst!',
  //   link: 'https://mind-deploy.de',
  // },
  {
    name: 'Maximilian Schluer',
    img: 'max',
    tags: ['iOS Development', 'Software-QA'],
    flavour: 'Kann dein iOS-Team unterstützen oder dein Software-Qualitätsproblem lösen – egal welches.',
    link: 'https://max-schluer.de',
  },
  // {
  //   name: 'Maria Salcedo',
  //   img: 'maria',
  //   tags: ['Backend', 'DevOps', 'Architektur'],
  //   flavour: 'Effizient und kommunikativ. "You build it, you run it."',
  //   link: 'https://masagu.dev',
  // },
  {
    name: 'Judith Böhlert',
    img: 'judith',
    tags: ['Full-stack', 'Frontend'],
    flavour: 'MVPs und Prototypen - schnell, schick und ohne Drama.',
    link: 'https://judithboehlert.com',
  },
  {
    name: 'Kevin Damiani',
    img: 'kevin',
    tags: ['Webentwicklung', 'Frontend'],
    flavour: 'Erfahrener Frontend-Entwickler mit Fokus auf Performance, Barrierefreiheit und moderne Technologien.',
    link: 'https://kevin-damiani.de',
  },
])
</script>