brand new homepage with i18n

docusaurus.config.ts

@@ -2,11 +2,20 @@ import {themes as prismThemes} from 'prism-react-renderer';
 import type {Config} from '@docusaurus/types';
 import type * as Preset from '@docusaurus/preset-classic';
 
-// This runs in Node.js - Don't use client-side code here (browser APIs, JSX...)
+// This rus in Node.js - Don't use client-side code here (browser APIs, JSX...)
 
 const config: Config = {
   title: "Open LLM Vtuber",
-  tagline: "Talk to LLM with Live2D",
+  tagline: "与你的专属 Live2D AI 虚拟伴侣进行实时语音互动",
+  customFields: {
+    thirdline: "支持所有主流大语言模型，跨平台运行",
+    showcaseImages: [
+      'img/i1.jpg',
+      'img/i2.jpg',
+      'img/i3.jpg',
+      'img/i4.jpg',
+    ],
+  },
   favicon: "img/favicon.ico",
 
   // Set the production url of your site here
@@ -31,18 +40,18 @@ const config: Config = {
     locales: ["zh-Hans", "en"],
     localeConfigs: {
       en: {
-        label: 'English',
-        direction: 'ltr',
-        htmlLang: 'en-US',
-        calendar: 'gregory',
-        path: 'en',
+        label: "English",
+        direction: "ltr",
+        htmlLang: "en-US",
+        calendar: "gregory",
+        path: "en",
       },
-      'zh-Hans': {
+      "zh-Hans": {
         label: "简体中文",
         direction: "ltr",
         htmlLang: "zh-CN",
         calendar: "gregory",
-        path: 'zh-Hans',
+        path: "zh-Hans",
       },
     },
   },

i18n/en/code.json

@@ -309,5 +309,65 @@
   "theme.tags.tagsPageTitle": {
     "message": "Tags",
     "description": "The title of the tag list page"
+  },
+  "features.deploy.title": {
+    "message": "Deploy your way",
+    "description": "Title of deploy feature"
+  },
+  "features.deploy.description": {
+    "message": "Run AI locally for privacy or use APIs for power with various ASR/TTS/LLM models. Easy to configure agent, persona and Live2D body.",
+    "description": "Description of deploy feature"
+  },
+  "features.run.title": {
+    "message": "Run Everywhere",
+    "description": "Title of run everywhere feature"
+  },
+  "features.run.description": {
+    "message": "Deploy on any platform (Windows/MacOS/Linux), support multiple concurrent sessions, and access from any device (PC/Mobile).",
+    "description": "Description of run everywhere feature"
+  },
+  "features.interact.title": {
+    "message": "Interact Diversely",
+    "description": "Title of interaction feature"
+  },
+  "features.interact.description": {
+    "message": "Chat through voice or text, interrupt naturally, with AI proactively speaking, Live2D expressions, touch response and more.",
+    "description": "Description of interaction feature"
+  },
+  "features.ui.title": {
+    "message": "Enjoy Powerful UI",
+    "description": "Title of UI feature"
+  },
+  "features.ui.description": {
+    "message": "Switch mode, manage chat history, open camera or screen share, and remember preferences, and collapse UI elements - all with intuitive design.",
+    "description": "Description of UI feature"
+  },
+  "features.memory.title": {
+    "message": "Remember Your Memories",
+    "description": "Title of memory feature"
+  },
+  "features.memory.description": {
+    "message": "Navigate through chat history and support various memory agents - Mem0, EVI, and more. Use your own agent just by implementing a simple interface.",
+    "description": "Description of memory feature"
+  },
+  "features.companion.title": {
+    "message": "Stay Alongside",
+    "description": "Title of companion feature"
+  },
+  "features.companion.description": {
+    "message": "Keep your AI companion visible with desktop pet mode - transparent overlay, drag anywhere, and seamless mode switching.",
+    "description": "Description of companion feature"
+  },
+  "homepage.tagline": {
+    "message": "Your AI waifu with real-time voice interaction and Live2D body",
+    "description": "The homepage tagline"
+  },
+  "homepage.thirdline": {
+    "message": "Compatible with any LLM on Windows/Linux/MacOS",
+    "description": "The homepage third line"
+  },
+  "showcase.title": {
+    "message": "Demo Pictures",
+    "description": "Title of the showcase gallery section"
   }
 }

i18n/en/docusaurus-theme-classic/footer.json

@@ -1,26 +1,26 @@
 {
   "link.title.文档": {
-    "message": "文档",
+    "message": "Documentation",
     "description": "The title of the footer links column with title=文档 in the footer"
   },
   "link.title.社区": {
-    "message": "社区",
+    "message": "Community",
     "description": "The title of the footer links column with title=社区 in the footer"
   },
   "link.title.更多": {
-    "message": "更多",
+    "message": "More",
     "description": "The title of the footer links column with title=更多 in the footer"
   },
   "link.item.label.快速上手": {
-    "message": "快速上手",
+    "message": "Quick Start",
     "description": "The label of footer link with label=快速上手 linking to /docs/category/快速上手"
   },
   "link.item.label.详细指南": {
-    "message": "详细指南",
+    "message": "Detailed Guide",
     "description": "The label of footer link with label=详细指南 linking to /docs/category/详细指南"
   },
   "link.item.label.API 文档": {
-    "message": "API 文档",
+    "message": "API Reference",
     "description": "The label of footer link with label=API 文档 linking to /docs/category/API"
   },
   "link.item.label.GitHub": {
@@ -32,19 +32,19 @@
     "description": "The label of footer link with label=Discord linking to https://discord.gg/3UDA8YFDXx"
   },
   "link.item.label.QQ 群聊": {
-    "message": "QQ 群聊",
+    "message": "QQ Group",
     "description": "The label of footer link with label=QQ 群聊 linking to https://qm.qq.com/q/Bo63JeEiC4"
   },
   "link.item.label.QQ 频道": {
-    "message": "QQ 频道",
+    "message": "QQ Channel",
     "description": "The label of footer link with label=QQ 频道 linking to https://pd.qq.com/s/tt54r3bu"
   },
   "link.item.label.博客": {
-    "message": "博客",
+    "message": "Blog",
     "description": "The label of footer link with label=博客 linking to /blog"
   },
   "link.item.label.问题反馈": {
-    "message": "问题反馈",
+    "message": "Issues",
     "description": "The label of footer link with label=问题反馈 linking to https://github.com/t41372/open-llm-vtuber/issues"
   },
   "copyright": {

i18n/zh-Hans/code.json

@@ -0,0 +1,54 @@
+{
+  "features.deploy.title": {
+    "message": "自由部署",
+    "description": "Title of deploy feature"
+  },
+  "features.deploy.description": {
+    "message": "既可本地部署，也能调用云端 API。支持丰富的语音识别/合成和大语言模型，轻松配置人设和 Live2D 模型。",
+    "description": "Description of deploy feature"
+  },
+  "features.run.title": {
+    "message": "跨平台运行",
+    "description": "Title of run everywhere feature"
+  },
+  "features.run.description": {
+    "message": "完美支持 Windows、MacOS 和 Linux 系统，支持多个并发会话，电脑手机随时随地都能访问。",
+    "description": "Description of run everywhere feature"
+  },
+  "features.interact.title": {
+    "message": "丰富互动",
+    "description": "Title of interaction feature"
+  },
+  "features.interact.description": {
+    "message": "支持语音文字实时交流，自然打断对话，AI 主动发言，Live2D 实时表情，还能触摸互动，用法多样有趣。",
+    "description": "Description of interaction feature"
+  },
+  "features.ui.title": {
+    "message": "精美 UI",
+    "description": "Title of UI feature"
+  },
+  "features.ui.description": {
+    "message": "一键切换模式、浏览历史对话、开启摄像头和屏幕分享，智能记忆偏好、灵活折叠界面，简单又实用。",
+    "description": "Description of UI feature"
+  },
+  "features.memory.title": {
+    "message": "长期记忆",
+    "description": "Title of memory feature"
+  },
+  "features.memory.description": {
+    "message": "轻松回顾过往对话，内置 Mem0、EVI 等多种记忆模块，还能通过简单接口快速接入自定义记忆系统。",
+    "description": "Description of memory feature"
+  },
+  "features.companion.title": {
+    "message": "桌面陪伴",
+    "description": "Title of companion feature"
+  },
+  "features.companion.description": {
+    "message": "桌宠模式让 AI 伴侣时刻陪伴左右，支持透明悬浮、自由拖放位置、无缝切换模式、独立互动组件。",
+    "description": "Description of companion feature"
+  },
+  "showcase.title": {
+    "message": "示例图片",
+    "description": "Title of the showcase gallery section"
+  }
+}

package.json

@@ -22,7 +22,9 @@
     "clsx": "^2.0.0",
     "prism-react-renderer": "^2.3.0",
     "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react-dom": "^18.0.0",
+    "react-gallery-carousel": "^0.4.0",
+    "swiper": "^11.2.1"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "^3.7.0",

src/components/HomepageFeatures/index.tsx

@@ -1,42 +1,55 @@
 import clsx from 'clsx';
 import Heading from '@theme/Heading';
 import styles from './styles.module.css';
+import Translate from '@docusaurus/Translate';
 
 type FeatureItem = {
-  title: string;
+  title: string | JSX.Element;
   Svg: React.ComponentType<React.ComponentProps<'svg'>>;
   description: JSX.Element;
 };
 
 const FeatureList: FeatureItem[] = [
   {
-    title: 'Easy to Use',
-    Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default,
+    title: <Translate>features.deploy.title</Translate>,
+    Svg: require("@site/static/img/undraw_control-panel_j1wf.svg").default,
     description: (
-      <>
-        Docusaurus was designed from the ground up to be easily installed and
-        used to get your website up and running quickly.
-      </>
+      <Translate>features.deploy.description</Translate>
     ),
   },
   {
-    title: 'Focus on What Matters',
-    Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default,
+    title: <Translate>features.run.title</Translate>,
+    Svg: require("@site/static/img/undraw_real-time-sync_ro77.svg").default,
     description: (
-      <>
-        Docusaurus lets you focus on your docs, and we&apos;ll do the chores. Go
-        ahead and move your docs into the <code>docs</code> directory.
-      </>
+      <Translate>features.run.description</Translate>
     ),
   },
   {
-    title: 'Powered by React',
-    Svg: require('@site/static/img/undraw_docusaurus_react.svg').default,
+    title: <Translate>features.interact.title</Translate>,
+    Svg: require("@site/static/img/undraw_chat-bot_44el.svg").default,
     description: (
-      <>
-        Extend or customize your website layout by reusing React. Docusaurus can
-        be extended while reusing the same header and footer.
-      </>
+      <Translate>features.interact.description</Translate>
+    ),
+  },
+  {
+    title: <Translate>features.ui.title</Translate>,
+    Svg: require("@site/static/img/undraw_experience-design_d4md.svg").default,
+    description: (
+      <Translate>features.ui.description</Translate>
+    ),
+  },
+  {
+    title: <Translate>features.memory.title</Translate>,
+    Svg: require("@site/static/img/undraw_moments_4a32.svg").default,
+    description: (
+      <Translate>features.memory.description</Translate>
+    ),
+  },
+  {
+    title: <Translate>features.companion.title</Translate>,
+    Svg: require("@site/static/img/undraw_friendship_chd3.svg").default,
+    description: (
+      <Translate>features.companion.description</Translate>
     ),
   },
 ];

src/components/HomepageFeatures/styles.module.css

@@ -1,7 +1,7 @@
 .features {
   display: flex;
   align-items: center;
-  padding: 2rem 0;
+  padding: 2rem 0 1rem;
   width: 100%;
 }