diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md
new file mode 100644
index 0000000..c99c08a
--- /dev/null
+++ b/.github/copilot-instructions.md
@@ -0,0 +1,41 @@
+This repository is a small Nuxt 4 site (TypeScript + Vue 3) using the `@nuxt/ui` component kit.
+
+Quick context
+- Framework: Nuxt 4 (see `nuxt.config.ts`). compatibilityDate is 2025-07-15 and `@nuxt/ui` is enabled.
+- Scripts: `dev`, `build`, `generate`, `preview` are defined in `package.json`. Use `pnpm` in this workspace (pnpm-lock present).
+- UI: Pages and layout live under `app/` (Nuxt App Directory). Components from `@nuxt/ui` (prefixed with `U*`) are used throughout.
+
+What an AI coding agent should know/do first
+- Run local dev: `pnpm dev` to start Nuxt dev server (http://localhost:3000). Changes in `app/` hot-reload.
+- Preserve TypeScript usage: files use `lang="ts"` in SFCs and `typescript` is a dependency.
+- Styling: `app/assets/css/main.css` imports Tailwind and `@nuxt/ui`. Avoid removing these imports.
+
+Project-specific patterns and conventions
+- Use Nuxt app directory layout: `app/app.vue`, `app/layouts/default.vue`, `app/pages/*.vue`. Add pages/components under `app/`.
+- UI primitives: Expect `UApp`, `UHeader`, `UMain`, `UFooter`, `UPageHero`, `UContainer`, `UForm`, `UCard`, `UInput`, `USelect`, etc. These are provided by `@nuxt/ui` — prefer those over adding new UI libraries.
+- Minimal global JS: logic is inside pages via `<script setup lang="ts">`. Prefer composition API and `reactive`/`ref` patterns as in `app/pages/index.vue`.
+- Validation: the example uses `zod` (imported locally in the page). If adding validation follow the zod pattern (schema + z.infer for types).
+
+Integration and external dependencies
+- No backend code in this repo — it's a frontend site. If integrating APIs, add runtime config to `nuxt.config.ts` and use Nuxt server or composables to centralize calls.
+- Build & preview: `pnpm build` then `pnpm preview` to check production output.
+
+When editing or adding files
+- Keep naming under `app/` and follow existing patterns (SFC + TS + `script setup`).
+- Add imports for UI components only when needed; many U* components are globally available via `@nuxt/ui`.
+- Update `app/assets/css/main.css` only to add project-specific styles; don't remove `@nuxt/ui` or Tailwind imports.
+
+Examples to reference when making changes
+- `nuxt.config.ts` — module list and devtools flag.
+- `package.json` — available scripts.
+- `app/pages/index.vue` — form structure, `zod` usage, `reactive` state, `U*` components.
+- `app/layouts/default.vue` — shows header/footer composition and use of slots for `UHeader` and `UFooter`.
+
+Failure modes & quick checks
+- If the dev server fails, check Node version and `pnpm install` exit logs; `nuxt prepare` runs on postinstall.
+- Type errors appear when SFCs change TS types — run `pnpm dev` and inspect terminal/console errors.
+
+If unclear or missing context
+- Ask the maintainer whether there are environment variables, deployment targets, or private packages to consider before adding integrations or CI.
+
+End of instructions — ask for feedback if anything here is unclear or you'd like more granular conventions (commit messages, PR checks, etc.).
diff --git a/.npmrc b/.npmrc
new file mode 100644
index 0000000..c483022
--- /dev/null
+++ b/.npmrc
@@ -0,0 +1 @@
+shamefully-hoist=true
\ No newline at end of file
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..bd4a5b9
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,24 @@
+{
+  "files.associations": {
+    "*.page-template": "vue",
+    "*.layout-template": "vue",
+    "*.vue": "vue",
+    "*.css": "tailwindcss"
+  },
+  "editor.quickSuggestions": {
+    "other": "on",
+    "comments": "off",
+    "strings": "on"
+  },
+  "tailwindCSS.classAttributes": [
+    "class",
+    "className",
+    "ngClass",
+    "class:list",
+    "ui"
+  ],
+  "tailwindCSS.experimental.classRegex": [
+    ["ui:\\s*{([^)]*)\\s*}", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
+  ],
+  "css.lint.unknownAtRules": "ignore"
+}
diff --git a/app/app.vue b/app/app.vue
index 09f935b..5acf3c1 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -1,6 +1,7 @@
 <template>
-  <div>
-    <NuxtRouteAnnouncer />
-    <NuxtWelcome />
-  </div>
+  <UApp>
+    <NuxtLayout>
+      <NuxtPage />
+    </NuxtLayout>
+  </UApp>
 </template>
diff --git a/app/assets/css/main.css b/app/assets/css/main.css
new file mode 100644
index 0000000..7c95c6f
--- /dev/null
+++ b/app/assets/css/main.css
@@ -0,0 +1,2 @@
+@import "tailwindcss";
+@import "@nuxt/ui";
diff --git a/app/components/eventOrder/MetaDetails.vue b/app/components/eventOrder/MetaDetails.vue
new file mode 100644
index 0000000..b9c7b2a
--- /dev/null
+++ b/app/components/eventOrder/MetaDetails.vue
@@ -0,0 +1,68 @@
+<template>
+  <UCard>
+    <template #header>
+      <h2 class="text-xl font-bold">{{ secIdx }}. 您的活动信息</h2>
+      <p class="text-muted text-sm">
+        您提供的联系方式与活动信息仅用于沟通与履约，本工作室将妥善保护，不会未经同意向第三方公开或出售。
+      </p>
+    </template>
+
+    <div class="grid gap-4">
+      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+        <UFormField name="contactName" label="联络人姓名" required>
+          <UInput v-model="orderState.contactName" class="w-full" />
+        </UFormField>
+
+        <UFormField name="contactNumber" label="联系方式（推荐 WhatsApp）">
+          <div class="flex items-center gap-2">
+            <UCheckbox
+              v-model="orderState.isSameContact"
+              label="当前手机号码？"
+              class="whitespace-nowrap"
+            />
+            <UInput
+              v-model="orderState.contactNumber"
+              :disabled="orderState.isSameContact"
+              :class="[
+                'w-full transition-opacity duration-300',
+                orderState.isSameContact ? 'opacity-0 pointer-events-none' : '',
+              ]"
+            />
+          </div>
+        </UFormField>
+      </div>
+
+      <!-- 活动信息 -->
+      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+        <UFormField name="eventName" label="活动名称" required>
+          <UInput
+            v-model="orderState.eventName"
+            class="w-full"
+            placeholder="如果可能，请写上活动全名"
+          />
+        </UFormField>
+
+        <UFormField name="eventDate" label="活动日期" required>
+          <UInput type="date" v-model="orderState.eventDate" class="w-full" />
+        </UFormField>
+
+        <UFormField name="eventLocation" label="地点" required>
+          <USelect
+            v-model="orderState.eventLocation"
+            :items="eventLocationItems"
+            placeholder="请选择地点"
+            class="w-full"
+          />
+        </UFormField>
+      </div>
+    </div>
+  </UCard>
+</template>
+
+<script lang="ts" setup>
+const { sectionIndex, orderState, eventLocationItems } = useEventOrder();
+
+const secIdx = ref(++sectionIndex.value);
+</script>
+
+<style></style>
diff --git a/app/components/eventOrder/ProductBackgroundDesign.vue b/app/components/eventOrder/ProductBackgroundDesign.vue
new file mode 100644
index 0000000..7d25683
--- /dev/null
+++ b/app/components/eventOrder/ProductBackgroundDesign.vue
@@ -0,0 +1,78 @@
+<template>
+  <UCard>
+    <template #header>
+      <h2 class="text-xl font-bold">{{ secIdx }}. 背景设计</h2>
+      <p class="text-muted text-sm">自研动态背景效果，可以自定义形象动态图。</p>
+    </template>
+
+    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+      <UCheckbox
+        v-model="orderState.backgroundDesign"
+        label="订阅服务"
+        description="默认屏幕尺寸为 1920 &times; 1080。须和屏幕供应单位获取详细尺寸，确保展示无误。"
+      />
+
+      <div
+        v-if="orderState.backgroundDesign"
+        :class="['grid', 'grid-cols-1', 'gap-4']"
+      >
+        <UFormField name="backgroundType">
+          <URadioGroup
+            v-model="orderState.backgroundType"
+            color="primary"
+            variant="table"
+            default-value="static"
+            :items="backgroundTypeSelection"
+            orientation="horizontal"
+          />
+        </UFormField>
+        <div class="flex gap-4">
+          <UFormField
+            label="屏宽"
+            name="backgroundWidthOverride"
+            class="flex-1"
+          >
+            <UInput
+              type="number"
+              v-model="orderState.backgroundWidthOverride"
+              placeholder="1920"
+              class="w-full"
+            />
+          </UFormField>
+          <span class="text-2xl">&times;</span>
+          <UFormField
+            label="屏高"
+            name="backgroundHeightOverride"
+            class="flex-1"
+          >
+            <UInput
+              type="number"
+              v-model="orderState.backgroundHeightOverride"
+              placeholder="1080"
+              class="w-full"
+            />
+          </UFormField>
+        </div>
+      </div>
+    </div>
+  </UCard>
+</template>
+
+<script lang="ts" setup>
+import type { RadioGroupItem } from "@nuxt/ui";
+
+const { sectionIndex, orderState } = useEventOrder();
+
+const secIdx = ref(++sectionIndex.value);
+
+const backgroundTypeSelection = ref<RadioGroupItem[]>([
+  { label: "静态背景图", value: "static" },
+  {
+    label: "动态背景图",
+    value: "dynamic",
+    description: "由于技术原因，不能保证每次都能对成果进行微调。",
+  },
+]);
+</script>
+
+<style></style>
diff --git a/app/components/eventOrder/ProductBidding.vue b/app/components/eventOrder/ProductBidding.vue
new file mode 100644
index 0000000..3bbf9ba
--- /dev/null
+++ b/app/components/eventOrder/ProductBidding.vue
@@ -0,0 +1,54 @@
+<template>
+  <UCard>
+    <template #header>
+      <h2 class="text-xl font-bold">{{ secIdx }}. 宴会竞标大屏</h2>
+      <p class="text-muted text-sm">
+        自研竞标展示系统，全马首创，适用于宴会、活动、庆典等场合，具备实时竞标显示功能。
+      </p>
+    </template>
+
+    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 items-center">
+      <UCheckbox
+        v-model="orderState.biddingSystem"
+        label="订阅服务"
+        description="包含图片处理 & 宴会当日技术支持（场控 / 协调）"
+      />
+
+      <UCheckbox
+        v-model="orderState.biddingSystemProvideImage"
+        label="提供照片？"
+        description="活动方将发送标品图片给予本工作室"
+        :class="[orderState.biddingSystem ? '' : 'opacity-0']"
+        :disabled="!orderState.biddingSystem"
+      />
+
+      <UFormField
+        name="estimatedBidItemCount"
+        label="标品数量预估"
+        :class="[orderState.biddingSystem ? '' : 'opacity-0']"
+      >
+        <USelect
+          v-model="orderState.estimatedBidItemCount"
+          :items="itemCountRanges"
+          placeholder="请选择预估数量区间"
+          :class="['w-full']"
+          :disabled="!orderState.biddingSystem"
+        />
+      </UFormField>
+    </div>
+  </UCard>
+</template>
+
+<script lang="ts" setup>
+const { sectionIndex, orderState } = useEventOrder();
+
+const secIdx = ref(++sectionIndex.value);
+
+const itemCountRanges = Array.from({ length: 4 }, (_, i) => {
+  const start = 10 + i * 10;
+  const end = start + 10;
+  return { label: `${start} ~ ${end}`, value: `${start}-${end}` };
+});
+</script>
+
+<style></style>
diff --git a/app/components/eventOrder/ProductFlowDesign.vue b/app/components/eventOrder/ProductFlowDesign.vue
new file mode 100644
index 0000000..ebcacd4
--- /dev/null
+++ b/app/components/eventOrder/ProductFlowDesign.vue
@@ -0,0 +1,65 @@
+<template>
+  <UCard>
+    <template #header>
+      <h2 class="text-xl font-bold">{{ secIdx }}. 流程 PPT 设计</h2>
+    </template>
+
+    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 items-center">
+      <UCheckbox
+        v-model="orderState.flowBackgroundDesign"
+        label="订阅服务"
+        description="包含图片处理 & 宴会当日技术支持（场控 / 协调）"
+      />
+
+      <UFormField
+        name="backgroundSourceProvided"
+        label="是否提供背景设计稿？"
+        :class="[orderState.flowBackgroundDesign ? '' : 'opacity-0']"
+      >
+        <USwitch
+          v-model="orderState.backgroundSourceProvided"
+          :label="
+            orderState.backgroundSourceProvided
+              ? '我将提供背景图片'
+              : '需要重新临摹设计'
+          "
+          :description="
+            orderState.backgroundSourceProvided
+              ? '活动方将发送背景设计稿给予本工作室'
+              : '需要工作室重新设计背景图'
+          "
+          :disabled="!orderState.flowBackgroundDesign"
+          required
+        />
+      </UFormField>
+
+      <UFormField
+        name="pptDesignQty"
+        label="标品数量预估"
+        :class="[orderState.flowBackgroundDesign ? '' : 'opacity-0']"
+      >
+        <UInput
+        type="number"
+          v-model="orderState.pptDesignQty"
+          placeholder="请选择预估数量区间"
+          :class="['w-full']"
+          :disabled="!orderState.flowBackgroundDesign"
+        />
+      </UFormField>
+    </div>
+
+    <template #footer>
+      <p class="text-muted text-sm">
+        包含基础排版与动画，可额外购买内容编排服务（另计）
+      </p>
+    </template>
+  </UCard>
+</template>
+
+<script lang="ts" setup>
+const { sectionIndex, orderState } = useEventOrder();
+
+const secIdx = ref(++sectionIndex.value);
+</script>
+
+<style></style>
diff --git a/app/components/eventOrder/ProductSponsor.vue b/app/components/eventOrder/ProductSponsor.vue
new file mode 100644
index 0000000..ee0efbb
--- /dev/null
+++ b/app/components/eventOrder/ProductSponsor.vue
@@ -0,0 +1,25 @@
+<template>
+  <UCard>
+    <template #header>
+      <h2 class="text-xl font-bold">{{ secIdx }}. 赞助商名册</h2>
+      <p class="text-muted text-sm">
+        附送一个<strong>基础款</strong>手机端电子征信录，可定制（另计）
+      </p>
+    </template>
+
+    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 items-center">
+      <UCheckbox
+        v-model="orderState.sponsorListDesign"
+        label="订阅服务"
+      />
+    </div>
+  </UCard>
+</template>
+
+<script lang="ts" setup>
+const { sectionIndex, orderState } = useEventOrder();
+
+const secIdx = ref(++sectionIndex.value);
+</script>
+
+<style></style>
diff --git a/app/composables/eventOrder.ts b/app/composables/eventOrder.ts
new file mode 100644
index 0000000..40fdee2
--- /dev/null
+++ b/app/composables/eventOrder.ts
@@ -0,0 +1,94 @@
+import * as z from "zod";
+import { createSharedComposable } from "@vueuse/core";
+
+export const _useEventOrder = () => {
+  const sectionIndex = ref(0);
+
+  function formatLocalDate(date: Date): string {
+    const y = date.getFullYear();
+    const m = String(date.getMonth() + 1).padStart(2, "0");
+    const d = String(date.getDate()).padStart(2, "0");
+    return `${y}-${m}-${d}`;
+  }
+
+  const EVENT_LOCATIONS = [
+    "永平区",
+    "周边城市（Batu Pahat / Kluang）",
+    "柔佛州境内",
+    "柔佛州境外",
+  ] as const;
+
+  const eventLocationItems = ref<string[]>([...EVENT_LOCATIONS]);
+
+  const orderSchema = z.object({
+    contactName: z.string().min(1, "姓名不能为空"),
+    // 用户可以选择是否使用同一联系方式
+    isSameContact: z.boolean().default(true),
+    contactNumber: z.string().optional(),
+    eventName: z.string().min(1, "活动名称不能为空"),
+    eventDate: z
+      .string()
+      .refine((date) => {
+        return !isNaN(Date.parse(date));
+      }, "无效的日期")
+      .refine((date) => {
+        const eventDate = new Date(date);
+        const today = new Date();
+        // 仅按日期比较（忽略时间）
+        eventDate.setHours(0, 0, 0, 0);
+        today.setHours(0, 0, 0, 0);
+        // 活动日期必须是今天或未来的日期
+        return eventDate.getTime() >= today.getTime();
+      }, "活动日期必须是今天或未来的日期"),
+    eventLocation: z.enum(EVENT_LOCATIONS),
+    // 服务：竞标系统
+    biddingSystem: z.boolean().default(false),
+    biddingSystemProvideImage: z.boolean().default(false).optional(),
+    estimatedBidItemCount: z.string().optional(),
+    // 服务：背景设计
+    backgroundDesign: z.boolean().default(false),
+    backgroundType: z.enum(["static", "dynamic"]).optional(),
+    backgroundWidthOverride: z.number().optional(),
+    backgroundHeightOverride: z.number().optional(),
+    // 服务：流程 PPT 设计
+    flowBackgroundDesign: z.boolean().default(false),
+    backgroundSourceProvided: z.boolean().default(false), // 如果自己设计的，那么就没有这个额外收费
+    pptDesignQty: z
+      .number()
+      .min(1, "最少都要一张")
+      .max(20, "太多了我来不及做设计"),
+    // 服务：赞助商征信录设计
+    sponsorListDesign: z.boolean().default(false),
+  });
+
+  type OrderForm = z.infer<typeof orderSchema>;
+
+  const orderState = reactive<OrderForm>({
+    contactName: "",
+    isSameContact: true,
+    contactNumber: "",
+    eventName: "",
+    eventDate: formatLocalDate(new Date()),
+    eventLocation: EVENT_LOCATIONS[0],
+    biddingSystem: false,
+    biddingSystemProvideImage: false,
+    estimatedBidItemCount: "30-40",
+    backgroundDesign: false,
+    backgroundType: "static",
+    backgroundWidthOverride: 1920,
+    backgroundHeightOverride: 1080,
+    flowBackgroundDesign: false,
+    backgroundSourceProvided: false,
+    pptDesignQty: 1,
+    sponsorListDesign: false,
+  });
+
+  return {
+    sectionIndex,
+    eventLocationItems,
+    orderSchema,
+    orderState,
+  };
+};
+
+export const useEventOrder = createSharedComposable(_useEventOrder);
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
new file mode 100644
index 0000000..4807a40
--- /dev/null
+++ b/app/layouts/default.vue
@@ -0,0 +1,59 @@
+<template>
+  <UApp>
+    <UHeader>
+      <template #left>
+        <div class="text-2xl font-bold">Tootaio Studio</div>
+      </template>
+
+      <template #right>
+        <UColorModeButton />
+      </template>
+    </UHeader>
+
+    <UMain>
+      <slot />
+    </UMain>
+
+    <UFooter>
+      <template #left>
+        <p class="text-muted text-sm">
+          Copyright &copy; 2021 - {{ new Date().getFullYear() }} Tootaio Studio.
+          All Rights Reserved.
+        </p>
+      </template>
+
+      <template #right>
+        <UButton
+          v-for="link in socialLink"
+          :key="link.name"
+          :icon="link.icon"
+          color="neutral"
+          variant="ghost"
+          :to="link.link"
+          target="_blank"
+          :aria-label="link.name"
+        />
+      </template>
+    </UFooter>
+  </UApp>
+</template>
+
+<script setup lang="ts">
+const socialLink = [
+  {
+    name: "Blog Posts",
+    icon: "lucide:globe",
+    link: "https://xiaomai.tootaio.com",
+  },
+  {
+    name: "Official Website",
+    icon: "lucide:mouse-pointer-click",
+    link: "https://tootaio.com",
+  },
+  {
+    name: "GitHub",
+    icon: "lucide:github",
+    link: "https://github.com/kingsmai",
+  },
+];
+</script>
diff --git a/app/pages/index.vue b/app/pages/index.vue
new file mode 100644
index 0000000..dca64bb
--- /dev/null
+++ b/app/pages/index.vue
@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <UPageHero
+      title="客制化高定系统"
+      description="以自研技术为核心，专注打造高度定制化的交互展示系统。首创动态竞标与赞助商展示方案，全面支持宴会、活动与颁奖典礼等多场景应用，让每一场盛会更具视觉冲击与品牌价值。"
+    />
+
+    <UContainer>
+      <UForm :schema="orderSchema" :state="orderState" class="space-y-4">
+        <!-- 联系人信息 -->
+        <EventOrderMetaDetails />
+        <!-- 竞标大屏 -->
+        <EventOrderProductBidding />
+        <!-- 背景设计 -->
+        <EventOrderProductBackgroundDesign />
+        <!-- 致辞 / 流程 PPT 设计 -->
+        <EventOrderProductFlowDesign />
+        <!-- 赞助商名册 -->
+        <EventOrderProductSponsor />
+      </UForm>
+    </UContainer>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const { orderSchema, orderState } = useEventOrder();
+</script>
+
+<style></style>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 9ce9cf0..3f94e4e 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -3,4 +3,5 @@ export default defineNuxtConfig({
   compatibilityDate: "2025-07-15",
   devtools: { enabled: true },
   modules: ["@nuxt/ui"],
+  css: ["~/assets/css/main.css"],
 });
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
new file mode 100644
index 0000000..c7aa842
--- /dev/null
+++ b/pnpm-workspace.yaml
@@ -0,0 +1,5 @@
+onlyBuiltDependencies:
+  - '@parcel/watcher'
+  - '@tailwindcss/oxide'
+  - esbuild
+  - vue-demi