feat(pages): add web development services page

This commit introduces a new page at `/webDev` to display web development services and pricing plans.

To support this, a new reusable composable `useLocalizedCollection` has been created to simplify fetching localized content from Nuxt
Content. The index page has been refactored to use this new composable.

- Adds `webDev.vue` page and corresponding `webDev.yml` content files for EN and ZH.
- Defines a Zod schema in `content.config.ts` for the new content type.
- Updates the navigation link to point to the new page.
This commit is contained in:
xiaomai
2025-11-06 09:02:50 +08:00
parent 31a4103f9b
commit 8cc04b7f59
7 changed files with 339 additions and 41 deletions

23
app/pages/webDev.vue Normal file
View File

@@ -0,0 +1,23 @@
<template>
<UContainer>
<UPageHero :title="page?.title" :description="page?.description" />
<p class="text-muted py-4 text-center">{{ page?.remarks }}</p>
<UTabs :items="page?.services.map((s) => ({ ...s, slot: s.id }))">
<template
v-for="service in page?.services"
:key="service.id"
#[service.id]
>
<UPricingPlans :plans="service.plans" />
</template>
</UTabs>
</UContainer>
</template>
<script lang="ts" setup>
const { data: page } = await useLocalizedCollection("webDev");
</script>
<style></style>