refactor(pricing): extract web development services to a config file

Moved all web development service and pricing plan data from `web-design/index.vue` to a new `config/web-dev-services.ts` file.

- Centralizes service definitions for easier maintenance and scalability.
- Simplifies the `web-design` page by making it data-driven.
- Replaces static links with dynamic `onClick` handlers that generate a pre-filled WhatsApp message for inquiries.

app/pages/web-design/index.vue

@@ -1,154 +1,26 @@
 <template>
-  <div>
-    <UContainer>
-      <UTabs :items="servicesProvided">
-        <template #landing-page>
-          <UPricingPlans :plans="landingPagePlans" />
-        </template>
+  <UContainer>
+    <UPageHero
+      title="客制化网站设计"
+      description="为您的品牌量身定做一套线上门户，增加产品曝光率与转化率。"
+    />
 
-        <template #official-web>
-          <UPricingPlans :plans="officialWebsitePlans" />
-        </template>
-      </UTabs>
-    </UContainer>
-  </div>
+    <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>
-const servicesProvided = [
-  {
-    label: "Landing Page",
-    icon: "lucide:mouse-pointer-click",
-    slot: "landing-page",
-  },
-  {
-    label: "Official Web",
-    icon: "lucide:globe",
-    slot: "official-web",
-  },
-];
+import { services, note } from "~/config/web-dev-services";
 
-const landingPagePlans = ref([
-  {
-    title: "基础版 Landing Page",
-    description: "适合个人、小型商家，快速上线单页网站。",
-    price: "RM499 起",
-    features: [
-      "单页面结构（1–3 屏）",
-      "响应式设计（手机/平板/桌面）",
-      "基本图文排版",
-      "联系表单或 WhatsApp 按钮",
-      "Google Analytics 整合",
-      "1 次免费修改",
-      "7 日内交付",
-    ],
-    button: {
-      label: "立即咨询",
-      href: "/contact",
-    },
-  },
-  {
-    title: "标准版 Landing Page",
-    description: "适合中小企业与创业团队，提升品牌形象与转化率。",
-    price: "RM1,499 起",
-    features: [
-      "自定义设计风格与品牌配色",
-      "多区块结构（4–6 屏）",
-      "文案优化与视觉建议",
-      "基础 SEO 与性能优化",
-      "Facebook Pixel / GA 追踪整合",
-      "基础动画与动效展示",
-      "2 次免费修改",
-      "14 日内交付",
-    ],
-    featured: true,
-    button: {
-      label: "预约报价",
-      href: "/quote",
-    },
-  },
-  {
-    title: "高定版 Landing Page",
-    description: "为成熟品牌量身打造高转化率页面，强化视觉冲击与数据转化。",
-    price: "RM3,000+",
-    features: [
-      "完全定制设计与交互效果",
-      "品牌策略与信息架构规划",
-      "A/B 测试与用户体验优化",
-      "高级 SEO / 性能与加载优化",
-      "营销工具整合（邮件、CRM、自动化）",
-      "多语言或动态内容支持",
-      "后期维护与数据报告",
-      "项目顾问全程支持",
-    ],
-    button: {
-      label: "申请合作",
-      href: "/consult",
-    },
-  },
-]);
-
-const officialWebsitePlans = ref([
-  {
-    title: "官方网站 · 基础版",
-    description: "适合小型公司、工作室或创业品牌，建立专业在线形象。",
-    price: "RM5,000 起",
-    features: [
-      "最多 5 个页面（首页、关于、服务、联系等）",
-      "响应式设计（手机 / 平板 / 桌面）",
-      "基本 SEO 设置（标题、描述、关键词）",
-      "联系表单 + 地图 + 社交媒体链接",
-      "客户提供图片与文字内容",
-      "1 次免费修改",
-      "基础性能与加载优化",
-    ],
-    button: {
-      label: "获取报价",
-      href: "/contact",
-    },
-  },
-  {
-    title: "官方网站 · 标准版",
-    description: "适合中小企业，强化品牌形象与转化效果。",
-    price: "RM12,000 起",
-    features: [
-      "约 8–12 个页面（首页、关于、团队、服务、案例、博客、联系等）",
-      "品牌定制设计风格 + UI/UX 优化",
-      "响应式与性能优化，兼容多设备",
-      "内容撰写与素材协助（客户与设计师协作）",
-      "可自主管理的后台系统（CMS）",
-      "进阶 SEO 优化（结构、速度、关键词）",
-      "互动功能（表单、预约、客户登录、多语言）",
-      "2–3 次免费修改",
-      "项目交付后 3–6 个月技术支持与维护",
-    ],
-    featured: true,
-    button: {
-      label: "预约标准方案",
-      href: "/quote",
-    },
-  },
-  {
-    title: "官方网站 · 高定版",
-    description: "为成熟品牌量身打造高转化、高性能、高颜值的专属官网。",
-    price: "RM25,000 起",
-    features: [
-      "完全定制视觉与交互设计（含动画与动效）",
-      "品牌策略与信息架构规划",
-      "多语言 / 会员系统 / 客户登录 / 支付整合",
-      "整合外部 API、CRM、ERP、自动化系统",
-      "大型内容库 / 媒体管理 / 定制图像与视频",
-      "高级 SEO + 转化率优化（含 A/B 测试）",
-      "1 年内持续维护、安全与内容更新",
-      "企业级安全与备份机制",
-      "专属项目经理全程对接",
-    ],
-    button: {
-      label: "申请高定方案",
-      href: "/consult",
-    },
-  },
-]);
+const tabItems = services.map((s) => ({
+  label: s.label,
+  icon: s.icon,
+  slot: s.id,
+}));
 </script>
-
-<style></style>