From ce1f28dbb70f46f3483075d58287afd27cc9b8b1 Mon Sep 17 00:00:00 2001
From: xiaomai <xiaomai@ramatex.com.my>
Date: Tue, 21 Oct 2025 09:15:01 +0800
Subject: [PATCH] feat(web-design): add web design service page and navigation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This commit introduces the new 'Web Design' service page.

- Creates the  route to showcase pricing plans for Landing Pages and Official Websites.
- Uses a tabbed layout to organize the different service tiers.
- Adds a '网展开发' link to the main navigation bar in the default layout for easy access.
---
 app/layouts/default.vue        |  18 ++++
 app/pages/web-design/index.vue | 154 +++++++++++++++++++++++++++++++++
 2 files changed, 172 insertions(+)
 create mode 100644 app/pages/web-design/index.vue

diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index 4807a40..b237efe 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -5,6 +5,8 @@
         <div class="text-2xl font-bold">Tootaio Studio</div>
       </template>
 
+      <UNavigationMenu :items="items" />
+
       <template #right>
         <UColorModeButton />
       </template>
@@ -39,6 +41,22 @@
 </template>
 
 <script setup lang="ts">
+import type { NavigationMenuItem } from "@nuxt/ui";
+
+const route = useRoute();
+
+const items = computed<NavigationMenuItem[]>(() => [
+  {
+    label: "宴会大屏展示",
+    to: "/",
+  },
+  {
+    label: "网展开发",
+    to: "/web-design",
+    active: route.path.startsWith("/web-design"),
+  },
+]);
+
 const socialLink = [
   {
     name: "Blog Posts",
diff --git a/app/pages/web-design/index.vue b/app/pages/web-design/index.vue
new file mode 100644
index 0000000..54ef7e0
--- /dev/null
+++ b/app/pages/web-design/index.vue
@@ -0,0 +1,154 @@
+<template>
+  <div>
+    <UContainer>
+      <UTabs :items="servicesProvided">
+        <template #landing-page>
+          <UPricingPlans :plans="landingPagePlans" />
+        </template>
+
+        <template #official-web>
+          <UPricingPlans :plans="officialWebsitePlans" />
+        </template>
+      </UTabs>
+    </UContainer>
+  </div>
+</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",
+  },
+];
+
+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",
+    },
+  },
+]);
+</script>
+
+<style></style>