<script setup lang="ts">
import { useFeaturedWebProjects } from "~/queries/featuredProjects";

const projectsQuery = useFeaturedWebProjects();
const projects = computed(() => projectsQuery.data.value?.projects.data ?? []);
</script>
<template>
  <section class="py-section bg-gradient-even">
    <div class="container mx-auto px-4">
      <SectionHeadline
        :title="$t('projectsSlider.webAppstitle')"
        class="!pb-0"
      />
      <p class="dark-gradient-text pb-[3.5rem] text-center">
        {{ $t("projectsSlider.description") }}
      </p>
      <StackedProductsCarousel :projects="projects" />
    </div>
  </section>
</template>

<style scoped></style>
