Update homepage.

docs/.vuepress/components/CustomHero.vue

@@ -1,22 +1,12 @@
 <template>
   <div class="hero-section">
-    <img src="/hero_bg.png" alt="Background image" class="background-image" />
     <div class="hero-content">
-      <h1 class="hero-title">环信 IM 开发文档</h1>
-      <p class="hero-description">
-        12小时快速集成单聊、群聊、聊天室、推送系统通知等完备 IM 功能，全平台覆盖
+      <h1 class="hero-title">即时通讯IM</h1>
+      <p>
+        基于即时通讯（Instant Messaging, IM）的高可靠性、低延时、强扩展性及高并发特性，你可以轻松切入即时通讯领域，为你的产品带来卓越的沟通体验，从而快速增强用户粘性和市场竞争力。即时通讯IM解决方案支持丰富的消息类型、群组功能和跨平台体验，让你轻松构建满足不同场景需求的高效沟通平台，助力用户享受流畅便捷的交流方式。
       </p>
-      <div class="hero-actions" @click="openAi">
-        <div class="documentation-button">
-          <img
-            src="/aibot.png"
-            alt="Documentation icon"
-            class="documentation-icon"
-          />
-          <span>有集成问题？问环信文档AI助手</span>
-        </div>
-        <button class="go-button">Go</button>
-      </div>
+      <br />
+      <p>探索下面的综合文档，立即释放 IM 即时通讯的力量</p>
     </div>
   </div>
 </template>
@@ -31,8 +21,8 @@ export default defineComponent({
       if (chatbotBtn) {
         chatbotBtn.click();
       }
-    },
-  },
+    }
+  }
 });
 </script>
 
@@ -43,114 +33,24 @@ export default defineComponent({
   min-height: 220px;
   align-items: center;
   justify-content: center;
-}
-
-.background-image {
-  position: absolute;
-  inset: 0;
-  height: 100%;
-  width: 100%;
-  object-fit: cover;
-  object-position: center;
+  background: linear-gradient(to bottom, #e6f7ff, #fff);
 }
 
 .hero-content {
-  position: relative;
-  display: flex;
-  width: 640px;
-  max-width: 100%;
-  flex-direction: column;
-  align-items: center;
-}
-
-.hero-title {
-  margin: 0;
+  max-width: 1200px;
+  padding: 50px 20px;
   text-align: center;
-  background: linear-gradient(
-    98deg,
-    #73cdff -27.44%,
-    #0082fa 40.66%,
-    #1548ff 98.44%
-  );
-  background-clip: text;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  font: 600 32px PingFang SC, sans-serif;
-}
-
-.hero-description {
-  color: #666;
-  text-align: center;
-  align-self: stretch;
-  margin: 23px;
-  font: 400 16px PingFang SC, sans-serif;
-}
-
-@media (max-width: 991px) {
-  .hero-description {
-    max-width: 100%;
-  }
-}
-
-.hero-actions {
-  display: flex;
-  justify-content: center;
-  width: 388px;
-  max-width: 100%;
-  gap: 0;
-  white-space: nowrap;
-  cursor: pointer;
+  box-sizing: border-box;
 }
-
-@media (max-width: 991px) {
-  .hero-actions {
-    white-space: initial;
-  }
-}
-
-.documentation-button {
-  border-radius: 24px 0 0 24px;
-  background-color: #fff;
-  display: flex;
-  gap: 4px;
-  font-size: 16px;
-  color: #919ba1;
-  font-weight: 400;
-  line-height: 150%;
-  padding: 12px 16px;
-  border: none;
-}
-
-@media (max-width: 991px) {
-  .documentation-button {
-    white-space: initial;
-  }
-}
-
-.documentation-icon {
-  aspect-ratio: 1;
-  object-fit: auto;
-  object-position: center;
-  width: 24px;
-}
-
-.go-button {
-  justify-content: center;
-  align-items: start;
-  border-radius: 0 24px 24px 0;
-  background: linear-gradient(180deg, #009eff 0%, #6678ff 100%);
-  color: #f9fafa;
-  text-align: center;
-  padding: 12px 34px;
-  font: 500 18px/133% Roboto, sans-serif;
-  border: none;
-  cursor: pointer;
-}
-
-@media (max-width: 991px) {
-  .go-button {
-    padding-left: 20px;
-    white-space: initial;
-  }
+.hero-title {
+  font-size: 40px;
+  color: #000;
+  margin-bottom: 20px;
+  text-align: left;
+}
+.hero-content p {
+  font-size: 18px;
+  margin: 0 auto;
+  text-align: left;
 }
 </style>