diff --git a/.gitea/workflows/docker.yaml b/.gitea/workflows/docker.yaml
new file mode 100644
index 0000000..8c1fc8f
--- /dev/null
+++ b/.gitea/workflows/docker.yaml
@@ -0,0 +1,55 @@
+name: CI/CD
+
+
+
+on:
+  push:
+    branches:
+      - main
+      - dev
+
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    # container: docker.gitea.com/runner-images:ubuntu-latest
+    container:
+      image: docker.gitea.com/runner-images:ubuntu-latest
+      options:  --add-host=my_gitea:host-gateway
+
+
+    steps:
+
+
+      # - name: Add host entry for Gitea
+      #   run: |
+      #     echo "${{ vars.GITEAHOST }} my_gitea" | tee -a /etc/hosts
+
+      - name: Test access to Gitea
+        run: |
+          curl -v http://host.docker.internal:3000
+          curl -v http://my_gitea:3000
+
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Build Docker image
+        run: docker build -t vue-app .
+
+      - name: Create container and extract dist
+        run: |
+          docker rm --force vue-container || true;
+
+          rm -rf /docker/front/apps/*
+          mkdir -p /docker/front/apps
+
+          # 创建容器但不运行
+          docker run --name vue-container  vue-app
+          # -v 卷挂载是直接映射整个目录，而 docker cp 会保留源路径的目录结构。
+          docker cp vue-container:build/apps/. /docker/front/apps/
+
+          chmod -R 777 /docker/front/apps
+          # -v 卷挂载是直接映射整个目录，而 docker cp 会保留源路径的目录结构。
+          docker cp /docker/front/apps/frontend/dist/.  my_caddy:/docker/front/www/
+          docker cp /docker/front/apps/frontendDesigner/dist/.  my_caddy:/docker/front/admin/
\ No newline at end of file
diff --git a/.trae/documents/Implement Phone Verification Code Login Toggle.md b/.trae/documents/Implement Phone Verification Code Login Toggle.md
new file mode 100644
index 0000000..3b14c1e
--- /dev/null
+++ b/.trae/documents/Implement Phone Verification Code Login Toggle.md	
@@ -0,0 +1,49 @@
+## 实施计划
+
+### 1. 分析当前代码结构
+
+- **PhoneLogin.vue**：手机号登录页面主组件，包含登录卡片和子组件调用
+- **PhoneLoginForm.vue**：登录表单组件，包含登录方式切换和表单字段
+- **login.js**：包含登录相关的API调用方法，如`sendPhoneCode`和`phoneLoginCode`
+
+### 2. 修改PhoneLoginForm.vue组件
+
+#### 模板部分修改
+- **更新登录模式切换**：将现有的三种模式（密码登录、注册、重置密码）改为仅保留登录相关的模式
+- **添加密码/验证码登录切换**：在登录模式下，添加一个新的切换开关，允许用户在密码登录和验证码登录之间切换
+- **调整表单字段显示**：根据选择的登录方式显示相应的表单字段
+
+#### 脚本部分修改
+- **添加登录方式状态**：添加`loginMethod` ref，用于跟踪用户选择的是密码登录还是验证码登录
+- **设置默认登录方式**：将默认登录方式设置为验证码登录
+- **更新表单验证逻辑**：根据选择的登录方式调整验证规则
+- **更新发送验证码逻辑**：发送登录验证码时传递`purpose: 'login'`
+- **更新表单提交逻辑**：验证码登录时调用`phoneLoginCode`函数
+
+### 3. 修改PhoneLogin.vue组件
+
+- **更新handleLogin方法**：确保根据登录方式调用正确的登录函数
+
+### 4. 实施细节
+
+#### PhoneLoginForm.vue修改点
+- **第155行**：将默认`loginMode`改为'code'
+- **第38-70行**：添加密码/验证码登录切换按钮
+- **第256-285行**：更新`handleSendCode`方法，确保发送验证码时传递正确的purpose
+- **第288-316行**：更新`handleSubmit`方法，处理验证码登录逻辑
+
+#### PhoneLogin.vue修改点
+- **第79-81行**：更新`handleLogin`方法，根据登录方式调用正确的登录函数
+
+### 5. 预期行为
+
+- 用户默认看到验证码登录界面
+- 用户可以在密码登录和验证码登录之间切换
+- 发送登录验证码时，传递`purpose: 'login'`
+- 验证码登录调用`phoneLoginCode`函数
+- 密码登录保持原有功能不变
+
+### 6. 需要修改的文件
+
+- `d:\work\Aiproject\DeotalandAi\apps\frontend\src\components\auth\PhoneLoginForm.vue`
+- `d:\work\Aiproject\DeotalandAi\apps\frontend\src\views\Login\PhoneLogin.vue`
\ No newline at end of file
diff --git a/.trae/documents/修改手机号登录逻辑.md b/.trae/documents/修改手机号登录逻辑.md
new file mode 100644
index 0000000..59e3393
--- /dev/null
+++ b/.trae/documents/修改手机号登录逻辑.md
@@ -0,0 +1,386 @@
+# 实现竖屏移动端卡片展示组件
+
+## 组件设计目标
+
+* 适配竖屏移动端的卡片展示组件
+
+* 包含图片展示、加载蒙层、预览功能
+
+* 底部功能按钮（修改、编辑、场景图、下载、删除）
+
+* 向父组件抛出事件
+
+## 实现步骤
+
+### 1. 实现 `shu.vue` 组件
+
+* 设计组件结构：主容器、图片区域、功能按钮区域
+
+* 实现响应式布局，适配竖屏移动端
+
+* 使用 Scoped CSS + CSS 变量实现样式隔离与主题定制
+
+### 2. 图片展示与加载效果
+
+* 使用 `el-image` 组件实现图片展示
+
+* 添加加载状态管理，显示加载蒙层
+
+* 实现图片加载完成后的过渡效果
+
+### 3. 图片预览功能
+
+* 集成图片预览功能，适配 H5 移动端
+
+* 点击图片触发预览，支持手势操作
+
+### 4. 底部功能按钮
+
+* 实现修改、编辑、场景图、下载、删除按钮
+
+* 每个按钮向父组件抛出对应的事件
+
+* 按钮样式设计符合 UI/UX 要求
+
+### 5. 与父组件交互
+
+* 在 `CreateProjectShu.vue` 中引入并使用 `shu.vue` 组件
+
+* 实现事件处理逻辑，接收并处理子组件抛出的事件
+
+## 代码实现
+
+### `shu.vue` 组件
+
+```vue
+<template>
+  <div class="shu-card-container">
+    <!-- 图片展示区域 -->
+    <div class="image-wrapper" @click="handlePreview">
+      <el-image
+        :src="props.imageUrl"
+        :fit="'cover'"
+        :preview-src-list="[props.imageUrl]"
+        @load="handleImageLoad"
+        @error="handleImageError"
+      >
+        <!-- 加载蒙层 -->
+        <template #loading>
+          <div class="loading-mask">
+            <div class="loading-spinner"></div>
+            <div class="loading-text">图片加载中...</div>
+          </div>
+        </template>
+      </el-image>
+    </div>
+    
+    <!-- 功能按钮区域 -->
+    <div class="action-buttons">
+      <button class="action-btn" @click="handleModify" title="修改">
+        <el-icon class="btn-icon"><ChatDotRound /></el-icon>
+        <span class="btn-text">修改</span>
+      </button>
+      <button class="action-btn" @click="handleEdit" title="编辑">
+        <el-icon class="btn-icon"><EditPen /></el-icon>
+        <span class="btn-text">编辑</span>
+      </button>
+      <button class="action-btn" @click="handleScene" title="场景图">
+        <el-icon class="btn-icon"><Grid /></el-icon>
+        <span class="btn-text">场景图</span>
+      </button>
+      <button class="action-btn" @click="handleDownload" title="下载">
+        <el-icon class="btn-icon"><Download /></el-icon>
+        <span class="btn-text">下载</span>
+      </button>
+      <button class="action-btn delete-btn" @click="handleDelete" title="删除">
+        <el-icon class="btn-icon"><Delete /></el-icon>
+        <span class="btn-text">删除</span>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { ElImage, ElIcon } from 'element-plus';
+import { ChatDotRound, EditPen, Grid, Download, Delete } from '@element-plus/icons-vue';
+
+// 定义组件属性
+const props = defineProps({
+  // 图片URL
+  imageUrl: {
+    type: String,
+    default: ''
+  },
+  // 卡片数据
+  cardData: {
+    type: Object,
+    default: () => ({})
+  }
+});
+
+// 定义事件
+const emit = defineEmits(['preview', 'modify', 'edit', 'scene', 'download', 'delete']);
+
+// 图片加载状态
+const isLoading = ref(true);
+
+// 处理图片加载完成
+const handleImageLoad = () => {
+  isLoading.value = false;
+};
+
+// 处理图片加载错误
+const handleImageError = () => {
+  isLoading.value = false;
+};
+
+// 处理图片预览
+const handlePreview = () => {
+  emit('preview', props.imageUrl);
+};
+
+// 处理修改按钮点击
+const handleModify = (e) => {
+  e.stopPropagation();
+  emit('modify', props.cardData);
+};
+
+// 处理编辑按钮点击
+const handleEdit = (e) => {
+  e.stopPropagation();
+  emit('edit', props.cardData);
+};
+
+// 处理场景图按钮点击
+const handleScene = (e) => {
+  e.stopPropagation();
+  emit('scene', props.cardData);
+};
+
+// 处理下载按钮点击
+const handleDownload = (e) => {
+  e.stopPropagation();
+  emit('download', props.imageUrl);
+};
+
+// 处理删除按钮点击
+const handleDelete = (e) => {
+  e.stopPropagation();
+  emit('delete', props.cardData);
+};
+</script>
+
+<style scoped>
+/* 组件样式 */
+.shu-card-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 400px;
+  margin: 0 auto;
+  background: #ffffff;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+}
+
+/* 图片区域样式 */
+.image-wrapper {
+  position: relative;
+  width: 100%;
+  padding-bottom: 150%; /* 2:3 竖屏比例 */
+  overflow: hidden;
+  cursor: pointer;
+}
+
+.image-wrapper :deep(.el-image) {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transition: transform 0.3s ease;
+}
+
+.image-wrapper :deep(.el-image__inner) {
+  object-fit: cover;
+  transition: transform 0.3s ease;
+}
+
+.image-wrapper:hover :deep(.el-image__inner) {
+  transform: scale(1.02);
+}
+
+/* 加载蒙层样式 */
+.loading-mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 249, 250, 0.95) 100%);
+  transition: opacity 0.3s ease;
+  z-index: 10;
+}
+
+.loading-spinner {
+  width: 40px;
+  height: 40px;
+  border: 4px solid rgba(107, 70, 193, 0.2);
+  border-top: 4px solid #6B46C1;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  margin-bottom: 12px;
+}
+
+.loading-text {
+  font-size: 14px;
+  color: #6B46C1;
+  font-weight: 500;
+}
+
+/* 功能按钮区域样式 */
+.action-buttons {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 12px;
+  background: #f8f9fa;
+  border-top: 1px solid #e9ecef;
+}
+
+.action-btn {
+  flex: 1;
+  min-width: calc(20% - 8px);
+  margin: 4px;
+  padding: 12px 8px;
+  border: none;
+  border-radius: 8px;
+  background: linear-gradient(135deg, #6B46C1 0%, #A78BFA 100%);
+  color: #ffffff;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+}
+
+.action-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(107, 70, 193, 0.3);
+}
+
+.action-btn:active {
+  transform: translateY(0);
+}
+
+.action-btn.delete-btn {
+  background: linear-gradient(135deg, #EF4444 0%, #F87171 100%);
+}
+
+.action-btn.delete-btn:hover {
+  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
+}
+
+.btn-icon {
+  font-size: 20px;
+}
+
+.btn-text {
+  font-size: 12px;
+  font-weight: 500;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .shu-card-container {
+    margin: 8px;
+    border-radius: 8px;
+  }
+  
+  .action-buttons {
+    padding: 8px;
+  }
+  
+  .action-btn {
+    padding: 10px 6px;
+    min-width: calc(20% - 6px);
+    margin: 3px;
+  }
+  
+  .btn-icon {
+    font-size: 18px;
+  }
+  
+  .btn-text {
+    font-size: 11px;
+  }
+}
+
+@media (max-width: 480px) {
+  .shu-card-container {
+    margin: 4px;
+  }
+  
+  .action-btn {
+    padding: 8px 4px;
+  }
+  
+  .btn-icon {
+    font-size: 16px;
+  }
+  
+  .btn-text {
+    font-size: 10px;
+  }
+}
+
+/* 动画效果 */
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+</style>
+```
+
+### 2. 集成到父组件 `CreateProjectShu.vue`
+
+* 在父组件中引入 `shu.vue` 组件
+
+* 实现事件处理逻辑，接收子组件抛出的事件
+
+* 在模板中使用新组件展示卡片
+
+## 设计规范
+
+* 主色调：深紫色（#6B46C1）、浅紫色（#A78BFA）
+
+* 辅助色：深灰色（#1F2937）、浅灰色（#F3F4F6）
+
+* 按钮样式：圆角设计（8px半径）、微妙阴影、悬停效果
+
+* 字体排版：Inter字体系列、16px基础大小、响应式缩放
+
+* 布局风格：基于卡片的设计、统一间距（8px网格系统）
+
+* 动画效果：平滑过渡（200ms缓入缓出）、加载蒙层
+
+## 测试与验证
+
+* 确保组件在竖屏移动端正常显示
+
+* 测试图片加载、预览功能
+
+* 验证按钮事件正确抛出
+
+* 检查响应式布局适配情况
+
diff --git a/apps/frontend/index.html b/apps/frontend/index.html
index eb2eb5f..e9c8da4 100644
--- a/apps/frontend/index.html
+++ b/apps/frontend/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon"  href="https://draft-user.s3.us-east-2.amazonaws.com/images/2f8e057e-a677-44cd-b709-38245bdec423.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimum-scale=1.0" />
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
diff --git a/apps/frontend/src/components/AddModal/index.vue b/apps/frontend/src/components/AddModal/index.vue
new file mode 100644
index 0000000..4b39086
--- /dev/null
+++ b/apps/frontend/src/components/AddModal/index.vue
@@ -0,0 +1,834 @@
+<template>
+  <div v-if="show" class="add-modal-overlay" @click="handleOverlayClick">
+    <div class="add-modal-container" @click.stop>
+      <div class="add-header">
+        <h2 class="add-title">{{ $t('addModal.title') }}</h2>
+        <button class="close-button" @click="closeModal">
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <line x1="18" y1="6" x2="6" y2="18"></line>
+            <line x1="6" y1="6" x2="18" y2="18"></line>
+          </svg>
+        </button>
+      </div>
+      <div class="add-content">
+        <!-- IP类型选择 -->
+        <div class="form-section">
+          <div class="section-label">{{ $t('addModal.ipType') }}</div>
+          <div class="ip-type-grid">
+            <div 
+              class="ip-type-card" 
+              :class="{ active: ipType === 1 }"
+              @click="handleIpTypeSelect(1)"
+            >
+              <div class="ip-type-label">{{ $t('addModal.character') }}</div>
+            </div>
+            <div 
+              class="ip-type-card" 
+              :class="{ active: ipType === 2 }"
+              @click="handleIpTypeSelect(2)"
+            >
+              <div class="ip-type-label">{{ $t('addModal.animal') }}</div>
+            </div>
+          </div>
+        </div>
+        <!-- 是否需要挂钩 - 仅当series为E1时显示 -->
+        <div class="form-section" v-if="series === 'E1'">
+          <div class="section-label">{{ $t('iPandCardLeft.needHook') }}</div>
+          <div class="hook-selection">
+            <div 
+              class="hook-option" 
+              :class="{ active: needHook === true }"
+              @click="handleHookSelect(true)"
+            >
+              <div class="hook-label">{{ $t('common.yes') }}</div>
+            </div>
+            <div 
+              class="hook-option" 
+              :class="{ active: needHook === false }"
+              @click="handleHookSelect(false)"
+            >
+              <div class="hook-label">{{ $t('common.no') }}</div>
+            </div>
+          </div>
+        </div>
+        <!-- 文本提示输入 -->
+        <div class="form-section">
+          <div class="section-label">{{ $t('addModal.textPrompt') }}</div>
+          <div class="prompt-input-container">
+            <textarea 
+              class="prompt-input" 
+              :placeholder="$t('addModal.placeholder')"
+              v-model="formData.prompt"
+              rows="4"
+              :disabled="isOptimizing"
+            ></textarea>
+            <div v-if="isOptimizing" class="scan-overlay">
+              <div class="scan-line"></div>
+            </div>
+            <button 
+              class="optimizer-btn" 
+              @click="handleOptimizePrompt"
+              :disabled="isOptimizing"
+            >
+              <span class="btn-icon">🪄</span>
+            </button>
+          </div>
+        </div>
+        <!-- 参考图片上传 -->
+        <div class="form-section">
+          <div class="section-label">{{ $t('addModal.referenceImage') }}</div>
+          <div 
+            class="image-upload-area" 
+            @click="triggerFileUpload"
+            @dragover.prevent="handleDragOver"
+            @dragenter.prevent="handleDragEnter"
+            @dragleave.prevent="handleDragLeave"
+            @drop.prevent="handleDrop"
+            :class="{ 'drag-over': isDragOver, 'uploading': isUploading }"
+          >
+            <!-- 图片预览 -->
+            <div v-if="formData.previewImage && !isUploading" class="image-preview">
+              <img :src="formData.previewImage" alt="Selected image">
+              <button class="remove-image" @click.stop="removeImage">×</button>
+            </div>
+            <!-- 上传进度 -->
+            <div v-else-if="isUploading" class="upload-progress">
+              <div class="upload-spinner">
+                <div class="spinner-ring"></div>
+              </div>
+              <div class="upload-progress-text">{{ $t('addModal.uploading') }}</div>
+            </div>
+            <!-- 上传提示 -->
+            <div v-else class="upload-prompt">
+              <div class="upload-icon">
+                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+                  <circle cx="8.5" cy="8.5" r="1.5"></circle>
+                  <polyline points="21 15 16 10 5 21"></polyline>
+                </svg>
+              </div>
+              <span class="upload-text">{{ $t('addModal.uploadOrSelect') }}</span>
+            </div>
+            <!-- 隐藏的文件输入 -->
+            <input
+              ref="fileInput"
+              type="file"
+              accept="image/*"
+              @change="handleFileChange"
+              class="hidden-file-input"
+            >
+          </div>
+        </div>
+      </div>
+      <!-- 生成按钮 -->
+      <div class="add-footer">
+        <button 
+          class="generate-btn" 
+          @click="handleGenerate"
+          :disabled="isGenerateDisabled"
+        >
+          {{ $t('addModal.generate') }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, onBeforeUnmount } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { FileServer, GiminiServer } from '@deotaland/utils';
+
+const { t, locale } = useI18n();
+const fileServer = new FileServer();
+const giminiServer = new GiminiServer();
+
+const props = defineProps({
+  show: { type: Boolean, default: false },
+  series: {
+    type: String,
+    default: 'E1'
+  },
+});
+
+const emit = defineEmits(['close', 'generate', 'handleHookSelected']);
+
+const formData = ref({
+  prompt: '',
+  previewImage: ''
+});
+
+const ipType = ref(1);
+const isDragOver = ref(false);
+const isUploading = ref(false);
+const isOptimizing = ref(false);
+const fileInput = ref(null);
+const needHook = ref(true);
+
+const isGenerateDisabled = computed(() => {
+  return !formData.value.prompt.trim();
+});
+
+const handleIpTypeSelect = (type) => {
+  ipType.value = type;
+};
+
+const handleHookSelect = (value) => {
+  needHook.value = value;
+  emit('handleHookSelected', value);
+};
+
+const triggerFileUpload = () => {
+  fileInput.value?.click();
+};
+
+const handleFileChange = async (event) => {
+  const file = event.target.files[0];
+  if (file) {
+    await uploadImage(file);
+  }
+};
+
+const handleDragOver = () => {
+  isDragOver.value = true;
+};
+
+const handleDragEnter = () => {
+  isDragOver.value = true;
+};
+
+const handleDragLeave = () => {
+  isDragOver.value = false;
+};
+
+const handleDrop = async (event) => {
+  isDragOver.value = false;
+  const file = event.dataTransfer.files[0];
+  if (file && file.type.startsWith('image/')) {
+    await uploadImage(file);
+  }
+};
+
+const uploadImage = async (file) => {
+  try {
+    isUploading.value = true;
+    const reader = new FileReader();
+    reader.onload = async (e) => {
+      formData.value.previewImage = e.target.result;
+      const url = await fileServer.uploadFile(e.target.result);
+      formData.value.previewImage = url;
+      isUploading.value = false;
+    };
+    reader.readAsDataURL(file);
+  } catch (error) {
+    console.error('上传图片失败:', error);
+    isUploading.value = false;
+  }
+};
+
+const removeImage = () => {
+  formData.value.previewImage = '';
+  if (fileInput.value) {
+    fileInput.value.value = '';
+  }
+};
+
+const handleOptimizePrompt = async () => {
+  isOptimizing.value = true;
+  const prompt = await giminiServer.handleOptimizePrompt(formData.value.prompt, {
+    "type": "OBJECT",
+    "properties": {
+      "name": {
+        "type": "STRING",
+        "description": "角色的名称"
+      },
+      "gender": {
+        "type": "STRING",
+        "description": "角色的性别"
+      },
+      "type": {
+        "type": "STRING",
+        "description": `角色的类型，${ipType.value == 1 ? `人物` : `动物`}`
+      },
+      "appearance": {
+        "type": "STRING",
+        "description": "角色的外观描述，如果描述到了颜色相关的，统一用浅米色或浅卡其色，不少于50字数"
+      }
+    },
+    "required": [
+      "name",
+      "gender",
+      "appearance"
+    ]
+  }, locale.value, formData.value.previewImage);
+  
+  isOptimizing.value = false;
+  if (prompt) {
+    const nameKey = t('addModal.optimizedPrompt.name');
+    const genderKey = t('addModal.optimizedPrompt.gender');
+    const appearanceKey = t('addModal.optimizedPrompt.appearance');
+    formData.value.prompt = `${nameKey}: ${prompt.name}\n${genderKey}: ${prompt.gender}\n${appearanceKey}: ${prompt.appearance}`;
+  }
+};
+
+const handleGenerate = () => {
+  if (!formData.value.prompt.trim()) {
+    return;
+  }
+  
+  emit('generate', {
+    ipType: ipType.value,
+    prompt: formData.value.prompt,
+    inspirationImage: formData.value.previewImage,
+    needHook: needHook.value
+  });
+  closeModal();
+};
+const handleOverlayClick = () => {
+  closeModal();
+};
+const closeModal = () => {
+  emit('close');
+};
+watch(() => props.show, (newVal) => {
+  document.body.style.overflow = newVal ? 'hidden' : '';
+});
+
+onBeforeUnmount(() => {
+  document.body.style.overflow = '';
+});
+
+</script>
+
+<style scoped>
+.add-modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.6);
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  z-index: 9999;
+  animation: fadeIn 0.3s ease;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.add-modal-container {
+  width: 100%;
+  max-width: 480px;
+  max-height: 90vh;
+  background: var(--bg-color, #F3F4F6);
+  border-radius: 16px 16px 0 0;
+  display: flex;
+  flex-direction: column;
+  animation: slideUp 0.3s ease;
+  overflow: hidden;
+}
+
+@keyframes slideUp {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+.add-header {
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--border-color, #E5E7EB);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.add-title {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--text-color, #1F2937);
+}
+
+.close-button {
+  width: 32px;
+  height: 32px;
+  border: none;
+  background: transparent;
+  color: var(--text-color, #1F2937);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  transition: background-color 0.2s;
+  flex-shrink: 0;
+  background-color: var(--border-color, #E5E7EB);
+}
+
+
+.add-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+}
+
+.form-section {
+  margin-bottom: 20px;
+}
+
+.section-label {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--text-color, #1F2937);
+  margin-bottom: 8px;
+  display: block;
+}
+
+.ip-type-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 12px;
+}
+
+.ip-type-card {
+  background: var(--card-bg, #FFFFFF);
+  border: 2px solid var(--border-color, #E5E7EB);
+  border-radius: 12px;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.ip-type-card:hover {
+  border-color: var(--primary-color, #6B46C1);
+  transform: translateY(-2px);
+}
+
+.ip-type-card.active {
+  border-color: var(--primary-color, #6B46C1);
+  background: var(--primary-light, rgba(107, 70, 193, 0.1));
+}
+
+.ip-type-label {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--text-color, #1F2937);
+}
+
+.hook-selection {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 12px;
+}
+
+.hook-option {
+  background: var(--card-bg, #FFFFFF);
+  border: 2px solid var(--border-color, #E5E7EB);
+  border-radius: 12px;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.hook-option:hover {
+  border-color: var(--primary-color, #6B46C1);
+  transform: translateY(-2px);
+}
+
+.hook-option.active {
+  border-color: var(--primary-color, #6B46C1);
+  background: var(--primary-light, rgba(107, 70, 193, 0.1));
+}
+
+.hook-label {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--text-color, #1F2937);
+}
+
+.prompt-input-container {
+  width: 100%;
+  position: relative;
+}
+
+.prompt-input {
+  width: 100%;
+  padding: 12px;
+  border: 1px solid var(--border-color, #E5E7EB);
+  border-radius: 8px;
+  background: var(--card-bg, #FFFFFF);
+  color: var(--text-color, #1F2937);
+  font-size: 14px;
+  resize: vertical;
+  min-height: 80px;
+  font-family: inherit;
+}
+
+.prompt-input::placeholder {
+  color: var(--text-secondary, #6B7280);
+}
+
+.prompt-input:focus {
+  outline: none;
+  border-color: var(--primary-color, #6B46C1);
+}
+
+.prompt-input:disabled {
+  border-color: rgba(99, 102, 241, 0.5);
+  box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.3);
+}
+
+/* 扫描线动画效果 */
+.scan-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  overflow: hidden;
+  z-index: 5;
+  pointer-events: none;
+}
+
+.scan-line {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: linear-gradient(90deg, 
+    transparent 0%, 
+    rgba(99, 102, 241, 0.8) 20%, 
+    rgba(99, 102, 241, 1) 50%, 
+    rgba(99, 102, 241, 0.8) 80%, 
+    transparent 100%);
+  animation: scan 1.5s ease-in-out infinite;
+}
+
+@keyframes scan {
+  0% {
+    top: 0;
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    top: 100%;
+    opacity: 0;
+  }
+}
+
+.optimizer-btn {
+  position: absolute;
+  bottom: 10px;
+  right: 8px;
+  padding: 6px 12px;
+  background-color: #6366f1;
+  border: none;
+  border-radius: 6px;
+  color: white;
+  font-size: 12px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  transition: background-color 0.2s;
+  z-index: 10;
+}
+
+.optimizer-btn:hover:not(:disabled) {
+  background-color: #4f46e5;
+}
+
+.optimizer-btn:disabled {
+  background-color: #9ca3af;
+  cursor: not-allowed;
+}
+
+.image-upload-area {
+  width: 100%;
+  min-height: 150px;
+  border: 2px dashed var(--border-color, #E5E7EB);
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.2s;
+  background: var(--card-bg, #FFFFFF);
+  position: relative;
+  overflow: hidden;
+}
+
+.image-upload-area:hover {
+  border-color: var(--primary-color, #6B46C1);
+}
+
+.image-upload-area.drag-over {
+  border-color: var(--primary-color, #6B46C1);
+  background: var(--primary-light, rgba(107, 70, 193, 0.1));
+}
+
+.image-upload-area.uploading {
+  cursor: not-allowed;
+}
+
+.image-preview {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.image-preview img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.remove-image {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  width: 28px;
+  height: 28px;
+  border: none;
+  background: rgba(0, 0, 0, 0.6);
+  color: white;
+  border-radius: 50%;
+  font-size: 20px;
+  line-height: 1;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.2s;
+}
+
+.remove-image:hover {
+  background: rgba(0, 0, 0, 0.8);
+}
+
+.upload-progress {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+}
+
+.upload-spinner {
+  width: 40px;
+  height: 40px;
+  position: relative;
+}
+
+.spinner-ring {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border: 3px solid var(--border-color, #E5E7EB);
+  border-top-color: var(--primary-color, #6B46C1);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.upload-progress-text {
+  font-size: 14px;
+  color: var(--text-secondary, #6B7280);
+}
+
+.upload-prompt {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  text-align: center;
+}
+
+.upload-icon {
+  color: var(--text-secondary, #6B7280);
+}
+
+.upload-text {
+  font-size: 14px;
+  color: var(--text-secondary, #6B7280);
+}
+
+.hidden-file-input {
+  display: none;
+}
+
+.add-footer {
+  padding: 16px;
+  border-top: 1px solid var(--border-color, #E5E7EB);
+  background: var(--card-bg, #FFFFFF);
+}
+
+.generate-btn {
+  width: 100%;
+  padding: 14px;
+  background: var(--primary-color, #6B46C1);
+  color: white;
+  border: none;
+  border-radius: 8px;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.generate-btn:hover:not(:disabled) {
+  background: var(--primary-hover, #5B3A9E);
+  transform: translateY(-1px);
+}
+
+.generate-btn:active:not(:disabled) {
+  transform: translateY(0);
+}
+
+.generate-btn:disabled {
+  background: var(--border-color, #E5E7EB);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+@media (min-width: 768px) {
+  .add-modal-overlay {
+    align-items: center;
+  }
+  
+  .add-modal-container {
+    border-radius: 16px;
+    max-height: 80vh;
+  }
+}
+
+@media (max-width: 767px) {
+  .hook-option {
+    padding: 12px;
+  }
+  
+  .hook-label {
+    font-size: 13px;
+  }
+  
+  .ip-type-card {
+    padding: 12px;
+  }
+  
+  .ip-type-label {
+    font-size: 13px;
+  }
+}
+
+html.dark .add-modal-container {
+  background: var(--bg-color-dark, #1F2937);
+}
+
+html.dark .add-title {
+  color: var(--text-color-dark, #F3F4F6);
+}
+
+html.dark .section-label {
+  color: var(--text-color-dark, #F3F4F6);
+}
+
+html.dark .ip-type-card {
+  background: var(--card-bg-dark, #374151);
+  border-color: var(--border-color-dark, #4B5563);
+}
+
+html.dark .ip-type-card.active {
+  background: rgba(107, 70, 193, 0.3);
+  border-color: var(--primary-color, #6B46C1);
+  box-shadow: 0 0 0 2px rgba(107, 70, 193, 0.2), 0 4px 12px rgba(107, 70, 193, 0.15);
+}
+
+html.dark .ip-type-label {
+  color: var(--text-color-dark, #F3F4F6);
+}
+
+html.dark .ip-type-card.active .ip-type-label {
+  color: #A78BFA;
+  font-weight: 600;
+}
+
+html.dark .hook-option {
+  background: var(--card-bg-dark, #374151);
+  border-color: var(--border-color-dark, #4B5563);
+}
+
+html.dark .hook-option.active {
+  background: rgba(107, 70, 193, 0.3);
+  border-color: var(--primary-color, #6B46C1);
+  box-shadow: 0 0 0 2px rgba(107, 70, 193, 0.2), 0 4px 12px rgba(107, 70, 193, 0.15);
+}
+
+html.dark .hook-label {
+  color: var(--text-color-dark, #F3F4F6);
+}
+
+html.dark .hook-option.active .hook-label {
+  color: #A78BFA;
+  font-weight: 600;
+}
+
+html.dark .prompt-input {
+  background: var(--card-bg-dark, #374151);
+  border-color: var(--border-color-dark, #4B5563);
+  color: var(--text-color-dark, #F3F4F6);
+}
+
+html.dark .prompt-input::placeholder {
+  color: var(--text-secondary-dark, #9CA3AF);
+}
+
+html.dark .image-upload-area {
+  background: var(--card-bg-dark, #374151);
+  border-color: var(--border-color-dark, #4B5563);
+}
+
+html.dark .upload-text {
+  color: var(--text-secondary-dark, #9CA3AF);
+}
+
+html.dark .upload-icon {
+  color: var(--text-secondary-dark, #9CA3AF);
+}
+
+html.dark .upload-progress-text {
+  color: var(--text-secondary-dark, #9CA3AF);
+}
+
+html.dark .add-footer {
+  background: var(--card-bg-dark, #374151);
+  border-color: var(--border-color-dark, #4B5563);
+}
+</style>
\ No newline at end of file
diff --git a/apps/frontend/src/components/IPCard/shu.vue b/apps/frontend/src/components/IPCard/shu.vue
index 91fcd2b..4910fc0 100644
--- a/apps/frontend/src/components/IPCard/shu.vue
+++ b/apps/frontend/src/components/IPCard/shu.vue
@@ -3,7 +3,7 @@
     <!-- 图片展示区域 -->
     <div class="image-wrapper" @click="handlePreview">
       <el-image
-        :src="props.imageUrl"
+        :src="formData.internalImageUrl"
         :fit="'cover'"
         :preview-src-list="[props.imageUrl]"
         @load="handleImageLoad"
@@ -12,42 +12,97 @@
         <!-- 加载蒙层 -->
         <template #loading>
           <div class="loading-mask">
-            <div class="loading-spinner"></div>
-            <div class="loading-text">图片加载中...</div>
+            <div class="light-scan-container">
+              <div class="light-beam"></div>
+              <div class="light-particles">
+                <span></span>
+                <span></span>
+                <span></span>
+                <span></span>
+                <span></span>
+              </div>
+              <div class="loading-icon">
+                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <circle cx="12" cy="12" r="10" stroke="url(#gradient)" stroke-width="2"/>
+                  <path d="M12 6V12L16 14" stroke="url(#gradient)" stroke-width="2" stroke-linecap="round"/>
+                  <defs>
+                    <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
+                      <stop offset="0%" stop-color="#6B46C1"/>
+                      <stop offset="100%" stop-color="#A78BFA"/>
+                    </linearGradient>
+                  </defs>
+                </svg>
+              </div>
+            </div>
+            <div class="loading-text">{{ t('loading') }}</div>
+          </div>
+        </template>
+         <template #error>
+          <div class="loading-mask">
+            <div class="loading-spinner-wrapper">
+              <div class="loading-spinner"></div>
+              <div class="loading-spinner-inner"></div>
+            </div>
+            <div class="loading-text">{{ t('loading') }}</div>
+            <div class="loading-dots">
+              <span></span>
+              <span></span>
+              <span></span>
+            </div>
           </div>
         </template>
       </el-image>
+      
+      <!-- 购买按钮 -->
+      <button class="purchase-btn" @click.stop="handleCustomizeToHome" :title="t('modelModal.purchase')">
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <circle cx="9" cy="21" r="1"/>
+          <circle cx="20" cy="21" r="1"/>
+          <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/>
+        </svg>
+      </button>
     </div>
     
     <!-- 功能按钮区域 -->
     <div class="action-buttons">
-      <button class="action-btn" @click="handleModify" title="修改">
+      <button class="action-btn" @click="handleModify" :title="t('modelModal.modify')">
         <el-icon class="btn-icon"><ChatDotRound /></el-icon>
-        <span class="btn-text">修改</span>
+        <span class="btn-text">{{ t('modelModal.modify') }}</span>
       </button>
-      <button class="action-btn" @click="handlePartialEdit" title="局部">
+      <button class="action-btn" @click="handlePartialEdit" :title="t('modelModal.edit')">
         <el-icon class="btn-icon"><Brush /></el-icon>
-        <span class="btn-text">局部</span>
+        <span class="btn-text">{{ t('modelModal.edit') }}</span>
       </button>
-      <button class="action-btn" @click="handleDownload" title="下载">
+      <button class="action-btn" @click="handleDownload" :title="t('modelModal.download')">
         <el-icon class="btn-icon"><Download /></el-icon>
-        <span class="btn-text">下载</span>
+        <span class="btn-text">{{ t('modelModal.download') }}</span>
       </button>
-      <button class="action-btn delete-btn" @click="handleDelete" title="删除">
+      <button class="action-btn delete-btn" @click="handleDelete" :title="t('modelModal.delete')">
         <el-icon class="btn-icon"><Delete /></el-icon>
-        <span class="btn-text">删除</span>
+        <span class="btn-text">{{ t('modelModal.delete') }}</span>
       </button>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { ref,onMounted } from 'vue';
 import { ElImage, ElIcon } from 'element-plus';
 import { ChatDotRound, Brush, Download, Delete } from '@element-plus/icons-vue';
-
+import { useI18n } from 'vue-i18n';
+import { GiminiServer } from '@deotaland/utils';
+const { t } = useI18n();
+const cjimg = 'https://draft-user.s3.us-east-2.amazonaws.com/images/14f98f33-06a7-4629-a42e-d7cfbced786f';
+const formData = ref({
+  internalImageUrl: '',//内部图片URL
+  status:'loading',//状态
+});
 // 定义组件属性
 const props = defineProps({
+  combinedPromptJson:{//动态提示词
+    type: Object,
+    default: () => ({})
+  },
   // 图片URL
   imageUrl: {
     type: String,
@@ -61,7 +116,7 @@ const props = defineProps({
 });
 
 // 定义事件
-const emit = defineEmits(['preview', 'modify', 'edit', 'download', 'delete']);
+const emit = defineEmits(['preview', 'modify', 'edit', 'download', 'delete','customize-to-home']);
 
 // 图片加载状态
 const isLoading = ref(true);
@@ -90,11 +145,8 @@ const handleModify = (e) => {
 // 处理局部按钮点击
 const handlePartialEdit = (e) => {
   e.stopPropagation();
-  emit('edit', props.cardData);
+  emit('edit', formData.value.internalImageUrl);
 };
-
-
-
 // 处理下载按钮点击
 const handleDownload = (e) => {
   e.stopPropagation();
@@ -106,6 +158,99 @@ const handleDelete = (e) => {
   e.stopPropagation();
   emit('delete', props.cardData);
 };
+const giminiServer = new GiminiServer();
+// 处理图片生成
+const handleGenerateImage = async () => {
+  const iscjt = props?.cardData?.diyPromptText&&props?.cardData?.diyPromptText?.indexOf('[CJT_DEOTA]')!=-1;
+  try {
+      // 使用多图参考生成
+      let referenceImages = [];
+      // 如果有灵感图片，也添加到参考图片列表
+      if (props?.cardData?.inspirationImage) {
+        referenceImages.push(props.cardData.inspirationImage);
+      }
+      if(iscjt){
+            props.cardData.imgyt&&referenceImages.push(props.cardData.imgyt);
+            referenceImages.push(props.cardData.diyPromptImg);
+            referenceImages.push(cjimg);
+       }
+       if(props.cardData.diyPromptText||props.cardData.addDiyPromptImg){
+          referenceImages.push(props.cardData.diyPromptImg);
+       }
+        let  dtprompt;
+      if(props?.cardData?.ipType==1){
+        dtprompt = props.combinedPromptJson.person.content;
+        referenceImages.push(...props.combinedPromptJson.person.imgs);
+      }else if(props?.cardData?.ipType==2){
+        dtprompt = props.combinedPromptJson.animal.content;
+        referenceImages.push(...props.combinedPromptJson.animal.imgs);
+      }
+      if(props.cardData.prompt){
+        dtprompt = `角色外观：${props.cardData.prompt}.${dtprompt}`
+      }
+      let prompt = props.cardData.diyPromptText|| dtprompt
+      // 角色姿势：${props.cardData.ipType==1?``:``}
+      if(props.cardData.prompt&&props.cardData.prompt.indexOf('nospec')!=-1){
+        prompt = '按原图生成'
+        referenceImages = [props.cardData.inspirationImage];
+        formData.value.internalImageUrl = props?.cardData?.inspirationImage;
+        return
+      }
+    const taskResult = await giminiServer.handleGenerateImage(referenceImages, prompt,{
+        project_id: props.cardData.project_id,
+        aspect_ratio:iscjt?'16:9':'9:16',
+      });
+      saveProject(taskResult);
+      getImageTask(taskResult.taskId,taskResult.taskQueue);
+  } catch (error) {
+    console.log(error);
+    emit('delete');
+  }
+};
+const handleCustomizeToHome = () => {
+  emit('customize-to-home', {
+    imageUrl: formData.value.internalImageUrl,
+    cardData: props.cardData
+  });
+}
+//查询图片任务
+const getImageTask = async (taskId,taskQueue)=>{
+ giminiServer.getTaskGinimi(taskId,taskQueue,(imgurls)=>{
+      let imgItem = imgurls.splice(0,1)[0]
+      formData.value.internalImageUrl=imgItem.url;
+      saveProject({
+        taskId:taskId,
+        taskQueue:taskQueue,
+      });
+      // createRemainingImageData(imgurls);
+  },()=>{
+    ElMessage.error('Failed to generate image, please try again later.');
+    emit('delete');
+  });
+}
+//保存到项目
+const saveProject = (taskResult)=>{
+  emit('save-project', {
+    imageUrl:formData.value.internalImageUrl,
+    taskId:taskResult?.taskId||'',
+    taskQueue:taskResult?.taskQueue||'',
+    // status:formData.value.status,
+    status:'success',
+  });
+}
+const init = ()=>{
+  if(props.cardData.imageUrl){
+    formData.value.internalImageUrl = props.cardData.imageUrl;
+    // formData.value.internalImageUrl = '';
+  }else if(props.cardData.taskId&&props.cardData.taskQueue){
+    getImageTask(props.cardData.taskId,props.cardData.taskQueue);
+  }else{
+    handleGenerateImage();
+  }
+}
+onMounted(()=>{
+  init();
+})
 </script>
 
 <style scoped>
@@ -122,6 +267,11 @@ const handleDelete = (e) => {
   border-radius: 12px !important;
 }
 
+html.dark .shu-card-container {
+  background: #1f2937;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+}
+
 /* 图片区域样式 */
 .image-wrapper {
   position: relative;
@@ -149,6 +299,64 @@ const handleDelete = (e) => {
   transform: scale(1.02);
 }
 
+/* 购买按钮样式 */
+.purchase-btn {
+  position: absolute;
+  bottom: 12px;
+  right: 12px;
+  width: 44px;
+  height: 44px;
+  border: none;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #6B46C1, #A78BFA);
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 12px rgba(107, 70, 193, 0.3);
+  z-index: 5;
+}
+
+.image-wrapper:hover .purchase-btn {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 16px rgba(107, 70, 193, 0.4);
+}
+
+.purchase-btn:hover {
+  background: linear-gradient(135deg, #5B3C9F, #9775E8);
+  transform: translateY(-2px) scale(1.05);
+  box-shadow: 0 6px 16px rgba(107, 70, 193, 0.4);
+}
+
+.purchase-btn:active {
+  transform: translateY(0) scale(1);
+  box-shadow: 0 2px 8px rgba(107, 70, 193, 0.3);
+}
+
+.purchase-btn svg {
+  width: 20px;
+  height: 20px;
+  stroke-width: 2;
+}
+
+/* 移动端购买按钮始终显示 */
+@media (max-width: 768px) {
+  .purchase-btn {
+    opacity: 1;
+    width: 40px;
+    height: 40px;
+    bottom: 10px;
+    right: 10px;
+  }
+  
+  .purchase-btn svg {
+    width: 18px;
+    height: 18px;
+  }
+}
+
 /* 加载蒙层样式 */
 .loading-mask {
   position: absolute;
@@ -160,25 +368,165 @@ const handleDelete = (e) => {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 249, 250, 0.95) 100%);
-  transition: opacity 0.3s ease;
+  background: rgba(255, 255, 255, 0.85);
+  backdrop-filter: blur(8px);
+  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
   z-index: 10;
 }
 
-.loading-spinner {
-  width: 40px;
-  height: 40px;
-  border: 4px solid rgba(107, 70, 193, 0.2);
-  border-top: 4px solid #6B46C1;
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-  margin-bottom: 12px;
+html.dark .loading-mask {
+  background: rgba(31, 41, 55, 0.85);
+  backdrop-filter: blur(8px);
 }
 
+/* 加载动画容器 */
+.loading-spinner-wrapper {
+  position: relative;
+  width: 48px;
+  height: 48px;
+  margin-bottom: 20px;
+}
+
+/* 外层光晕效果 */
+.loading-spinner-wrapper::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 70px;
+  height: 70px;
+  transform: translate(-50%, -50%);
+  background: radial-gradient(circle, rgba(107, 70, 193, 0.15) 0%, transparent 70%);
+  animation: pulse 2s ease-in-out infinite;
+}
+
+/* 主旋转圈 */
+.loading-spinner {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: 2px solid transparent;
+  border-top-color: #6B46C1;
+  border-right-color: #A78BFA;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+/* 内层反向旋转圈 */
+.loading-spinner-inner {
+  position: absolute;
+  top: 6px;
+  left: 6px;
+  width: calc(100% - 12px);
+  height: calc(100% - 12px);
+  border: 2px solid transparent;
+  border-bottom-color: #A78BFA;
+  border-left-color: #6B46C1;
+  border-radius: 50%;
+  animation: spinReverse 0.8s linear infinite;
+}
+
+/* 中心装饰点 */
+.loading-spinner-wrapper::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 8px;
+  height: 8px;
+  background: linear-gradient(135deg, #6B46C1 0%, #A78BFA 100%);
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  animation: centerPulse 1.5s ease-in-out infinite;
+}
+
+/* 加载文字 */
 .loading-text {
-  font-size: 14px;
+  font-size: 13px;
   color: #6B46C1;
   font-weight: 500;
+  letter-spacing: 0.3px;
+  margin-bottom: 12px;
+  opacity: 0.8;
+}
+
+html.dark .loading-text {
+  color: #A78BFA;
+}
+
+/* 跳动圆点 */
+.loading-dots {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  justify-content: center;
+}
+
+.loading-dots span {
+  width: 5px;
+  height: 5px;
+  background: linear-gradient(135deg, #6B46C1 0%, #A78BFA 100%);
+  border-radius: 50%;
+  animation: bounce 1.4s ease-in-out infinite;
+  box-shadow: 0 2px 8px rgba(107, 70, 193, 0.2);
+}
+
+.loading-dots span:nth-child(1) {
+  animation-delay: 0s;
+}
+
+.loading-dots span:nth-child(2) {
+  animation-delay: 0.16s;
+}
+
+.loading-dots span:nth-child(3) {
+  animation-delay: 0.32s;
+}
+
+/* 动画效果 */
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+@keyframes spinReverse {
+  0% { transform: rotate(360deg); }
+  100% { transform: rotate(0deg); }
+}
+
+@keyframes bounce {
+  0%, 80%, 100% {
+    transform: translateY(0) scale(1);
+    opacity: 0.5;
+  }
+  40% {
+    transform: translateY(-10px) scale(1.3);
+    opacity: 1;
+  }
+}
+
+@keyframes pulse {
+  0%, 100% {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 0.3;
+  }
+  50% {
+    transform: translate(-50%, -50%) scale(1.2);
+    opacity: 0.6;
+  }
+}
+
+@keyframes centerPulse {
+  0%, 100% {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 0.7;
+  }
+  50% {
+    transform: translate(-50%, -50%) scale(1.4);
+    opacity: 1;
+  }
 }
 
 /* 功能按钮区域样式 */
@@ -193,6 +541,11 @@ const handleDelete = (e) => {
   z-index: 1;
 }
 
+html.dark .action-buttons {
+  background: #1f2937;
+  border-top: 1px solid #374151;
+}
+
 .action-btn {
   width: 100%;
   min-width: 0;
@@ -216,13 +569,23 @@ const handleDelete = (e) => {
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03);
 }
 
+html.dark .action-btn {
+  background: #1f2937;
+  color: #9ca3af;
+}
+
 /* 按钮悬停效果 */
 .action-btn:hover {
   transform: translateY(-2px);
-  color: #6B46C1;
+  color: var(--el-color-primary);
+  background: linear-gradient(135deg, rgba(107, 70, 193, 0.1) 0%, rgba(167, 139, 250, 0.1) 100%);
   box-shadow: 0 4px 12px rgba(107, 70, 193, 0.15), 0 2px 4px rgba(107, 70, 193, 0.1);
 }
 
+html.dark .action-btn:hover {
+  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(167, 139, 250, 0.2) 100%);
+}
+
 /* 按钮背景渐变效果 - 仅在悬停时显示 */
 .action-btn::before {
   content: '';
@@ -231,24 +594,21 @@ const handleDelete = (e) => {
   left: 0;
   right: 0;
   bottom: 0;
-  background: linear-gradient(135deg, #6B46C1 0%, #A78BFA 100%);
+  background: linear-gradient(135deg, var(--el-color-primary) 0%, var(--accent-color) 100%);
   opacity: 0;
   transition: opacity 0.25s ease;
   z-index: -1;
 }
 
-.action-btn:hover::before {
-  opacity: 1;
-}
-
 .action-btn:hover .btn-icon,
 .action-btn:hover .btn-text {
-  color: #ffffff;
+  color: var(--el-color-primary);
 }
 
 /* 删除按钮特殊样式 */
 .action-btn.delete-btn:hover {
   color: #EF4444;
+  background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(248, 113, 113, 0.1) 100%);
 }
 
 .action-btn.delete-btn::before {
@@ -257,7 +617,7 @@ const handleDelete = (e) => {
 
 .action-btn.delete-btn:hover .btn-icon,
 .action-btn.delete-btn:hover .btn-text {
-  color: #ffffff;
+  color: #EF4444;
 }
 
 .action-btn:active {
diff --git a/apps/frontend/src/components/auth/PhoneLoginForm.vue b/apps/frontend/src/components/auth/PhoneLoginForm.vue
index 81d96ff..4619e4d 100644
--- a/apps/frontend/src/components/auth/PhoneLoginForm.vue
+++ b/apps/frontend/src/components/auth/PhoneLoginForm.vue
@@ -5,10 +5,10 @@
       <button 
         type="button"
         class="mode-button"
-        :class="{ 'active': loginMode === 'login' }"
-        @click="loginMode = 'login'"
+        :class="{ 'active': loginMode === 'password' }"
+        @click="loginMode = 'password'"
       >
-        {{ t('login.phone_login_mode') }}
+        {{ t('login.phone_password_login_mode') }}
       </button>
       <button 
         type="button"
@@ -18,6 +18,14 @@
       >
         {{ t('login.phone_register_mode') }}
       </button>
+      <button 
+        type="button"
+        class="mode-button"
+        :class="{ 'active': loginMode === 'reset' }"
+        @click="loginMode = 'reset'"
+      >
+        {{ t('login.phone_reset_password_mode') }}
+      </button>
     </div>
     
     <!-- 手机号输入 -->
@@ -43,8 +51,28 @@
       <div v-if="phoneError" class="error-message">{{ phoneError }}</div>
     </div>
     
-    <!-- 验证码输入 -->
-    <div class="form-group">
+    <!-- 密码/验证码登录切换 -->
+    <div v-if="loginMode === 'password'" class="login-method-toggle">
+      <button 
+        type="button"
+        class="method-button"
+        :class="{ 'active': loginMethod === 'code' }"
+        @click="loginMethod = 'code'"
+      >
+        {{ t('login.phone_code_login_method') }}
+      </button>
+      <button 
+        type="button"
+        class="method-button"
+        :class="{ 'active': loginMethod === 'password' }"
+        @click="loginMethod = 'password'"
+      >
+        {{ t('login.phone_password_login_method') }}
+      </button>
+    </div>
+    
+    <!-- 验证码输入（验证码登录显示） -->
+    <div v-if="(loginMode === 'password' && loginMethod === 'code') || loginMode === 'register' || loginMode === 'reset'" class="form-group">
       <label class="form-label" for="code">{{ t('login.code_label') }}</label>
       <div class="input-wrapper verification-code-wrapper" :class="{ 'focused': isCodeFocused }">
         <input
@@ -75,9 +103,9 @@
       <div v-if="codeError" class="error-message">{{ codeError }}</div>
     </div>
     
-    <!-- 密码输入（仅在注册模式下显示） -->
-    <div v-if="loginMode === 'register'" class="form-group">
-      <label class="form-label" for="password">{{ t('login.password_label') }}</label>
+    <!-- 密码输入（注册、密码登录、重置密码时显示，验证码登录不显示） -->
+    <div v-if="(loginMode === 'register' || loginMode === 'password' || loginMode === 'reset') && !(loginMode === 'password' && loginMethod === 'code')" class="form-group">
+      <label class="form-label" for="password">{{ loginMode === 'reset' ? t('login.new_password_label') : t('login.password_label') }}</label>
       <div class="input-wrapper" :class="{ 'focused': isPasswordFocused }">
         <input
           id="password"
@@ -85,11 +113,11 @@
           :type="showPassword ? 'text' : 'password'"
           class="form-input"
           :class="{ 'error': passwordError }"
-          :placeholder="t('login.password_placeholder')"
+          :placeholder="loginMode === 'reset' ? t('login.new_password_placeholder') : t('login.password_placeholder')"
           @focus="isPasswordFocused = true"
           @blur="isPasswordFocused = false"
           :disabled="loading"
-          autocomplete="new-password"
+          :autocomplete="loginMode === 'password' ? 'current-password' : 'new-password'"
         />
         <button
           type="button"
@@ -107,13 +135,7 @@
       <div v-if="passwordError" class="error-message">{{ passwordError }}</div>
     </div>
     
-    <!-- 邀请码输入 -->
-    <InviteCodeInput
-      v-model="form.inviteCode"
-      :error="inviteCodeError"
-      :disabled="loading"
-      @validate="validateInviteCode"
-    />
+
     
     <!-- 登录/注册按钮 -->
     <button
@@ -122,13 +144,23 @@
       :disabled="loading || !isFormValid"
     >
       <span class="button-text">
-        <span v-if="!loading">
-          {{ loginMode === 'login' ? t('login.phone_login_button') : t('login.phone_register_button') }}
+          <span v-if="!loading">
+            {{ 
+              (loginMode === 'code' && loginMethod === 'code') ? t('login.phone_code_login_button') :
+              (loginMode === 'code' && loginMethod === 'password') ? t('login.phone_password_login_button') :
+              (loginMode === 'password') ? t('login.phone_password_login_button') :
+              (loginMode === 'register') ? t('login.phone_register_button') :
+              t('login.phone_reset_password_button')
+            }}
+          </span>
+          <span v-else>
+            {{ 
+              (loginMode === 'code' || loginMode === 'password') ? t('login.phone_logging') :
+              (loginMode === 'register') ? t('login.phone_registering') :
+              t('login.phone_resetting')
+            }}
+          </span>
         </span>
-        <span v-else>
-          {{ loginMode === 'login' ? t('login.phone_logging') : t('login.phone_registering') }}
-        </span>
-      </span>
       <div v-if="loading" class="loading-spinner"></div>
     </button>
   </form>
@@ -140,9 +172,8 @@ import { useI18n } from 'vue-i18n'
 import { WarningFilled, View, Hide } from '@element-plus/icons-vue'
 import { useVuelidate } from '@vuelidate/core'
 import { required, minLength } from '@vuelidate/validators'
-import InviteCodeInput from './InviteCodeInput.vue'
 const { t } = useI18n()
-const emit = defineEmits(['login', 'register'])
+const emit = defineEmits(['login', 'codeLogin', 'register', 'resetPassword', 'resetSuccess', 'sendCode'])
 const props = defineProps({
   loading: {
     type: Boolean,
@@ -150,15 +181,17 @@ const props = defineProps({
   }
 })
 
-// 登录模式：login 或 register
-const loginMode = ref('login')
+// 登录模式：password 或 register 或 reset
+const loginMode = ref('password')
+
+// 登录方法：password 或 code
+const loginMethod = ref('code')
 
 // 表单数据
 const form = ref({
   phone: '',
   code: '',
-  password: '',
-  inviteCode: ''
+  password: ''
 })
 
 // 输入状态
@@ -171,7 +204,6 @@ const showPassword = ref(false)
 const phoneError = ref('')
 const codeError = ref('')
 const passwordError = ref('')
-const inviteCodeError = ref('')
 
 // 验证码倒计时
 const countdown = ref(0)
@@ -180,12 +212,14 @@ const canSendCode = ref(true)
 // 表单验证规则
 const rules = {
   phone: { required },
-  code: { required, minLength: minLength(4) },
-  password: { 
-    required: computed(() => loginMode.value === 'register'),
-    minLength: minLength(6) 
+  code: {
+    required: computed(() => loginMode.value !== 'password'),
+    minLength: computed(() => loginMode.value !== 'password' ? minLength(4) : false)
   },
-  inviteCode: {}
+  password: { 
+    required: computed(() => loginMode.value === 'register' || loginMode.value === 'password' || loginMode.value === 'reset'),
+    minLength: minLength(6) 
+  }
 }
 
 const v$ = useVuelidate(rules, form)
@@ -197,11 +231,18 @@ const isPhoneValid = computed(() => {
 
 // 计算属性：表单是否有效
 const isFormValid = computed(() => {
-  if (!form.value.phone || !form.value.code) {
-    return false
+  // 登录模式下的验证码登录：需要手机号和验证码
+  if (loginMode.value === 'password' && loginMethod.value === 'code') {
+    return !!form.value.phone && !!form.value.code && !phoneError.value && !codeError.value
   }
   
-  if (loginMode.value === 'register' && !form.value.password) {
+  // 登录模式下的密码登录：需要手机号和密码
+  if (loginMode.value === 'password' && loginMethod.value === 'password') {
+    return !!form.value.phone && !!form.value.password && !phoneError.value && !passwordError.value
+  }
+  
+  // 注册或重置密码模式：需要手机号、验证码和密码
+  if (!form.value.phone || !form.value.code || !form.value.password) {
     return false
   }
   
@@ -220,9 +261,9 @@ const validatePhone = () => {
 }
 
 const validateCode = () => {
-  if (!form.value.code) {
+  if (loginMode.value !== 'password' && !form.value.code) {
     codeError.value = t('login.code_empty_error')
-  } else if (form.value.code.length < 4) {
+  } else if (loginMode.value !== 'password' && form.value.code.length < 4) {
     codeError.value = t('login.code_invalid_error')
   } else {
     codeError.value = ''
@@ -230,7 +271,14 @@ const validateCode = () => {
 }
 
 const validatePassword = () => {
-  if (loginMode.value === 'register') {
+  if (loginMode.value === 'register' || loginMode.value === 'password' || loginMode.value === 'reset') {
+    // 登录模式下的验证码登录：不需要验证密码
+    if (loginMode.value === 'password' && loginMethod.value === 'code') {
+      passwordError.value = ''
+      return
+    }
+    
+    // 其他情况：需要验证密码
     if (!form.value.password) {
       passwordError.value = t('login.password_empty_error')
     } else if (form.value.password.length < 6) {
@@ -243,16 +291,12 @@ const validatePassword = () => {
   }
 }
 
-const validateInviteCode = () => {
-  inviteCodeError.value = ''
-}
-
 // 监听表单变化，实时验证
 watch(() => form.value.phone, validatePhone)
 watch(() => form.value.code, validateCode)
 watch(() => form.value.password, validatePassword)
-watch(() => form.value.inviteCode, validateInviteCode)
 watch(() => loginMode.value, validatePassword)
+watch(() => loginMethod.value, validatePassword)
 
 // 发送验证码
 const handleSendCode = async () => {
@@ -260,13 +304,17 @@ const handleSendCode = async () => {
     return
   }
   
-  // 模拟发送验证码
+  // 发送验证码到父组件处理
   try {
     canSendCode.value = false
     countdown.value = 60
     
-    // 这里应该调用发送验证码的API
-    console.log('发送验证码到:', form.value.phone)
+    // 触发发送验证码事件，传递用途
+    emit('sendCode', {
+      phone: form.value.phone,
+      purpose: loginMode.value === 'reset' ? 'reset-password' : 
+              loginMode.value === 'password' ? 'login' : 'register'
+    })
     
     // 倒计时逻辑
     const timer = setInterval(() => {
@@ -285,22 +333,65 @@ const handleSendCode = async () => {
 
 // 表单提交
 const handleSubmit = async () => {
-  // 验证表单
-  await v$.value.$validate()
-  if (v$.value.$invalid) {
+  // 根据登录模式进行不同的验证
+  if (loginMode.value === 'password') {
+    // 密码登录模式：只验证手机号和密码
     validatePhone()
-    validateCode()
     validatePassword()
-    return
+    if (phoneError.value || passwordError.value) {
+      return
+    }
+  } else {
+    // 其他模式：使用 Vuelidate 验证所有字段
+    await v$.value.$validate()
+    if (v$.value.$invalid) {
+      validatePhone()
+      validateCode()
+      validatePassword()
+      return
+    }
   }
   
-  // 根据登录模式触发不同的事件
-  if (loginMode.value === 'login') {
-    emit('login', form.value)
-  } else {
+  // 根据登录模式和登录方法触发不同的事件
+  if (loginMode.value === 'password') {
+    if (loginMethod.value === 'code') {
+      emit('codeLogin', form.value)
+    } else {
+      emit('login', form.value)
+    }
+  } else if (loginMode.value === 'register') {
     emit('register', form.value)
+  } else if (loginMode.value === 'reset') {
+    emit('resetPassword', form.value, () => {
+      // 密码重置成功后切换到登录模式
+      loginMode.value = 'password'
+      // 重置表单数据
+      form.value = {
+        phone: '',
+        code: '',
+        password: ''
+      }
+      // 重置错误信息
+      phoneError.value = ''
+      codeError.value = ''
+      passwordError.value = ''
+    })
   }
 }
+//切换登录方式
+const toggleLoginMode = (mode, method = 'password') => {
+  loginMode.value = mode
+  loginMethod.value = method
+  // 重置错误信息
+  phoneError.value = ''
+  codeError.value = ''
+  passwordError.value = ''
+}
+// 抛出方法：供父组件直接调用
+defineExpose({
+  toggleLoginMode
+})
+
 </script>
 
 <style scoped>
@@ -346,6 +437,41 @@ const handleSubmit = async () => {
   transform: translateY(-1px);
 }
 
+/* 登录方法切换 */
+.login-method-toggle {
+  display: flex;
+  background: rgba(139, 92, 246, 0.05);
+  border: 1px solid rgba(139, 92, 246, 0.1);
+  border-radius: 12px;
+  padding: 4px;
+  gap: 4px;
+  margin-bottom: 4px;
+}
+
+.method-button {
+  flex: 1;
+  padding: 10px 16px;
+  background: transparent;
+  border: none;
+  border-radius: 8px;
+  color: #6B7280;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.method-button:hover {
+  color: #6B46C1;
+}
+
+.method-button.active {
+  background: white;
+  color: #6B46C1;
+  box-shadow: 0 2px 8px rgba(107, 70, 193, 0.15);
+  transform: translateY(-1px);
+}
+
 /* 表单组 */
 .form-group {
   display: flex;
@@ -644,6 +770,25 @@ html.dark .mode-button.active {
   box-shadow: 0 2px 8px rgba(139, 92, 246, 0.25);
 }
 
+html.dark .login-method-toggle {
+  background: rgba(139, 92, 246, 0.15);
+  border-color: rgba(139, 92, 246, 0.25);
+}
+
+html.dark .method-button {
+  color: #9CA3AF;
+}
+
+html.dark .method-button:hover {
+  color: #a78bfa;
+}
+
+html.dark .method-button.active {
+  background: rgba(31, 41, 55, 0.8);
+  color: #a78bfa;
+  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.25);
+}
+
 html.dark .form-label {
   color: #f3f4f6;
 }
diff --git a/apps/frontend/src/components/layout/AppSidebar.vue b/apps/frontend/src/components/layout/AppSidebar.vue
index 4d7d510..af4249b 100644
--- a/apps/frontend/src/components/layout/AppSidebar.vue
+++ b/apps/frontend/src/components/layout/AppSidebar.vue
@@ -5,8 +5,7 @@
     <nav class="sidebar-nav">
       <ul class="nav-list">
         <li v-for="item in coreMenuItems" :key="item.id">
-          <router-link
-            :to="item.path"
+          <div
             class="nav-item"
             :class="{ 'active': isActiveRoute(item.path) }"
             @click="handleNavClick(item)"
@@ -25,7 +24,7 @@
             <transition name="fade">
               <span v-if="!collapsed && item.badge" class="nav-badge">{{ item.badge }}</span>
             </transition>
-          </router-link>
+          </div>
         </li>
       </ul>
     </nav>
diff --git a/apps/frontend/src/components/layout/MainLayout.vue b/apps/frontend/src/components/layout/MainLayout.vue
index 7f49917..9f6a655 100644
--- a/apps/frontend/src/components/layout/MainLayout.vue
+++ b/apps/frontend/src/components/layout/MainLayout.vue
@@ -45,6 +45,8 @@
 import { ref, reactive, computed, onMounted, onUnmounted, watch } from 'vue'
 import AppHeader from './AppHeader.vue'
 import AppSidebar from './AppSidebar.vue'
+import { useRouter } from 'vue-router'
+
 // 注册组件
 defineOptions({
   name: 'MainLayout'
@@ -105,9 +107,10 @@ const toggleSidebar = () => {
     state.sidebarVisible = !state.sidebarVisible
   }
 }
-
+const router = useRouter()
 // 处理导航
 const handleNavigate = (route) => {
+  router.replace(route)
   // 移动端点击导航后隐藏侧边栏
   if (state.isMobile) {
     state.sidebarVisible = false
diff --git a/apps/frontend/src/locales/index.js b/apps/frontend/src/locales/index.js
index c9d868b..b4e026b 100644
--- a/apps/frontend/src/locales/index.js
+++ b/apps/frontend/src/locales/index.js
@@ -131,7 +131,27 @@ export default {
         modify: '修改',
         sceneGraph: '场景图',
         edit: '局部',
-        download: '下载'
+        download: '下载',
+        delete: '删除',
+        purchase: '购买',
+        loadingText: '图片加载中...'
+      },
+      addModal: {
+        title: '添加内容',
+        ipType: 'IP类型',
+        character: '人物',
+        animal: '动物',
+        textPrompt: '文本提示',
+        placeholder: '请输入角色描述，例如：一个可爱的卡通人物',
+        referenceImage: '参考图片',
+        uploadOrSelect: '点击或拖拽上传图片',
+        uploading: '上传中...',
+        generate: '生成',
+        optimizedPrompt: {
+          name: '名称',
+          gender: '性别',
+          appearance: '外观'
+        }
       },
       modelCard: {
         generateModelButton: '生成模型',
@@ -220,6 +240,7 @@ export default {
         times: '次',
         remainingCredits: '积分',
         recharge: '充值',
+        add: '添加',
         guide: '使用指南',
         back: '返回',
         skip: '跳过',
@@ -229,6 +250,14 @@ export default {
         skipGuide: '跳过引导',
         step: '步骤'
       },
+      emptyState: {
+        title: '开始你的创作之旅',
+        description: '还没有创建任何内容。点击下方按钮开始创建你的第一个作品，探索无限创意可能。',
+        createButton: '创建新内容',
+        tip1: '选择角色或动物类型',
+        tip2: '输入创意描述或上传参考图',
+        tip3: '生成并保存你的作品'
+      },
       roles: {
         creator: '达人会员',
         free: '免费会员',
@@ -681,15 +710,24 @@ export default {
           code_empty_error: '请输入验证码',
           code_invalid_error: '请输入有效的验证码',
           send_code: '发送验证码',
-          resend_code_after: '{}秒后重新发送',
-          phone_login_mode: '手机号登录',
-          phone_register_mode: '手机号注册',
-          phone_login_button: '登录',
-          phone_register_button: '注册',
-          phone_logging: '正在登录...',
-          phone_registering: '正在注册...',
-          phone_login_link: '手机号',
-          email_login_link: '邮箱登录',
+          resend_code_after: '{seconds}秒后重新发送',
+          phone_password_login_mode: '登录',
+        phone_register_mode: '注册',
+        phone_reset_password_mode: '重置密码',
+        phone_login_button: '登录',
+        phone_password_login_button: '登录',
+        phone_register_button: '注册',
+        phone_reset_password_button: '重置密码',
+        phone_logging: '正在登录...',
+        phone_registering: '正在注册...',
+        phone_resetting: '正在重置...',
+        phone_login_link: '手机号',
+        email_login_link: '邮箱登录',
+        new_password_label: '新密码',
+        new_password_placeholder: '请输入新密码',
+        phone_code_login_method: '验证码登录',
+        phone_password_login_method: '密码登录',
+        phone_code_login_button: '登录',
         },
       payment: {
         methods: '支付方式',
@@ -1641,10 +1679,30 @@ export default {
         textInputTitle: 'Text Input',
         textInputPlaceholder: 'Please enter adjustment content, e.g. change character expression',
         preview: 'Preview',
-        modify: 'Modify',
+        modify: 'Edit',
         sceneGraph: 'Scene Graph',
-        edit: 'Edit',
-        download: 'Download'
+        edit: 'Part',
+        download: 'Save',
+        delete: 'Remove',
+        purchase: 'Purchase',
+        loadingText: 'Loading image...'
+      },
+      addModal: {
+        title: 'Add Content',
+        ipType: 'IP Type',
+        character: 'Character',
+        animal: 'Animal',
+        textPrompt: 'Text Prompt',
+        placeholder: 'Enter character description, e.g. a cute cartoon character',
+        referenceImage: 'Reference Image',
+        uploadOrSelect: 'Click or drag to upload image',
+        uploading: 'Uploading...',
+        generate: 'Generate',
+        optimizedPrompt: {
+          name: 'Name',
+          gender: 'Gender',
+          appearance: 'Appearance'
+        }
       },
       modelCard: {
         generateModelButton: 'Generate Model',
@@ -1733,6 +1791,7 @@ export default {
         times: 'times',
         remainingCredits: 'Credits',
         recharge: 'Recharge',
+        add: 'Add',
         guide: 'User Guide',
         back: 'Back',
         skip: 'Skip',
@@ -1742,6 +1801,14 @@ export default {
         skipGuide: 'Skip Guide',
         step: 'Step'
       },
+      emptyState: {
+        title: 'Start Your Creative Journey',
+        description: 'No content created yet. Click the button below to create your first work and explore infinite creative possibilities.',
+        createButton: 'Create New Content',
+        tip1: 'Choose character or animal type',
+        tip2: 'Enter creative description or upload reference image',
+        tip3: 'Generate and save your work'
+      },
       userCenter: {
         title: 'User Center',
         description: 'Manage your account information and settings',
@@ -2185,70 +2252,79 @@ export default {
         status: 'Status',
         timeline: 'Tracking Timeline'
       },
-      login: {
-        divider_text: 'Or',
-        role_system: 'Role System',
-        creator_role: 'Creator',
-        admin_role: 'Administrator',
-        viewer_role: 'Viewer',
-        creator_desc: 'Full system access, including user management and system configuration',
-        admin_desc: 'Content management and user management permissions',
-        viewer_desc: 'Basic feature access permissions',
-        theme_toggle_tooltip: 'Switch to dark theme',
-        theme_toggle_tooltip_light: 'Switch to light theme',
-        language_toggle_tooltip: 'Switch to English',
-        login_success: 'Login successful',
-        login_error: 'Login failed',
-        google_login: 'Login with Google',
-        google_logging: 'Logging in...',
-        email_login: 'Login',
-        email_logging: 'Logging in...',
-        email_placeholder: 'Please enter your email',
-        password_placeholder: 'Please enter your password',
-        email_label: 'Email Address',
-        password_label: 'Password',
-        email_empty_error: 'Please enter email address',
-        email_invalid_error: 'Please enter a valid email address',
-        password_empty_error: 'Please enter password',
-        password_min_error: 'Password must be at least 6 characters',
-        login_success_message: 'Login successful!',
-        login_error_message: 'Login failed',
-        google_login_success: 'Google login successful!',
-        google_login_error: 'Google login failed',
-        login_processing_error: 'An error occurred during login',
-        google_login_processing_error: 'An error occurred during Google login',
-        email_login_notice: 'Email login feature is under development, stay tuned',
-        theme_toggle_light: 'Switch to light theme',
-        theme_toggle_dark: 'Switch to dark theme',
-        forgot_password: 'Forgot Password?',
-        register_account: 'Register Account',
-        invite_code_label: 'Invite Code',
-        invite_code_placeholder: 'Please enter invite code',
-        invite_code_empty_error: 'Please enter invite code',
-        join_waitlist: 'Join Waitlist',
-        join_waitlist_success: 'Successfully joined the waitlist, we will contact you soon',
-        // Phone login related
-        phone_login_title: 'Phone Login',
-        phone_login_subtitle: 'Login with phone number and verification code',
-        phone_label: 'Phone Number',
-        phone_placeholder: 'Please enter your phone number',
-        phone_empty_error: 'Please enter phone number',
-        phone_invalid_error: 'Please enter a valid phone number',
-        code_label: 'Verification Code',
-        code_placeholder: 'Please enter verification code',
-        code_empty_error: 'Please enter verification code',
-        code_invalid_error: 'Please enter a valid verification code',
-        send_code: 'Send Code',
-        resend_code_after: 'Resend after {seconds}s',
-        phone_login_mode: 'Phone Login',
-        phone_register_mode: 'Phone Register',
-        phone_login_button: 'Login',
+     login: {
+          divider_text: 'OR',
+          role_system: 'Role System',
+          creator_role: 'Creator',
+          admin_role: 'Admin',
+          viewer_role: 'Viewer',
+          creator_desc: 'Full system access, including user management and system configuration',
+          admin_desc: 'Content and user management permissions',
+          viewer_desc: 'Basic feature access permissions',
+          theme_toggle_tooltip: 'Switch to dark theme',
+          theme_toggle_tooltip_light: 'Switch to light theme',
+          language_toggle_tooltip: 'Switch to English',
+          login_success: 'Login successful',
+          login_error: 'Login failed',
+          google_login: 'Sign in with Google',
+          google_logging: 'Signing in...',
+          email_login: 'Sign in',
+          email_logging: 'Signing in...',
+          email_placeholder: 'Enter your email',
+          password_placeholder: 'Enter your password',
+          email_label: 'Email Address',
+          password_label: 'Password',
+          email_empty_error: 'Please enter your email address',
+          email_invalid_error: 'Please enter a valid email address',
+          password_empty_error: 'Please enter your password',
+          password_min_error: 'Password must be at least 6 characters',
+          login_success_message: 'Login successful!',
+          login_error_message: 'Login failed',
+          google_login_success: 'Google sign-in successful!',
+          google_login_error: 'Google sign-in failed',
+          login_processing_error: 'An error occurred during login',
+          google_login_processing_error: 'An error occurred during Google sign-in',
+          email_login_notice: 'Email sign-in feature coming soon',
+          theme_toggle_light: 'Switch to light theme',
+          theme_toggle_dark: 'Switch to dark theme',
+          forgot_password: 'Forgot password?',
+          register_account: 'Register account',
+          invite_code_label: 'Invitation Code',
+          invite_code_placeholder: 'Enter invitation code',
+          invite_code_empty_error: 'Please enter invitation code',
+          join_waitlist: 'Join waitlist',
+          join_waitlist_success: 'Successfully joined waitlist, we will contact you soon',
+          // Phone login related
+          phone_login_title: 'Phone Login',
+          phone_login_subtitle: 'Sign in with phone number and verification code',
+          phone_label: 'Phone Number',
+          phone_placeholder: 'Enter your phone number',
+          phone_empty_error: 'Please enter phone number',
+          phone_invalid_error: 'Please enter a valid phone number',
+          code_label: 'Verification Code',
+          code_placeholder: 'Enter verification code',
+          code_empty_error: 'Please enter verification code',
+          code_invalid_error: 'Please enter a valid verification code',
+          send_code: 'Send Code',
+          resend_code_after: 'Resend after {} seconds',
+          phone_password_login_mode: 'Sign',
+        phone_register_mode: 'Register',
+        phone_reset_password_mode: 'Reset',
+        phone_login_button: 'Sign in',
+        phone_password_login_button: 'Sign in',
         phone_register_button: 'Register',
-        phone_logging: 'Logging in...',
+        phone_reset_password_button: 'Reset Password',
+        phone_logging: 'Signing in...',
         phone_registering: 'Registering...',
+        phone_resetting: 'Resetting...',
         phone_login_link: 'Phone',
-        email_login_link: 'Login with Email',
-      },
+        email_login_link: 'Email Sign-in',
+        new_password_label: 'New Password',
+        new_password_placeholder: 'Enter new password',
+        phone_code_login_method: 'Code Login',
+        phone_password_login_method: 'Password Login',
+        phone_code_login_button: 'Sign in',
+        },
       payment: {
         methods: 'Payment Methods',
         methods: {
diff --git a/apps/frontend/src/main.js b/apps/frontend/src/main.js
index 99496b8..d112935 100644
--- a/apps/frontend/src/main.js
+++ b/apps/frontend/src/main.js
@@ -11,6 +11,7 @@ import 'element-plus/theme-chalk/dark/css-vars.css'
 import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
 // Plugins
 import ElementPlus from 'element-plus'
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import { createI18n } from 'vue-i18n'
 import i18nConfig from './locales/index.js'
 import router from './router'
@@ -50,6 +51,10 @@ app.use(i18n)
 // Router & UI
 app.use(router)
 app.use(ElementPlus)
+
+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+  app.component(key, component)
+}
 // Lazyload
 // app.use(VueLazyload, {
 //   loading: '/logo.png',
diff --git a/apps/frontend/src/router/index.js b/apps/frontend/src/router/index.js
index dafdab4..4a50e38 100644
--- a/apps/frontend/src/router/index.js
+++ b/apps/frontend/src/router/index.js
@@ -16,7 +16,6 @@ const AgentManagement = () => import('../views/AgentManagement.vue')
 const AddAgent = () => import('../views/AddAgent.vue')
 const DeviceList = () => import('../views/DeviceList.vue')
 const UiTest = () => import('../views/UiTest.vue')
-const home = () => import('../views/home/index.vue')
 const PointsRecharge = () => import('../views/PointsRecharge/PointsRecharge.vue')
 const UserCenter = () => import('../views/user/index.vue')
 const NotFound = () => import('../views/NotFound.vue')
@@ -25,12 +24,22 @@ const KefuReduce = () => import('../views/kefuReduce.vue')
 const isPortraitMobile = () => {
   return window.innerWidth < 768 && window.innerHeight > window.innerWidth
 }
+const isWeChatBrowser = () => {
+  const ua = navigator.userAgent.toLowerCase()
+  return ua.indexOf('micromessenger') !== -1
+}
 const CreateProject = () => {
   if (isPortraitMobile()) {
     return import('../views/Project/CreateProjectShu/CreateProjectShu.vue')
   }
   return import('../views/Project/CreateProject.vue')
 }
+const home = () => {
+  return import('../views/home/index.vue')
+  // if (isWeChatBrowser()) {
+  //   return import('../views/ModernHome/ModernHome.vue')
+  // }
+}
 NProgress.configure({
   showSpinner: false,
 })// 开启轻量模式（顶部细线）
@@ -90,6 +99,7 @@ const routes = [
     meta: { requiresAuth: false, keepAlive: false, fullScreen: true }
   }
 ]
+ 
 //免费会员/达人会员动态路由
 export const freeRoutes = [
   {
@@ -195,6 +205,11 @@ router.beforeEach(async (to, from, next) => {
   // window.localStorage.setItem('token','123')
   // return next()
   // }
+  if(to.path=='/'){
+    if(isWeChatBrowser()){//如果是微信浏览器，跳转到现代首页
+      return next('/czhome')
+    }
+  }
   if (to.path == '/login' || to.path == '/login/phone' || to.path == '/register' || to.path == '/forgot-password') {
     const token = localStorage.getItem('token')
     // 如果有 token，跳转到首页
diff --git a/apps/frontend/src/stores/auth.js b/apps/frontend/src/stores/auth.js
index a8d6128..fdc4290 100644
--- a/apps/frontend/src/stores/auth.js
+++ b/apps/frontend/src/stores/auth.js
@@ -22,42 +22,9 @@ export const useAuthStore = defineStore('auth', () => {
     } finally {
     }
   }
-  // 手机号+验证码登录方法
-  const phoneLogin = async (data,callback=null) => {
-    try {
-      const res = await requestUtils.common(clientApi.default.PHONE_LOGIN, data)
-      if(res.code === 0){
-        let data = res.data;
-        // 登录成功，保存token和用户信息
-        loginSuccess(data,callback)
-        return res
-      }
-    } catch (error) {
-      console.error('手机号登录失败:', error)
-      throw error
-    } finally {
-    }
-  }
-  // 手机号+验证码+密码注册方法
-  const phoneRegister = async (data,callback=null) => {
-    try {
-      const res = await requestUtils.common(clientApi.default.PHONE_REGISTER, data)
-      if(res.code === 0){
-        let data = res.data;
-        // 注册成功，保存token和用户信息
-        loginSuccess(data,callback)
-        return res
-      }
-    } catch (error) {
-      console.error('手机号注册失败:', error)
-      throw error
-    } finally {
-    }
-  }
   //登录成功方法
   const loginSuccess = (data,callback=null) => {
     token.value = data.accessToken
-    // user.value = data
     localStorage.setItem('token', token.value);
     updateUserInfo().then(res => {
       callback&&callback(data);
@@ -100,13 +67,44 @@ export const useAuthStore = defineStore('auth', () => {
     }
     })
   }
+
+  
+  const phoneLogin = async (data,callback=null) => {
+    try {
+      const res = await requestUtils.common(clientApi.default.LOGIN_PHONE, data)
+      if(res.code === 0){
+        let data = res.data;
+        // 登录成功，保存token和用户信息
+        loginSuccess(data,callback)
+        return res
+      }
+    } catch (error) {
+      throw error
+    } finally {
+    }
+  }
+  //使用手机号和验证码登录
+  const phoneLoginCode = async (data,callback=null) => {
+    try {
+      const res = await requestUtils.common(clientApi.default.LOGIN_PHONE_CODE, data)
+      if(res.code === 0){
+        let data = res.data;
+        // 登录成功，保存token和用户信息
+        loginSuccess(data,callback)
+        return res
+      }
+    } catch (error) {
+      throw error
+    } finally {
+    }
+  }
   return {
+    phoneLoginCode,
+    phoneLogin,
     updateUserInfo,
   user,
   token,
   login,
-  phoneLogin,
-  phoneRegister,
   logout,
   loginSuccess,
   }
diff --git a/apps/frontend/src/styles/theme.css b/apps/frontend/src/styles/theme.css
index 11d3e58..ba0bd6c 100644
--- a/apps/frontend/src/styles/theme.css
+++ b/apps/frontend/src/styles/theme.css
@@ -5,6 +5,10 @@
   --accent-color: #A78BFA;
   --text-color: #1F2937;
   --bg-color: #F3F4F6;
+  --border-color: #E5E7EB;
+  --card-bg: #FFFFFF;
+  --text-secondary: #6B7280;
+  --primary-light: rgba(107, 70, 193, 0.1);
   /* Explicitly set light color scheme by default */
   color-scheme: light;
   
@@ -114,6 +118,10 @@ html.dark * {
 html.dark {
   --text-color: #F3F4F6;
   --bg-color: #0b0d12;
+  --border-color: #374151;
+  --card-bg: #1F2937;
+  --text-secondary: #9CA3AF;
+  --primary-light: rgba(139, 92, 246, 0.15);
   
   /* Element Plus dark theme variables */
   --el-color-primary: #8B5CF6;
diff --git a/apps/frontend/src/views/Login/Login.vue b/apps/frontend/src/views/Login/Login.vue
index 70a9557..25dc3ec 100644
--- a/apps/frontend/src/views/Login/Login.vue
+++ b/apps/frontend/src/views/Login/Login.vue
@@ -49,6 +49,7 @@
         <div class="auth-links">
           <div class="auth-links-row">
             <button 
+              v-if="showPhoneLogin"
               type="button" 
               class="auth-link phone-login-link"
               @click="goToPhoneLogin"
@@ -56,7 +57,6 @@
               <el-icon class="link-icon"><Phone /></el-icon>
               <span>{{ t('login.phone_login_link') }}</span>
             </button>
-            
             <button 
               type="button" 
               class="auth-link forgot-password-link"
@@ -85,6 +85,7 @@
 import { onMounted, reactive, ref, computed } from 'vue'
 import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
+import { environmentUtils } from '@deotaland/utils'
 import { useAuthStore } from '@/stores/auth'
 import { WarningFilled, InfoFilled, QuestionFilled, UserFilled, Phone } from '@element-plus/icons-vue'
 // 导入子组件
@@ -102,11 +103,45 @@ const inviteCode = ref('')
 const isInviteCodeValid = computed(() => {
   return inviteCode.value.trim() !== ''
 })
+// 环境检测状态
+const environmentInfo = ref(null)
+const isDetectingEnvironment = ref(true)
+// 判断是否显示手机号登录入口
+const showPhoneLogin = computed(() => {
+  // 如果还在检测中，默认显示
+  if (isDetectingEnvironment.value) {
+    return true
+  }
+  // 如果检测失败，默认显示
+  if (!environmentInfo.value) {
+    return true
+  }
+  // 如果是国内环境，显示手机号登录入口
+  return environmentInfo.value.isDomestic
+})
+
 // 更新邀请码
 const updateInviteCode = (value) => {
   inviteCode.value = value
 }
 
+// 检测环境
+const detectEnvironment = async () => {
+  try {
+    const result = await environmentUtils.detectEnvironment({
+      useCache: true,
+      ipDetection: true,
+      timeout: 5000
+    })
+    environmentInfo.value = result
+  } catch (error) {
+    environmentInfo.value = null
+    isDetectingEnvironment.value = true
+  } finally {
+    isDetectingEnvironment.value = false
+  }
+}
+
 const handleLogin = async (data) => {
     plugin.login(data)
   // if (data.inviteCode) {
@@ -136,8 +171,11 @@ const goToRegister = () => {
 const goToPhoneLogin = () => {
   router.push('/login/phone')
 }
+//判断是否是国内环境显示手机号登录入口
+
 // 页面挂载时初始化认证状态
 onMounted(() => {
+  detectEnvironment()
 })
 </script>
 
diff --git a/apps/frontend/src/views/Login/PhoneLogin.vue b/apps/frontend/src/views/Login/PhoneLogin.vue
index 0267ac0..3744e96 100644
--- a/apps/frontend/src/views/Login/PhoneLogin.vue
+++ b/apps/frontend/src/views/Login/PhoneLogin.vue
@@ -28,8 +28,13 @@
         <!-- 手机号登录表单 -->
         <div class="phone-login-section">
           <PhoneLoginForm 
+          ref="PhoneLoginFormRef"
             @login="handleLogin"
+            @codeLogin="handleCodeLogin"
             @register="handleRegister"
+            @resetPassword="handleResetPassword"
+            @resetSuccess="handleResetSuccess"
+            @sendCode="handleSendCode"
           />
         </div>
         
@@ -50,15 +55,6 @@
               <el-icon class="link-icon"><Message /></el-icon>
               <span>{{ t('login.email_login_link') }}</span>
             </button>
-            
-            <button 
-              type="button" 
-              class="auth-link forgot-password-link"
-              @click="goToForgotPassword"
-            >
-              <el-icon class="link-icon"><QuestionFilled /></el-icon>
-              <span>{{ t('login.forgot_password') }}</span>
-            </button>
           </div>
         </div>
       </div>
@@ -81,17 +77,35 @@ const router = useRouter()
 const authStore = useAuthStore()
 const { t } = useI18n()
 const plugin = reactive(new LOGIN());
-
+const PhoneLoginFormRef = ref(null)
 // 处理登录
 const handleLogin = async (data) => {
   plugin.phoneLogin(data)
 }
 
+// 处理验证码登录
+const handleCodeLogin = async (data) => {
+  plugin.phoneLoginCode(data)
+}
+
 // 处理注册
 const handleRegister = async (data) => {
   plugin.phoneRegister(data)
 }
 
+// 处理重置密码
+const handleResetPassword = async (data) => {
+  plugin.phoneResetPassword(data,()=>{
+    // 密码重置成功后切换到登录模式
+   PhoneLoginFormRef.value.toggleLoginMode('password', 'password')
+  })
+}
+
+// 处理发送验证码
+const handleSendCode = async (data) => {
+  plugin.sendPhoneCode(data)
+}
+
 // 跳转到邮箱登录页面
 const goToEmailLogin = () => {
   router.push('/login')
@@ -236,7 +250,7 @@ onMounted(() => {
 
 .auth-links-row {
   display: flex;
-  justify-content: space-between;
+  justify-content: center;
   align-items: center;
   gap: 16px;
 }
diff --git a/apps/frontend/src/views/Login/login.js b/apps/frontend/src/views/Login/login.js
index b7d66ef..22c5285 100644
--- a/apps/frontend/src/views/Login/login.js
+++ b/apps/frontend/src/views/Login/login.js
@@ -1,6 +1,6 @@
-import { requestUtils,clientApi } from '@deotaland/utils';
+import { requestUtils, clientApi } from '@deotaland/utils';
 import { useRouter } from 'vue-router'
-import {ElMessage} from 'element-plus';
+import { ElMessage } from 'element-plus';
 import { useAuthStore } from '@/stores/auth.js';
 export default class Login {
   loading = false;//登录loading
@@ -10,105 +10,144 @@ export default class Login {
   }
   async login(data) {
     this.loading = true;
-    this.authStore.login(data,(userData)=>{
+    this.authStore.login(data, (userData) => {
       this.loading = false;
       this.handleLoginSuccess(userData);
-        // this.router.push({ name: 'czhome' })
+      // this.router.push({ name: 'czhome' })
       // this.refreshGoogleRefreshToken()
     });
   }
-  //手机号登录
-  async phoneLogin(data) {
-    this.loading = true;
-    this.authStore.phoneLogin(data,(userData)=>{
-      this.loading = false;
-      this.handleLoginSuccess(userData);
-    });
-  }
-  //手机号注册
-  async phoneRegister(data) {
-    this.loading = true;
-    this.authStore.phoneRegister(data,(userData)=>{
-      this.loading = false;
-      this.handleLoginSuccess(userData);
-    });
-  }
+ 
   //登录成功处理根据不同角色标识
-  handleLoginSuccess(userData){//0候补1免费2达人
+  handleLoginSuccess(userData) {//0候补1免费2达人
     // userData.user_role=1
-     this.router.push({ name: 'czhome' });
-    // if(userData.user_role != '0'){
-    //     this.router.push({ name: 'czhome' });
-    // }else{
-    //   ElMessage.success('You have been added to the waitlist');
-    //   window.localStorage.removeItem('token')
-    // }
+    this.router.replace({ name: 'czhome' });
   }
   //发送邮箱验证码
-  sendEmailCode(item,callback){
-    requestUtils.common(clientApi.default.SEND_EMAIL_CODE,{
-      email:item.email,
-      purpose:item.purpose||'register' //forgot-password
-    }).then(res=>{
-        ElMessage.success('验证码发送成功');
-        callback&&callback();
+  sendEmailCode(item, callback) {
+    requestUtils.common(clientApi.default.SEND_EMAIL_CODE, {
+      email: item.email,
+      purpose: item.purpose || 'register' //forgot-password
+    }).then(res => {
+      ElMessage.success('验证码发送成功');
+      callback && callback();
     })
   }
+  
   //发送手机验证码
-  sendPhoneCode(item,callback){
-    requestUtils.common(clientApi.default.SEND_PHONE_CODE,{
-      phone:item.phone,
-      purpose:item.purpose||'login' //register
-    }).then(res=>{
-        ElMessage.success('验证码发送成功');
-        callback&&callback();
+  async sendPhoneCode(data) {
+    let parmas = {
+      "phone": data.phone,
+      "purpose": data.purpose//register注册 //reset-password重置密码//login登录
+    }
+    requestUtils.common(clientApi.default.SEND_SMS_CODE, parmas).then(res => {
+      ElMessage.success('验证码发送成功');
     })
   }
-  //确认注册功能
-  confirmRegister(data,callback){
+  //手机号密码登录
+  async phoneLogin(data) {
     let params = {
-  "email": data.email,
-  "emailCode": data.emailCode,
-  "password": data.password
+      "phone": data.phone,
+      "password": data.password
+    }
+    this.loading = true;
+    this.authStore.phoneLogin(params, (userData) => {
+      this.loading = false;
+      this.handleLoginSuccess(userData);
+    });
   }
-    requestUtils.common(clientApi.default.REGISTER,params).then(res=>{
-        let data = res.data;
-        // this.authStore.loginSuccess(data,()=>{
-        //   this.router.push({ name: 'home' })
-        // })
-        ElMessage.success('注册成功');
-        callback&&callback();
+  //使用手机号和验证码登录
+  async phoneLoginCode(data) {
+    let params = {
+      "phone": data.phone,
+      "smsCode": data.code
+    }
+    this.loading = true;
+    this.authStore.phoneLoginCode(params, (userData) => {
+      this.loading = false;
+      this.handleLoginSuccess(userData);
+    });
+  }
+  //手机号重置密码
+  async phoneResetPassword(data, callback) {
+    let params = {
+      "phone": data.phone,
+      "smsCode": data.code,
+      "newPassword": data.password
+    }
+    this.loading = true;
+   await requestUtils.common(clientApi.default.RESET_PASSWORD_PHONE, params).then(res => {
+      this.loading = false;
+      ElMessage.success('密码重置成功');
+      callback && callback();
+    })
+  }
+   //手机号注册
+  async phoneRegister(data) {
+    let params = {
+  phone: data.phone,
+  smsCode: data.code,
+  password: data.password
+}
+    this.loading = true;
+    requestUtils.common(clientApi.default.REGISTER_PHONE, params).then(res => {
+      this.loading = false;
+      ElMessage.success('注册成功');
+      let data = res.data;
+       this.authStore.loginSuccess(data,()=>{
+        this.handleLoginSuccess(data);
+       });
+    }).catch(err => {
+      this.loading = false;
+      ElMessage.error('注册失败');
+    })
+  }
+
+  //确认注册功能
+  confirmRegister(data, callback) {
+    let params = {
+      "email": data.email,
+      "emailCode": data.emailCode,
+      "password": data.password
+    }
+    requestUtils.common(clientApi.default.REGISTER, params).then(res => {
+      let data = res.data;
+      // this.authStore.loginSuccess(data,()=>{
+      //   this.router.push({ name: 'home' })
+      // })
+      ElMessage.success('注册成功');
+      callback && callback();
     })
   }
   //刷新googleRefreshToken
-  refreshGoogleRefreshToken(callback){
-    requestUtils.common(clientApi.default.REFRESH_TOKEN).then(res=>{
-        ElMessage.success('刷新成功');
-        callback&&callback();
+  refreshGoogleRefreshToken(callback) {
+    requestUtils.common(clientApi.default.REFRESH_TOKEN).then(res => {
+      ElMessage.success('刷新成功');
+      callback && callback();
     })
   }
   //登出
-  logout(){
-    this.authStore.logout(()=>{
+  logout() {
+    this.authStore.logout(() => {
       this.router.replace({ name: 'login' })
     })
   }
   //确认修改密码
-  confirmForgotPassword(data,callback){
+  confirmForgotPassword(data, callback) {
     let params = {
       "email": data.email,
       "emailCode": data.emailCode,
       "newPassword": data.password
     }
-    requestUtils.common(clientApi.default.FORGOT_PASSWORD,params).then(res=>{
-        ElMessage.success('密码修改成功');
-        callback&&callback();
+    requestUtils.common(clientApi.default.FORGOT_PASSWORD, params).then(res => {
+      ElMessage.success('密码修改成功');
+      callback && callback();
     })
   }
   //加入候补队列
-  joinWaitlist(data,callback){
+  joinWaitlist(data, callback) {
     // 这里可以根据实际情况实现加入候补队列的API调用
     ElMessage.success('已成功加入候补队列，我们将尽快与您联系');
-    callback&&callback();
+    callback && callback();
   }
 }
\ No newline at end of file
diff --git a/apps/frontend/src/views/ModernHome/ModernHome.vue b/apps/frontend/src/views/ModernHome/ModernHome.vue
index 0147521..ff8562d 100644
--- a/apps/frontend/src/views/ModernHome/ModernHome.vue
+++ b/apps/frontend/src/views/ModernHome/ModernHome.vue
@@ -151,7 +151,8 @@ const iconComponents = {
   Tickets,
   Setting,
   Picture,
-  Cpu
+  Cpu,
+  User
 }
 
 // 响应式数据 - 使用计算属性来支持国际化
diff --git a/apps/frontend/src/views/Project/CreateProject.vue b/apps/frontend/src/views/Project/CreateProject.vue
index effd7de..1f37650 100644
--- a/apps/frontend/src/views/Project/CreateProject.vue
+++ b/apps/frontend/src/views/Project/CreateProject.vue
@@ -67,7 +67,6 @@
               <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
             </svg>
           </button> -->
-          
           <!-- 根据卡片类型显示不同组件 -->
           <IPCard 
           @delete="handleDeleteCard(index)"
diff --git a/apps/frontend/src/views/Project/CreateProjectShu/CreateProjectShu.vue b/apps/frontend/src/views/Project/CreateProjectShu/CreateProjectShu.vue
index a783506..11c752e 100644
--- a/apps/frontend/src/views/Project/CreateProjectShu/CreateProjectShu.vue
+++ b/apps/frontend/src/views/Project/CreateProjectShu/CreateProjectShu.vue
@@ -3,7 +3,7 @@
     <!-- 头部导航栏 -->
     <div class="header-nav">
       <div class="header-left">
-        <button class="back-button" @click="handleBack">
+        <button class="back-button" @click="handleBack" :title="$t('header.back')">
           <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
             <path d="M19 12H5M12 19l-7-7 7-7"/>
           </svg>
@@ -28,11 +28,72 @@
     </div>
     <!-- 卡片列表 -->
     <div class="cards-container">
+      <!-- 空状态页面 -->
+      <div v-if="cards.length === 0" class="empty-state">
+        <div class="empty-state-content">
+          <div class="empty-state-icon">
+            <svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <circle cx="60" cy="60" r="50" fill="url(#gradient1)" fill-opacity="0.1"/>
+              <circle cx="60" cy="60" r="40" fill="url(#gradient1)" fill-opacity="0.15"/>
+              <circle cx="60" cy="60" r="30" fill="url(#gradient1)" fill-opacity="0.2"/>
+              <path d="M60 35V85M35 60H85" stroke="url(#gradient2)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+              <circle cx="60" cy="60" r="8" fill="url(#gradient2)"/>
+              <defs>
+                <linearGradient id="gradient1" x1="10" y1="10" x2="110" y2="110" gradientUnits="userSpaceOnUse">
+                  <stop stop-color="#6B46C1"/>
+                  <stop offset="1" stop-color="#A78BFA"/>
+                </linearGradient>
+                <linearGradient id="gradient2" x1="35" y1="35" x2="85" y2="85" gradientUnits="userSpaceOnUse">
+                  <stop stop-color="#6B46C1"/>
+                  <stop offset="1" stop-color="#A78BFA"/>
+                </linearGradient>
+              </defs>
+            </svg>
+          </div>
+          <h2 class="empty-state-title">{{ $t('emptyState.title') }}</h2>
+          <p class="empty-state-description">{{ $t('emptyState.description') }}</p>
+          <button class="empty-state-button" @click="handleAdd">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <line x1="12" y1="5" x2="12" y2="19"></line>
+              <line x1="5" y1="12" x2="19" y2="12"></line>
+            </svg>
+            {{ $t('emptyState.createButton') }}
+          </button>
+          <div class="empty-state-tips">
+            <div class="tip-item">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <circle cx="12" cy="12" r="10"/>
+                <path d="M12 16v-4M12 8h.01"/>
+              </svg>
+              <span>{{ $t('emptyState.tip1') }}</span>
+            </div>
+            <div class="tip-item">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
+              </svg>
+              <span>{{ $t('emptyState.tip2') }}</span>
+            </div>
+            <div class="tip-item">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M12 2L2 7l10 5 10-5-10-5z"/>
+                <path d="M2 17l10 5 10-5"/>
+                <path d="M2 12l10 5 10-5"/>
+              </svg>
+              <span>{{ $t('emptyState.tip3') }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      
+      <!-- 卡片列表 -->
       <shu-card
         v-for="(card, index) in cards"
         :key="card.id"
         :image-url="card.imageUrl"
         :card-data="card"
+        :combinedPromptJson="combinedPromptJson"
+        @save-project="(item)=>{handleSaveProject(index,item,'image')}"
+        @customize-to-home="handleCustomizeToHome(index)"
         @preview="handlePreviewImage"
         @modify="handleModify"
         @edit="handlePartialEdit"
@@ -40,23 +101,91 @@
         @delete="handleDeleteCard(index)"
       />
     </div>
+    <!-- 固定添加按钮 -->
+    <button class="add-button" @click="handleAdd" :title="$t('header.add')">
+      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <line x1="12" y1="5" x2="12" y2="19"></line>
+        <line x1="5" y1="12" x2="19" y2="12"></line>
+      </svg>
+    </button>
+    <!-- 添加弹窗 -->
+    <AddModal 
+      :series="series"
+      :show="showAddModal" 
+      @close="showAddModal = false"
+      @generate="handleAddGenerate"
+      @handleHookSelected="handleHookSelected"
+    />
+    <PurchaseModal 
+    v-if="showPurchaseModal"
+    :series="series"
+    :show="showPurchaseModal" 
+    :modelData="CustomizeModalData" 
+    @close="showPurchaseModal=false" />
+      <!-- 定制到家弹窗 -->
+  <OrderProcessModal 
+    :show="showOrderProcessModal" 
+    :modelData="CustomizeModalData" 
+    @close="showOrderProcessModal=false" 
+    @acknowledge="handleBuyFromCustomize" />
+    <DtCanvasEditor
+    :language="locale"
+    v-model:visible="canvasEditorVisible"
+      :image-url="canvasEditorImageUrl"
+      @add-prompt-card="handleCanvasSave"
+    />
+    <!-- 文本输入弹窗 -->
+    <div v-if="showTextInput" class="text-input-overlay" role="dialog" aria-modal="true" aria-label="文本输入">
+      <div class="text-input-container">
+        <div class="text-input-header">
+          <div class="text-input-title">{{ t('modelModal.textInputTitle') }}</div>
+          <button class="text-input-close" @click="handleTextInputCancel"  aria-label="关闭">
+            <el-icon class="close-icon"><CloseBold /></el-icon>
+          </button>
+        </div>
+        <textarea 
+          ref="textInputRef"
+          v-model="textInputValue"
+          class="text-input-area"
+          :placeholder="t('modelModal.textInputPlaceholder')"
+          rows="4"
+          @keydown.enter.ctrl="handleTextInputConfirm"
+          @keydown.esc="handleTextInputCancel"
+          @click.stop
+          @mousedown.stop
+        ></textarea>
+        <div class="text-input-actions">
+          <button class="text-input-btn cancel-btn" @click="handleTextInputCancel">
+            {{ t('common.cancel') }}
+          </button>
+          <button class="text-input-btn confirm-btn" @click="handleTextInputConfirm">
+            {{ t('common.confirm') }}
+          </button>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup>
 // 创意空间组件逻辑
-import { ref, computed, onMounted, onUnmounted,watch } from 'vue';
+import { ref, computed, onMounted, onUnmounted,watch,nextTick } from 'vue';
 import {useRoute,useRouter} from 'vue-router';
 import {MeshyServer,GiminiServer,FileServer} from '@deotaland/utils';
 import {Project} from '../index';
 import {ModernHome} from '../../ModernHome/index.js'
 import { useI18n } from 'vue-i18n';
 import { ElIcon } from 'element-plus';
-import { MagicStick } from '@element-plus/icons-vue';
+import { MagicStick, CloseBold } from '@element-plus/icons-vue';
 import LanguageToggle from '@/components/ui/LanguageToggle.vue';
 import ThemeToggle from '@/components/ui/ThemeToggle.vue';
+import AddModal from '@/components/AddModal/index.vue';
+import PurchaseModal from '@/components/PurchaseModal/index.vue';
+import OrderProcessModal from '@/components/OrderProcessModal/index.vue';
+
 // 引入竖屏卡片组件
 import ShuCard from '@/components/IPCard/shu.vue';
+const { t } = useI18n();
 const { locale } = useI18n()
 const headerRef = ref(null);
 const iPandCardLeftRef = ref(null);
@@ -68,14 +197,41 @@ const modernHome = new ModernHome();
 const router = useRouter();
 const PluginProject = new Project();
 
+// 文本输入弹窗相关状态
+const showTextInput = ref(false);
+const textInputValue = ref('');
+const currentModifyCardData = ref(null);
+const textInputRef = ref(null);
+
 // 充值按钮点击事件
 const handleRecharge = () => {
   router.push('/points-recharge');
 }
 
+// 添加按钮点击事件
+const handleAdd = () => {
+  showAddModal.value = true;
+}
+
+// 处理添加弹窗的生成事件
+const handleAddGenerate = (data) => {
+  // 这里可以调用现有的生成逻辑
+  // 例如调用 handleGenerateRequested 或其他相关函数
+  handleGenerateRequested({
+    count: 1,
+    profile: {
+      appearance: data.prompt
+    },
+    inspirationImage: data.inspirationImage,
+    ipType: data.ipType,
+    ipTypeImg: null
+  });
+}
+
 // 弹窗相关状态
 const showModelModal = ref(false);
 const selectedModel = ref(null);
+const showAddModal = ref(false);
 const showImportModal = ref(false);
 const importUrl = ref('https://xiaozhi.me/console/agents');
 const showGuideModal = ref(false);
@@ -151,18 +307,40 @@ const handlePartialEdit = (imageUrl, index) => {
 // 处理修改按钮点击
 const handleModify = (cardData) => {
   console.log('修改按钮点击', cardData);
-  // 这里可以实现修改逻辑，例如打开修改弹窗等
-  // 可以直接调用现有的创建提示词卡片函数
+  // 显示文本输入弹窗
   if (cardData) {
-    // 调用现有的创建提示词卡片函数
-    handleCreatePromptCard(null, {
-      img: cardData.imageUrl,
-      diyPromptText: '',
-      cardData: cardData
+    currentModifyCardData.value = cardData;
+    showTextInput.value = true;
+    textInputValue.value = '';
+    nextTick(() => {
+      if (textInputRef.value) {
+        textInputRef.value.focus();
+      }
     });
   }
 };
 
+// 处理文本输入确认
+const handleTextInputConfirm = () => {
+  if (textInputValue.value.trim() && currentModifyCardData.value) {
+    handleCreatePromptCard(null, {
+      img: currentModifyCardData.value.imageUrl,
+      diyPromptText: textInputValue.value,
+      cardData: currentModifyCardData.value
+    });
+    showTextInput.value = false;
+    textInputValue.value = '';
+    currentModifyCardData.value = null;
+  }
+};
+
+// 处理文本输入取消
+const handleTextInputCancel = () => {
+  showTextInput.value = false;
+  textInputValue.value = '';
+  currentModifyCardData.value = null;
+};
+
 // 处理场景图按钮点击
 const handleScene = (cardData) => {
   console.log('场景图按钮点击', cardData);
@@ -223,7 +401,6 @@ const getCombinedPrompt = async (config={})=>{
   try {
     const data = await PluginProject.getCombinedPrompt(series.value,config);
     combinedPromptJson.value = data;
-    console.log(data,'combinedPromptJson.value');
   } catch (error) {
     console.error(error);
   }
@@ -544,8 +721,7 @@ const handleGenerateRequested = async (params) => {
     });
     // 添加到卡片数组
     cards.value.push(newCard);
-    // 等待 200 毫秒
-    await new Promise(resolve => setTimeout(resolve, 200));
+    console.log(cards.value,'cardcardcard');
   }
 };
 
@@ -1066,7 +1242,7 @@ onUnmounted(() => {// 禁用轮询
   width: 100%;
   min-height: 100vh;
   overflow: hidden;
-  background: #F3F4F6;
+  background: var(--bg-color);
   position: relative;
 }
 
@@ -1077,7 +1253,7 @@ onUnmounted(() => {// 禁用轮询
   left: 0;
   right: 0;
   height: 64px;
-  background: #FFFFFF;
+  background: #ffffff;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -1086,6 +1262,11 @@ onUnmounted(() => {// 禁用轮询
   z-index: 1000;
 }
 
+html.dark .header-nav {
+  background: #1f2937;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
 .header-left {
   display: flex;
   align-items: center;
@@ -1099,10 +1280,10 @@ onUnmounted(() => {// 禁用轮询
   width: 40px;
   height: 40px;
   border: none;
-  background: #F3F4F6;
+  background: var(--bg-color);
   border-radius: 8px;
   cursor: pointer;
-  color: #1F2937;
+  color: var(--text-color);
   transition: all 0.2s ease;
 }
 
@@ -1111,6 +1292,10 @@ onUnmounted(() => {// 禁用轮询
   transform: translateX(-2px);
 }
 
+html.dark .back-button:hover {
+  background: #374151;
+}
+
 .back-button:active {
   transform: translateX(0);
 }
@@ -1118,14 +1303,14 @@ onUnmounted(() => {// 禁用轮询
 .header-title {
   font-size: 18px;
   font-weight: 600;
-  color: #1F2937;
+  color: var(--text-color);
   margin: 0;
 }
 
 .header-right {
   display: flex;
   align-items: center;
-  gap: 16px;
+  gap: 8px;
 }
 
 /* 剩余积分显示样式 */
@@ -1139,23 +1324,28 @@ onUnmounted(() => {// 禁用轮询
   display: flex;
   align-items: center;
   gap: 6px;
-  padding: 8px 12px;
-  background-color: #F3F4F6;
+  padding: 8px 0px;
+  background-color: var(--bg-color);
   border-radius: 8px;
   transition: all 0.3s ease;
   font-size: 12px;
   color: #6B7280;
 }
 
+html.dark .model-count {
+  /* background-color: #374151; */
+  color: #9ca3af;
+}
+
 .count-icon {
-  color: #6B46C1;
+  color: var(--el-color-primary);
   font-size: 16px;
 }
 
 .count-text {
   font-size: 12px;
   font-weight: 500;
-  color: #1F2937;
+  color: var(--text-color);
   white-space: nowrap;
 }
 
@@ -1165,7 +1355,7 @@ onUnmounted(() => {// 禁用轮询
   justify-content: center;
   padding: 4px 10px;
   border: none;
-  background-color: #6B46C1;
+  background: linear-gradient(135deg, #6B46C1, #A78BFA);
   color: white;
   border-radius: 6px;
   cursor: pointer;
@@ -1173,16 +1363,56 @@ onUnmounted(() => {// 禁用轮询
   font-size: 11px;
   font-weight: 500;
   margin-left: 4px;
+  box-shadow: 0 2px 6px rgba(107, 70, 193, 0.25);
 }
 
 .recharge-btn:hover {
-  background-color: #7C3AED;
+  background: linear-gradient(135deg, #5B3C9F, #9775E8);
   transform: translateY(-1px);
-  box-shadow: 0 2px 8px rgba(107, 70, 193, 0.3);
+  box-shadow: 0 4px 12px rgba(107, 70, 193, 0.4);
 }
 
 .recharge-btn:active {
   transform: translateY(0);
+  box-shadow: 0 2px 6px rgba(107, 70, 193, 0.3);
+}
+
+.add-button {
+  position: fixed;
+  right: 24px;
+  bottom:140px !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 56px;
+  height: 56px;
+  border: none;
+  background: linear-gradient(135deg, #6B46C1 0%, #A78BFA 100%);
+  border-radius: 50%;
+  cursor: pointer;
+  color: white;
+  transition: all 0.2s ease;
+  box-shadow: 0 4px 12px rgba(107, 70, 193, 0.4);
+  z-index: 1000;
+}
+
+.add-button:hover {
+  transform: scale(1.1);
+  box-shadow: 0 6px 16px rgba(107, 70, 193, 0.5);
+}
+
+html.dark .add-button {
+  background: linear-gradient(135deg, #8B5CF6 0%, #C4B5FD 100%);
+  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
+}
+
+html.dark .add-button:hover {
+  background: linear-gradient(135deg, #9B6CF6 0%, #D4C5FD 100%);
+  box-shadow: 0 6px 16px rgba(139, 92, 246, 0.5);
+}
+
+.add-button:active {
+  transform: scale(0.95);
 }
 
 .recharge-text {
@@ -1211,17 +1441,6 @@ onUnmounted(() => {// 禁用轮询
   box-sizing: border-box;
 }
 
-/* 卡片样式 */
-.cards-container :deep(.shu-card-container) {
-  width: 100%;
-  min-width: 0;
-  max-width: none;
-  overflow: visible !important;
-  height: auto !important;
-  display: flex !important;
-  flex-direction: column !important;
-  max-height: none !important;
-}
 
 /* 确保图片区域正常显示 */
 .cards-container :deep(.image-wrapper) {
@@ -1247,6 +1466,283 @@ onUnmounted(() => {// 禁用轮询
   .header-title {
     font-size: 16px;
   }
+}
+
+/* 文本输入弹窗样式 */
+.text-input-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(4px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 9999;
+  padding: 20px;
+  animation: fadeIn 0.3s ease;
+}
+
+html.dark .text-input-overlay {
+  background: rgba(0, 0, 0, 0.8);
+}
+
+.text-input-container {
+  width: 100%;
+  max-width: 400px;
+  background: #ffffff;
+  border-radius: 16px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+  overflow: hidden;
+  animation: slideUp 0.3s ease;
+}
+
+html.dark .text-input-container {
+  background: #1f2937;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+}
+
+.text-input-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+html.dark .text-input-header {
+  border-bottom: 1px solid #374151;
+}
+
+.text-input-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #1f2937;
+}
+
+html.dark .text-input-title {
+  color: #f3f4f6;
+}
+
+.text-input-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: none;
+  background: transparent;
+  border-radius: 8px;
+  cursor: pointer;
+  color: #6b7280;
+  transition: all 0.2s ease;
+}
+
+.text-input-close:hover {
+  background: rgba(107, 70, 193, 0.1);
+  color: #6B46C1;
+}
+
+html.dark .text-input-close:hover {
+  background: rgba(139, 92, 246, 0.2);
+  color: #A78BFA;
+}
+
+.close-icon {
+  font-size: 20px;
+}
+
+.text-input-area {
+  width: 100%;
+  padding: 16px 20px;
+  border: none;
+  background: #f9fafb;
+  color: #1f2937;
+  font-size: 14px;
+  line-height: 1.6;
+  resize: none;
+  outline: none;
+  font-family: inherit;
+  min-height: 120px;
+}
+
+html.dark .text-input-area {
+  background: #111827;
+  color: #f3f4f6;
+}
+
+.text-input-area::placeholder {
+  color: #9ca3af;
+}
+
+html.dark .text-input-area::placeholder {
+  color: #6b7280;
+}
+
+.text-input-area:focus {
+  background: #f3f4f6;
+}
+
+html.dark .text-input-area:focus {
+  background: #1f2937;
+}
+
+.text-input-actions {
+  display: flex;
+  gap: 12px;
+  padding: 16px 20px;
+  border-top: 1px solid #e5e7eb;
+}
+
+html.dark .text-input-actions {
+  border-top: 1px solid #374151;
+}
+
+.text-input-btn {
+  flex: 1;
+  padding: 12px 24px;
+  border: none;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  text-align: center;
+}
+
+.cancel-btn {
+  background: #f3f4f6;
+  color: #6b7280;
+}
+
+.cancel-btn:hover {
+  background: #e5e7eb;
+  color: #4b5563;
+}
+
+html.dark .cancel-btn {
+  background: #374151;
+  color: #9ca3af;
+}
+
+html.dark .cancel-btn:hover {
+  background: #4b5563;
+  color: #d1d5db;
+}
+
+.confirm-btn {
+  background: linear-gradient(135deg, #6B46C1 0%, #A78BFA 100%);
+  color: white;
+}
+
+.confirm-btn:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(107, 70, 193, 0.3);
+}
+
+html.dark .confirm-btn {
+  background: linear-gradient(135deg, #8B5CF6 0%, #C4B5FD 100%);
+}
+
+html.dark .confirm-btn:hover {
+  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
+}
+
+.text-input-btn:active {
+  transform: translateY(0);
+}
+
+/* 动画效果 */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* 移动端适配 */
+@media (max-width: 768px) {
+  .text-input-overlay {
+    padding: 16px;
+  }
+
+  .text-input-container {
+    max-width: 100%;
+    border-radius: 12px;
+  }
+
+  .text-input-header {
+    padding: 14px 16px;
+  }
+
+  .text-input-title {
+    font-size: 15px;
+  }
+
+  .text-input-area {
+    padding: 14px 16px;
+    font-size: 14px;
+    min-height: 100px;
+  }
+
+  .text-input-actions {
+    padding: 14px 16px;
+    gap: 10px;
+  }
+
+  .text-input-btn {
+    padding: 10px 20px;
+    font-size: 13px;
+  }
+}
+
+@media (max-width: 480px) {
+  .text-input-overlay {
+    padding: 12px;
+  }
+
+  .text-input-container {
+    border-radius: 10px;
+  }
+
+  .text-input-header {
+    padding: 12px 14px;
+  }
+
+  .text-input-title {
+    font-size: 14px;
+  }
+
+  .text-input-area {
+    padding: 12px 14px;
+    font-size: 13px;
+    min-height: 80px;
+  }
+
+  .text-input-actions {
+    padding: 12px 14px;
+    gap: 8px;
+  }
+
+  .text-input-btn {
+    padding: 10px 16px;
+    font-size: 12px;
+  }
 
   .filter-nav {
     gap: 4px;
@@ -1262,6 +1758,13 @@ onUnmounted(() => {// 禁用轮询
     height: 36px;
   }
 
+  .add-button {
+    width: 48px;
+    height: 48px;
+    right: 16px;
+    bottom: 16px;
+  }
+
   .cards-container {
     top: 56px;
     padding: 12px;
@@ -1280,6 +1783,13 @@ onUnmounted(() => {// 禁用轮询
     font-size: 14px;
   }
 
+  .add-button {
+    width: 52px;
+    height: 52px;
+    right: 20px;
+    bottom: 20px;
+  }
+
   .cards-container {
     top: 60px;
     padding: 16px;
@@ -1294,4 +1804,231 @@ onUnmounted(() => {// 禁用轮询
     gap: 20px;
   }
 }
+
+/* 空状态页面样式 */
+.empty-state {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--bg-color, #F3F4F6);
+}
+
+.empty-state-content {
+  text-align: center;
+  padding: 40px;
+  max-width: 500px;
+  animation: fadeIn 0.5s ease-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.empty-state-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 24px;
+  animation: float 3s ease-in-out infinite;
+}
+
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+}
+
+.empty-state-title {
+  font-size: 24px;
+  font-weight: 600;
+  color: var(--text-color, #1F2937);
+  margin-bottom: 12px;
+}
+
+.empty-state-description {
+  font-size: 16px;
+  color: var(--text-muted, #6B7280);
+  margin-bottom: 32px;
+  line-height: 1.6;
+}
+
+.empty-state-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 14px 28px;
+  background: linear-gradient(135deg, #6B46C1, #A78BFA);
+  color: white;
+  border: none;
+  border-radius: 12px;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 12px rgba(107, 70, 193, 0.3);
+  margin-bottom: 40px;
+}
+
+.empty-state-button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 16px rgba(107, 70, 193, 0.4);
+}
+
+.empty-state-button:active {
+  transform: translateY(0);
+}
+
+.empty-state-tips {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  align-items: center;
+}
+
+.tip-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 20px;
+  background: var(--card-bg, #FFFFFF);
+  border-radius: 8px;
+  border: 1px solid var(--border-color, #E5E7EB);
+  transition: all 0.2s ease;
+  max-width: 300px;
+}
+
+.tip-item:hover {
+  border-color: var(--primary-color, #6B46C1);
+  transform: translateX(4px);
+}
+
+.tip-item svg {
+  color: var(--primary-color, #6B46C1);
+  flex-shrink: 0;
+}
+
+.tip-item span {
+  font-size: 14px;
+  color: var(--text-color, #1F2937);
+  text-align: left;
+}
+
+/* 暗色主题适配 */
+html.dark .empty-state {
+  background: var(--bg-color-dark, #111827);
+}
+
+html.dark .empty-state-title {
+  color: var(--text-color-dark, #F3F4F6);
+}
+
+html.dark .empty-state-description {
+  color: var(--text-muted-dark, #9CA3AF);
+}
+
+html.dark .tip-item {
+  background: var(--card-bg-dark, #1F2937);
+  border-color: var(--border-color-dark, #374151);
+}
+
+html.dark .tip-item span {
+  color: var(--text-color-dark, #F3F4F6);
+}
+
+/* 移动端适配 */
+@media (max-width: 768px) {
+  .empty-state-content {
+    padding: 24px;
+  }
+
+  .empty-state-icon {
+    margin-bottom: 20px;
+  }
+
+  .empty-state-icon svg {
+    width: 100px;
+    height: 100px;
+  }
+
+  .empty-state-title {
+    font-size: 20px;
+  }
+
+  .empty-state-description {
+    font-size: 14px;
+    margin-bottom: 24px;
+  }
+
+  .empty-state-button {
+    padding: 12px 24px;
+    font-size: 14px;
+    margin-bottom: 32px;
+  }
+
+  .tip-item {
+    padding: 10px 16px;
+    max-width: 100%;
+  }
+
+  .tip-item span {
+    font-size: 13px;
+  }
+}
+
+@media (max-width: 480px) {
+  .empty-state-content {
+    padding: 20px;
+  }
+
+  .empty-state-icon svg {
+    width: 80px;
+    height: 80px;
+  }
+
+  .empty-state-title {
+    font-size: 18px;
+  }
+
+  .empty-state-description {
+    font-size: 13px;
+  }
+
+  .empty-state-button {
+    padding: 10px 20px;
+    font-size: 13px;
+  }
+
+  .tip-item {
+    padding: 8px 14px;
+  }
+}
+
+/* 平板端适配 */
+@media (min-width: 768px) and (max-width: 1024px) {
+  .empty-state-tips {
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+
+  .tip-item {
+    max-width: 200px;
+  }
+}
+
 </style>
diff --git a/apps/frontend/src/views/home/index copy 2.vue b/apps/frontend/src/views/home/index copy 2.vue
new file mode 100644
index 0000000..dc2a123
--- /dev/null
+++ b/apps/frontend/src/views/home/index copy 2.vue	
@@ -0,0 +1,820 @@
+<template>
+  <Bg>
+  <!-- <div :style="getResponsiveWidthStyle()">
+    <div style="position: sticky;top: 0;">
+  <spline  :scene="'https://prod.spline.design/kZDDjO5HuC9GJUM2/scene.splinecode'"/>
+    </div>
+  </div> -->
+    <div style="position: relative;pointer-events:none;" class="min-h-screen flex flex-col w-full selection:bg-purple-500 selection:text-white">
+      <!-- Navbar -->
+    <header 
+      :class="[
+        'fixed top-0 left-0 right-0 z-900 transition-all duration-300 pointer-events-auto',
+        isScrolled ? 'bg-black/90 py-4' : 'bg-transparent py-6'
+      ]"
+      :style="{ backdropFilter: isScrolled && supportsBackdropFilter ? 'blur(12px)' : 'none' }"
+    >
+      <div class="container mx-auto px-6 flex items-center justify-between">
+        <!-- Logo -->
+        <a href="#" class="text-2xl font-bold tracking-tighter text-white">
+          Deotaland
+        </a>
+
+        <!-- Desktop Nav -->
+        <nav class="hidden md:flex items-center gap-8">
+          <!-- <a 
+            href="#" 
+            class="text-sm font-medium text-gray-300 hover:text-white transition-colors"
+          >
+            {{ t('nav.creator') }}
+          </a>
+          <a 
+            href="#" 
+            class="text-sm font-medium text-gray-300 hover:text-white transition-colors"
+          >
+            {{ t('nav.land') }}
+          </a> -->
+          
+          <a 
+            href="#" 
+            class="text-sm font-medium text-gray-300 hover:text-white transition-colors"
+          >
+            {{ t('nav.creator') }}
+          </a>
+          <a 
+            href="#" 
+            class="text-sm font-medium text-gray-300 hover:text-white transition-colors"
+          >
+            {{ t('nav.done') }}
+          </a>
+          <a 
+            href="#" 
+            class="text-sm font-medium text-gray-300 hover:text-white transition-colors"
+          >
+            {{ t('nav.about') }}
+          </a>
+          <router-link 
+            to="/points-recharge" 
+            class="text-sm font-medium text-gray-300 hover:text-white transition-colors"
+          >
+            pricing
+          </router-link>
+        </nav>
+
+        <!-- Right Action & Mobile Toggle -->
+        <div class="flex items-center gap-4">
+          <button 
+            @click="$router.push('czhome')"
+            class="hidden md:inline-flex items-center justify-center px-5 py-2 text-sm font-semibold text-black bg-white rounded-full hover:bg-gray-200 transition-colors cursor-pointer"
+          >
+            {{ t('hero.start') }}
+          </button>
+
+          <button 
+            class="md:hidden text-white"
+            @click="isMobileMenuOpen = !isMobileMenuOpen"
+          >
+            <svg v-if="isMobileMenuOpen" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+            <svg v-else xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="18" y2="18"/></svg>
+          </button>
+        </div>
+      </div>
+
+      <!-- Mobile Menu -->
+        <div v-if="isMobileMenuOpen" class="absolute top-full left-0 right-0  border-t border-gray-800 p-6 flex flex-col gap-4 md:hidden">
+          <!-- <a 
+            href="#" 
+            class="text-lg font-medium text-gray-300 hover:text-white"
+          >
+            {{ t('nav.creator') }}
+          </a>
+          <a 
+            href="#" 
+            class="text-lg font-medium text-gray-300 hover:text-white"
+          >
+            {{ t('nav.land') }}
+          </a>
+          <router-link 
+            to="/points-recharge" 
+            class="text-lg font-medium text-gray-300 hover:text-white"
+          >
+            {{ t('nav.pricing') }}
+          </router-link> -->
+          <a 
+            href="#" 
+            class="text-lg font-medium text-gray-300 hover:text-white"
+          >
+            {{ t('nav.creator') }}
+          </a>
+          <a 
+            href="#" 
+            class="text-lg font-medium text-gray-300 hover:text-white"
+          >
+            {{ t('nav.done') }}
+          </a>
+          <a 
+            href="#" 
+            class="text-lg font-medium text-gray-300 hover:text-white"
+          >
+            {{ t('nav.about') }}
+          </a>
+          <button 
+            @click="$router.push('czhome')"
+            class="w-full text-center py-3 text-black bg-white rounded-full font-bold cursor-pointer"
+          >
+            {{ t('hero.start') }}
+          </button>
+        </div>
+    </header>
+
+    <!-- Main Content -->
+    <main>
+      <!-- Hero Section -->
+      <div ref="containerRef" class="relative h-[300vh] w-full ">
+        <!-- Sticky Container -->
+        <div class="sticky top-0 h-[100vh] w-full overflow-hidden" :style="{ height: viewportHeight + 'px', position: supportsSticky ? 'sticky' : 'relative' }">
+          
+          <!-- Layer 1: Background Animation (Grid) -->
+          <div class="absolute inset-0 flex items-center justify-center overflow-hidden">
+              
+              <div 
+                  
+                  class="origin-center flex items-center justify-center"
+              >
+                  <!-- Grid Layout -->
+                  <div v-if="!isMobile" class="grid grid-cols-3 md:grid-cols-5 gap-2 md:gap-3 w-full h-auto p-4" >
+                      <!-- --- ROW 1 --- -->
+                      <div class="aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50"><img :src="center1" class="w-full h-full object-cover" alt="Robot Companion" /></div>
+                      <div class="aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50"><img :src="center3" class="w-full h-full object-cover" alt="Electronics" /></div>
+                      <div  :style="{ scale: scale*1.5<=1?1:scale*1.5, zIndex:20 }" class="aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50">
+                           <img :src="center" class="w-full h-full object-cover" alt="Main Hero Robot" />
+                        <!-- <div style="position: absolute;bottom: 0%;width: 100vw;left: 50%;transform: translateX(-50%);">
+                        </div> -->
+                      </div>
+                      <div class="aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50"><img :src="center4" class="w-full h-full object-cover" alt="Retro Bot" /></div>
+                      <div class=" md:block aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50"><img :src="center2" class="w-full h-full object-cover" alt="Toy Bot" /></div>
+                      <div class=" md:block aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50"><img :src="center7" class="w-full h-full object-cover" alt="Cyberpunk" /></div>
+
+                      <!-- --- ROW 2 (Middle) --- -->
+                      <div class="aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50"><img :src="center5" class="w-full h-full object-cover" alt="Interactive" /></div>
+                      <div class=" md:block aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50"><img :src="center6" class="w-full h-full object-cover" alt="Small Bot" /></div>
+                      
+                      <!-- --- CENTER HERO IMAGE (Always Visible) --- -->
+                       <!-- :style="{ scale: scale*1.2 }" -->
+                      <div class="aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50"><img :src="center9" class="w-full h-full object-cover" alt="Glowing Eye" /></div>
+                      <div class="hidden md:block aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50"><img :src="center8" class="w-full h-full object-cover" alt="3D Print" /></div>
+                      <!-- --- ROW 3 --- -->
+                      <!-- <div class="hidden md:block aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50"><img :src="center1" class="w-full h-full object-cover" alt="Tech Texture" /></div>
+                      <div class="aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50"><img :src="center2" class="w-full h-full object-cover" alt="Robot Hand" /></div>
+                      <div class="aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50"><img :src="center6" class="w-full h-full object-cover" alt="Circuit" /></div>
+                      <div class="hidden md:block aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50"><img :src="center4" class="w-full h-full object-cover" alt="Display" /></div>
+                      <div class=" aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50"><img :src="center5" class="w-full h-full object-cover" alt="Robotics" /></div> -->
+                  </div>
+                   <div v-else class="grid grid-cols-3 md:grid-cols-5 gap-2 md:gap-3 w-full h-auto p-4" >
+                      <!-- --- ROW 1 --- -->
+                      <div class="aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50"><img :src="center1" class="w-full h-full object-cover" alt="Robot Companion" /></div>
+                      <div class="aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50"><img :src="center3" class="w-full h-full object-cover" alt="Electronics" /></div>
+                      
+                      <div class="aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50"><img :src="center2" class="w-full h-full object-cover" alt="Retro Bot" /></div>
+                      <div class=" md:block aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50"><img :src="center4" class="w-full h-full object-cover" alt="Toy Bot" /></div>
+                      <div  :style="{ scale: scale*1.5<=1?1:scale*1.5, zIndex:20 }" class="aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50">
+                           <img :src="center" class="w-full h-full object-cover" alt="Main Hero Robot" />
+                        <!-- <div style="position: absolute;bottom: 0%;width: 100vw;left: 50%;transform: translateX(-50%);">
+                        </div> -->
+                      </div>
+                      <div class=" md:block aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50"><img :src="center5" class="w-full h-full object-cover" alt="Cyberpunk" /></div>
+                      <!-- --- ROW 2 (Middle) --- -->
+                      <div class="aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50"><img :src="center7" class="w-full h-full object-cover" alt="Interactive" /></div>
+                      <div class=" md:block aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50"><img :src="center9" class="w-full h-full object-cover" alt="Small Bot" /></div>
+                      
+                      <!-- --- CENTER HERO IMAGE (Always Visible) --- -->
+                       <!-- :style="{ scale: scale*1.2 }" -->
+                      <div class="aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50"><img :src="center8" class="w-full h-full object-cover" alt="Glowing Eye" /></div>
+                      <!-- --- ROW 3 --- -->
+                      <!-- <div class="hidden md:block aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50"><img :src="center1" class="w-full h-full object-cover" alt="Tech Texture" /></div>
+                      <div class="aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50"><img :src="center2" class="w-full h-full object-cover" alt="Robot Hand" /></div>
+                      <div class="aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50"><img :src="center6" class="w-full h-full object-cover" alt="Circuit" /></div>
+                      <div class="hidden md:block aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50"><img :src="center4" class="w-full h-full object-cover" alt="Display" /></div>
+                      <div class=" aspect-[9/16] md:aspect-[1/1] rounded-xl overflow-hidden bg-gray-900/50"><img :src="center5" class="w-full h-full object-cover" alt="Robotics" /></div> -->
+                  </div>
+              </div>
+          </div>
+         
+
+          <!-- Layer 2: Static Dark Overlay -->
+      
+          <div class="absolute inset-0  z-10 pointer-events-none" />
+
+          <!-- Layer 3: Static Content Layer -->
+          <div class="absolute inset-0 z-20 flex flex-col items-center justify-center pointer-events-none">
+        
+             <MotionCom>
+            <div class="pointer-events-auto flex flex-col items-center justify-center text-center px-4 w-full max-w-5xl mx-auto">
+                <h1 class="text-5xl md:text-7xl lg:text-8xl font-bold text-white mb-6 tracking-tighter drop-shadow-2xl">
+                  {{ t('hero.title') }}
+                </h1>
+                <p class="text-xl md:text-2xl text-gray-200 mb-10 drop-shadow-lg max-w-2xl font-light">
+                  {{ t('hero.subtitle') }}
+                </p>
+                <div class="flex flex-col sm:flex-row gap-5">
+                  <a 
+                    href="https://deotaland.com" 
+                    class="px-9 py-4 rounded-full border border-white/50 bg-black/20 text-white font-semibold hover:bg-white hover:text-black transition-all text-lg"
+                    :style="{ backdropFilter: supportsBackdropFilter ? 'blur(4px)' : 'none' }"
+                  >
+                    {{ t('hero.explore') }}
+                  </a>
+                  <button 
+                    @click="$router.push('czhome')"
+                    class="px-9 py-4 rounded-full bg-white text-black font-semibold hover:bg-gray-200 transition-all text-lg shadow-[0_0_20px_rgba(255,255,255,0.3)] cursor-pointer"
+                  >
+                    {{ t('hero.start') }}
+                  </button>
+                </div>
+            </div>
+        </MotionCom>
+
+          </div>
+
+        </div>
+      </div>
+
+      <!-- Creation Canvas Section -->
+      <section class="py-0 md:py-24 relative overflow-hidden">
+        <!-- Background gradient hint -->
+        <div class="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[500px] bg-gray-900/50 blur-[120px] rounded-full pointer-events-none" />
+
+        <div class="container mx-auto px-6 relative z-10">
+          <MotionCom>
+          <div class="text-center mb-16">
+            <h2 class="text-4xl md:text-5xl font-bold mb-4 text-white">
+              {{ t('canvas.title') }}
+            </h2>
+            <p class="text-gray-400 text-lg md:text-xl">
+              {{ t('canvas.subtitle') }}
+            </p>
+          </div>
+</MotionCom>
+<MotionCom>
+          <!-- Workflow Visualization Container -->
+          <div class="relative w-full max-w-6xl mx-auto bg-gray-900/40 border border-gray-800 rounded-3xl p-8 md:p-12"
+              :style="{ backdropFilter: supportsBackdropFilter ? 'blur(4px)' : 'none' }"
+          >
+              
+              <!-- Responsive Flex Layout: Stack on mobile, Row on desktop -->
+              <div class="flex flex-col md:flex-row items-center justify-between gap-8 md:gap-4">
+                  
+                  <!-- LEVEL 1: INPUTS (Stacked Vertically) -->
+                  <div class="flex flex-col gap-6 w-full md:w-auto">
+                      <!-- Input A: Prompt -->
+                      <div class="flex items-center gap-4 bg-black/80 p-4 rounded-xl border border-gray-800 hover:border-gray-600 transition-colors w-full md:w-64 shadow-lg">
+                          <div class="w-12 h-12 rounded-full bg-gray-800 flex items-center justify-center text-purple-400 shrink-0">
+                              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 7 4 4 20 4 20 7"></polyline><line x1="9" y1="20" x2="15" y2="20"></line><line x1="12" y1="4" x2="12" y2="20"></line></svg>
+                          </div>
+                          <div>
+                              <span class="block text-sm font-bold text-gray-200">{{ t('canvas.prompt') }}</span>
+                              <span class="text-xs text-gray-500">"A youthful and lovely girl"</span>
+                          </div>
+                      </div>
+
+                      <!-- Input B: Reference -->
+                      <div class="flex items-center gap-4 bg-black/80 p-4 rounded-xl border border-gray-800 hover:border-gray-600 transition-colors w-full md:w-64 shadow-lg">
+                          <div class="w-12 h-12 rounded-full bg-gray-800 flex items-center justify-center text-blue-400 shrink-0">
+                              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
+                          </div>
+                          <div class="flex-1">
+                              <span class="block text-sm font-bold text-gray-200 mb-1">{{ t('canvas.reference') }}</span>
+                              <div class="w-full h-34 rounded-lg overflow-hidden border border-gray-700 relative group">
+                                  <img :src="refImage" alt="Dog Reference" class="w-full h-full object-cover opacity-80 group-hover:scale-110 transition-transform duration-500" />
+                                  <div class="absolute bottom-1 right-1 bg-black/60 px-1 rounded text-[10px] text-white">{{ t('canvas.referenceText') }}</div>
+                              </div>
+                          </div>
+                      </div>
+                  </div>
+
+                  <!-- Connector Arrow 1 -->
+                  <div class="flex flex-col items-center justify-center text-gray-600">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="rotate-90 md:rotate-0"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
+                  </div>
+
+                  <!-- LEVEL 2: 3D MODEL -->
+                  <div class="flex flex-col gap-4 bg-black/80 p-5 rounded-2xl border border-gray-800 w-full md:w-64 shadow-lg hover:border-gray-600 transition-colors">
+                      <div class="flex items-center gap-3 mb-2">
+                          <div class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-green-400">
+                              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
+                          </div>
+                          <span class="text-sm font-bold text-gray-200">{{ t('canvas.model3d') }}</span>
+                      </div>
+                      <div class="w-full aspect-square rounded-xl overflow-hidden border border-gray-700 relative bg-gray-900 group">
+                          <img :src="model3dImage" alt="3D Pumpkin Dog" class="w-full h-full object-cover opacity-90 group-hover:scale-110 transition-transform duration-500" />
+                          <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/grid-me.png')] opacity-30 pointer-events-none"></div>
+                          <div class="absolute bottom-2 left-2 bg-green-900/80 px-2 py-0.5 rounded text-[10px] text-green-100 font-mono">.OBJ Generated</div>
+                      </div>
+                      <p class="text-xs text-gray-500 text-center">{{ t('canvas.autoRigged') }}</p>
+                  </div>
+
+                  <!-- Connector Arrow 2 -->
+                  <div class="flex flex-col items-center justify-center text-gray-600">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="rotate-90 md:rotate-0"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
+                  </div>
+
+                  <!-- LEVEL 3: REAL ROBOT -->
+                  <div class="flex flex-col gap-4 bg-gradient-to-b from-purple-900/20 to-blue-900/20 p-5 rounded-2xl border border-purple-500/40 w-full md:w-72 shadow-[0_0_30px_rgba(147,51,234,0.1)]">
+                      <div class="flex items-center gap-3 mb-2">
+                          <div class="w-10 h-10 rounded-full bg-purple-600 flex items-center justify-center text-white shadow-lg shadow-purple-600/50">
+                              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"></rect><circle cx="12" cy="12" r="2"></circle><path d="M7 7h10v10"></path></svg>
+                          </div>
+                          <span class="text-sm font-bold text-white">{{ t('canvas.realRobot') }}</span>
+                          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-yellow-400 fill-yellow-400 ml-auto animate-pulse"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg>
+                      </div>
+                      <div class="w-full aspect-square rounded-xl overflow-hidden border border-purple-500/30 relative group bg-gray-900">
+                          <img :src="realRobotImage" alt="Real Robot Toy" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" />
+                          <div class="absolute inset-0 bg-gradient-to-t from-purple-900/40 to-transparent"></div>
+                      </div>
+                      <p class="text-xs text-purple-200 text-center font-medium">{{ t('canvas.alive') }}</p>
+                  </div>
+
+              </div>
+          </div>
+          </MotionCom>
+        </div>
+      </section>
+<MotionCom>
+      <!-- Companionship Section -->
+      <section class="py-24 border-t border-gray-900 ">
+        <div class="container mx-auto px-6 flex flex-col items-center text-center">
+          
+          <h2 class="text-4xl md:text-6xl font-bold mb-6 tracking-tight">
+            {{ t('companionship.title') }}
+          </h2>
+          
+          <h3 class="text-2xl md:text-3xl text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-400 font-semibold mb-8">
+            {{ t('companionship.powered') }}
+          </h3>
+          
+          <p class="text-xl text-gray-400 max-w-2xl mb-12 leading-relaxed">
+            {{ t('companionship.subtitle') }}
+          </p>
+
+          <a 
+            href="https://deotaland.com" 
+            class="pointer-events-auto inline-flex items-center justify-center px-8 py-4 text-base font-bold text-white bg-purple-600 rounded-full hover:scale-105 transition-transform duration-200"
+          >
+            {{ t('companionship.examples') }}
+          </a>
+
+          <!-- Optional Visual Element below -->
+          <div class="mt-16 w-full max-w-4xl h-64 md:h-96 rounded-3xl overflow-hidden relative">
+              <img 
+                  src="https://draft-user.s3.us-east-2.amazonaws.com/images/41d42aa6-9ada-49b8-8a54-0d2595c0816a.webp" 
+                  alt="Robot Companion Context" 
+                  class="w-full h-full object-cover opacity-90 hover:opacity-100 transition-opacity duration-500"
+              />
+              <div class="absolute inset-0 bg-gradient-to-t from-black/10 via-transparent to-transparent"></div>
+          </div>
+        </div>
+      </section>
+</MotionCom>
+<MotionCom>
+      <!-- Middle Text Section -->
+      <section class="py-12  text-center">
+        <div class="container mx-auto px-6 max-w-3xl">
+          <p class="text-lg md:text-xl text-gray-400 leading-relaxed">
+            Explore our community creations and get inspired to build your own unique AI robot companion. 
+            Each robot has its own personality and story, waiting to be discovered and loved.
+          </p>
+        </div>
+      </section>
+</MotionCom>
+<MotionCom>
+      <!-- Robot Cards Section -->
+      <section class="py-20  overflow-hidden">
+        <div class="container mx-auto px-6">
+          <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto">
+            <div 
+              v-for="card in cards" 
+              :key="card.id" 
+              class="group relative rounded-3xl overflow-hidden aspect-[3/4] cursor-pointer"
+            >
+              <img 
+                :src="card.img" 
+                :alt="card.title" 
+                class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
+              />
+              <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-90" />
+              <div class="absolute bottom-0 left-0 p-6">
+                <h3 class="text-xl font-bold text-white mb-1">{{ card.title }}</h3>
+                <p class="text-sm font-medium text-gray-300">{{ card.user }}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+ </MotionCom>
+      <!-- Features Section -->
+      <section class="py-24 bg-gray-900/30">
+        <div class="container mx-auto px-6">
+          
+          <div class="mb-16 text-center md:text-left">
+            <h2 class="text-4xl md:text-5xl font-bold text-white mb-4">
+              {{ t('features.title') }}
+            </h2>
+            <p class="text-xl text-gray-400">
+              {{ t('features.subtitle') }}
+            </p>
+          </div>
+
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-16">
+            <div 
+              v-for="(item, idx) in t('features.list')" 
+              :key="idx" 
+              class="flex flex-col items-start gap-4"
+            >
+              <div class="p-3 bg-gray-800 rounded-xl mb-2">
+                <svg v-if="idx === 0" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-purple-400"><circle cx="12" cy="12" r="10"></circle><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path><path d="M2 12h20"></path></svg>
+                <svg v-else-if="idx === 1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-blue-400"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
+                <svg v-else-if="idx === 2" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-yellow-400"><circle cx="12" cy="12" r="10"></circle><path d="M8 14s1.5 2 4 2 4-2 4-2"></path><line x1="9" y1="9" x2="9.01" y2="9"></line><line x1="15" y1="9" x2="15.01" y2="9"></line></svg>
+                <svg v-else xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-red-400"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
+              </div>
+              <h3 class="text-2xl font-bold text-white">{{ item.title }}</h3>
+              <p class="text-gray-400 leading-relaxed text-lg">
+                {{ item.desc }}
+              </p>
+            </div>
+          </div>
+
+        </div>
+      </section>
+
+      <!-- Strong Engine Section -->
+      <section class="py-24 ">
+        <div class="container mx-auto px-6 text-center">
+          <h2 class="text-3xl md:text-4xl font-bold text-white mb-4">
+            {{ t('engine.title') }}
+          </h2>
+          <p class="text-lg text-gray-500 mb-16 max-w-2xl mx-auto">
+            {{ t('engine.subtitle') }}
+          </p>
+
+          <div class="grid grid-cols-2 md:grid-cols-4 gap-4 max-w-4xl mx-auto">
+            <div 
+              v-for="(name, i) in logos" 
+              :key="i" 
+              class="h-24 bg-gray-900 rounded-lg flex items-center justify-center border border-gray-800 hover:border-gray-600 transition-colors"
+            >
+              <span class="text-gray-500 font-semibold text-sm">{{ name }}</span>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- Community Call Section -->
+      <section class="py-32 bg-gradient-to-b from-black to-gray-900 border-b border-gray-800">
+        <div class="container mx-auto px-6 text-center">
+          <h2 class="text-5xl md:text-7xl font-bold text-white mb-12 tracking-tighter">
+            {{ t('community.title') }}
+          </h2>
+          
+          <a 
+            href="#" 
+            class="inline-block px-10 py-4 text-lg font-bold text-black bg-white rounded-full hover:bg-gray-200 transition-colors"
+          >
+            {{ t('community.join') }}
+          </a>
+        </div>
+      </section>
+    </main>
+    <!-- Footer -->
+    <footer class="pointer-events-auto text-white py-16 border-t border-gray-900">
+      <div class="container mx-auto px-6">
+        <div class="flex flex-col md:flex-row justify-between items-start gap-12">
+          
+          <!-- Logo -->
+          <div class="mb-4 md:mb-0">
+            <span class="text-2xl font-bold tracking-tighter">Deotaland</span>
+          </div>
+
+          <!-- Links Columns -->
+          <div class="flex flex-wrap gap-12 md:gap-24">
+            
+            <!-- Socials -->
+            <div class="flex flex-col gap-4">
+              <h4 class="font-semibold text-gray-500 text-sm uppercase tracking-wider">{{ t('footer.socials') }}</h4>
+              <div class="flex gap-4">
+                <a href="https://x.com/deotaland" class="text-gray-400 hover:text-white"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"></path></svg></a>
+                <a href="https://www.youtube.com/@Deotaland" class="text-gray-400 hover:text-white"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17"></path><path d="M9.75 15.02v-4.04l5.5 2.02-5.5 2.02Z"></path></svg></a>
+                <a href="https://www.instagram.com/deotaland/" class="text-gray-400 hover:text-white"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" x2="17.51" y1="6.5" y2="6.5"></line></svg></a>
+                <a href="https://www.tiktok.com/@deotalandofficial" class="text-gray-400 hover:text-white font-bold text-sm flex items-center h-[20px]">TikTok</a>
+                <a href="https://discord.gg/feuFGPpY" class="text-gray-400 hover:text-white font-bold text-sm flex items-center h-[20px]">Discord</a>
+              </div>
+            </div>
+
+            <!-- Language -->
+            <div class="flex flex-col gap-4">
+              <h4 class="font-semibold text-gray-500 text-sm uppercase tracking-wider">{{ t('footer.language') }}</h4>
+              <div class="flex flex-col gap-2">
+                 <a href="#" @click.prevent="switchLanguage('en')" class="text-gray-300 hover:text-white text-sm">English</a>
+                 <a href="#" @click.prevent="switchLanguage('zh')" class="text-gray-300 hover:text-white text-sm">中文</a>
+              </div>
+            </div>
+
+            <!-- Company -->
+             <div class="flex flex-col gap-4">
+              <h4 class="font-semibold text-gray-500 text-sm uppercase tracking-wider">{{ t('footer.company') }}</h4>
+              <div class="flex flex-col gap-2">
+                 <a href="#" class="text-gray-300 hover:text-white text-sm">{{ t('footer.about') }}</a>
+              </div>
+            </div>
+
+             <!-- Action -->
+             <div class="flex flex-col gap-4">
+                 <button 
+                    @click="scrollToTop"
+                    class="text-gray-300 hover:text-white text-sm text-left"
+                 >
+                    {{ t('footer.backTop') }}
+                 </button>
+            </div>
+
+          </div>
+        </div>
+<div >
+      
+          </div>
+        <div class="mt-16 pt-8 border-t border-gray-900 text-center md:text-left text-sm text-gray-600">
+          {{ t('footer.copyright') }}
+        </div>
+      </div>
+    </footer>
+  </div>
+  </Bg>
+</template>
+
+<script setup>
+import MotionCom from './motion.vue'
+import spline from './spline.vue';
+import { ref, onMounted, onUnmounted, computed } from 'vue';
+import Bg from './bg.vue'
+
+const center = 'https://draft-user.s3.us-east-2.amazonaws.com/images/c175585a-20c2-48b3-8939-32bbdb25814b.webp'
+const center1 = 'https://draft-user.s3.us-east-2.amazonaws.com/images/ecf39871-52c5-45ad-9f9e-6eafd838ce54.webp'
+const center2 = 'https://draft-user.s3.us-east-2.amazonaws.com/images/f7c4454e-1781-448e-9c70-b087b64f380e.webp'
+const center3 = 'https://draft-user.s3.us-east-2.amazonaws.com/images/1e74bf93-6be3-46ae-a6d5-5ad02d0b7712.webp'
+const center4 = 'https://draft-user.s3.us-east-2.amazonaws.com/images/64672da8-a034-4168-b9e7-cda985558f7e.webp'
+const center5 = 'https://draft-user.s3.us-east-2.amazonaws.com/images/a77f66c4-e7c0-43a6-8e75-0eac49402c06.webp'
+const center6 = 'https://draft-user.s3.us-east-2.amazonaws.com/images/de3cc66c-909b-4b03-9e73-5180df2bc374.webp'
+const center7 = 'https://draft-user.s3.us-east-2.amazonaws.com/images/bc62a209-9a54-4d1e-926a-b3ef66fdbd29.webp'
+const center8 = 'https://draft-user.s3.us-east-2.amazonaws.com/images/9e012193-5576-4a9e-9f38-eecb8705d8a4.webp'
+const center9 = 'https://draft-user.s3.us-east-2.amazonaws.com/images/65bb1613-0ff9-43c4-a5b9-978c2507ca91.webp'
+
+const viewportHeight = ref(window.innerHeight);
+const isMobile = ref(window.innerWidth < 768);
+
+const supportsSticky = ref(true);
+const supportsBackdropFilter = ref(true);
+
+const checkStickySupport = () => {
+  const testEl = document.createElement('div');
+  testEl.style.position = 'sticky';
+  testEl.style.top = '0';
+  supportsSticky.value = testEl.style.position === 'sticky';
+};
+
+const checkBackdropFilterSupport = () => {
+  const testEl = document.createElement('div');
+  testEl.style.backdropFilter = 'blur(10px)';
+  supportsBackdropFilter.value = testEl.style.backdropFilter !== '';
+};
+// 中英文库
+const i18n = {
+  en: {
+    nav: {
+      // creator: 'Creator',
+      // land: 'Land',
+      // pricing: 'Pricing',
+      creator: 'Creator',
+      done: 'D one',
+      about: 'About us'
+    },
+    hero: {
+      title: 'Create with Deotaland',
+      subtitle: 'Bring your own AI robot companion to life',
+      explore: 'Explore More',
+      start: 'Start Now'
+    },
+    canvas: {
+      title: 'Your Creation canvas – DeotaBoard',
+      subtitle: 'Build your robot in an infinite canvas, together with AI.',
+      prompt: 'Prompt / Idea',
+      reference: 'Reference',
+      model3d: '3D Model',
+      realRobot: 'Real Robot',
+      autoRigged: 'Auto-rigged mesh ready for core',
+      alive: 'Alive on your desktop',
+      referenceText: 'Reference'
+    },
+    companionship: {
+      title: 'Born for Personal Companionship',
+      powered: 'Powered by AI',
+      subtitle: 'Cute companions, emotional partners, desktop friends... All in one Deotaland DIY robot.',
+      examples: 'See Robot Examples'
+    },
+    features: {
+      title: 'From Zero to Your Own Robot Friend',
+      subtitle: 'Simple enough for beginners, powerful enough for makers.',
+      list: [
+        { title: 'Stunning Custom Looks', desc: 'Generate unique robot designs from your ideas or images.' },
+        { title: 'From Idea to 3D Model', desc: 'Turn concepts into printable 3D shells ready for your robot core.' },
+        { title: 'One-Click Expression Packs', desc: 'Create and apply DIY eye styles and animated expressions.' },
+        { title: 'Always-On AI Companion', desc: 'Long-term memory, emotional responses, and daily interactions.' }
+      ]
+    },
+    engine: {
+      title: 'Strong Engine Behind',
+      subtitle: 'We combine leading AI and 3D technologies to power your DIY robots.'
+    },
+    community: {
+      title: 'Deotaland is for All Creators',
+      join: 'Join the Creator Community'
+    },
+    footer: {
+      socials: 'Socials',
+      language: 'Language',
+      company: 'Company',
+      about: 'About Us',
+      backTop: 'Back to top',
+      copyright: '©2025 Deotaland limited. All rights reserved.'
+    }
+  },
+  zh: {
+    nav: {
+      // creator: '创作者',
+      // land: '社区',
+      // pricing: '价格',
+      creator: 'Creator',
+      done: 'D1',
+      about: 'About'
+    },
+    hero: {
+      title: '使用 Deotaland 创作',
+      subtitle: '让你的 AI 机器人伴侣成为现实',
+      explore: '探索更多',
+      start: '立即开始'
+    },
+    canvas: {
+      title: '你的创作画布 – DeotaBoard',
+      subtitle: '在无限画布中，与 AI 一起打造你的机器人。',
+      prompt: '提示 / 创意',
+      reference: '参考',
+      model3d: '3D 模型',
+      realRobot: '真实机器人',
+      autoRigged: '自动绑定网格，随时准备安装核心',
+      alive: '活跃在你的桌面上',
+      referenceText: '参考'
+    },
+    companionship: {
+      title: '为个人陪伴而生',
+      powered: '由 AI 驱动',
+      subtitle: '可爱的伴侣、情感伙伴、桌面朋友... 尽在 Deotaland DIY 机器人中。',
+      examples: '查看机器人示例'
+    },
+    features: {
+      title: '从零到属于你的机器人朋友',
+      subtitle: '对初学者足够简单，对创客足够强大。',
+      list: [
+        { title: '惊艳的自定义外观', desc: '从你的想法或图像生成独特的机器人设计。' },
+        { title: '从想法到 3D 模型', desc: '将概念转化为可打印的 3D 外壳，随时准备安装你的机器人核心。' },
+        { title: '一键表情包', desc: '创建并应用 DIY 眼睛样式和动画表情。' },
+        { title: '全天候 AI 伴侣', desc: '长期记忆、情感反应和日常互动。' }
+      ]
+    },
+    engine: {
+      title: '强大的引擎支持',
+      subtitle: '我们结合领先的 AI 和 3D 技术，为你的 DIY 机器人提供动力。'
+    },
+    community: {
+      title: 'Deotaland 面向所有创作者',
+      join: '加入创作者社区'
+    },
+    footer: {
+      socials: '社交',
+      language: '语言',
+      company: '公司',
+      about: '关于我们',
+      backTop: '返回顶部',
+      copyright: '©2025 Deotaland 有限公司。保留所有权利。'
+    }
+  }
+};
+// Navbar state
+const isScrolled = ref(false);
+const isMobileMenuOpen = ref(false);
+
+// 语言切换逻辑
+const currentLang = ref(localStorage.getItem('lang') || 'en');
+
+// 切换语言
+const switchLanguage = (lang) => {
+  currentLang.value = lang;
+  localStorage.setItem('lang', lang);
+};
+
+// 获取当前语言的文本
+const t = (key) => {
+  const keys = key.split('.');
+  let result = i18n[currentLang.value];
+  for (const k of keys) {
+    if (result && result[k] !== undefined) {
+      result = result[k];
+    } else {
+      return key; // 如果找不到对应的键，返回原始键
+    }
+  }
+  return result;
+};
+
+// Hero section state
+const containerRef = ref(null);
+const scrollYProgress = ref(0);
+
+// Scroll event handler
+const handleScroll = () => {
+  isScrolled.value = window.scrollY > 50;
+  
+  if (containerRef.value) {
+    const viewportHeight = window.innerHeight;
+    const scrollPosition = window.scrollY;
+    const containerTop = containerRef.value.offsetTop;
+    const containerHeight = containerRef.value.offsetHeight;
+    
+    const progress = Math.max(0, Math.min(1, 
+      (scrollPosition - containerTop + viewportHeight) / 
+      (containerHeight + viewportHeight)
+    ));
+    
+    scrollYProgress.value = progress;
+  }
+};
+
+// Handle window resize
+const handleResize = () => {
+  viewportHeight.value = window.innerHeight;
+  isMobile.value = window.innerWidth < 768;
+};
+
+// Scroll to top function
+const scrollToTop = () => {
+  window.scrollTo({ top: 0, behavior: 'smooth' });
+};
+
+// Scale transformation based on scroll progress
+const scale = computed(() => {
+  // Zoom out more aggressively to ensure all 15 images are visible
+  // Final scale is 0.2 for mobile and 0.3 for desktop
+  const mappedProgress = Math.min(scrollYProgress.value / 0.8, 1);
+  let initNum = window.innerWidth < 768 ? 3.5 : 5.5;
+  let outNum = window.innerWidth < 768 ? 3.2 : 5.0;
+  return initNum - (mappedProgress * outNum);
+});
+
+// Nav links
+const navLinks = [
+  { name: 'Creator', href: '#' },
+  { name: 'Land', href: '#' },
+  { name: 'Pricing', href: '#' },
+];
+// Creation Canvas Images
+const refImage = 'https://draft-user.s3.us-east-2.amazonaws.com/images/0185a1f7-563a-4af9-9569-65d81f710c52.webp';
+const model3dImage = 'https://draft-user.s3.us-east-2.amazonaws.com/images/e5a1408b-b695-431f-b03e-0b9b06f1b82f.webp'; 
+const realRobotImage = 'https://draft-user.s3.us-east-2.amazonaws.com/images/ce2f6979-4b3c-499f-b179-80abbf4d7431.webp';
+
+// Robot Cards
+const cards = [
+  { id: 1, title: 'Custom Robot', user: '@Wownny wolf', img:'https://draft-user.s3.us-east-2.amazonaws.com/images/8301d540-a4b2-4346-ac3d-1f9ad8b34bad.webp' },
+  { id: 2, title: 'Custom Robot', user: '@Lil Moods', img: 'https://draft-user.s3.us-east-2.amazonaws.com/images/c6253d79-47dd-4ced-8806-ded34b7ee184.webp' },
+  { id: 3, title: 'Custom Robot', user: '@Deo Monkey', img:'https://draft-user.s3.us-east-2.amazonaws.com/images/eb61f9e9-94dd-4920-813d-aa635eb73e24.webp' },
+];
+// Strong Engine Logos
+const logos = [
+  "AI Engine 1", "3D Engine 2", "Voice Engine 3", "Memory Engine 4",
+  "Physics Core", "Render Tech", "Motion API", "Vision OS"
+];
+
+// Mount and unmount scroll event
+onMounted(() => {
+  checkStickySupport();
+  checkBackdropFilterSupport();
+  window.addEventListener('scroll', handleScroll);
+  window.addEventListener('resize', handleResize);
+  handleScroll();
+});
+
+onUnmounted(() => {
+  window.removeEventListener('scroll', handleScroll);
+  window.removeEventListener('resize', handleResize);
+});
+</script>
+
+<style scoped>
+/* Additional custom styles can be added here */
+</style>
diff --git a/apps/frontend/src/views/home/index copy.vue b/apps/frontend/src/views/home/index copy.vue
index 959c646..4842d09 100644
--- a/apps/frontend/src/views/home/index copy.vue	
+++ b/apps/frontend/src/views/home/index copy.vue	
@@ -1,41 +1,63 @@
 <template>
-  <div class="bg-black min-h-screen flex flex-col w-full selection:bg-purple-500 selection:text-white">
-    <!-- Navbar -->
+  <Bg>
+  <!-- <div :style="getResponsiveWidthStyle()">
+    <div style="position: sticky;top: 0;">
+  <spline  :scene="'https://prod.spline.design/kZDDjO5HuC9GJUM2/scene.splinecode'"/>
+    </div>
+  </div> -->
+    <div class="home-container">
+      <!-- Navbar -->
     <header 
       :class="[
-        'fixed top-0 left-0 right-0 z-50 transition-all duration-300',
-        isScrolled ? 'bg-black/90 backdrop-blur-md py-4' : 'bg-transparent py-6'
+        'navbar',
+        isScrolled ? 'scrolled' : 'transparent'
       ]"
     >
-      <div class="container mx-auto px-6 flex items-center justify-between">
+      <div class="navbar-content">
         <!-- Logo -->
-        <a href="#" class="text-2xl font-bold tracking-tighter text-white">
+        <a href="#" class="logo">
           Deotaland
         </a>
 
         <!-- Desktop Nav -->
-        <nav class="hidden md:flex items-center gap-8">
+        <nav class="desktop-nav">
           <a 
-            v-for="link in navLinks" 
-            :key="link.name" 
-            :href="link.href" 
-            class="text-sm font-medium text-gray-300 hover:text-white transition-colors"
+            href="#" 
+            class="nav-link"
           >
-            {{ link.name }}
+            {{ t('nav.creator') }}
           </a>
+          <a 
+            href="#" 
+            class="nav-link"
+          >
+            {{ t('nav.done') }}
+          </a>
+          <a 
+            href="#" 
+            class="nav-link"
+          >
+            {{ t('nav.about') }}
+          </a>
+          <router-link 
+            to="/points-recharge" 
+            class="nav-link"
+          >
+            pricing
+          </router-link>
         </nav>
 
         <!-- Right Action & Mobile Toggle -->
-        <div class="flex items-center gap-4">
+        <div class="nav-actions">
           <button 
-            @click="$router.push('/czhome')"
-            class="hidden md:inline-flex items-center justify-center px-5 py-2 text-sm font-semibold text-black bg-white rounded-full hover:bg-gray-200 transition-colors cursor-pointer"
+            @click="$router.push('czhome')"
+            class="start-button"
           >
-            Start Now
+            {{ t('hero.start') }}
           </button>
 
           <button 
-            class="md:hidden text-white"
+            class="mobile-menu-toggle"
             @click="isMobileMenuOpen = !isMobileMenuOpen"
           >
             <svg v-if="isMobileMenuOpen" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
@@ -45,292 +67,329 @@
       </div>
 
       <!-- Mobile Menu -->
-      <div v-if="isMobileMenuOpen" class="absolute top-full left-0 right-0 bg-black border-t border-gray-800 p-6 flex flex-col gap-4 md:hidden">
-        <a 
-          v-for="link in navLinks" 
-          :key="link.name" 
-          :href="link.href" 
-          class="text-lg font-medium text-gray-300 hover:text-white"
-        >
-          {{ link.name }}
-        </a>
-        <button 
-          @click="$router.push('/czhome')"
-          class="w-full text-center py-3 text-black bg-white rounded-full font-bold cursor-pointer"
-        >
-          Start Now
-        </button>
-      </div>
+        <div v-if="isMobileMenuOpen" class="mobile-menu">
+          <a 
+            href="#" 
+            class="mobile-menu-link"
+          >
+            {{ t('nav.creator') }}
+          </a>
+          <a 
+            href="#" 
+            class="mobile-menu-link"
+          >
+            {{ t('nav.done') }}
+          </a>
+          <a 
+            href="#" 
+            class="mobile-menu-link"
+          >
+            {{ t('nav.about') }}
+          </a>
+          <button 
+            @click="$router.push('czhome')"
+            class="mobile-menu-button"
+          >
+            {{ t('hero.start') }}
+          </button>
+        </div>
     </header>
 
     <!-- Main Content -->
     <main>
       <!-- Hero Section -->
-      <div ref="containerRef" class="relative h-[300vh] w-full bg-black">
+      <div ref="containerRef" class="hero-container">
         <!-- Sticky Container -->
-        <div class="sticky top-0 h-[100dvh] w-full overflow-hidden">
+        <div class="hero-sticky" :style="{ height: viewportHeight + 'px', position: supportsSticky ? 'sticky' : 'relative' }">
           
           <!-- Layer 1: Background Animation (Grid) -->
-          <div class="absolute inset-0 flex items-center justify-center overflow-hidden">
-              <div 
-                  :style="{ scale }"
-                  class="origin-center flex items-center justify-center"
-              >
+          <div class="hero-background">
+              <div class="hero-grid">
                   <!-- Grid Layout -->
-                  <div class="grid grid-cols-3 md:grid-cols-5 gap-4 md:gap-6 w-[200vw] md:w-[140vw] h-auto p-4">
+                  <div v-if="!isMobile" class="hero-grid">
                       <!-- --- ROW 1 --- -->
-                      <div class="aspect-[9/16] rounded-xl overflow-hidden bg-gray-900/50"><img :src="gridImages[0]" class="w-full h-full object-cover opacity-60" alt="Robot Companion" /></div>
-                      <div class="aspect-[9/16] rounded-xl overflow-hidden bg-gray-900/50"><img :src="gridImages[1]" class="w-full h-full object-cover opacity-60" alt="Electronics" /></div>
-                      <div class="aspect-[9/16] rounded-xl overflow-hidden bg-gray-900/50"><img :src="gridImages[2]" class="w-full h-full object-cover opacity-60" alt="Retro Bot" /></div>
-                      <div class="hidden md:block aspect-[9/16] rounded-xl overflow-hidden bg-gray-900/50"><img :src="gridImages[3]" class="w-full h-full object-cover opacity-60" alt="Toy Bot" /></div>
-                      <div class="hidden md:block aspect-[9/16] rounded-xl overflow-hidden bg-gray-900/50"><img :src="gridImages[4]" class="w-full h-full object-cover opacity-60" alt="Cyberpunk" /></div>
+                      <div class="hero-grid-item"><img :src="center1" class="hero-grid-item-img" alt="Robot Companion" /></div>
+                      <div class="hero-grid-item"><img :src="center3" class="hero-grid-item-img" alt="Electronics" /></div>
+                      <div  :style="getScaleStyle(scale)" class="hero-grid-item hero-grid-item-main">
+                           <img :src="center" class="hero-grid-item-img" alt="Main Hero Robot" />
+                      </div>
+                      <div class="hero-grid-item"><img :src="center4" class="hero-grid-item-img" alt="Retro Bot" /></div>
+                      <div class="md-block hero-grid-item"><img :src="center2" class="hero-grid-item-img" alt="Toy Bot" /></div>
+                      <div class="md-block hero-grid-item"><img :src="center7" class="hero-grid-item-img" alt="Cyberpunk" /></div>
 
                       <!-- --- ROW 2 (Middle) --- -->
-                      <div class="aspect-[9/16] rounded-xl overflow-hidden bg-gray-900/50"><img :src="gridImages[5]" class="w-full h-full object-cover opacity-60" alt="Interactive" /></div>
-                      <div class="hidden md:block aspect-[9/16] rounded-xl overflow-hidden bg-gray-900/50"><img :src="gridImages[6]" class="w-full h-full object-cover opacity-60" alt="Small Bot" /></div>
+                      <div class="hero-grid-item"><img :src="center5" class="hero-grid-item-img" alt="Interactive" /></div>
+                      <div class="md-block hero-grid-item"><img :src="center6" class="hero-grid-item-img" alt="Small Bot" /></div>
                       
                       <!-- --- CENTER HERO IMAGE (Always Visible) --- -->
-                      <div class="col-span-1 row-span-1 aspect-[9/16] rounded-xl overflow-hidden shadow-2xl relative z-10 bg-gray-800 border border-gray-700">
-                           <img :src="heroImage" class="w-full h-full object-cover" alt="Main Hero Robot" />
-                      </div>
-
-                      <div class="hidden md:block aspect-[9/16] rounded-xl overflow-hidden bg-gray-900/50"><img :src="gridImages[7]" class="w-full h-full object-cover opacity-60" alt="3D Print" /></div>
-                      <div class="aspect-[9/16] rounded-xl overflow-hidden bg-gray-900/50"><img :src="gridImages[8]" class="w-full h-full object-cover opacity-60" alt="Glowing Eye" /></div>
-
+                      <div class="hero-grid-item"><img :src="center9" class="hero-grid-item-img" alt="Glowing Eye" /></div>
+                      <div class="md-block hero-grid-item"><img :src="center8" class="hero-grid-item-img" alt="3D Print" /></div>
                       <!-- --- ROW 3 --- -->
-                      <div class="hidden md:block aspect-[9/16] rounded-xl overflow-hidden bg-gray-900/50"><img :src="gridImages[9]" class="w-full h-full object-cover opacity-60" alt="Tech Texture" /></div>
-                      <div class="aspect-[9/16] rounded-xl overflow-hidden bg-gray-900/50"><img :src="gridImages[10]" class="w-full h-full object-cover opacity-60" alt="Robot Hand" /></div>
-                      <div class="aspect-[9/16] rounded-xl overflow-hidden bg-gray-900/50"><img :src="gridImages[11]" class="w-full h-full object-cover opacity-60" alt="Circuit" /></div>
-                      <div class="hidden md:block aspect-[9/16] rounded-xl overflow-hidden bg-gray-900/50"><img :src="gridImages[12]" class="w-full h-full object-cover opacity-60" alt="Display" /></div>
-                      <div class="hidden md:block aspect-[9/16] rounded-xl overflow-hidden bg-gray-900/50"><img :src="gridImages[13]" class="w-full h-full object-cover opacity-60" alt="Robotics" /></div>
+                      <div class="hero-grid-item"><img :src="center2" class="hero-grid-item-img" alt="Robot Hand" /></div>
+                      <div class="hero-grid-item"><img :src="center6" class="hero-grid-item-img" alt="Circuit" /></div>
+                      <div class="md-block hero-grid-item"><img :src="center4" class="hero-grid-item-img" alt="Display" /></div>
+                      <div class="hero-grid-item"><img :src="center5" class="hero-grid-item-img" alt="Robotics" /></div>
+                  </div>
+                   <div v-else class="hero-grid">
+                      <!-- --- ROW 1 --- -->
+                      <div class="hero-grid-item"><img :src="center1" class="hero-grid-item-img" alt="Robot Companion" /></div>
+                      <div class="hero-grid-item"><img :src="center3" class="hero-grid-item-img" alt="Electronics" /></div>
+                      <div class="hero-grid-item"><img :src="center2" class="hero-grid-item-img" alt="Retro Bot" /></div>
+                      <div class="md-block hero-grid-item"><img :src="center4" class="hero-grid-item-img" alt="Toy Bot" /></div>
+                      <div  :style="getScaleStyle(scale)" class="hero-grid-item hero-grid-item-main">
+                           <img :src="center" class="hero-grid-item-img" alt="Main Hero Robot" />
+                      </div>
+                      <div class="md-block hero-grid-item"><img :src="center5" class="hero-grid-item-img" alt="Cyberpunk" /></div>
+                      <!-- --- ROW 2 (Middle) --- -->
+                      <div class="hero-grid-item"><img :src="center7" class="hero-grid-item-img" alt="Interactive" /></div>
+                      <div class="md-block hero-grid-item"><img :src="center9" class="hero-grid-item-img" alt="Small Bot" /></div>
+                      
+                      <!-- --- CENTER HERO IMAGE (Always Visible) --- -->
+                      <div class="hero-grid-item"><img :src="center8" class="hero-grid-item-img" alt="Glowing Eye" /></div>
+                      <!-- --- ROW 3 --- -->
+                      <div class="hero-grid-item"><img :src="center2" class="hero-grid-item-img" alt="Robot Hand" /></div>
+                      <div class="hero-grid-item"><img :src="center6" class="hero-grid-item-img" alt="Circuit" /></div>
+                      <div class="md-block hero-grid-item"><img :src="center4" class="hero-grid-item-img" alt="Display" /></div>
+                      <div class="hero-grid-item"><img :src="center5" class="hero-grid-item-img" alt="Robotics" /></div>
                   </div>
               </div>
           </div>
+         
 
           <!-- Layer 2: Static Dark Overlay -->
-          <div class="absolute inset-0 bg-black/60 z-10 pointer-events-none" />
+      
+          <div class="hero-overlay" />
 
           <!-- Layer 3: Static Content Layer -->
-          <div class="absolute inset-0 z-20 flex flex-col items-center justify-center pointer-events-none">
-            <div class="pointer-events-auto flex flex-col items-center justify-center text-center px-4 w-full max-w-5xl mx-auto">
-                <h1 class="text-5xl md:text-7xl lg:text-8xl font-bold text-white mb-6 tracking-tighter drop-shadow-2xl">
-                  Create with Deotaland
+          <div class="hero-content">
+        
+             <MotionCom>
+            <div class="hero-content-inner">
+                <h1 class="hero-title">
+                  {{ t('hero.title') }}
                 </h1>
-                <p class="text-xl md:text-2xl text-gray-200 mb-10 drop-shadow-lg max-w-2xl font-light">
-                  Bring your own AI robot companion to life
+                <p class="hero-subtitle">
+                  {{ t('hero.subtitle') }}
                 </p>
-                <div class="flex flex-col sm:flex-row gap-5">
+                <div class="hero-buttons">
                   <a 
                     href="https://deotaland.com" 
-                    class="px-9 py-4 rounded-full border border-white/50 bg-black/20 backdrop-blur-sm text-white font-semibold hover:bg-white hover:text-black transition-all text-lg"
+                    class="hero-button hero-button-outline"
                   >
-                    Explore More
+                    {{ t('hero.explore') }}
                   </a>
                   <button 
-                    @click="$router.push('/czhome')"
-                    class="px-9 py-4 rounded-full bg-white text-black font-semibold hover:bg-gray-200 transition-all text-lg shadow-[0_0_20px_rgba(255,255,255,0.3)] cursor-pointer"
+                    @click="$router.push('czhome')"
+                    class="hero-button hero-button-solid"
                   >
-                    Start Now
+                    {{ t('hero.start') }}
                   </button>
                 </div>
             </div>
+        </MotionCom>
+
           </div>
 
         </div>
       </div>
 
       <!-- Creation Canvas Section -->
-      <section class="py-24 bg-black relative overflow-hidden">
+      <section class="section">
         <!-- Background gradient hint -->
-        <div class="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[500px] bg-gray-900/50 blur-[120px] rounded-full pointer-events-none" />
+        <div class="section-background-gradient" />
 
-        <div class="container mx-auto px-6 relative z-10">
-          <div class="text-center mb-16">
-            <h2 class="text-4xl md:text-5xl font-bold mb-4 text-white">
-              Your Creation canvas – DeotaBoard
+        <div class="container">
+          <MotionCom>
+          <div class="section-header">
+            <h2 class="section-title">
+              {{ t('canvas.title') }}
             </h2>
-            <p class="text-gray-400 text-lg md:text-xl">
-              Build your robot in an infinite canvas, together with AI.
+            <p class="section-subtitle">
+              {{ t('canvas.subtitle') }}
             </p>
           </div>
-
+</MotionCom>
+<MotionCom>
           <!-- Workflow Visualization Container -->
-          <div class="relative w-full max-w-6xl mx-auto bg-gray-900/40 border border-gray-800 rounded-3xl p-8 md:p-12 backdrop-blur-sm">
+          <div class="workflow-container">
               
               <!-- Responsive Flex Layout: Stack on mobile, Row on desktop -->
-              <div class="flex flex-col md:flex-row items-center justify-between gap-8 md:gap-4">
+              <div class="workflow-content">
                   
                   <!-- LEVEL 1: INPUTS (Stacked Vertically) -->
-                  <div class="flex flex-col gap-6 w-full md:w-auto">
+                  <div class="workflow-inputs">
                       <!-- Input A: Prompt -->
-                      <div class="flex items-center gap-4 bg-black/80 p-4 rounded-xl border border-gray-800 hover:border-gray-600 transition-colors w-full md:w-64 shadow-lg">
-                          <div class="w-12 h-12 rounded-full bg-gray-800 flex items-center justify-center text-purple-400 shrink-0">
+                      <div class="workflow-card">
+                          <div class="workflow-icon">
                               <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 7 4 4 20 4 20 7"></polyline><line x1="9" y1="20" x2="15" y2="20"></line><line x1="12" y1="4" x2="12" y2="20"></line></svg>
                           </div>
-                          <div>
-                              <span class="block text-sm font-bold text-gray-200">Prompt / Idea</span>
-                              <span class="text-xs text-gray-500">"A cute pumpkin dog"</span>
+                          <div class="workflow-card-content">
+                              <span class="workflow-card-label">{{ t('canvas.prompt') }}</span>
+                              <span class="workflow-card-sublabel">"A youthful and lovely girl"</span>
                           </div>
                       </div>
 
                       <!-- Input B: Reference -->
-                      <div class="flex items-center gap-4 bg-black/80 p-4 rounded-xl border border-gray-800 hover:border-gray-600 transition-colors w-full md:w-64 shadow-lg">
-                          <div class="w-12 h-12 rounded-full bg-gray-800 flex items-center justify-center text-blue-400 shrink-0">
+                      <div class="workflow-card">
+                          <div class="workflow-icon">
                               <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
                           </div>
-                          <div class="flex-1">
-                              <span class="block text-sm font-bold text-gray-200 mb-1">Reference</span>
-                              <div class="w-full h-24 rounded-lg overflow-hidden border border-gray-700 relative group">
-                                  <img :src="refImage" alt="Dog Reference" class="w-full h-full object-cover opacity-80 group-hover:scale-110 transition-transform duration-500" />
-                                  <div class="absolute bottom-1 right-1 bg-black/60 px-1 rounded text-[10px] text-white">Reference</div>
+                          <div class="workflow-card-full">
+                              <span class="workflow-card-label">{{ t('canvas.reference') }}</span>
+                              <div class="workflow-card-image">
+                                  <img :src="refImage" alt="Dog Reference" class="workflow-card-image-img" />
+                                  <div class="workflow-card-image-badge">{{ t('canvas.referenceText') }}</div>
                               </div>
                           </div>
                       </div>
                   </div>
 
                   <!-- Connector Arrow 1 -->
-                  <div class="flex flex-col items-center justify-center text-gray-600">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="rotate-90 md:rotate-0"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
+                  <div class="workflow-arrow">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
                   </div>
 
                   <!-- LEVEL 2: 3D MODEL -->
-                  <div class="flex flex-col gap-4 bg-black/80 p-5 rounded-2xl border border-gray-800 w-full md:w-64 shadow-lg hover:border-gray-600 transition-colors">
-                      <div class="flex items-center gap-3 mb-2">
-                          <div class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-green-400">
+                  <div class="workflow-card">
+                      <div class="workflow-card-header">
+                          <div class="workflow-icon">
                               <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
                           </div>
-                          <span class="text-sm font-bold text-gray-200">3D Model</span>
+                          <span class="workflow-card-label">{{ t('canvas.model3d') }}</span>
                       </div>
-                      <div class="w-full aspect-square rounded-xl overflow-hidden border border-gray-700 relative bg-gray-900 group">
-                          <img :src="model3dImage" alt="3D Pumpkin Dog" class="w-full h-full object-cover opacity-90 group-hover:scale-110 transition-transform duration-500" />
-                          <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/grid-me.png')] opacity-30 pointer-events-none"></div>
-                          <div class="absolute bottom-2 left-2 bg-green-900/80 px-2 py-0.5 rounded text-[10px] text-green-100 font-mono">.OBJ Generated</div>
+                      <div class="workflow-card-model">
+                          <img :src="model3dImage" alt="3D Pumpkin Dog" class="workflow-card-model-img" />
+                          <div class="workflow-card-model-pattern"></div>
+                          <div class="workflow-card-model-badge">.OBJ Generated</div>
                       </div>
-                      <p class="text-xs text-gray-500 text-center">Auto-rigged mesh ready for core</p>
+                      <p class="workflow-card-footer">{{ t('canvas.autoRigged') }}</p>
                   </div>
 
                   <!-- Connector Arrow 2 -->
-                  <div class="flex flex-col items-center justify-center text-gray-600">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="rotate-90 md:rotate-0"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
+                  <div class="workflow-arrow">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
                   </div>
 
                   <!-- LEVEL 3: REAL ROBOT -->
-                  <div class="flex flex-col gap-4 bg-gradient-to-b from-purple-900/20 to-blue-900/20 p-5 rounded-2xl border border-purple-500/40 w-full md:w-72 shadow-[0_0_30px_rgba(147,51,234,0.1)]">
-                      <div class="flex items-center gap-3 mb-2">
-                          <div class="w-10 h-10 rounded-full bg-purple-600 flex items-center justify-center text-white shadow-lg shadow-purple-600/50">
+                  <div class="workflow-card workflow-card-highlight">
+                      <div class="workflow-card-header">
+                          <div class="workflow-icon-highlight">
                               <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"></rect><circle cx="12" cy="12" r="2"></circle><path d="M7 7h10v10"></path></svg>
                           </div>
-                          <span class="text-sm font-bold text-white">Real Robot</span>
-                          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-yellow-400 fill-yellow-400 ml-auto animate-pulse"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg>
+                          <span class="workflow-card-label-highlight">{{ t('canvas.realRobot') }}</span>
+                          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="workflow-card-badge-icon"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg>
                       </div>
-                      <div class="w-full aspect-square rounded-xl overflow-hidden border border-purple-500/30 relative group bg-gray-900">
-                          <img :src="realRobotImage" alt="Real Robot Toy" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" />
-                          <div class="absolute inset-0 bg-gradient-to-t from-purple-900/40 to-transparent"></div>
+                      <div class="workflow-card-model workflow-card-model-highlight">
+                          <img :src="realRobotImage" alt="Real Robot Toy" class="workflow-card-model-img" />
+                          <div class="workflow-card-model-overlay"></div>
                       </div>
-                      <p class="text-xs text-purple-200 text-center font-medium">Alive on your desktop</p>
+                      <p class="workflow-card-footer-highlight">{{ t('canvas.alive') }}</p>
                   </div>
 
               </div>
           </div>
+          </MotionCom>
         </div>
       </section>
-
+<MotionCom>
       <!-- Companionship Section -->
-      <section class="py-24 bg-black border-t border-gray-900">
-        <div class="container mx-auto px-6 flex flex-col items-center text-center">
+      <section class="section section-companionship">
+        <div class="container container-companionship">
           
-          <h2 class="text-4xl md:text-6xl font-bold mb-6 tracking-tight">
-            Born for Personal Companionship
+          <h2 class="companionship-title">
+            {{ t('companionship.title') }}
           </h2>
           
-          <h3 class="text-2xl md:text-3xl text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-400 font-semibold mb-8">
-            Powered by AI
+          <h3 class="companionship-powered">
+            {{ t('companionship.powered') }}
           </h3>
           
-          <p class="text-xl text-gray-400 max-w-2xl mb-12 leading-relaxed">
-            Cute companions, emotional partners, desktop friends... All in one Deotaland DIY robot.
+          <p class="companionship-subtitle">
+            {{ t('companionship.subtitle') }}
           </p>
 
           <a 
             href="https://deotaland.com" 
-            class="inline-flex items-center justify-center px-8 py-4 text-base font-bold text-white bg-purple-600 rounded-full hover:scale-105 transition-transform duration-200"
+            class="companionship-button"
           >
-            See Robot Examples
+            {{ t('companionship.examples') }}
           </a>
 
           <!-- Optional Visual Element below -->
-          <div class="mt-16 w-full max-w-4xl h-64 md:h-96 rounded-3xl overflow-hidden relative">
+          <div class="companionship-visual">
               <img 
-                  :src="lopi" 
+                  src="https://draft-user.s3.us-east-2.amazonaws.com/images/41d42aa6-9ada-49b8-8a54-0d2595c0816a.webp" 
                   alt="Robot Companion Context" 
-                  class="w-full h-full object-cover opacity-90 hover:opacity-100 transition-opacity duration-500"
+                  class="companionship-visual-img"
               />
-              <div class="absolute inset-0 bg-gradient-to-t from-black/10 via-transparent to-transparent"></div>
+              <div class="companionship-visual-overlay"></div>
           </div>
         </div>
       </section>
-
+</MotionCom>
+<MotionCom>
       <!-- Middle Text Section -->
-      <section class="py-12 bg-black text-center">
-        <div class="container mx-auto px-6 max-w-3xl">
-          <p class="text-lg md:text-xl text-gray-400 leading-relaxed">
+      <section class="section section-text-center">
+        <div class="container container-middle-text">
+          <p class="middle-text-content">
             Explore our community creations and get inspired to build your own unique AI robot companion. 
             Each robot has its own personality and story, waiting to be discovered and loved.
           </p>
         </div>
       </section>
-
+</MotionCom>
+<MotionCom>
       <!-- Robot Cards Section -->
-      <section class="py-20 bg-black overflow-hidden">
-        <div class="container mx-auto px-6">
-          <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto">
+      <section class="section section-robot-cards">
+        <div class="container">
+          <div class="robot-cards-grid">
             <div 
               v-for="card in cards" 
               :key="card.id" 
-              class="group relative rounded-3xl overflow-hidden aspect-[3/4] cursor-pointer"
+              class="robot-card"
             >
               <img 
                 :src="card.img" 
                 :alt="card.title" 
-                class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
+                class="robot-card-image"
               />
-              <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-90" />
-              <div class="absolute bottom-0 left-0 p-6">
-                <h3 class="text-xl font-bold text-white mb-1">{{ card.title }}</h3>
-                <p class="text-sm font-medium text-gray-300">{{ card.user }}</p>
+              <div class="robot-card-overlay" />
+              <div class="robot-card-content">
+                <h3 class="robot-card-title">{{ card.title }}</h3>
+                <p class="robot-card-user">{{ card.user }}</p>
               </div>
             </div>
           </div>
         </div>
       </section>
-
+ </MotionCom>
       <!-- Features Section -->
-      <section class="py-24 bg-gray-900/30">
-        <div class="container mx-auto px-6">
+      <section class="section section-features">
+        <div class="container">
           
-          <div class="mb-16 text-center md:text-left">
-            <h2 class="text-4xl md:text-5xl font-bold text-white mb-4">
-              From Zero to Your Own Robot Friend
+          <div class="features-header">
+            <h2 class="features-title">
+              {{ t('features.title') }}
             </h2>
-            <p class="text-xl text-gray-400">
-              Simple enough for beginners, powerful enough for makers.
+            <p class="features-subtitle">
+              {{ t('features.subtitle') }}
             </p>
           </div>
 
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-16">
+          <div class="features-grid">
             <div 
-              v-for="(item, idx) in featureList" 
+              v-for="(item, idx) in t('features.list')" 
               :key="idx" 
-              class="flex flex-col items-start gap-4"
+              class="feature-item"
             >
-              <div class="p-3 bg-gray-800 rounded-xl mb-2">
-                <svg v-if="idx === 0" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-purple-400"><circle cx="12" cy="12" r="10"></circle><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path><path d="M2 12h20"></path></svg>
-                <svg v-else-if="idx === 1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-blue-400"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
-                <svg v-else-if="idx === 2" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-yellow-400"><circle cx="12" cy="12" r="10"></circle><path d="M8 14s1.5 2 4 2 4-2 4-2"></path><line x1="9" y1="9" x2="9.01" y2="9"></line><line x1="15" y1="9" x2="15.01" y2="9"></line></svg>
-                <svg v-else xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-red-400"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
+              <div class="feature-icon">
+                <svg v-if="idx === 0" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feature-icon-purple"><circle cx="12" cy="12" r="10"></circle><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path><path d="M2 12h20"></path></svg>
+                <svg v-else-if="idx === 1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feature-icon-blue"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
+                <svg v-else-if="idx === 2" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feature-icon-yellow"><circle cx="12" cy="12" r="10"></circle><path d="M8 14s1.5 2 4 2 4-2 4-2"></path><line x1="9" y1="9" x2="9.01" y2="9"></line><line x1="15" y1="9" x2="15.01" y2="9"></line></svg>
+                <svg v-else xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feature-icon-red"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
               </div>
-              <h3 class="text-2xl font-bold text-white">{{ item.title }}</h3>
-              <p class="text-gray-400 leading-relaxed text-lg">
+              <h3 class="feature-title">{{ item.title }}</h3>
+              <p class="feature-desc">
                 {{ item.desc }}
               </p>
             </div>
@@ -340,120 +399,301 @@
       </section>
 
       <!-- Strong Engine Section -->
-      <section class="py-24 bg-black">
-        <div class="container mx-auto px-6 text-center">
-          <h2 class="text-3xl md:text-4xl font-bold text-white mb-4">
-            Strong Engine Behind
+      <section class="section section-engine">
+        <div class="container container-engine">
+          <h2 class="engine-title">
+            {{ t('engine.title') }}
           </h2>
-          <p class="text-lg text-gray-500 mb-16 max-w-2xl mx-auto">
-            We combine leading AI and 3D technologies to power your DIY robots.
+          <p class="engine-subtitle">
+            {{ t('engine.subtitle') }}
           </p>
 
-          <div class="grid grid-cols-2 md:grid-cols-4 gap-4 max-w-4xl mx-auto">
+          <div class="engine-grid">
             <div 
               v-for="(name, i) in logos" 
               :key="i" 
-              class="h-24 bg-gray-900 rounded-lg flex items-center justify-center border border-gray-800 hover:border-gray-600 transition-colors"
+              class="engine-item"
             >
-              <span class="text-gray-500 font-semibold text-sm">{{ name }}</span>
+              <span class="engine-item-text">{{ name }}</span>
             </div>
           </div>
         </div>
       </section>
 
       <!-- Community Call Section -->
-      <section class="py-32 bg-gradient-to-b from-black to-gray-900 border-b border-gray-800">
-        <div class="container mx-auto px-6 text-center">
-          <h2 class="text-5xl md:text-7xl font-bold text-white mb-12 tracking-tighter">
-            Deotaland is for All Creators
+      <section class="section section-community">
+        <div class="container container-text-center">
+          <h2 class="community-title">
+            {{ t('community.title') }}
           </h2>
           
           <a 
             href="#" 
-            class="inline-block px-10 py-4 text-lg font-bold text-black bg-white rounded-full hover:bg-gray-200 transition-colors"
+            class="community-button"
           >
-            Join the Creator Community
+            {{ t('community.join') }}
           </a>
         </div>
       </section>
     </main>
-
     <!-- Footer -->
-    <footer class="bg-black text-white py-16 border-t border-gray-900">
-      <div class="container mx-auto px-6">
-        <div class="flex flex-col md:flex-row justify-between items-start gap-12">
+    <footer class="footer">
+      <div class="container">
+        <div class="footer-content">
           
           <!-- Logo -->
-          <div class="mb-4 md:mb-0">
-            <span class="text-2xl font-bold tracking-tighter">Deotaland</span>
+          <div class="footer-logo">
+            <span class="footer-logo-text">Deotaland</span>
           </div>
 
           <!-- Links Columns -->
-          <div class="flex flex-wrap gap-12 md:gap-24">
+          <div class="footer-links">
             
             <!-- Socials -->
-            <div class="flex flex-col gap-4">
-              <h4 class="font-semibold text-gray-500 text-sm uppercase tracking-wider">Socials</h4>
-              <div class="flex gap-4">
-                <a href="https://x.com/deotaland" class="text-gray-400 hover:text-white"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"></path></svg></a>
-                <a href="https://www.youtube.com/@Deotaland" class="text-gray-400 hover:text-white"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17"></path><path d="M9.75 15.02v-4.04l5.5 2.02-5.5 2.02Z"></path></svg></a>
-                <a href="https://www.instagram.com/deotaland/" class="text-gray-400 hover:text-white"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" x2="17.51" y1="6.5" y2="6.5"></line></svg></a>
-                <a href="https://www.tiktok.com/@deotalandofficial" class="text-gray-400 hover:text-white font-bold text-sm flex items-center h-[20px]">TikTok</a>
-                <a href="https://discord.gg/feuFGPpY" class="text-gray-400 hover:text-white font-bold text-sm flex items-center h-[20px]">Discord</a>
+            <div class="footer-column">
+              <h4 class="footer-column-title">{{ t('footer.socials') }}</h4>
+              <div class="footer-socials">
+                <a href="https://x.com/deotaland" class="footer-social-link"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"></path></svg></a>
+                <a href="https://www.youtube.com/@Deotaland" class="footer-social-link"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17"></path><path d="M9.75 15.02v-4.04l5.5 2.02-5.5 2.02Z"></path></svg></a>
+                <a href="https://www.instagram.com/deotaland/" class="footer-social-link"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" x2="17.51" y1="6.5" y2="6.5"></line></svg></a>
+                <a href="https://www.tiktok.com/@deotalandofficial" class="footer-social-link footer-social-link-text">TikTok</a>
+                <a href="https://discord.gg/feuFGPpY" class="footer-social-link footer-social-link-text">Discord</a>
               </div>
             </div>
 
             <!-- Language -->
-            <div class="flex flex-col gap-4">
-              <h4 class="font-semibold text-gray-500 text-sm uppercase tracking-wider">Language</h4>
-              <div class="flex flex-col gap-2">
-                 <a href="#" class="text-gray-300 hover:text-white text-sm">English</a>
-                 <a href="#" class="text-gray-300 hover:text-white text-sm">中文</a>
+            <div class="footer-column">
+              <h4 class="footer-column-title">{{ t('footer.language') }}</h4>
+              <div class="footer-links-list">
+                 <a href="#" @click.prevent="switchLanguage('en')" class="footer-link">English</a>
+                 <a href="#" @click.prevent="switchLanguage('zh')" class="footer-link">中文</a>
               </div>
             </div>
 
             <!-- Company -->
-             <div class="flex flex-col gap-4">
-              <h4 class="font-semibold text-gray-500 text-sm uppercase tracking-wider">Company</h4>
-              <div class="flex flex-col gap-2">
-                 <a href="#" class="text-gray-300 hover:text-white text-sm">About Us</a>
+             <div class="footer-column">
+              <h4 class="footer-column-title">{{ t('footer.company') }}</h4>
+              <div class="footer-links-list">
+                 <a href="#" class="footer-link">{{ t('footer.about') }}</a>
               </div>
             </div>
 
              <!-- Action -->
-             <div class="flex flex-col gap-4">
+             <div class="footer-column">
                  <button 
                     @click="scrollToTop"
-                    class="text-gray-300 hover:text-white text-sm text-left"
+                    class="footer-link"
                  >
-                    Back to top
+                    {{ t('footer.backTop') }}
                  </button>
             </div>
 
           </div>
         </div>
-
-        <div class="mt-16 pt-8 border-t border-gray-900 text-center md:text-left text-sm text-gray-600">
-          ©2025 Deotaland limited. All rights reserved.
+<div >
+      
+          </div>
+        <div class="footer-bottom">
+          {{ t('footer.copyright') }}
         </div>
       </div>
     </footer>
   </div>
+  </Bg>
 </template>
 
 <script setup>
+import MotionCom from './motion.vue'
+import spline from './spline.vue';
 import { ref, onMounted, onUnmounted, computed } from 'vue';
-import lopi from '@/assets/home/lopi.jpg'
-import dog from '@/assets/home/dog.jpg'
-import dog3 from '@/assets/home/dog3.jpg'
-import qdog from '@/assets/home/qdog.jpg'
-import footer1 from '@/assets/home/footer1.png'
-import footer2 from '@/assets/home/footer2.png'
-import footer3 from '@/assets/home/footer3.png'
+import Bg from './bg.vue'
+
+const center = 'https://draft-user.s3.us-east-2.amazonaws.com/images/c175585a-20c2-48b3-8939-32bbdb25814b.webp'
+const center1 = 'https://draft-user.s3.us-east-2.amazonaws.com/images/ecf39871-52c5-45ad-9f9e-6eafd838ce54.webp'
+const center2 = 'https://draft-user.s3.us-east-2.amazonaws.com/images/f7c4454e-1781-448e-9c70-b087b64f380e.webp'
+const center3 = 'https://draft-user.s3.us-east-2.amazonaws.com/images/1e74bf93-6be3-46ae-a6d5-5ad02d0b7712.webp'
+const center4 = 'https://draft-user.s3.us-east-2.amazonaws.com/images/64672da8-a034-4168-b9e7-cda985558f7e.webp'
+const center5 = 'https://draft-user.s3.us-east-2.amazonaws.com/images/a77f66c4-e7c0-43a6-8e75-0eac49402c06.webp'
+const center6 = 'https://draft-user.s3.us-east-2.amazonaws.com/images/de3cc66c-909b-4b03-9e73-5180df2bc374.webp'
+const center7 = 'https://draft-user.s3.us-east-2.amazonaws.com/images/bc62a209-9a54-4d1e-926a-b3ef66fdbd29.webp'
+const center8 = 'https://draft-user.s3.us-east-2.amazonaws.com/images/9e012193-5576-4a9e-9f38-eecb8705d8a4.webp'
+const center9 = 'https://draft-user.s3.us-east-2.amazonaws.com/images/65bb1613-0ff9-43c4-a5b9-978c2507ca91.webp'
+
+const viewportHeight = ref(window.innerHeight);
+const isMobile = ref(window.innerWidth < 768);
+
+const supportsSticky = ref(true);
+const supportsBackdropFilter = ref(true);
+
+const checkStickySupport = () => {
+  const testEl = document.createElement('div');
+  testEl.style.position = 'sticky';
+  testEl.style.top = '0';
+  supportsSticky.value = testEl.style.position === 'sticky';
+};
+
+const checkBackdropFilterSupport = () => {
+  const testEl = document.createElement('div');
+  testEl.style.backdropFilter = 'blur(10px)';
+  supportsBackdropFilter.value = testEl.style.backdropFilter !== '';
+};
+
+const getScaleStyle = (scale) => {
+  const scaleValue = scale * 1.5 <= 1 ? 1 : scale * 1.5;
+  return {
+    transform: `scale(${scaleValue})`,
+    zIndex: 20
+  };
+};
+
+// 中英文库
+const i18n = {
+  en: {
+    nav: {
+      // creator: 'Creator',
+      // land: 'Land',
+      // pricing: 'Pricing',
+      creator: 'Creator',
+      done: 'D one',
+      about: 'About us'
+    },
+    hero: {
+      title: 'Create with Deotaland',
+      subtitle: 'Bring your own AI robot companion to life',
+      explore: 'Explore More',
+      start: 'Start Now'
+    },
+    canvas: {
+      title: 'Your Creation canvas – DeotaBoard',
+      subtitle: 'Build your robot in an infinite canvas, together with AI.',
+      prompt: 'Prompt / Idea',
+      reference: 'Reference',
+      model3d: '3D Model',
+      realRobot: 'Real Robot',
+      autoRigged: 'Auto-rigged mesh ready for core',
+      alive: 'Alive on your desktop',
+      referenceText: 'Reference'
+    },
+    companionship: {
+      title: 'Born for Personal Companionship',
+      powered: 'Powered by AI',
+      subtitle: 'Cute companions, emotional partners, desktop friends... All in one Deotaland DIY robot.',
+      examples: 'See Robot Examples'
+    },
+    features: {
+      title: 'From Zero to Your Own Robot Friend',
+      subtitle: 'Simple enough for beginners, powerful enough for makers.',
+      list: [
+        { title: 'Stunning Custom Looks', desc: 'Generate unique robot designs from your ideas or images.' },
+        { title: 'From Idea to 3D Model', desc: 'Turn concepts into printable 3D shells ready for your robot core.' },
+        { title: 'One-Click Expression Packs', desc: 'Create and apply DIY eye styles and animated expressions.' },
+        { title: 'Always-On AI Companion', desc: 'Long-term memory, emotional responses, and daily interactions.' }
+      ]
+    },
+    engine: {
+      title: 'Strong Engine Behind',
+      subtitle: 'We combine leading AI and 3D technologies to power your DIY robots.'
+    },
+    community: {
+      title: 'Deotaland is for All Creators',
+      join: 'Join the Creator Community'
+    },
+    footer: {
+      socials: 'Socials',
+      language: 'Language',
+      company: 'Company',
+      about: 'About Us',
+      backTop: 'Back to top',
+      copyright: '©2025 Deotaland limited. All rights reserved.'
+    }
+  },
+  zh: {
+    nav: {
+      // creator: '创作者',
+      // land: '社区',
+      // pricing: '价格',
+      creator: 'Creator',
+      done: 'D1',
+      about: 'About'
+    },
+    hero: {
+      title: '使用 Deotaland 创作',
+      subtitle: '让你的 AI 机器人伴侣成为现实',
+      explore: '探索更多',
+      start: '立即开始'
+    },
+    canvas: {
+      title: '你的创作画布 – DeotaBoard',
+      subtitle: '在无限画布中，与 AI 一起打造你的机器人。',
+      prompt: '提示 / 创意',
+      reference: '参考',
+      model3d: '3D 模型',
+      realRobot: '真实机器人',
+      autoRigged: '自动绑定网格，随时准备安装核心',
+      alive: '活跃在你的桌面上',
+      referenceText: '参考'
+    },
+    companionship: {
+      title: '为个人陪伴而生',
+      powered: '由 AI 驱动',
+      subtitle: '可爱的伴侣、情感伙伴、桌面朋友... 尽在 Deotaland DIY 机器人中。',
+      examples: '查看机器人示例'
+    },
+    features: {
+      title: '从零到属于你的机器人朋友',
+      subtitle: '对初学者足够简单，对创客足够强大。',
+      list: [
+        { title: '惊艳的自定义外观', desc: '从你的想法或图像生成独特的机器人设计。' },
+        { title: '从想法到 3D 模型', desc: '将概念转化为可打印的 3D 外壳，随时准备安装你的机器人核心。' },
+        { title: '一键表情包', desc: '创建并应用 DIY 眼睛样式和动画表情。' },
+        { title: '全天候 AI 伴侣', desc: '长期记忆、情感反应和日常互动。' }
+      ]
+    },
+    engine: {
+      title: '强大的引擎支持',
+      subtitle: '我们结合领先的 AI 和 3D 技术，为你的 DIY 机器人提供动力。'
+    },
+    community: {
+      title: 'Deotaland 面向所有创作者',
+      join: '加入创作者社区'
+    },
+    footer: {
+      socials: '社交',
+      language: '语言',
+      company: '公司',
+      about: '关于我们',
+      backTop: '返回顶部',
+      copyright: '©2025 Deotaland 有限公司。保留所有权利。'
+    }
+  }
+};
 // Navbar state
 const isScrolled = ref(false);
 const isMobileMenuOpen = ref(false);
 
+// 语言切换逻辑
+const currentLang = ref(localStorage.getItem('lang') || 'en');
+
+// 切换语言
+const switchLanguage = (lang) => {
+  currentLang.value = lang;
+  localStorage.setItem('lang', lang);
+};
+
+// 获取当前语言的文本
+const t = (key) => {
+  const keys = key.split('.');
+  let result = i18n[currentLang.value];
+  for (const k of keys) {
+    if (result && result[k] !== undefined) {
+      result = result[k];
+    } else {
+      return key; // 如果找不到对应的键，返回原始键
+    }
+  }
+  return result;
+};
+
 // Hero section state
 const containerRef = ref(null);
 const scrollYProgress = ref(0);
@@ -462,14 +702,12 @@ const scrollYProgress = ref(0);
 const handleScroll = () => {
   isScrolled.value = window.scrollY > 50;
   
-  // Calculate scroll progress for hero section
   if (containerRef.value) {
     const viewportHeight = window.innerHeight;
     const scrollPosition = window.scrollY;
     const containerTop = containerRef.value.offsetTop;
     const containerHeight = containerRef.value.offsetHeight;
     
-    // Calculate progress from 0 to 1 as we scroll through the container
     const progress = Math.max(0, Math.min(1, 
       (scrollPosition - containerTop + viewportHeight) / 
       (containerHeight + viewportHeight)
@@ -479,6 +717,12 @@ const handleScroll = () => {
   }
 };
 
+// Handle window resize
+const handleResize = () => {
+  viewportHeight.value = window.innerHeight;
+  isMobile.value = window.innerWidth < 768;
+};
+
 // Scroll to top function
 const scrollToTop = () => {
   window.scrollTo({ top: 0, behavior: 'smooth' });
@@ -486,11 +730,11 @@ const scrollToTop = () => {
 
 // Scale transformation based on scroll progress
 const scale = computed(() => {
-  // Zoom out from scale 3.5 to 1 based on scroll (0 to 0.8 progress)
-  // When progress reaches 0.8, we've completed the zoom out
+  // Zoom out more aggressively to ensure all 15 images are visible
+  // Final scale is 0.2 for mobile and 0.3 for desktop
   const mappedProgress = Math.min(scrollYProgress.value / 0.8, 1);
   let initNum = window.innerWidth < 768 ? 3.5 : 5.5;
-  let outNum = window.innerWidth < 768 ? 2.5 : 4.9;
+  let outNum = window.innerWidth < 768 ? 3.2 : 5.0;
   return initNum - (mappedProgress * outNum);
 });
 
@@ -500,56 +744,17 @@ const navLinks = [
   { name: 'Land', href: '#' },
   { name: 'Pricing', href: '#' },
 ];
-
-// Theme: Desktop Robots, Emotional Companions, DIY Electronics
-const heroImage = "https://images.unsplash.com/photo-1546776310-eef45dd6d63c?auto=format&fit=crop&q=80&w=1200";
-
-// Grid images
-const gridImages = [
-  // Row 1
-  "https://images.unsplash.com/photo-1535378437327-b7149b379c2e?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1581092160562-40aa08e78837?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1534723328310-e82dad3af43f?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1593085512500-bfd11932f80c?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1555680202-c86f0e12f086?auto=format&fit=crop&q=80&w=600",
-
-  // Row 2
-  "https://images.unsplash.com/photo-1611162617474-5b21e879e113?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1589254065878-42c9da997008?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1485827404703-89b55fcc595e?auto=format&fit=crop&q=80&w=600",
-  
-  // Row 3 (Center Hero is here in grid)
-  "https://images.unsplash.com/photo-1601132359864-c974e7989094?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1580835239846-5bb9ce03c8c3?auto=format&fit=crop&q=80&w=600",
-
-  // Row 4
-  "https://images.unsplash.com/photo-1484557985045-edf25e08da73?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1589254065878-42c9da997008?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1517430816045-df4b7de8db98?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1563770095-39d468f9583d?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1580835239846-5bb9ce03c8c3?auto=format&fit=crop&q=80&w=600"
-];
-
 // Creation Canvas Images
-const refImage = dog;
-const model3dImage = qdog; 
-const realRobotImage = dog3;
+const refImage = 'https://draft-user.s3.us-east-2.amazonaws.com/images/0185a1f7-563a-4af9-9569-65d81f710c52.webp';
+const model3dImage = 'https://draft-user.s3.us-east-2.amazonaws.com/images/e5a1408b-b695-431f-b03e-0b9b06f1b82f.webp'; 
+const realRobotImage = 'https://draft-user.s3.us-east-2.amazonaws.com/images/ce2f6979-4b3c-499f-b179-80abbf4d7431.webp';
 
 // Robot Cards
 const cards = [
-  { id: 1, title: 'Custom Robot', user: '@Wownny wolf', img:footer3 },
-  { id: 2, title: 'Custom Robot', user: '@Lil Moods', img: footer2 },
-  { id: 3, title: 'Custom Robot', user: '@Deo Monkey', img:footer1 },
+  { id: 1, title: 'Custom Robot', user: '@Wownny wolf', img:'https://draft-user.s3.us-east-2.amazonaws.com/images/8301d540-a4b2-4346-ac3d-1f9ad8b34bad.webp' },
+  { id: 2, title: 'Custom Robot', user: '@Lil Moods', img: 'https://draft-user.s3.us-east-2.amazonaws.com/images/c6253d79-47dd-4ced-8806-ded34b7ee184.webp' },
+  { id: 3, title: 'Custom Robot', user: '@Deo Monkey', img:'https://draft-user.s3.us-east-2.amazonaws.com/images/eb61f9e9-94dd-4920-813d-aa635eb73e24.webp' },
 ];
-
-// Features List
-const featureList = [
-  { title: "Stunning Custom Looks", desc: "Generate unique robot designs from your ideas or images." },
-  { title: "From Idea to 3D Model", desc: "Turn concepts into printable 3D shells ready for your robot core." },
-  { title: "One-Click Expression Packs", desc: "Create and apply DIY eye styles and animated expressions." },
-  { title: "Always-On AI Companion", desc: "Long-term memory, emotional responses, and daily interactions." }
-];
-
 // Strong Engine Logos
 const logos = [
   "AI Engine 1", "3D Engine 2", "Voice Engine 3", "Memory Engine 4",
@@ -558,16 +763,1076 @@ const logos = [
 
 // Mount and unmount scroll event
 onMounted(() => {
+  checkStickySupport();
+  checkBackdropFilterSupport();
   window.addEventListener('scroll', handleScroll);
-  // Initial call to set initial state
+  window.addEventListener('resize', handleResize);
   handleScroll();
 });
 
 onUnmounted(() => {
   window.removeEventListener('scroll', handleScroll);
+  window.removeEventListener('resize', handleResize);
 });
 </script>
 
 <style scoped>
-/* Additional custom styles can be added here */
+.home-container {
+  position: relative;
+  pointer-events: none;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.navbar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 900;
+  transition: all 0.3s;
+  pointer-events: auto;
+}
+
+.navbar.scrolled {
+  background-color: rgba(0, 0, 0, 0.9);
+  padding-top: 16px;
+  padding-bottom: 16px;
+}
+
+.navbar.transparent {
+  background-color: transparent;
+  padding-top: 24px;
+  padding-bottom: 24px;
+}
+
+.navbar-content {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 24px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.logo {
+  font-size: 24px;
+  font-weight: bold;
+  letter-spacing: -0.025em;
+  color: white;
+  text-decoration: none;
+}
+
+.desktop-nav {
+  display: none;
+}
+
+@media (min-width: 768px) {
+  .desktop-nav {
+    display: flex;
+    align-items: center;
+    gap: 32px;
+  }
+}
+
+.nav-link {
+  font-size: 14px;
+  font-weight: 500;
+  color: rgb(209, 213, 219);
+  text-decoration: none;
+  transition: color 0.2s;
+}
+
+.nav-link:hover {
+  color: white;
+}
+
+.nav-actions {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.start-button {
+  display: none;
+}
+
+@media (min-width: 768px) {
+  .start-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 8px 20px;
+    font-size: 14px;
+    font-weight: 600;
+    color: black;
+    background-color: white;
+    border-radius: 9999px;
+    cursor: pointer;
+    transition: background-color 0.2s;
+  }
+  
+  .start-button:hover {
+    background-color: rgb(229, 231, 235);
+  }
+}
+
+.mobile-menu-toggle {
+  display: block;
+  color: white;
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+
+@media (min-width: 768px) {
+  .mobile-menu-toggle {
+    display: none;
+  }
+}
+
+.mobile-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  border-top: 1px solid rgb(31, 41, 55);
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+@media (min-width: 768px) {
+  .mobile-menu {
+    display: none;
+  }
+}
+
+.mobile-menu-link {
+  font-size: 18px;
+  font-weight: 500;
+  color: rgb(209, 213, 219);
+  text-decoration: none;
+}
+
+.mobile-menu-link:hover {
+  color: white;
+}
+
+.mobile-menu-button {
+  width: 100%;
+  text-align: center;
+  padding: 12px;
+  color: black;
+  background-color: white;
+  border-radius: 9999px;
+  font-weight: bold;
+  cursor: pointer;
+  border: none;
+}
+
+.hero-container {
+  position: relative;
+  height: 300vh;
+  width: 100%;
+}
+
+.hero-sticky {
+  position: sticky;
+  top: 0;
+  height: 100vh;
+  width: 100%;
+  overflow: hidden;
+}
+
+.hero-background {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.hero-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 8px;
+  width: 100%;
+  height: auto;
+  padding: 16px;
+}
+
+@media (min-width: 768px) {
+  .hero-grid {
+    grid-template-columns: repeat(5, 1fr);
+    gap: 12px;
+    padding: 16px;
+  }
+}
+
+.hero-grid-item {
+  position: relative;
+  padding-bottom: 177.78%;
+  background-color: rgba(17, 24, 39, 0.5);
+  border-radius: 12px;
+  overflow: hidden;
+  transition: transform 0.3s ease;
+}
+
+.hero-grid-item-main {
+  z-index: 20;
+}
+
+@media (min-width: 768px) {
+  .hero-grid-item {
+    padding-bottom: 100%;
+  }
+}
+
+.hero-grid-item-img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.hero-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 10;
+  pointer-events: none;
+}
+
+.hero-content {
+  position: absolute;
+  inset: 0;
+  z-index: 20;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+}
+
+.hero-content-inner {
+  pointer-events: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 16px;
+  width: 100%;
+  max-width: 1280px;
+  margin: 0 auto;
+}
+
+.hero-title {
+  font-size: 48px;
+  font-weight: bold;
+  color: white;
+  margin-bottom: 24px;
+  letter-spacing: -0.025em;
+}
+
+@media (min-width: 768px) {
+  .hero-title {
+    font-size: 64px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .hero-title {
+    font-size: 96px;
+  }
+}
+
+.hero-subtitle {
+  font-size: 20px;
+  color: rgb(229, 231, 235);
+  margin-bottom: 40px;
+  max-width: 672px;
+  font-weight: 300;
+}
+
+@media (min-width: 768px) {
+  .hero-subtitle {
+    font-size: 24px;
+  }
+}
+
+.hero-buttons {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+@media (min-width: 640px) {
+  .hero-buttons {
+    flex-direction: row;
+  }
+}
+
+.hero-button {
+  padding: 16px 36px;
+  border-radius: 9999px;
+  font-size: 18px;
+  font-weight: 600;
+  text-decoration: none;
+  transition: all 0.2s;
+}
+
+.hero-button-outline {
+  border: 1px solid rgba(255, 255, 255, 0.5);
+  background-color: rgba(0, 0, 0, 0.2);
+  color: white;
+}
+
+.hero-button-outline:hover {
+  background-color: white;
+  color: black;
+}
+
+.hero-button-solid {
+  background-color: white;
+  color: black;
+  box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
+  border: none;
+  cursor: pointer;
+}
+
+.hero-button-solid:hover {
+  background-color: rgb(229, 231, 235);
+}
+
+.section {
+  padding: 0;
+}
+
+.section-text-center {
+  text-align: center;
+}
+
+@media (min-width: 768px) {
+  .section {
+    padding: 96px 0;
+  }
+}
+
+.section-background-gradient {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 800px;
+  height: 500px;
+  background-color: rgba(17, 24, 39, 0.5);
+  filter: blur(120px);
+  border-radius: 9999px;
+  pointer-events: none;
+}
+
+.section-header {
+  text-align: center;
+  margin-bottom: 64px;
+}
+
+.section-title {
+  font-size: 36px;
+  font-weight: bold;
+  color: white;
+  margin-bottom: 16px;
+}
+
+@media (min-width: 768px) {
+  .section-title {
+    font-size: 48px;
+  }
+}
+
+.section-subtitle {
+  font-size: 18px;
+  color: rgb(156, 163, 175);
+}
+
+@media (min-width: 768px) {
+  .section-subtitle {
+    font-size: 20px;
+  }
+}
+
+.companionship-powered {
+  font-size: 24px;
+  background: linear-gradient(to right, rgb(192, 132, 252), rgb(244, 114, 182));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  font-weight: 600;
+  margin-bottom: 32px;
+}
+
+@media (min-width: 768px) {
+  .companionship-powered {
+    font-size: 28px;
+  }
+}
+
+.companionship-button {
+  pointer-events: auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px 32px;
+  font-size: 16px;
+  font-weight: bold;
+  color: white;
+  background-color: rgb(147, 51, 234);
+  border-radius: 9999px;
+  transition: transform 0.2s;
+  text-decoration: none;
+}
+
+.companionship-button:hover {
+  transform: scale(1.05);
+}
+
+.companionship-visual {
+  margin-top: 64px;
+  width: 100%;
+  max-width: 896px;
+  height: 256px;
+  border-radius: 24px;
+  overflow: hidden;
+  position: relative;
+}
+
+.companionship-visual-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  opacity: 0.9;
+  transition: opacity 0.5s;
+}
+
+.companionship-visual:hover .companionship-visual-img {
+  opacity: 1;
+}
+
+.section-community {
+  background: linear-gradient(to bottom, black, rgb(17, 24, 39));
+  border-bottom: 1px solid rgb(31, 41, 55);
+}
+
+.container-text-center {
+  text-align: center;
+}
+
+.community-title {
+  font-size: 36px;
+  font-weight: bold;
+  color: white;
+  margin-bottom: 32px;
+  letter-spacing: -0.025em;
+}
+
+@media (min-width: 768px) {
+  .community-title {
+    font-size: 48px;
+    margin-bottom: 48px;
+  }
+}
+
+.community-button {
+  display: inline-block;
+  padding: 16px 40px;
+  font-size: 18px;
+  font-weight: bold;
+  color: black;
+  background-color: white;
+  border-radius: 9999px;
+  text-decoration: none;
+  transition: transform 0.2s, background-color 0.2s;
+}
+
+.community-button:hover {
+  transform: scale(1.05);
+  background-color: rgb(243, 244, 246);
+}
+
+.section-companionship {
+  border-top: 1px solid rgb(17, 24, 39);
+}
+
+.container-companionship {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+.companionship-title {
+  font-size: 36px;
+  font-weight: bold;
+  margin-bottom: 24px;
+  color: white;
+}
+
+@media (min-width: 768px) {
+  .companionship-title {
+    font-size: 48px;
+  }
+}
+
+.companionship-subtitle {
+  font-size: 18px;
+  color: rgb(156, 163, 175);
+  max-width: 672px;
+  margin-bottom: 48px;
+  line-height: 1.75;
+}
+
+@media (min-width: 768px) {
+  .companionship-subtitle {
+    font-size: 20px;
+  }
+}
+
+.container-middle-text {
+  max-width: 768px;
+}
+
+.middle-text-content {
+  font-size: 16px;
+  color: rgb(156, 163, 175);
+  line-height: 1.75;
+}
+
+@media (min-width: 768px) {
+  .middle-text-content {
+    font-size: 18px;
+  }
+}
+
+.section-robot-cards {
+  overflow: hidden;
+}
+
+.section-features {
+  background-color: rgba(17, 24, 39, 0.3);
+}
+
+.section-engine {
+  text-align: center;
+}
+
+.container-engine {
+  text-align: center;
+}
+
+.engine-title {
+  font-size: 28px;
+  font-weight: bold;
+  color: white;
+  margin-bottom: 16px;
+}
+
+@media (min-width: 768px) {
+  .engine-title {
+    font-size: 30px;
+  }
+}
+
+.engine-subtitle {
+  font-size: 16px;
+  color: rgb(107, 114, 128);
+  margin-bottom: 48px;
+  max-width: 672px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+@media (min-width: 768px) {
+  .engine-subtitle {
+    font-size: 18px;
+    margin-bottom: 64px;
+  }
+}
+
+.companionship-visual-overlay {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: linear-gradient(to top, rgba(0,0,0,0.1), transparent, transparent);
+}
+
+.footer-logo-text {
+  font-size: 24px;
+  font-weight: bold;
+  letter-spacing: -0.025em;
+}
+
+.footer-social-link-text {
+  font-weight: bold;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  height: 20px;
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 24px;
+}
+
+.workflow-container {
+  position: relative;
+  width: 100%;
+  max-width: 1152px;
+  margin: 0 auto;
+  background-color: rgba(17, 24, 39, 0.4);
+  border: 1px solid rgb(31, 41, 55);
+  border-radius: 24px;
+  padding: 32px;
+}
+
+@media (min-width: 768px) {
+  .workflow-container {
+    padding: 48px;
+  }
+}
+
+.workflow-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 32px;
+}
+
+@media (min-width: 768px) {
+  .workflow-content {
+    flex-direction: row;
+    justify-content: space-between;
+    gap: 16px;
+  }
+}
+
+.workflow-inputs {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  width: 100%;
+}
+
+@media (min-width: 768px) {
+  .workflow-inputs {
+    width: auto;
+  }
+}
+
+.workflow-card {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  background-color: rgba(0, 0, 0, 0.8);
+  padding: 16px;
+  border-radius: 12px;
+  border: 1px solid rgb(31, 41, 55);
+  transition: border-color 0.2s;
+  width: 100%;
+}
+
+@media (min-width: 768px) {
+  .workflow-card {
+    width: 256px;
+  }
+}
+
+.workflow-card:hover {
+  border-color: rgb(75, 85, 99);
+}
+
+.workflow-card-highlight {
+  background: linear-gradient(to bottom, rgba(147, 51, 234, 0.2), rgba(59, 130, 246, 0.2));
+  border-color: rgba(147, 51, 234, 0.4);
+  width: 288px;
+  box-shadow: 0 0 30px rgba(147, 51, 234, 0.1);
+}
+
+.workflow-card-content {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.workflow-card-full {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.workflow-card-label {
+  display: block;
+  font-size: 14px;
+  font-weight: bold;
+  color: rgb(229, 231, 235);
+}
+
+.workflow-card-sublabel {
+  font-size: 12px;
+  color: rgb(107, 114, 128);
+}
+
+.workflow-card-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 8px;
+}
+
+.workflow-card-image {
+  width: 100%;
+  height: 136px;
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid rgb(55, 65, 81);
+  position: relative;
+}
+
+.workflow-card-image-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  opacity: 0.8;
+  transition: transform 0.5s;
+}
+
+.workflow-card-image:hover .workflow-card-image-img {
+  transform: scale(1.1);
+}
+
+.workflow-card-image-badge {
+  position: absolute;
+  bottom: 4px;
+  right: 4px;
+  background-color: rgba(0, 0, 0, 0.6);
+  padding: 4px;
+  border-radius: 4px;
+  font-size: 10px;
+  color: white;
+}
+
+.workflow-card-model {
+  width: 100%;
+  aspect-ratio: 1;
+  border-radius: 12px;
+  overflow: hidden;
+  border: 1px solid rgb(55, 65, 81);
+  position: relative;
+  background-color: rgb(17, 24, 39);
+}
+
+.workflow-card-model-highlight {
+  border-color: rgba(168, 85, 247, 0.3);
+}
+
+.workflow-card-model-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  opacity: 0.9;
+  transition: transform 0.5s;
+}
+
+.workflow-card-model:hover .workflow-card-model-img {
+  transform: scale(1.1);
+}
+
+.workflow-card-model-pattern {
+  position: absolute;
+  inset: 0;
+  background-image: url('https://www.transparenttextures.com/patterns/grid-me.png');
+  opacity: 0.3;
+  pointer-events: none;
+}
+
+.workflow-card-model-badge {
+  position: absolute;
+  bottom: 8px;
+  left: 8px;
+  background-color: rgba(20, 83, 45, 0.8);
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 10px;
+  color: rgb(187, 247, 208);
+  font-family: monospace;
+}
+
+.workflow-card-model-overlay {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(to top, rgba(147, 51, 234, 0.4), transparent);
+}
+
+.workflow-card-footer {
+  font-size: 12px;
+  color: rgb(107, 114, 128);
+  text-align: center;
+}
+
+.workflow-card-footer-highlight {
+  font-size: 12px;
+  color: rgb(216, 180, 254);
+  text-align: center;
+  font-weight: 500;
+}
+
+.workflow-card-label-highlight {
+  font-size: 14px;
+  font-weight: bold;
+  color: white;
+}
+
+.workflow-card-badge-icon {
+  color: rgb(250, 204, 21);
+  fill: rgb(250, 204, 21);
+  margin-left: auto;
+  animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+.workflow-icon {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background-color: rgb(31, 41, 55);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.workflow-icon-highlight {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background-color: rgb(147, 51, 234);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  box-shadow: 0 10px 15px -3px rgba(147, 51, 234, 0.5);
+}
+
+.workflow-arrow {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: rgb(75, 85, 99);
+}
+
+.workflow-arrow svg {
+  transform: rotate(90deg);
+}
+
+@media (min-width: 768px) {
+  .workflow-arrow svg {
+    transform: rotate(0deg);
+  }
+}
+
+.features-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 64px;
+}
+
+@media (min-width: 768px) {
+  .features-grid {
+    grid-template-columns: repeat(2, 1fr);
+    gap-x: 48px;
+    gap-y: 64px;
+  }
+}
+
+.feature-item {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 16px;
+}
+
+.feature-icon {
+  padding: 12px;
+  background-color: rgb(31, 41, 55);
+  border-radius: 12px;
+  margin-bottom: 8px;
+}
+
+.feature-icon-purple {
+  color: rgb(192, 132, 252);
+}
+
+.feature-icon-blue {
+  color: rgb(96, 165, 250);
+}
+
+.feature-icon-yellow {
+  color: rgb(250, 204, 21);
+}
+
+.feature-icon-red {
+  color: rgb(248, 113, 113);
+}
+
+.feature-title {
+  font-size: 24px;
+  font-weight: bold;
+  color: white;
+}
+
+.feature-desc {
+  color: rgb(156, 163, 175);
+  line-height: 1.75;
+  font-size: 18px;
+}
+
+.logos-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 16px;
+  max-width: 896px;
+  margin: 0 auto;
+}
+
+@media (min-width: 768px) {
+  .logos-grid {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
+.logo-item {
+  height: 96px;
+  background-color: rgb(17, 24, 39);
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid rgb(31, 41, 55);
+  transition: border-color 0.2s;
+}
+
+.logo-item:hover {
+  border-color: rgb(75, 85, 99);
+}
+
+.logo-text {
+  color: rgb(107, 114, 128);
+  font-weight: 600;
+  font-size: 14px;
+}
+
+.footer {
+  pointer-events: auto;
+  color: white;
+  padding: 64px 0;
+  border-top: 1px solid rgb(17, 24, 39);
+}
+
+.footer-content {
+  display: flex;
+  flex-direction: column;
+  gap: 48px;
+}
+
+@media (min-width: 768px) {
+  .footer-content {
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: flex-start;
+  }
+}
+
+.footer-links {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 48px;
+}
+
+@media (min-width: 768px) {
+  .footer-links {
+    gap: 96px;
+  }
+}
+
+.footer-column {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.footer-title {
+  font-weight: 600;
+  color: rgb(107, 114, 128);
+  font-size: 14px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.footer-link {
+  color: rgb(209, 213, 219);
+  text-decoration: none;
+  font-size: 14px;
+}
+
+.footer-link:hover {
+  color: white;
+}
+
+.footer-copyright {
+  margin-top: 64px;
+  padding-top: 32px;
+  border-top: 1px solid rgb(17, 24, 39);
+  text-align: center;
+  font-size: 14px;
+  color: rgb(75, 85, 99);
+}
+
+@media (min-width: 768px) {
+  .footer-copyright {
+    text-align: left;
+  }
+}
+
+.hidden {
+  display: none;
+}
+
+.md-block {
+  display: none;
+}
+
+@media (min-width: 768px) {
+  .md-block {
+    display: block;
+  }
+}
 </style>
diff --git a/apps/frontend/src/views/home/index.vue b/apps/frontend/src/views/home/index.vue
index a8bfd91..dc2a123 100644
--- a/apps/frontend/src/views/home/index.vue
+++ b/apps/frontend/src/views/home/index.vue
@@ -10,8 +10,9 @@
     <header 
       :class="[
         'fixed top-0 left-0 right-0 z-900 transition-all duration-300 pointer-events-auto',
-        isScrolled ? 'bg-black/90 backdrop-blur-md py-4' : 'bg-transparent py-6'
+        isScrolled ? 'bg-black/90 py-4' : 'bg-transparent py-6'
       ]"
+      :style="{ backdropFilter: isScrolled && supportsBackdropFilter ? 'blur(12px)' : 'none' }"
     >
       <div class="container mx-auto px-6 flex items-center justify-between">
         <!-- Logo -->
@@ -131,7 +132,7 @@
       <!-- Hero Section -->
       <div ref="containerRef" class="relative h-[300vh] w-full ">
         <!-- Sticky Container -->
-        <div class="sticky top-0 h-[100dvh] w-full overflow-hidden">
+        <div class="sticky top-0 h-[100vh] w-full overflow-hidden" :style="{ height: viewportHeight + 'px', position: supportsSticky ? 'sticky' : 'relative' }">
           
           <!-- Layer 1: Background Animation (Grid) -->
           <div class="absolute inset-0 flex items-center justify-center overflow-hidden">
@@ -218,7 +219,8 @@
                 <div class="flex flex-col sm:flex-row gap-5">
                   <a 
                     href="https://deotaland.com" 
-                    class="px-9 py-4 rounded-full border border-white/50 bg-black/20 backdrop-blur-sm text-white font-semibold hover:bg-white hover:text-black transition-all text-lg"
+                    class="px-9 py-4 rounded-full border border-white/50 bg-black/20 text-white font-semibold hover:bg-white hover:text-black transition-all text-lg"
+                    :style="{ backdropFilter: supportsBackdropFilter ? 'blur(4px)' : 'none' }"
                   >
                     {{ t('hero.explore') }}
                   </a>
@@ -255,7 +257,9 @@
 </MotionCom>
 <MotionCom>
           <!-- Workflow Visualization Container -->
-          <div class="relative w-full max-w-6xl mx-auto bg-gray-900/40 border border-gray-800 rounded-3xl p-8 md:p-12 backdrop-blur-sm">
+          <div class="relative w-full max-w-6xl mx-auto bg-gray-900/40 border border-gray-800 rounded-3xl p-8 md:p-12"
+              :style="{ backdropFilter: supportsBackdropFilter ? 'blur(4px)' : 'none' }"
+          >
               
               <!-- Responsive Flex Layout: Stack on mobile, Row on desktop -->
               <div class="flex flex-col md:flex-row items-center justify-between gap-8 md:gap-4">
@@ -551,8 +555,7 @@ import MotionCom from './motion.vue'
 import spline from './spline.vue';
 import { ref, onMounted, onUnmounted, computed } from 'vue';
 import Bg from './bg.vue'
-// import dog from '@/assets/home/dog.webp'
-// import qdog from '@/assets/home/qdog.webp'
+
 const center = 'https://draft-user.s3.us-east-2.amazonaws.com/images/c175585a-20c2-48b3-8939-32bbdb25814b.webp'
 const center1 = 'https://draft-user.s3.us-east-2.amazonaws.com/images/ecf39871-52c5-45ad-9f9e-6eafd838ce54.webp'
 const center2 = 'https://draft-user.s3.us-east-2.amazonaws.com/images/f7c4454e-1781-448e-9c70-b087b64f380e.webp'
@@ -563,18 +566,25 @@ const center6 = 'https://draft-user.s3.us-east-2.amazonaws.com/images/de3cc66c-9
 const center7 = 'https://draft-user.s3.us-east-2.amazonaws.com/images/bc62a209-9a54-4d1e-926a-b3ef66fdbd29.webp'
 const center8 = 'https://draft-user.s3.us-east-2.amazonaws.com/images/9e012193-5576-4a9e-9f38-eecb8705d8a4.webp'
 const center9 = 'https://draft-user.s3.us-east-2.amazonaws.com/images/65bb1613-0ff9-43c4-a5b9-978c2507ca91.webp'
-// Window size reactive state
-const getResponsiveWidthStyle = () => {
-  const isMobile = window.innerWidth < 768;
-  return {
-    position: 'fixed',
-    width: isMobile ? '300vw' : '100vw',
-    left: '50%',
-    top: '50%',
-    transform: 'translate(-50%, -50%)'
-  };
-};
+
+const viewportHeight = ref(window.innerHeight);
 const isMobile = ref(window.innerWidth < 768);
+
+const supportsSticky = ref(true);
+const supportsBackdropFilter = ref(true);
+
+const checkStickySupport = () => {
+  const testEl = document.createElement('div');
+  testEl.style.position = 'sticky';
+  testEl.style.top = '0';
+  supportsSticky.value = testEl.style.position === 'sticky';
+};
+
+const checkBackdropFilterSupport = () => {
+  const testEl = document.createElement('div');
+  testEl.style.backdropFilter = 'blur(10px)';
+  supportsBackdropFilter.value = testEl.style.backdropFilter !== '';
+};
 // 中英文库
 const i18n = {
   en: {
@@ -729,17 +739,14 @@ const scrollYProgress = ref(0);
 
 // Scroll event handler
 const handleScroll = () => {
-  // isScrolled.value = window.scrollY > 50;
-  isScrolled.value = false;
+  isScrolled.value = window.scrollY > 50;
   
-  // Calculate scroll progress for hero section
   if (containerRef.value) {
     const viewportHeight = window.innerHeight;
     const scrollPosition = window.scrollY;
     const containerTop = containerRef.value.offsetTop;
     const containerHeight = containerRef.value.offsetHeight;
     
-    // Calculate progress from 0 to 1 as we scroll through the container
     const progress = Math.max(0, Math.min(1, 
       (scrollPosition - containerTop + viewportHeight) / 
       (containerHeight + viewportHeight)
@@ -749,6 +756,12 @@ const handleScroll = () => {
   }
 };
 
+// Handle window resize
+const handleResize = () => {
+  viewportHeight.value = window.innerHeight;
+  isMobile.value = window.innerWidth < 768;
+};
+
 // Scroll to top function
 const scrollToTop = () => {
   window.scrollTo({ top: 0, behavior: 'smooth' });
@@ -789,13 +802,16 @@ const logos = [
 
 // Mount and unmount scroll event
 onMounted(() => {
+  checkStickySupport();
+  checkBackdropFilterSupport();
   window.addEventListener('scroll', handleScroll);
-  // Initial call to set initial state
+  window.addEventListener('resize', handleResize);
   handleScroll();
 });
 
 onUnmounted(() => {
   window.removeEventListener('scroll', handleScroll);
+  window.removeEventListener('resize', handleResize);
 });
 </script>
 
diff --git a/apps/frontend/src/views/kefuReduce.vue b/apps/frontend/src/views/kefuReduce.vue
index 96d67c5..80d30ae 100644
--- a/apps/frontend/src/views/kefuReduce.vue
+++ b/apps/frontend/src/views/kefuReduce.vue
@@ -54,7 +54,7 @@ const detectEnvironment = async () => {
     })
     environmentInfo.value = result
     isDetecting.value = false
-    if (result.isDomestic) {
+    if (result.isDomestic) {//如果是国内环境
       handleDomesticRedirect()
     } else {
       handleInternationalRedirect()
diff --git a/apps/frontend/src/views/user/index.vue b/apps/frontend/src/views/user/index.vue
index 4f58879..064324e 100644
--- a/apps/frontend/src/views/user/index.vue
+++ b/apps/frontend/src/views/user/index.vue
@@ -50,7 +50,6 @@
     <div class="points-section" >
       <h2>{{ $t('userCenter.points.title') }}</h2>
       <!-- 积分明细和规则并排容器 -->
-      
       <div class="points-content-container">
         <div  class="points-list">
           <div class="total-points">
@@ -121,33 +120,10 @@
       </div>
        </div>
     <!-- 优惠券区域 -->
-    <div class="voucher-section">
+    <div class="voucher-section" v-if="userData.voucherList.length > 0">
       <h2>{{ $t('userCenter.voucher.title') }}</h2>
-      
-      <!-- 优惠券数量统计 -->
-      <!-- <div class="voucher-count-container">
-        <div class="voucher-count-stats">
-          <div class="count-item">
-            <span class="count-label">{{ $t('userCenter.voucher.availableCount') }}</span>
-            <span class="count-value available">{{ userData.voucherCount.availableCount }}</span>
-          </div>
-          <div class="count-item">
-            <span class="count-label">{{ $t('userCenter.voucher.usedCount') }}</span>
-            <span class="count-value used">{{ userData.voucherCount.usedCount }}</span>
-          </div>
-          <div class="count-item">
-            <span class="count-label">{{ $t('userCenter.voucher.expiredCount') }}</span>
-            <span class="count-value expired">{{ userData.voucherCount.expiredCount }}</span>
-          </div>
-          <div class="count-item">
-            <span class="count-label">{{ $t('userCenter.voucher.totalCount') }}</span>
-            <span class="count-value total">{{ userData.voucherCount.totalCount }}</span>
-          </div>
-        </div>
-      </div> -->
-      
       <!-- 优惠券列表 -->
-      <div class="voucher-list-container">
+      <div class="voucher-list-container" >
         <div v-if="loading" class="loading-container">
           <el-skeleton :rows="3" animated />
         </div>
diff --git a/dockerfile b/dockerfile
new file mode 100644
index 0000000..21795a0
--- /dev/null
+++ b/dockerfile
@@ -0,0 +1,10 @@
+# Dockerfile.simple
+FROM node:20-alpine
+
+WORKDIR /dist
+
+COPY . .
+RUN npm install && npm run build
+
+# 挂载点提示
+CMD ["echo", "Dist files are ready in /build/dist"]
\ No newline at end of file
diff --git a/hosts b/hosts
new file mode 100644
index 0000000..dc865e4
--- /dev/null
+++ b/hosts
@@ -0,0 +1,26 @@
+# Copyright (c) 1993-2009 Microsoft Corp.
+#
+# This is a sample HOSTS file used by Microsoft TCP/IP for Windows.
+#
+# This file contains the mappings of IP addresses to host names. Each
+# entry should be kept on an individual line. The IP address should
+# be placed in the first column followed by the corresponding host name.
+# The IP address and the host name should be separated by at least one
+# space.
+#
+# Additionally, comments (such as these) may be inserted on individual
+# lines or following the machine name denoted by a '#' symbol.
+#
+# For example:
+#
+#      102.54.94.97     rhino.acme.com          # source server
+#       38.25.63.10     x.acme.com              # x client host
+
+# localhost name resolution is handled within DNS itself.
+#	127.0.0.1       localhost
+#	::1             localhost
+
+192.168.0.190 admin.deotaland.local 
+192.168.0.190 www.deotaland.local 
+192.168.0.190 api.deotaland.local 
+192.168.0.190 git.deotaland.local 
\ No newline at end of file
diff --git a/packages/utils/src/api/frontend/login.js b/packages/utils/src/api/frontend/login.js
index 10decb0..9585afe 100644
--- a/packages/utils/src/api/frontend/login.js
+++ b/packages/utils/src/api/frontend/login.js
@@ -6,5 +6,11 @@ const login = {
     OAUTH_GOOGLE:{url:'/api-base/user/oauth/google',method:'POST',isLoading:true},// google弹窗授权
     FORGOT_PASSWORD:{url:'/api-base/user/forgot-password',method:'POST',isLoading:true},// 修改密码
     REFRESH_TOKEN:{url:'/api-base/user/oauth/google/refresh',method:'POST'},// googleRefreshToken刷新
+    SEND_SMS_CODE:{url:'/api-base/user/send-sms-code',method:'POST'},// 发送短信验证码
+    REGISTER_PHONE:{url:'/api-base/user/register-phone',method:'POST'},// 使用手机号和短信验证码注册新账号
+    LOGIN_PHONE:{url:'/api-base/user/login-phone',method:'POST'},// 使用手机号和密码登录
+    RESET_PASSWORD_PHONE:{url:'/api-base/user/reset-password-phone',method:'POST'},// 使用手机号和短信验证码重置密码
+    LOGIN_PHONE_CODE:{url:'/api-base/user/login-phone-code',method:'POST'},// 使用手机号和短信验证码登录
+    
 }
 export default login;