📝 update homepage

website/src/pages/index.tsx

@@ -1,30 +1,107 @@
-import Hero, { HeroFeatureSingle } from "@theme/Hero";
+import clsx from "clsx";
+import React from "react";
 
 import CodeBlock from "@theme/CodeBlock";
+import { HeroFeatureDouble, HeroFeatureSingle } from "@theme/Hero";
 import Layout from "@theme/Layout";
-import React from "react";
-import clsx from "clsx";
-import styles from "./index.module.css";
+
+import { Hero, HeroFeature } from "../components/Hero";
+import type { Feature } from "../components/Hero";
+import styles from "../css/index.module.css";
 
 export default function Home() {
-  const feature = {
+  const feature: Feature = {
     title: "Develop",
     tagline: "fast to code",
     description: "仅需两步，即可开始编写你的机器人",
   };
+  const features: [Feature, Feature] = [
+    {
+      title: "Plugin",
+      tagline: "build bot with plugins",
+      description: "插件化开发，模块化管理",
+    },
+    {
+      title: "Multi-Platform",
+      tagline: "write once run everywhere",
+      description: "支持多种平台，以及多样的事件响应方式",
+    },
+  ];
 
   return (
     <Layout>
       <Hero />
-      <HeroFeatureSingle {...feature}>
-        <CodeBlock
-          title="Installation"
-          className={clsx("inline-block", styles.homeCodeBlock)}
-          metastring="bash"
-        >
-          {"pip install nb-cli\nnb create"}
-        </CodeBlock>
-      </HeroFeatureSingle>
+      <div className="max-w-7xl mx-auto py-16 px-4 text-center md:px-16">
+        <HeroFeature {...feature}>
+          <CodeBlock
+            title="Installation"
+            className={clsx("inline-block language-bash", styles.homeCodeBlock)}
+          >
+            {[
+              "$ pip install nb-cli",
+              "$ nb",
+              // "d8b   db  .d88b.  d8b   db d88888b d8888b.  .d88b.  d888888b",
+              // "888o  88 .8P  Y8. 888o  88 88'     88  `8D .8P  Y8. `~~88~~'",
+              // "88V8o 88 88    88 88V8o 88 88ooooo 88oooY' 88    88    88",
+              // "88 V8o88 88    88 88 V8o88 88~~~~~ 88~~~b. 88    88    88",
+              // "88  V888 `8b  d8' 88  V888 88.     88   8D `8b  d8'    88",
+              // "VP   V8P  `Y88P'  VP   V8P Y88888P Y8888P'  `Y88P'     YP",
+              "[?] What do you want to do?",
+              "❯ Create a New Project",
+              "  Run the Bot in Current Folder",
+              "  Create a New NoneBot Plugin",
+              "  List All Published Plugins",
+              "  ...",
+            ].join("\n")}
+          </CodeBlock>
+        </HeroFeature>
+      </div>
+      <div className="max-w-7xl mx-auto py-16 px-4 md:grid md:grid-cols-2 md:gap-6 md:px-16">
+        <div className="pb-16 text-center md:pb-0">
+          <HeroFeature {...features[0]}>
+            <CodeBlock
+              title
+              className={clsx(
+                "inline-block language-python",
+                styles.homeCodeBlock
+              )}
+            >
+              {[
+                "import nonebot",
+                "# 加载一个插件",
+                'nonebot.load_plugin("path.to.your.plugin")',
+                "# 从文件夹加载插件",
+                'nonebot.load_plugins("plugins")',
+                "# 从配置文件加载多个插件",
+                'nonebot.load_from_json("plugins.json")',
+                'nonebot.load_from_toml("pyproject.toml")',
+              ].join("\n")}
+            </CodeBlock>
+          </HeroFeature>
+        </div>
+        <div className="text-center">
+          <HeroFeature {...features[1]}>
+            <CodeBlock
+              title
+              className={clsx(
+                "inline-block language-python",
+                styles.homeCodeBlock
+              )}
+            >
+              {[
+                "import nonebot",
+                "# OneBot",
+                "from nonebot.adapters.onebot.v11 import Bot as OneBot",
+                "# 钉钉",
+                "from nonebot.adapters.ding import Bot as DingBot",
+                "driver = nonebot.get_driver()",
+                'driver.register_adapter("onebot", OneBot)',
+                'driver.register_adapter("ding", DingBot)',
+              ].join("\n")}
+            </CodeBlock>
+          </HeroFeature>
+        </div>
+      </div>
     </Layout>
   );
 }