CardProgram.vue

<script setup>
  import CardProgramItem from "./CardProgramItem"
</script>

<template>
  <div class="bg-pirati-yellow py-16">
    <div class="container--wide">
      <h2 class="head-14xl head-compact mb-8">{{ label }}</h2>

      <ul
        class="
          flex gap-3 w-full flex-col

          xl:flex-row
        "
      >
        <CardProgramItem
          v-for="(point, index) in points"
          :key="point.slug"
          :slug="point.slug"
          :defaultIsOpen="index === 0"
          :number="point.number"
          :title="point.title"
          :content="point.content"
          :points="point.points"
        />
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "CardProgram",
  props: ["points", "label"],
}
</script>