docs: add ai assistant feature block in website

website/i18n/zh-Hans/code.json

@@ -17,7 +17,7 @@
   },
   "theme.ErrorPageContent.tryAgain": {
     "message": "重试",
-    "description": "The label of the button to try again when the page crashed"
+    "description": "The label of the button to try again rendering when the React error boundary captures an error"
   },
   "theme.NotFound.title": {
     "message": "找不到页面",
@@ -389,5 +389,20 @@
   },
   "Source Code": {
     "message": "源代码"
+  },
+  "AI": {
+    "message": "AI"
+  },
+  "AI Assistant": {
+    "message": "AI 智能助手"
+  },
+  "Thanks for ChatGPT, Communicate with people will be easier and friendly.": {
+    "message": "感谢 ChatGPT，人与人交流将更轻松、更友好."
+  },
+  "View in Bilibili": {
+    "message": "在 Bilibili 观看"
+  },
+  "Communicate by AI, AI Assistant will help you improve your word, simplify your expression and even summary history messages.": {
+    "message": "使用AI交流，AI 智能助手助你改善用词，简化表达，甚至汇总历史消息."
   }
 }

website/i18n/zh-Hans/docusaurus-theme-classic/navbar.json

@@ -18,5 +18,9 @@
   "item.label.Downloads": {
     "message": "下载",
     "description": "Navbar item with label Downloads"
+  },
+  "logo.alt": {
+    "message": "Tailchat Logo",
+    "description": "The alt text of navbar logo"
   }
 }

website/src/components/FeatureSection.less

@@ -114,7 +114,7 @@
         @media (min-width: 997px) {
           flex-direction: row;
 
-          &.reverse {
+          &:nth-child(odd) {
             flex-direction: row-reverse;
           }
         }

website/src/components/FeatureSection.tsx

@@ -3,7 +3,7 @@ import clsx from 'clsx';
 import React, { useEffect, useState } from 'react';
 import Head from '@docusaurus/Head';
 import Link from '@docusaurus/Link';
-import Translate from '@docusaurus/Translate';
+import Translate, { translate } from '@docusaurus/Translate';
 import { nightlyUrl } from '../utils/consts';
 import './FeatureSection.less';
 
@@ -59,6 +59,7 @@ export const FeatureSection: React.FC = React.memo(() => {
         <link rel="prefetch" href="/img/hero-light.png" as="image" />
         <link rel="prefetch" href="/img/hero-dark.png" as="image" />
         <link rel="preload" href="/img/intro/hello.png" as="image" />
+        <link rel="preload" href="/img/intro/ai.png" as="image" />
         <link rel="preload" href="/img/intro/plugins.png" as="image" />
         <link rel="preload" href="/img/intro/roles.png" as="image" />
         <link rel="preload" href="/img/intro/github-bot.png" as="image" />
@@ -72,6 +73,7 @@ export const FeatureSection: React.FC = React.memo(() => {
           <div className="right">
             <div className="right-body">
               <Pill id="messenger" label={<Translate>Messenger</Translate>} />
+              <Pill id="ai" label={<Translate>AI</Translate>} />
               <Pill id="plugin" label={<Translate>Plugin</Translate>} />
               <Pill id="roles" label={<Translate>Roles</Translate>} />
               <Pill id="bot" label={<Translate>Bot</Translate>} />
@@ -113,7 +115,39 @@ export const FeatureSection: React.FC = React.memo(() => {
             </div>
           </div>
 
-          <div className="item reverse" id="plugin">
+          <div className="item" id="ai">
+            <div className="left">
+              <h3>
+                <Translate>AI Assistant</Translate>
+              </h3>
+              <p>
+                <Translate>
+                  Communicate by AI, AI Assistant will help you improve your
+                  word, simplify your expression and even summary history
+                  messages.
+                </Translate>
+              </p>
+              <p>
+                <Translate>
+                  Thanks for ChatGPT, Communicate with people will be easier and
+                  friendly.
+                </Translate>
+              </p>
+              <div className="btns">
+                <Link
+                  className="button button--primary"
+                  to={'https://www.bilibili.com/video/BV1UP41127JS/'}
+                >
+                  {translate({ message: 'View in Bilibili' })}
+                </Link>
+              </div>
+            </div>
+            <div className="right">
+              <img data-zoomable src="/img/intro/ai.png" />
+            </div>
+          </div>
+
+          <div className="item" id="plugin">
             <div className="left">
               <h3>
                 <Translate>Plugin Center</Translate>
@@ -170,7 +204,7 @@ export const FeatureSection: React.FC = React.memo(() => {
             </div>
           </div>
 
-          <div className="item reverse" id="bot">
+          <div className="item" id="bot">
             <div className="left">
               <h3>
                 <Translate>Bot</Translate>