From b4c99eed58dfcf59d5767d0f208d91f3239bb4bd Mon Sep 17 00:00:00 2001
From: Germey <cqc@cuiqingcai.com>
Date: Tue, 16 Jul 2024 21:38:18 +0800
Subject: [PATCH] Add index page (#84)

Co-authored-by: AceDataCloud <office@acedata.cloud>
Co-authored-by: Germey <germey@acedata.cloud>
---
 ...-9b201727-136c-438a-a9b5-70f0da4a1541.json |   7 +
 index.html                                    |   2 +-
 src/assets/images/avatar.png                  | Bin 0 -> 2290 bytes
 src/assets/scss/_common.scss                  |   1 +
 src/components/common/BottomFooter.vue        |  35 +-
 src/components/common/DarkSelector.vue        |   1 -
 src/components/common/DarkSelector2.vue       |  67 +++
 src/components/common/TopHeader.vue           | 193 +++++++
 src/i18n/index.ts                             |   1 +
 src/i18n/zh-CN/common.json                    |  56 ++
 src/i18n/zh-CN/index.json                     |  94 ++++
 src/layouts/Index.vue                         |  46 ++
 src/pages/index/Index.vue                     | 493 ++++++++++++++++++
 src/router/index.ts                           |  12 +-
 14 files changed, 989 insertions(+), 19 deletions(-)
 create mode 100644 change/@acedatacloud-nexior-9b201727-136c-438a-a9b5-70f0da4a1541.json
 create mode 100644 src/assets/images/avatar.png
 create mode 100644 src/components/common/DarkSelector2.vue
 create mode 100644 src/components/common/TopHeader.vue
 create mode 100644 src/i18n/zh-CN/index.json
 create mode 100644 src/layouts/Index.vue
 create mode 100644 src/pages/index/Index.vue

diff --git a/change/@acedatacloud-nexior-9b201727-136c-438a-a9b5-70f0da4a1541.json b/change/@acedatacloud-nexior-9b201727-136c-438a-a9b5-70f0da4a1541.json
new file mode 100644
index 00000000..8126a2b9
--- /dev/null
+++ b/change/@acedatacloud-nexior-9b201727-136c-438a-a9b5-70f0da4a1541.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "add index page",
+  "packageName": "@acedatacloud/nexior",
+  "email": "office@acedata.cloud",
+  "dependentChangeType": "patch"
+}
diff --git a/index.html b/index.html
index fd19f624..abdaa3bc 100644
--- a/index.html
+++ b/index.html
@@ -37,7 +37,7 @@
       width: 13.33333px;
       height: 13.33333px;
       border-radius: 50%;
-      background: currentColor;
+      background-color: #277186;
       animation-timing-function: cubic-bezier(0, 1, 1, 0);
     }
     .lds-ellipsis div:nth-child(1) {
diff --git a/src/assets/images/avatar.png b/src/assets/images/avatar.png
new file mode 100644
index 0000000000000000000000000000000000000000..ebe2052ee627ffe10fccb2c5e91d154e987d68d4
GIT binary patch
literal 2290
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
M07*qoM6N<$f`X-Ei~s-t

literal 0
HcmV?d00001

diff --git a/src/assets/scss/_common.scss b/src/assets/scss/_common.scss
index 3328a91c..2e55dec9 100644
--- a/src/assets/scss/_common.scss
+++ b/src/assets/scss/_common.scss
@@ -26,6 +26,7 @@ html.dark,
 #app {
   width: 100%;
   height: 100%;
+  overflow: auto;
 
   .el-main {
     padding: 0 !important;
diff --git a/src/components/common/BottomFooter.vue b/src/components/common/BottomFooter.vue
index 33141c6d..b00da5ae 100644
--- a/src/components/common/BottomFooter.vue
+++ b/src/components/common/BottomFooter.vue
@@ -1,17 +1,13 @@
 <template>
-  <el-container id="footer" class="footer pt-7">
+  <el-container id="footer" class="footer">
     <el-row class="w-full">
       <el-col class="container" :span="18" :offset="3">
         <el-row>
-          <el-col :span="12" :offset="6" class="p-t text-center">
+          <el-col :span="24" class="text-center">
             <p>
-              <span
-                ><a href="https://acedata.cloud">{{ $t('common.entity.website') }}</a> © {{ new Date().getFullYear() }}
-                {{ $t('common.entity.copyright') }}
-              </span>
-              <span class="ml-2">
-                <a href="https://beian.miit.gov.cn/">京ICP备18021371号-2 </a>
-              </span>
+              <a href="https://platform.acedata.cloud">{{ $t('common.entity.website') }}</a> ©
+              {{ new Date().getFullYear() }}
+              {{ $t('common.entity.copyright') }}
             </p>
           </el-col>
         </el-row>
@@ -39,11 +35,24 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss">
-$height: 80px;
+<style lang="scss" scoped>
+.container {
+  margin: auto;
+  max-width: 1200px;
+  padding: 30px 0 20px 0;
+}
+
 .footer {
-  height: $height;
-  background: radial-gradient(circle at 0 2%, #111827, #1a125d 99%);
+  background-color: var(--el-color-primary);
   color: white;
+  padding: 0;
+  .title {
+    font-size: 1.2rem;
+    font-weight: 400;
+  }
+  a {
+    text-decoration: none;
+    color: white;
+  }
 }
 </style>
diff --git a/src/components/common/DarkSelector.vue b/src/components/common/DarkSelector.vue
index ca4bd49e..9db2d62b 100644
--- a/src/components/common/DarkSelector.vue
+++ b/src/components/common/DarkSelector.vue
@@ -62,7 +62,6 @@ export default defineComponent({
 
 <style lang="scss">
 .switch {
-  margin-top: 2px;
   --n-rail-color-active: var(--el-color-primary) !important;
   --n-loading-color: var(--el-color-primary) !important;
   border-radius: 10px !important;
diff --git a/src/components/common/DarkSelector2.vue b/src/components/common/DarkSelector2.vue
new file mode 100644
index 00000000..96521145
--- /dev/null
+++ b/src/components/common/DarkSelector2.vue
@@ -0,0 +1,67 @@
+<template>
+  <dark-switch class="switch" dark-background="#333" light-background="#fff" />
+</template>
+
+<script lang="ts">
+import { getDomain } from '@/utils';
+import { getCookie, setCookie } from 'typescript-cookie';
+import { defineComponent } from 'vue';
+import { Switch as DarkSwitch, toggleDark, isDark } from 'vue-dark-switch';
+
+export default defineComponent({
+  components: {
+    DarkSwitch
+  },
+  emits: ['update:dark'],
+  computed: {
+    dark() {
+      return getCookie('THEME') === 'dark';
+    },
+    switchValue() {
+      return isDark.value;
+    }
+  },
+  watch: {
+    switchValue(val) {
+      console.log('switchValue', val);
+      this.setCookie(val);
+    },
+    dark(val) {
+      document.documentElement.classList.toggle('dark', val);
+      this.setCookie(this.dark);
+    }
+  },
+  mounted() {
+    console.log('dark selector mounted');
+    if (this.dark) {
+      toggleDark(true);
+      document.documentElement.classList.add('dark');
+    } else {
+      toggleDark(false);
+      document.documentElement.classList.remove('dark');
+    }
+  },
+  methods: {
+    setCookie(isDark: boolean) {
+      setCookie('THEME', isDark ? 'dark' : 'light', {
+        path: '/',
+        domain: getDomain()
+      });
+    }
+  }
+});
+</script>
+
+<style lang="scss">
+.switch {
+  --n-rail-color-active: var(--el-color-primary) !important;
+  --n-loading-color: var(--el-color-primary) !important;
+  border-radius: 10px !important;
+  border: 1px solid var(--el-border-color);
+  overflow: hidden;
+  .n-switch__button {
+    border-radius: 50% !important;
+    box-shadow: none !important;
+  }
+}
+</style>
diff --git a/src/components/common/TopHeader.vue b/src/components/common/TopHeader.vue
new file mode 100644
index 00000000..0dafea00
--- /dev/null
+++ b/src/components/common/TopHeader.vue
@@ -0,0 +1,193 @@
+<template>
+  <el-row class="header">
+    <el-col :md="4" :xs="24">
+      <logo @click="onHome" />
+    </el-col>
+    <el-col :md="16" :xs="13">
+      <el-menu :default-active="active" class="el-menu-demo" mode="horizontal" :ellipsis="false" @select="onSelect">
+        <el-menu-item v-if="site?.features?.chat?.enabled" v-t="'index.title.chat'" index="/chat"></el-menu-item>
+        <el-menu-item
+          v-if="site?.features?.midjourney?.enabled"
+          v-t="'index.title.midjourney'"
+          index="/midjourney"
+        ></el-menu-item>
+        <el-menu-item v-if="site?.features?.qrart?.enabled" v-t="'index.title.qrart'" index="/qrart"></el-menu-item>
+      </el-menu>
+    </el-col>
+    <el-col :md="4" :xs="11">
+      <div v-if="!authenticated" class="mt-4 pr-10">
+        <el-button type="primary" class="float-right" size="small" round @click="onLogin">{{
+          $t('common.button.login')
+        }}</el-button>
+        <dark-selector class="float-right mr-4" />
+      </div>
+      <div v-else class="float-right">
+        <dark-selector />
+        <div class="console" @click="onConsole">
+          {{ $t('common.button.console') }}
+        </div>
+        <el-dropdown trigger="click">
+          <img :src="user?.avatar || defaultAvatar" class="avatar" />
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item @click="onProfile">{{ $t('common.button.profile') }}</el-dropdown-item>
+              <el-dropdown-item @click="onLogout">{{ $t('common.button.logout') }}</el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+      </div>
+    </el-col>
+  </el-row>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import defaultAvatar from '@/assets/images/avatar.png';
+import { getBaseUrlAuth } from '@/utils';
+import { ROUTE_AUTH_LOGIN, ROUTE_CONSOLE_ROOT, ROUTE_INDEX } from '@/router';
+import { ElCol, ElRow, ElDropdown, ElMenu, ElMenuItem, ElDropdownItem, ElButton } from 'element-plus';
+import DarkSelector from './DarkSelector2.vue';
+import Logo from './Logo.vue';
+
+export default defineComponent({
+  name: 'TopHeader',
+  components: {
+    ElCol,
+    Logo,
+    ElRow,
+    DarkSelector,
+    ElDropdown,
+    ElMenu,
+    ElMenuItem,
+    ElDropdownItem,
+    ElButton
+  },
+  data() {
+    return {
+      defaultAvatar
+    };
+  },
+  computed: {
+    site() {
+      return this.$store.state.site;
+    },
+    dark() {
+      return this.$store.getters.dark;
+    },
+    active() {
+      return this.$route.matched[0].path;
+    },
+    user() {
+      return this.$store.getters.user;
+    },
+    authenticated() {
+      return this.$store.getters.authenticated;
+    }
+  },
+  methods: {
+    onSelect(val: string) {
+      this.$router.push(val);
+    },
+    onHome() {
+      this.$router.push({
+        name: ROUTE_INDEX
+      });
+    },
+    onLogin() {
+      this.$router.push({
+        name: ROUTE_AUTH_LOGIN
+      });
+    },
+    onProfile() {
+      const baseUrlAuth = getBaseUrlAuth();
+      window.open(`${baseUrlAuth}/user/profile`, '_blank');
+    },
+    onVerify() {
+      const baseUrlAuth = getBaseUrlAuth();
+      window.open(`${baseUrlAuth}/user/verify`, '_blank');
+    },
+    onConsole() {
+      this.$router.push({
+        name: ROUTE_CONSOLE_ROOT
+      });
+    },
+    async onLogout() {
+      await this.$store.dispatch('resetToken');
+      await this.$store.dispatch('resetUser');
+      const url = window.location.href;
+      const baseUrlAuth = getBaseUrlAuth();
+      const redirectUrl = `${baseUrlAuth}/auth/logout?redirect=${url}`;
+      window.location.href = redirectUrl;
+    }
+  }
+});
+</script>
+
+<style lang="scss">
+$height: 60px;
+.header {
+  z-index: 999;
+  width: 100%;
+  background: var(--el-bg-color);
+
+  .logo {
+    height: 40px;
+    width: 120px;
+    cursor: pointer;
+    margin-top: 8px;
+    margin-right: 20px;
+    float: right;
+  }
+
+  .el-menu {
+    --el-menu-hover-bg-color: var(--el-bg-color);
+    --el-menu-active-color: var(--el-color-primary);
+    background: none;
+    border: none;
+    height: $height;
+    .el-menu-item {
+      height: $height;
+      color: inherit !important;
+      &.is-active {
+        color: inherit !important;
+        border-bottom: 2px solid var(--el-color-primary);
+      }
+      &:hover {
+        border-bottom: 2px solid var(--el-color-primary);
+      }
+    }
+  }
+
+  .avatar {
+    height: 40px;
+    border-radius: 50%;
+    cursor: pointer;
+    margin-top: 10px;
+    margin-right: 20px;
+    margin-left: 10px;
+  }
+  .console {
+    color: inherit !important;
+    height: 60px;
+    line-height: 60px;
+    margin: 0 10px;
+    font-size: 14px;
+    display: inline-block;
+    cursor: pointer;
+  }
+  .locale {
+    cursor: pointer;
+    display: inline-block;
+  }
+}
+@media only screen and (max-width: 768px) {
+  .header {
+    .logo {
+      margin-left: auto;
+      margin-right: auto;
+      float: initial;
+      display: block;
+    }
+  }
+}
+</style>
diff --git a/src/i18n/index.ts b/src/i18n/index.ts
index 792b25e5..db6c8f8d 100644
--- a/src/i18n/index.ts
+++ b/src/i18n/index.ts
@@ -67,6 +67,7 @@ export const getLocale = (lang?: string): string => {
 
 export const loadLocaleMessages = async (i18n: I18n, locale: string) => {
   const names = [
+    'index',
     'api',
     'application',
     'qrart',
diff --git a/src/i18n/zh-CN/common.json b/src/i18n/zh-CN/common.json
index c0440814..383a11c1 100644
--- a/src/i18n/zh-CN/common.json
+++ b/src/i18n/zh-CN/common.json
@@ -354,5 +354,61 @@
   "title.allCredentials": {
     "message": "凭证",
     "description": "显示所有凭证的页面标题，这些凭证用于访问API"
+  },
+  "about.title1": {
+    "message": "联系我们",
+    "description": "显示联系信息的部分的标题"
+  },
+  "about.title2": {
+    "message": "资源",
+    "description": "显示链接的部分的标题"
+  },
+  "about.title3": {
+    "message": "链接",
+    "description": "显示支持信息的部分的标题"
+  },
+  "about.address": {
+    "message": "美国 德拉华州 密德尔敦 N Broad St, 201号办公室",
+    "description": "公司的地址"
+  },
+  "about.email": {
+    "message": "office@acedata.cloud",
+    "description": "公司的电子邮件"
+  },
+  "about.link1": {
+    "message": "服务",
+    "description": "服务页面的链接"
+  },
+  "about.link2": {
+    "message": "文档",
+    "description": "文档页面的链接"
+  },
+  "about.link3": {
+    "message": "控制台",
+    "description": "控制台页面的链接"
+  },
+  "about.link4": {
+    "message": "个人资料",
+    "description": "个人资料页面的链接"
+  },
+  "about.link5": {
+    "message": "中心",
+    "description": "中心页面的链接"
+  },
+  "about.link6": {
+    "message": "推荐收益",
+    "description": "推荐收益页面的链接"
+  },
+  "about.link7": {
+    "message": "支持",
+    "description": "支持页面的链接"
+  },
+  "about.link8": {
+    "message": "服务条款",
+    "description": "服务条款页面的链接"
+  },
+  "about.link9": {
+    "message": "隐私政策",
+    "description": "隐私政策页面的链接"
   }
 }
diff --git a/src/i18n/zh-CN/index.json b/src/i18n/zh-CN/index.json
new file mode 100644
index 00000000..2f121fed
--- /dev/null
+++ b/src/i18n/zh-CN/index.json
@@ -0,0 +1,94 @@
+{
+  "title.chat": {
+    "message": "AI 问答",
+    "description": "AI 问答章节标题"
+  },
+  "title.midjourney": {
+    "message": "AI 绘画",
+    "description": "AI绘画章节标题"
+  },
+  "title.qrart": {
+    "message": "AI 艺术二维码",
+    "description": "AI 艺术二维码章节标题"
+  },
+  "title.suno": {
+    "message": "AI 音乐",
+    "description": "AI 音乐章节标题"
+  },
+  "title.comments": {
+    "message": "客户评价",
+    "description": "客户评价章节标题"
+  },
+  "title.introduction": {
+    "message": "我们的服务",
+    "description": "站点简介"
+  },
+  "subtitle.banner": {
+    "message": "AI 赋能，全面提升你的生产力。",
+    "description": "站点副标题"
+  },
+  "subtitle.chat": {
+    "message": "支持多种问答模型，具备联网功能，能够识别图片、文件和视频等多种内容。",
+    "description": "AI 问答章节标题"
+  },
+  "subtitle.midjourney": {
+    "message": "对接最新的 Midjourney 模型，一键生成各种风格的图片和连续微调。",
+    "description": "AI绘画章节标题"
+  },
+  "subtitle.qrart": {
+    "message": "支持多种艺术二维码风格，允许上传已有二维码，轻松将其艺术化，打造独特的视觉效果。",
+    "description": "AI 艺术二维码章节标题"
+  },
+  "subtitle.suno": {
+    "message": "支持多种音乐风格，轻松生成你想要的音乐，并支持灵活的长度扩展选项。",
+    "description": "AI 音乐章节标题"
+  },
+  "subtitle.comments": {
+    "message": "我们很高兴能够帮助这些客户，他们对我们的服务给予了很高的评价。",
+    "description": "客户评价章节标题"
+  },
+  "subtitle.introduction": {
+    "message": "我们提供一站式的 AI 服务，包括问答、绘画、二维码、音乐等多种功能，满足你的多样化需求。",
+    "description": "站点简介"
+  },
+  "button.try": {
+    "message": "免费开始",
+    "description": "文字里面的内容"
+  },
+  "customers.name1": {
+    "message": "Frank",
+    "description": "客户的姓名"
+  },
+  "customers.job1": {
+    "message": "软件工程师",
+    "description": "客户的职位"
+  },
+  "customers.comment1": {
+    "message": "这种集成式的服务简直太方便了，我可以在一个平台使用多种 AI 各种工具，非常棒！",
+    "description": "客户的评论"
+  },
+  "customers.name2": {
+    "message": "Jacob",
+    "description": "客户的姓名"
+  },
+  "customers.job2": {
+    "message": "产品经理",
+    "description": "客户的职位"
+  },
+  "customers.comment2": {
+    "message": "平台非常好用，服务质量非常好，同时极大解放了我的生产力。",
+    "description": "客户的评论"
+  },
+  "customers.name3": {
+    "message": "Larry",
+    "description": "客户的姓名"
+  },
+  "customers.job3": {
+    "message": "设计师",
+    "description": "客户的职位"
+  },
+  "customers.comment3": {
+    "message": "AI 平台太多了，但这个真的易于使用，价格合理，希望它能变得更好！",
+    "description": "客户的评论"
+  }
+}
diff --git a/src/layouts/Index.vue b/src/layouts/Index.vue
new file mode 100644
index 00000000..5c0c035b
--- /dev/null
+++ b/src/layouts/Index.vue
@@ -0,0 +1,46 @@
+<template>
+  <el-container class="wrapper">
+    <el-header class="header">
+      <top-header />
+    </el-header>
+    <el-main class="main"> <router-view /> </el-main>
+    <el-footer class="footer">
+      <bottom-footer />
+    </el-footer>
+  </el-container>
+</template>
+
+<script lang="ts">
+import TopHeader from '@/components/common/TopHeader.vue';
+import BottomFooter from '@/components/common/BottomFooter.vue';
+import { ElContainer, ElMain, ElFooter, ElHeader } from 'element-plus';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'LayoutIndex',
+  components: {
+    TopHeader,
+    BottomFooter,
+    ElContainer,
+    ElMain,
+    ElFooter,
+    ElHeader
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.wrapper {
+  min-height: 100vh;
+}
+
+.header {
+  padding: 0;
+  height: initial;
+}
+
+.footer {
+  padding: 0;
+  height: initial;
+}
+</style>
diff --git a/src/pages/index/Index.vue b/src/pages/index/Index.vue
new file mode 100644
index 00000000..8bc8a9d6
--- /dev/null
+++ b/src/pages/index/Index.vue
@@ -0,0 +1,493 @@
+<template>
+  <div class="wrapper">
+    <div id="banner">
+      <div class="container">
+        <el-row>
+          <el-col :md="12" :xs="24" class="left">
+            <div class="info">
+              <h1 class="title">
+                {{ site?.title }}
+              </h1>
+              <h3 class="subtitle">
+                {{ $t('index.subtitle.banner') }}
+              </h3>
+              <div class="operations">
+                <el-button
+                  type="primary"
+                  round
+                  class="btn-apply"
+                  @click="
+                    $router.push({
+                      path: '/chat'
+                    })
+                  "
+                >
+                  {{ $t('common.button.startForFree') }}
+                </el-button>
+              </div>
+            </div>
+          </el-col>
+          <el-col :md="12" :xs="24" class="right">
+            <el-image src="https://cdn.acedata.cloud/illustration1.png" class="brand" />
+          </el-col>
+        </el-row>
+      </div>
+    </div>
+    <div id="introduction">
+      <div class="container">
+        <el-row class="mb-6">
+          <el-col :span="24">
+            <h2 class="title">
+              {{ $t('index.title.introduction') }}
+            </h2>
+            <h5 class="subtitle">
+              {{ $t('index.subtitle.introduction') }}
+            </h5>
+          </el-col>
+        </el-row>
+        <el-row :gutter="15">
+          <el-col
+            v-for="(capability, capabilityIndex) in capabilities"
+            :key="capabilityIndex"
+            :md="24 / capabilities.length"
+            :xs="24"
+            class="mb-4"
+          >
+            <el-card class="info text-center" shadow="hover">
+              <div class="icon-wrapper">
+                <font-awesome-icon :icon="capability.icon" class="icon" />
+              </div>
+              <h2 class="title">{{ capability.title }}</h2>
+              <p class="subtitle">{{ capability.subtitle }}</p>
+            </el-card>
+          </el-col>
+        </el-row>
+      </div>
+    </div>
+    <div id="chat" class="block">
+      <div class="container">
+        <el-row>
+          <el-col :md="16" :xs="24" class="preview">
+            <img src="https://cdn.acedata.cloud/axynds.png" class="image desktop" />
+            <img src="https://cdn.acedata.cloud/vds4i3.png" class="image mobile" />
+          </el-col>
+          <el-col :md="8" :xs="24" class="info">
+            <h2 class="title">{{ $t('index.title.chat') }}</h2>
+            <p class="subtitle">{{ $t('index.subtitle.chat') }}</p>
+            <el-button
+              type="primary"
+              round
+              class="btn-try"
+              @click="
+                $router.push({
+                  path: '/chat'
+                })
+              "
+            >
+              {{ $t('index.button.try') }}
+            </el-button>
+          </el-col>
+        </el-row>
+      </div>
+    </div>
+    <div id="midjourney" class="block">
+      <div class="container">
+        <el-row>
+          <el-col :md="8" :xs="24" class="info">
+            <h2 class="title">{{ $t('index.title.midjourney') }}</h2>
+            <p class="subtitle">{{ $t('index.subtitle.midjourney') }}</p>
+            <el-button
+              type="primary"
+              round
+              class="btn-try"
+              @click="
+                $router.push({
+                  path: '/midjourney'
+                })
+              "
+            >
+              {{ $t('index.button.try') }}
+            </el-button>
+          </el-col>
+          <el-col :md="16" :xs="24" class="preview">
+            <img src="https://cdn.acedata.cloud/uk86mz.png" class="image desktop" />
+            <img src="https://cdn.acedata.cloud/rvelwm.png" class="image mobile" />
+          </el-col>
+        </el-row>
+      </div>
+    </div>
+    <div
+      id="qrart"
+      class="block"
+      @click="
+        $router.push({
+          path: '/qrart'
+        })
+      "
+    >
+      <div class="container">
+        <el-row>
+          <el-col :md="16" :xs="24" class="preview">
+            <img src="https://cdn.acedata.cloud/gyogar.png" class="image desktop" />
+            <img src="https://cdn.acedata.cloud/5kunm0.png" class="image mobile" />
+          </el-col>
+          <el-col :md="8" :xs="24" class="info">
+            <h2 class="title">{{ $t('index.title.qrart') }}</h2>
+            <p class="subtitle">{{ $t('index.subtitle.qrart') }}</p>
+            <el-button type="primary" round class="btn-try">
+              {{ $t('index.button.try') }}
+            </el-button>
+          </el-col>
+        </el-row>
+      </div>
+    </div>
+    <div
+      v-if="false"
+      id="suno"
+      class="block"
+      @click="
+        $router.push({
+          path: '/suno'
+        })
+      "
+    >
+      <div class="container">
+        <el-row>
+          <el-col :md="8" :xs="24" class="info">
+            <h2 class="title">{{ $t('index.title.suno') }}</h2>
+            <p class="subtitle">{{ $t('index.subtitle.suno') }}</p>
+            <el-button type="primary" round class="btn-try">
+              {{ $t('index.button.try') }}
+            </el-button>
+          </el-col>
+          <el-col :md="16" :xs="24" class="preview">
+            <img class="image desktop" />
+            <img class="image mobile" />
+          </el-col>
+        </el-row>
+      </div>
+    </div>
+    <div id="comments">
+      <div class="container">
+        <el-row class="mb-6">
+          <el-col :span="24">
+            <h2 class="title">
+              {{ $t('index.title.comments') }}
+            </h2>
+            <h5 class="subtitle">
+              {{ $t('index.subtitle.comments') }}
+            </h5>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20" class="main">
+          <el-col v-for="(comment, commentIndex) in comments" :key="commentIndex" :md="8" :xs="24">
+            <el-card shadow="hover" class="service" :body-style="{ padding: 0 }">
+              <p class="content">
+                {{ comment.content }}
+              </p>
+              <div class="info">
+                <div class="left">
+                  <el-image class="avatar" :src="comment.avatar" />
+                </div>
+                <div class="right">
+                  <div class="name">{{ comment.name }}</div>
+                  <div class="job">
+                    {{ comment.job }}
+                  </div>
+                </div>
+              </div>
+            </el-card>
+          </el-col>
+        </el-row>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { ElButton, ElImage, ElRow, ElCol, ElCard } from 'element-plus';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+
+interface IData {
+  comments: any[];
+}
+
+export default defineComponent({
+  name: 'Index',
+  components: {
+    ElButton,
+    ElRow,
+    ElCol,
+    ElCard,
+    ElImage,
+    FontAwesomeIcon
+  },
+  data(): IData {
+    return {
+      comments: [
+        {
+          avatar: 'https://cdn.acedata.cloud/avatar1.png',
+          name: this.$t('index.customers.name1'),
+          job: this.$t('index.customers.job1'),
+          content: this.$t('index.customers.comment1')
+        },
+        {
+          avatar: 'https://cdn.acedata.cloud/avatar2.png',
+          name: this.$t('index.customers.name2'),
+          job: this.$t('index.customers.job2'),
+          content: this.$t('index.customers.comment2')
+        },
+        {
+          avatar: 'https://cdn.acedata.cloud/avatar3.png',
+          name: this.$t('index.customers.name3'),
+          job: this.$t('index.customers.job3'),
+          content: this.$t('index.customers.comment3')
+        }
+      ]
+    };
+  },
+  computed: {
+    site() {
+      return this.$store.state.site;
+    },
+    capabilities() {
+      return [
+        ...(this.site?.features?.chat?.enabled
+          ? [
+              {
+                title: this.$t('index.title.chat'),
+                subtitle: this.$t('index.subtitle.chat'),
+                icon: 'fa-regular fa-comment'
+              }
+            ]
+          : []),
+        ...(this.site?.features?.midjourney?.enabled
+          ? [
+              {
+                title: this.$t('index.title.midjourney'),
+                subtitle: this.$t('index.subtitle.midjourney'),
+                icon: 'fa-solid fa-palette'
+              }
+            ]
+          : []),
+        ...(this.site?.features?.qrart?.enabled
+          ? [
+              {
+                title: this.$t('index.title.qrart'),
+                subtitle: this.$t('index.subtitle.qrart'),
+                icon: 'fa-solid fa-qrcode'
+              }
+            ]
+          : [])
+      ];
+    }
+  },
+  mounted() {},
+  methods: {}
+});
+</script>
+
+<style lang="scss" scoped>
+.wrapper {
+  width: 100%;
+  background-color: var(--el-bg-color);
+  .title {
+    font-size: 40px;
+    text-align: center;
+    font-weight: bold;
+    color: var(--el-text-color-primary);
+  }
+  .subtitle {
+    font-size: 20px;
+    line-height: 40px;
+    text-align: center;
+    color: var(--el-text-color-secondary);
+  }
+}
+.container {
+  margin: auto;
+  max-width: 1200px;
+}
+
+.block {
+  padding: 150px 0;
+  .preview {
+    position: relative;
+    .image {
+      border-radius: 10px;
+      padding: 5px;
+      background-color: white;
+      box-shadow: var(--el-box-shadow-light);
+      &.desktop {
+        max-width: 100%;
+        max-height: 100%;
+      }
+      &.mobile {
+        width: 30%;
+        position: absolute;
+        right: -5%;
+        top: 10%;
+      }
+    }
+  }
+  .info {
+    padding: 20px 60px;
+    text-align: center;
+    .title {
+      font-size: 40px;
+      color: var(--el-text-color-primary);
+    }
+    .subtitle {
+      font-size: 24px;
+      color: var(--el-text-color-secondary);
+    }
+    .btn-try {
+      padding: 25px 62px;
+      font-size: 20px;
+      line-height: 20px;
+      font-weight: 700;
+      border-radius: 50px;
+    }
+  }
+}
+
+#banner {
+  padding: 100px 0;
+  .left {
+    .info {
+      @media (max-width: 767px) {
+        padding: 0 50px 0 50px;
+      }
+      h1.title {
+        font-size: 60px;
+        font-weight: bold;
+        margin-bottom: 50px;
+        text-align: left;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+        background-image: linear-gradient(90deg, #277186, #7752ff 40%, #5f98fa 60%, #44beff);
+      }
+      h3.subtitle {
+        font-size: 30px;
+        line-height: 40px;
+        margin-bottom: 70px;
+        text-align: left;
+        color: var(--el-text-color-primary);
+      }
+      .operations {
+        .btn-apply {
+          padding: 25px 62px;
+          font-size: 20px;
+          line-height: 20px;
+          font-weight: 700;
+          border-radius: 50px;
+        }
+      }
+    }
+  }
+
+  .right {
+    @media (max-width: 767px) {
+      padding: 50px 20px 0 20px;
+    }
+    .brand {
+      max-width: 100%;
+      height: auto;
+    }
+  }
+}
+
+#introduction {
+  padding: 100px 0;
+  @media (max-width: 767px) {
+    padding: 100px 20px;
+  }
+  .info {
+    .title {
+      font-size: 20px;
+    }
+    .subtitle {
+      font-size: 16px;
+      line-height: 30px;
+      color: var(--el-text-color-secondary);
+    }
+    .icon-wrapper {
+      background: var(--el-bg-color-page);
+      width: 50px;
+      height: 50px;
+      border-radius: 10px;
+      padding: 10px;
+      text-align: center;
+      line-height: 40px;
+      margin: 10px auto 20px auto;
+      .icon {
+        font-size: 25px;
+        color: var(--el-color-primary);
+      }
+    }
+  }
+}
+
+#introduction,
+#midjourney,
+#suno {
+  background: linear-gradient(90deg, #ebe7ff, #f2faff 53%, #e0f5fe);
+}
+
+.dark {
+  #introduction,
+  #midjourney,
+  #suno {
+    background-image: linear-gradient(270deg, #277186 0%, #330867 100%);
+  }
+}
+
+#comments {
+  padding: 100px 0;
+  background: var(--el-bg-color-page);
+
+  .main {
+    @media (max-width: 767px) {
+      padding: 0 50px 0 50px;
+    }
+  }
+  .el-card {
+    padding: 50px 40px;
+    @media (max-width: 767px) {
+      margin-bottom: 15px;
+    }
+    .content {
+      font-size: 16px;
+      line-height: 28px;
+      color: var(--el-text-color-secondary);
+      margin-bottom: 20px;
+    }
+
+    .info {
+      overflow: hidden;
+      .left,
+      .right {
+        float: left;
+      }
+      .avatar {
+        width: 60px;
+        height: 60px;
+        border-radius: 50%;
+        margin-right: 15px;
+        display: block;
+      }
+      .name {
+        font-size: 18px;
+        font-weight: bold;
+        margin-bottom: 5px;
+        color: var(--el-text-color-regular);
+      }
+      .job {
+        font-size: 16px;
+        color: var(--el-text-color-secondary);
+      }
+    }
+  }
+}
+</style>
diff --git a/src/router/index.ts b/src/router/index.ts
index 70f10510..8a1ec17d 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -16,10 +16,14 @@ import { getCookie } from 'typescript-cookie';
 const routes = [
   {
     path: '/',
-    name: ROUTE_INDEX,
-    redirect: {
-      name: ROUTE_CHAT_CONVERSATION_NEW
-    }
+    component: () => import('@/layouts/Index.vue'),
+    children: [
+      {
+        path: '',
+        name: ROUTE_INDEX,
+        component: () => import('@/pages/index/Index.vue')
+      }
+    ]
   },
   console,
   chatdoc,