diff --git a/app/components/softwareDevelopment/app/index.vue b/app/components/softwareDevelopment/app/index.vue
new file mode 100644
index 0000000..0c0b88c
--- /dev/null
+++ b/app/components/softwareDevelopment/app/index.vue
@@ -0,0 +1,515 @@
+<script lang="ts" setup>
+// 创特App开发事业部数据
+const appDevelopmentDivision = {
+  title: '创特App开发事业部',
+  subtitle: '帮助企业快速实现移动化',
+  description: '专业的移动应用开发团队，为企业提供全方位的移动化解决方案'
+}
+
+// APP开发核心价值
+const coreValues = [
+  {
+    id: 1,
+    icon: 'i-lucide-smartphone',
+    title: '成熟的应用框架',
+    description: '丰富的应用模板，1000+移动应用开发，14款工具打造完整工作流，轻松完成复杂的业务应用'
+  },
+  {
+    id: 2,
+    icon: 'i-lucide-globe',
+    title: '全场景的移动技术',
+    description: '全球最大的HTML5移动技术与服务提供商，从内容制作到上线发布，从商业实践到运营分析，实现完整的生态链支持和服务'
+  },
+  {
+    id: 3,
+    icon: 'i-lucide-message-circle',
+    title: '一次开发，多端适配',
+    description: '涵盖企业web app、独立app、微信服务号、微信企业号、其他轻应用，一次开发多端运行'
+  },
+  {
+    id: 4,
+    icon: 'i-lucide-zap',
+    title: '极致的应用体验',
+    description: '媲美游戏的炫酷界面，性能极致优化，操控顺畅流利，响应式设计，多屏完美自适应'
+  },
+  {
+    id: 5,
+    icon: 'i-lucide-briefcase',
+    title: '一站式移动办公门户',
+    description: '单点登录，任务推送，业务处理和流程协作的多业务协同和应用集成环境，个性化定制，无需改变用户原有使用习惯'
+  },
+  {
+    id: 6,
+    icon: 'i-lucide-workflow',
+    title: '强大的工作流',
+    description: '支持多业务整合集成，全面的流程定义和扩展，多实例和流程模型让开发快捷高效'
+  },
+  {
+    id: 7,
+    icon: 'i-lucide-package',
+    title: '海量扩展资源',
+    description: '门户主题、风格样式、UI组件、后端服务组件、模板、多语言均可任意引入和定制扩展'
+  },
+  {
+    id: 8,
+    icon: 'i-lucide-code',
+    title: '主流技术标准',
+    description: '支持云端一体开发部署，HTML5国际技术标准，主流可靠，更可扩展业务逻辑和规则'
+  }
+]
+
+// 企业服务能力
+const enterpriseServices = [
+  {
+    id: 1,
+    title: '战略咨询',
+    icon: 'i-lucide-lightbulb',
+    description: '专业的移动化战略规划与咨询服务'
+  },
+  {
+    id: 2,
+    title: '定制开发',
+    icon: 'i-lucide-settings',
+    description: '根据企业需求定制专属移动应用'
+  },
+  {
+    id: 3,
+    title: '运维服务',
+    icon: 'i-lucide-server',
+    description: '7×24小时专业运维保障服务'
+  },
+  {
+    id: 4,
+    title: '运营分发',
+    icon: 'i-lucide-share',
+    description: '多渠道应用分发与运营推广服务'
+  },
+  {
+    id: 5,
+    title: '商业分析',
+    icon: 'i-lucide-bar-chart',
+    description: '数据驱动的商业分析与决策支持'
+  },
+  {
+    id: 6,
+    title: '管理后台',
+    icon: 'i-lucide-monitor',
+    description: '功能完善的管理后台系统'
+  }
+]
+
+// 技术特性
+const technicalProperties = [
+  {
+    id: 1,
+    title: '跨平台多适配',
+    description: '支持iOS、Android、Web等多平台统一开发'
+  },
+  {
+    id: 2,
+    title: '全通讯能力服务',
+    description: '集成多种通讯方式，保障信息传递畅通'
+  },
+  {
+    id: 3,
+    title: '统一业务流程平台',
+    description: '标准化业务流程，提升工作效率'
+  },
+  {
+    id: 4,
+    title: '数据安全策略',
+    description: '多层次安全防护，保障数据安全'
+  },
+  {
+    id: 5,
+    title: '完备的管控体系',
+    description: '完善的权限管理和系统监控'
+  },
+  {
+    id: 6,
+    title: '云端一体，随需而用',
+    description: '云原生架构，弹性扩展，按需使用'
+  }
+]
+
+// 统计数据
+const statistics = [
+  {
+    id: 1,
+    number: '1000+',
+    label: '1000+移动应用开发',
+    description: '丰富的移动应用开发经验'
+  },
+  {
+    id: 2,
+    number: '300+',
+    label: '服务于300+企业',
+    description: '为众多企业提供专业服务'
+  },
+  {
+    id: 3,
+    number: '40+',
+    label: '40+移动战略合作伙伴',
+    description: '广泛的合作伙伴网络'
+  },
+  {
+    id: 4,
+    number: '100',
+    label: 'TOP100开发合作商',
+    description: '行业领先的开发服务商'
+  }
+]
+
+// 设备展示数据
+const deviceShowcase = [
+  {
+    id: 1,
+    type: 'desktop',
+    title: '桌面应用',
+    image: 'https://picsum.photos/400/300?random=desktop',
+    description: '企业级桌面应用解决方案'
+  },
+  {
+    id: 2,
+    type: 'mobile',
+    title: '移动应用',
+    image: 'https://picsum.photos/400/300?random=mobile',
+    description: '原生移动应用开发'
+  },
+  {
+    id: 3,
+    type: 'tablet',
+    title: '平板应用',
+    image: 'https://picsum.photos/400/300?random=tablet',
+    description: '平板设备优化应用'
+  },
+  {
+    id: 4,
+    type: 'watch',
+    title: '智能手表',
+    image: 'https://picsum.photos/400/300?random=watch',
+    description: '可穿戴设备应用开发'
+  }
+]
+</script>
+
+<template>
+  <div class="min-h-screen bg-gray-50 dark:bg-gray-900">
+    <!-- Hero Section - 创特App开发事业部 -->
+    <section class="relative py-16 md:py-24 lg:py-32 overflow-hidden">
+      <!-- 背景 -->
+      <div
+          class="absolute inset-0 bg-gradient-to-br from-blue-600 via-blue-700 to-indigo-800 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900">
+        <!-- 背景纹理 -->
+        <div class="absolute inset-0 opacity-10">
+          <div
+              class="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent animate-pulse"/>
+        </div>
+      </div>
+
+      <!-- 内容 -->
+      <div class="relative z-10 container mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+          <!-- 文字内容 -->
+          <div class="text-white">
+            <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6">
+              {{ appDevelopmentDivision.title }}
+            </h1>
+            <p class="text-2xl md:text-3xl font-semibold text-blue-200 dark:text-blue-300 mb-6">
+              {{ appDevelopmentDivision.subtitle }}
+            </p>
+            <p class="text-lg md:text-xl text-blue-100 dark:text-blue-200 leading-relaxed">
+              {{ appDevelopmentDivision.description }}
+            </p>
+          </div>
+
+          <!-- 手机展示 -->
+          <div class="relative flex justify-center items-center">
+            <div class="relative w-64 h-96 md:w-80 md:h-[480px]">
+              <!-- 手机外壳 -->
+              <div class="absolute inset-0 bg-black rounded-3xl p-2 shadow-2xl">
+                <div class="w-full h-full bg-white dark:bg-gray-800 rounded-2xl overflow-hidden">
+                  <!-- 状态栏 -->
+                  <div class="h-8 bg-gray-100 dark:bg-gray-700 flex items-center justify-between px-4">
+                    <div class="text-xs text-gray-600 dark:text-gray-300">4:21 PM</div>
+                    <div class="flex items-center space-x-1">
+                      <div class="w-4 h-2 bg-green-500 rounded-sm"/>
+                      <div class="w-4 h-2 bg-yellow-500 rounded-sm"/>
+                      <div class="w-4 h-2 bg-red-500 rounded-sm"/>
+                    </div>
+                  </div>
+
+                  <!-- 应用界面 -->
+                  <div class="p-6 h-full bg-gradient-to-b from-red-50 to-white dark:from-gray-800 dark:to-gray-700">
+                    <!-- Logo区域 -->
+                    <div class="text-center mb-8">
+                      <div class="w-16 h-16 bg-black rounded-lg flex items-center justify-center mx-auto mb-2">
+                        <span class="text-white font-bold text-2xl">K</span>
+                      </div>
+                      <h3 class="text-lg font-semibold text-gray-900 dark:text-white">LOGIN</h3>
+                    </div>
+
+                    <!-- 登录表单 -->
+                    <div class="space-y-4">
+                      <div class="bg-gray-100 dark:bg-gray-600 rounded-lg p-3">
+                        <input
+                            class="w-full bg-transparent text-gray-700 dark:text-gray-200 placeholder-gray-500 dark:placeholder-gray-400"
+                            placeholder="Username or Email"
+                            type="text"
+                        >
+                      </div>
+                      <div class="bg-gray-100 dark:bg-gray-600 rounded-lg p-3">
+                        <input
+                            class="w-full bg-transparent text-gray-700 dark:text-gray-200 placeholder-gray-500 dark:placeholder-gray-400"
+                            placeholder="Password"
+                            type="password"
+                        >
+                      </div>
+                      <button
+                          class="w-full bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 py-3 rounded-lg font-semibold">
+                        LOGIN
+                      </button>
+                    </div>
+
+                    <!-- 底部链接 -->
+                    <div class="mt-6 text-center space-y-2">
+                      <a class="text-sm text-gray-600 dark:text-gray-400" href="#">Forgot Password?</a>
+                      <div>
+                        <a class="text-sm text-gray-600 dark:text-gray-400" href="#">CREATE ACCOUNT</a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- APP开发的核心价值 -->
+    <section class="py-16 md:py-20 bg-white dark:bg-gray-800">
+      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
+        <!-- 标题区域 -->
+        <div class="text-center mb-16">
+          <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-4">
+            APP开发的核心价值
+          </h2>
+          <div class="w-16 h-1 bg-blue-600 dark:bg-blue-500 mx-auto"/>
+        </div>
+
+        <!-- 核心价值网格 -->
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8">
+          <div
+              v-for="value in coreValues"
+              :key="value.id"
+              class="group text-center p-6 bg-gray-50 dark:bg-gray-700 rounded-2xl hover:bg-white dark:hover:bg-gray-600 transition-all duration-300 hover:shadow-lg hover:-translate-y-1"
+          >
+            <!-- 图标 -->
+            <div
+                class="w-16 h-16 mx-auto mb-4 bg-gray-200 dark:bg-gray-600 rounded-full flex items-center justify-center group-hover:bg-blue-100 dark:group-hover:bg-blue-900 transition-colors duration-300">
+              <UIcon
+                  :name="value.icon"
+                  class="w-8 h-8 text-gray-600 dark:text-gray-300 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors duration-300"
+              />
+            </div>
+
+            <!-- 标题 -->
+            <h3 class="text-lg md:text-xl font-semibold text-gray-900 dark:text-white mb-3 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors duration-300">
+              {{ value.title }}
+            </h3>
+
+            <!-- 描述 -->
+            <p class="text-sm md:text-base text-gray-600 dark:text-gray-300 leading-relaxed">
+              {{ value.description }}
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- 多设备展示 -->
+    <section class="py-16 md:py-20 bg-gray-50 dark:bg-gray-900">
+      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
+        <!-- 标题区域 -->
+        <div class="text-center mb-16">
+          <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-4">
+            我们能为企业快速实现APP的
+          </h2>
+        </div>
+
+        <!-- 设备展示 -->
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8 mb-16">
+          <div
+              v-for="device in deviceShowcase"
+              :key="device.id"
+              class="group text-center"
+          >
+            <div class="relative mb-6">
+              <img
+                  :alt="device.title"
+                  :src="device.image"
+                  class="w-full h-48 object-cover rounded-2xl shadow-lg group-hover:shadow-xl transition-all duration-300 group-hover:scale-105"
+              >
+              <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent rounded-2xl"/>
+              <div class="absolute bottom-4 left-4 right-4">
+                <h3 class="text-white font-semibold text-lg">{{ device.title }}</h3>
+              </div>
+            </div>
+            <p class="text-gray-600 dark:text-gray-300">{{ device.description }}</p>
+          </div>
+        </div>
+
+        <!-- 企业服务 -->
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
+          <div
+              v-for="service in enterpriseServices"
+              :key="service.id"
+              class="group bg-white dark:bg-gray-800 rounded-2xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1"
+          >
+            <div class="flex items-center mb-4">
+              <div
+                  class="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center mr-4 group-hover:bg-blue-200 dark:group-hover:bg-blue-800 transition-colors duration-300">
+                <UIcon
+                    :name="service.icon"
+                    class="w-6 h-6 text-blue-600 dark:text-blue-400"
+                />
+              </div>
+              <h3 class="text-xl font-semibold text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors duration-300">
+                {{ service.title }}
+              </h3>
+            </div>
+            <p class="text-gray-600 dark:text-gray-300 leading-relaxed">
+              {{ service.description }}
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- 技术特性 -->
+    <section class="py-16 md:py-20 bg-white dark:bg-gray-800">
+      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
+        <!-- 标题区域 -->
+        <div class="text-center mb-16">
+          <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-4">
+            技术特性
+          </h2>
+          <p class="text-lg md:text-xl text-gray-600 dark:text-gray-300">
+            TECHNICAL PROPERTIES
+          </p>
+        </div>
+
+        <!-- 技术特性网格 -->
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
+          <div
+              v-for="property in technicalProperties"
+              :key="property.id"
+              class="group bg-gray-900 dark:bg-gray-700 text-white rounded-2xl p-6 hover:bg-gray-800 dark:hover:bg-gray-600 transition-all duration-300 hover:shadow-lg"
+          >
+            <h3 class="text-xl font-semibold mb-3 group-hover:text-blue-400 transition-colors duration-300">
+              {{ property.title }}
+            </h3>
+            <p class="text-gray-300 dark:text-gray-200 leading-relaxed">
+              {{ property.description }}
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- 统计数据 -->
+    <section class="py-16 md:py-20 bg-gray-50 dark:bg-gray-900">
+      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
+        <!-- 标题区域 -->
+        <div class="text-center mb-16">
+          <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-4">
+            简化IT，连接一切
+          </h2>
+        </div>
+
+        <!-- 统计数据 -->
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+          <div
+              v-for="stat in statistics"
+              :key="stat.id"
+              class="text-center group"
+          >
+            <!-- 数字展示 -->
+            <div class="relative mb-6">
+              <div class="w-32 h-32 mx-auto relative">
+                <!-- 半圆环 -->
+                <svg class="w-full h-full transform -rotate-90" viewBox="0 0 100 100">
+                  <circle
+                      class="text-blue-200 dark:text-blue-800"
+                      cx="50"
+                      cy="50"
+                      fill="none"
+                      r="40"
+                      stroke="currentColor"
+                      stroke-width="4"
+                  />
+                  <circle
+                      class="text-blue-600 dark:text-blue-400 group-hover:text-blue-700 dark:group-hover:text-blue-300 transition-colors duration-300"
+                      cx="50"
+                      cy="50"
+                      fill="none"
+                      r="40"
+                      stroke="currentColor"
+                      stroke-dasharray="251.2"
+                      stroke-dashoffset="125.6"
+                      stroke-width="4"
+                  />
+                </svg>
+                <!-- 数字 -->
+                <div class="absolute inset-0 flex items-center justify-center">
+                  <span
+                      class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors duration-300">
+                    {{ stat.number }}
+                  </span>
+                </div>
+              </div>
+            </div>
+
+            <!-- 标签和描述 -->
+            <h3 class="text-lg md:text-xl font-semibold text-gray-900 dark:text-white mb-2 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors duration-300">
+              {{ stat.label }}
+            </h3>
+            <p class="text-gray-600 dark:text-gray-300">
+              {{ stat.description }}
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+/* 自定义动画 */
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0px);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+}
+
+.animate-float {
+  animation: float 3s ease-in-out infinite;
+}
+
+/* 响应式调整 */
+@media (max-width: 768px) {
+  .grid-cols-4 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 640px) {
+  .grid-cols-4 {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/app/pages/softwareDevelopment/app.vue b/app/pages/softwareDevelopment/app.vue
new file mode 100644
index 0000000..852d392
--- /dev/null
+++ b/app/pages/softwareDevelopment/app.vue
@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+
+</script>
+
+<template>
+  <view>
+    <SoftwareDevelopmentApp/>
+  </view>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file