feat: improve homepage

website/i18n/zh-CN/code.json

@@ -10,5 +10,23 @@
     "page.tagline": {
         "message": "一个轻量级的 Web IDE UI 框架",
         "description": "一个轻量级的 Web IDE UI 框架"
+    },
+    "page.hero.first": {
+        "message": "开箱即用"
+    },
+    "page.hero.first.desc": {
+        "message": "Molecule 内置了多种组件以及 Service 以供用户自由组合使用，通过事件订阅机制轻松实现各种复杂交互，满足大量 IDE 场景的使用。"
+    },
+    "page.hero.second": {
+        "message": "可扩展的"
+    },
+    "page.hero.second.desc": {
+        "message": "Molecule 支持通过插件（extension）的形式，丰富自身功能，同时支持部分 VSCode 的扩展应用。"
+    },
+    "page.hero.third": {
+        "message": "基于 React"
+    },
+    "page.hero.third.desc": {
+        "message": "Molecule 是基于 React 框架开发的，符合 MVC 模型的 UI 框架。它只会导出 ES 模块以供 React 项目使用。"
     }
 }

website/i18n/zh-CN/docusaurus-plugin-content-docs/current/introduction.md

@@ -5,7 +5,7 @@ sidebar_position: 1
 ---
 
 <div align="center">
- <img src="/static/img/logo@1x.png" width="20%" height="20%" alt="watchman-logo" />
+ <img src="/static/img/logo@3x.png" width="20%" height="20%" alt="watchman-logo" />
  <h1>Molecule</h1>
  <h3>一个轻量的 Web IDE UI 框架</h3>
 

website/src/components/HomepageFeatures.js

@@ -2,36 +2,48 @@ import React from 'react';
 import clsx from 'clsx';
 import styles from './HomepageFeatures.module.css';
 
+import Translate, { translate } from '@docusaurus/Translate';
+
 const FeatureList = [
     {
-        title: 'Easy to Use',
-        Svg: require('../../static/img/undraw_docusaurus_mountain.svg').default,
+        title: translate({ id: 'page.hero.first', message: 'Easy to Use' }),
+        Svg: require('../../static/img/easyToUse.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 id="page.hero.first.desc">
+                    The Molecule has a majority of built-in components and
+                    services which could combine these as your like, and achieve
+                    the complex interactive through event-emit.
+                </Translate>
             </>
         ),
     },
     {
-        title: 'Focus on What Matters',
-        Svg: require('../../static/img/undraw_docusaurus_tree.svg').default,
+        title: translate({ id: 'page.hero.second', message: 'Extensible' }),
+        Svg: require('../../static/img/extensible.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 id="page.hero.second.desc">
+                    The Molecule could enrich the functionality through
+                    extensions. Besides, the Molecule also support some
+                    extensions from VSCode extensions market.
+                </Translate>
             </>
         ),
     },
     {
-        title: 'Powered by React',
-        Svg: require('../../static/img/undraw_docusaurus_react.svg').default,
+        title: translate({
+            id: 'page.hero.third',
+            message: 'Powered by React',
+        }),
+        Svg: require('../../static/img/react.svg').default,
         description: (
             <>
-                Extend or customize your website layout by reusing React.
-                Docusaurus can be extended while reusing the same header and
-                footer.
+                <Translate id="page.hero.third.desc">
+                    The Molecule a UI framework which is developed in React and
+                    associated with MVC pattern. It only export ES modules for
+                    using in React Project.
+                </Translate>
             </>
         ),
     },

website/src/components/HomepageFeatures.module.css

@@ -6,6 +6,6 @@
 }
 
 .featureSvg {
-    height: 200px;
-    width: 200px;
+    height: 120px;
+    width: 120px;
 }

website/src/css/custom.css

@@ -16,6 +16,11 @@
     --ifm-code-font-size: 95%;
 }
 
+html[data-theme='dark'] {
+    --ifm-heading-color: #fff;
+    --ifm-font-color-base-inverse: #fff;
+}
+
 .docusaurus-highlight-code-line {
     background-color: rgba(0, 0, 0, 0.1);
     display: block;

website/src/pages/index.module.css

@@ -8,6 +8,12 @@
     padding: 4rem 0;
     position: relative;
     text-align: center;
+
+    background: linear-gradient(to bottom right, #00c5f8, #0065f6);
+}
+
+html[data-theme='dark'] .heroBanner {
+    background: linear-gradient(to bottom right, #0058a5, #00437b);
 }
 
 @media screen and (max-width: 966px) {