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

const projectsQuery = useFeaturedMobileProjects();

const projects = computed(() => {
  return projectsQuery.data.value?.projects.data ?? [];
});
</script>
<template>
  <section id="projects-slider" class="py-section bg-gradient-even">
    <div class="container mx-auto px-4">
      <SectionHeadline :title="$t('projectsSlider.mobileAppstitle')" />
      <p
        class="dark-text-gradient mx-auto block! pb-[3.5rem] text-center lg:w-[800px]"
      >
        {{ $t("projectsSlider.description") }}
      </p>
      <StackedProductsCarouselMobile :projects="projects" />
    </div>
  </section>
</template>
<style scoped></style>
