<template>
  <section id="skills_easy" class="Skills content">
    <h2>Jetzt mal ganz konkret.</h2>
    <h3>In diesem Abschnitt ganz <Highlight>ohne Technik-Blabla</Highlight>.</h3>
    <div class="skill-container flex-col margin-top gap-default">
      <ContentRenderer v-for="skill in skills" :key="skill.id" :value="skill" :style="{ display: 'contents' }" />
    </div>
    <div class="bottom flex-col margin-top gap-default">
      <h3>Verwirkliche jetzt dein Webprojekt.</h3>
      <Button href="/booking/" class="cta">
        <Icon name="ph:chat-circle-text-duotone" size="1.5em" mode="svg" />
        Lass mal reden
      </Button>
    </div>
  </section>
</template>

<script setup lang="ts">
const skills = await queryCollection('skills').all()
</script>
