<template>
  <UContainer>
    <UPageHero
      title="客制化网站设计"
      description="为您的品牌量身定做一套线上门户，增加产品曝光率与转化率。"
    />

    <p class="text-muted py-4 text-center">{{ note }}</p>

    <UTabs :items="tabItems">
      <template v-for="service in services" :key="service.id" #[service.id]>
        <UPricingPlans :plans="service.plans" />
      </template>
    </UTabs>
  </UContainer>
</template>

<script lang="ts" setup>
import { services, note } from "~/config/web-dev-services";

const tabItems = services.map((s) => ({
  label: s.label,
  icon: s.icon,
  slot: s.id,
}));
</script>
