diff --git a/web/package.json b/web/package.json
index c3151cb9..cb72be66 100644
--- a/web/package.json
+++ b/web/package.json
@@ -27,6 +27,7 @@
     "qrcode": "^1.5.3",
     "qs": "^6.11.1",
     "sortablejs": "^1.15.0",
+    "three": "^0.128.0",
     "v3-waterfall": "^1.2.1",
     "vant": "^4.5.0",
     "vue": "^3.2.13",
diff --git a/web/public/images/land_ocean_ice_cloud_2048.jpg b/web/public/images/land_ocean_ice_cloud_2048.jpg
new file mode 100644
index 00000000..d90ced72
Binary files /dev/null and b/web/public/images/land_ocean_ice_cloud_2048.jpg differ
diff --git a/web/src/components/FooterBar.vue b/web/src/components/FooterBar.vue
index 15165d69..a8b263e9 100644
--- a/web/src/components/FooterBar.vue
+++ b/web/src/components/FooterBar.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="container">
+  <div class="foot-container">
     <div class="footer">
       Powered by {{ author }} @
-      <el-link type="primary" href="https://github.com/yangjian102621/chatgpt-plus" target="_blank">
+      <el-link type="primary" href="https://github.com/yangjian102621/chatgpt-plus" target="_blank" style="--el-link-text-color:#ffffff">
         {{ title }} -
         {{ version }}
       </el-link>
@@ -19,7 +19,7 @@ const author = ref('极客学长')
 </script>
 
 <style scoped lang="stylus">
-.container {
+.foot-container {
   position: fixed;
   left: 0;
   bottom: 0;
diff --git a/web/src/router.js b/web/src/router.js
index b17f6c51..6537ac27 100644
--- a/web/src/router.js
+++ b/web/src/router.js
@@ -2,8 +2,14 @@ import {createRouter, createWebHistory} from "vue-router";
 
 const routes = [
     {
-        name: 'home',
+        name: 'Index',
         path: '/',
+        meta: {title: process.env.VUE_APP_TITLE},
+        component: () => import('@/views/Index.vue'),
+    },
+    {
+        name: 'home',
+        path: '/home',
         redirect: '/chat',
         meta: {title: '首页'},
         component: () => import('@/views/Home.vue'),
diff --git a/web/src/views/Index.vue b/web/src/views/Index.vue
new file mode 100644
index 00000000..3fc9bf6b
--- /dev/null
+++ b/web/src/views/Index.vue
@@ -0,0 +1,155 @@
+<template>
+  <div class="index-page" :style="{height: winHeight+'px'}">
+    <div class="content">
+      <h1>{{title}}</h1>
+      <p>{{slogan}}</p>
+      <button class="btn" @click="router.push('/chat')">立即使用</button>
+
+      <div id="animation-container"></div>
+    </div>
+
+    <div class="footer">
+      <footer-bar />
+    </div>
+  </div>
+</template>
+
+<script setup>
+
+import * as THREE from 'three';
+import {onMounted, ref} from "vue";
+import {useRouter} from "vue-router";
+import FooterBar from "@/components/FooterBar.vue";
+
+const router = useRouter()
+
+const title = ref("欢迎使用 Geek-AI 创作系统")
+const slogan = ref("我辈之人，先干为敬，陪您先把 AI 用起来")
+const size = window.innerHeight * 0.8
+const winHeight = window.innerHeight - 150
+
+onMounted(() => {
+  init()
+})
+
+const init = () => {
+  // 创建场景
+  // 创建场景
+  const scene = new THREE.Scene();
+
+  // 创建相机
+  const camera = new THREE.PerspectiveCamera(30, 1, 0.1, 1000);
+  camera.position.z = 3.88;
+
+  // 创建渲染器
+  const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+  renderer.setSize(size, size);
+  renderer.setClearColor(0x000000, 0);
+  const container = document.getElementById('animation-container');
+  container.appendChild(renderer.domElement);
+
+  // 加载地球纹理
+  const loader = new THREE.TextureLoader();
+  loader.load(
+      '/images/land_ocean_ice_cloud_2048.jpg',
+      function (texture) {
+        // 创建地球球体
+        const geometry = new THREE.SphereGeometry(1, 32, 32);
+        const material = new THREE.MeshPhongMaterial({
+          map: texture,
+          bumpMap: texture, // 使用同一张纹理作为凹凸贴图
+          bumpScale: 0.05, // 调整凹凸贴图的影响程度
+          specularMap: texture, // 高光贴图
+          specular: new THREE.Color('#007bff'), // 高光颜色
+        });
+        const earth = new THREE.Mesh(geometry, material);
+        scene.add(earth);
+
+        // 添加环境光和点光源
+        const ambientLight = new THREE.AmbientLight(0xffffff, 0.3);
+        scene.add(ambientLight);
+        const pointLight = new THREE.PointLight(0xffffff, 0.8);
+        pointLight.position.set(5, 5, 5);
+        scene.add(pointLight);
+
+        // 创建动画
+        const animate = function () {
+          requestAnimationFrame(animate);
+
+          // 使地球自转和公转
+          earth.rotation.y += 0.002;
+
+          renderer.render(scene, camera);
+        };
+
+        // 执行动画
+        animate();
+      }
+  );
+}
+</script>
+
+<style lang="stylus" scoped>
+.index-page {
+  margin: 0
+  background-color #007bff /* 科技蓝色背景 */
+  overflow hidden
+  color #ffffff
+  display flex
+  justify-content center
+  align-items baseline
+  padding-top 150px
+
+  .container {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #fff;
+  }
+  .content {
+    text-align: center;
+    position relative
+    h1 {
+      font-size: 5rem;
+      margin-bottom: 1rem;
+    }
+    p {
+      font-size: 1.5rem;
+      margin-bottom: 2rem;
+    }
+
+    .btn {
+      padding: 10px 20px;
+      background-color: #fff;
+      color: #007bff;
+      border: none;
+      border-radius: 5px;
+      font-size: 1.3rem;
+      cursor: pointer;
+      transition: all 0.3s ease;
+
+      &:hover {
+        background-color: #e6e6e6;
+      }
+    }
+
+    #animation-container {
+      display flex
+      justify-content center
+      width 100%
+      height: 300px;
+      position: absolute;
+      top: 350px
+
+    }
+  }
+
+  .footer {
+    .el-link__inner {
+      color #ffffff
+    }
+  }
+
+}
+</style>