📝 write start docs

website/src/components/Hero.tsx

@@ -24,7 +24,7 @@ export function Hero(): JSX.Element {
             to="/docs/guide"
             className="inline-block bg-hero text-white font-bold rounded-lg px-6 py-3"
           >
-            开始使用
+            开始使用 <FontAwesomeIcon icon={["fas", "chevron-right"]} />
           </Link>
         </div>
       </div>
@@ -55,7 +55,7 @@ export function HeroFeature(props: PropsWithChildren<Feature>): JSX.Element {
       <p className="mt-3 mb-3 max-w-md mx-auto text-sm font-medium tracking-wide uppercase opacity-70 md:mt-5 md:max-w-3xl">
         {tagline}
       </p>
-      <h1 className="text-4xl tracking-tight font-light sm:text-5xl md:text-5xl text-hero">
+      <h1 className="font-mono font-light text-4xl tracking-tight sm:text-5xl md:text-5xl text-hero">
         {title}
       </h1>
       <p className="mt-10 mb-6">{description}</p>

website/src/pages/index.tsx

@@ -10,12 +10,12 @@ import type { Feature } from "../components/Hero";
 import styles from "../css/index.module.css";
 
 export default function Home() {
-  const feature: Feature = {
+  const firstFeature: Feature = {
     title: "Develop",
     tagline: "fast to code",
     description: "仅需两步，即可开始编写你的机器人",
-  };
-  const features: [Feature, Feature] = [
+  } as const;
+  const secondFeatures = [
     {
       title: "Plugin",
       tagline: "build bot with plugins",
@@ -26,13 +26,25 @@ export default function Home() {
       tagline: "write once run everywhere",
       description: "支持多种平台，以及多样的事件响应方式",
     },
+  ] as const;
+  const thirdFeatures = [
+    {
+      title: "Async",
+      tagline: "asynchronous first",
+      description: "异步优先式开发，提高运行效率",
+    },
+    {
+      title: "DI",
+      tagline: "bultin dependency injection system",
+      description: "简单清晰的依赖注入系统，内置依赖函数减少用户代码",
+    },
   ];
 
   return (
     <Layout>
       <Hero />
       <div className="max-w-7xl mx-auto py-16 px-4 text-center md:px-16">
-        <HeroFeature {...feature}>
+        <HeroFeature {...firstFeature}>
           <CodeBlock
             title="Installation"
             className={clsx("inline-block language-bash", styles.homeCodeBlock)}
@@ -58,7 +70,7 @@ export default function Home() {
       </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]}>
+          <HeroFeature {...secondFeatures[0]}>
             <CodeBlock
               title
               className={clsx(
@@ -80,7 +92,7 @@ export default function Home() {
           </HeroFeature>
         </div>
         <div className="text-center">
-          <HeroFeature {...features[1]}>
+          <HeroFeature {...secondFeatures[1]}>
             <CodeBlock
               title
               className={clsx(
@@ -91,12 +103,58 @@ export default function Home() {
               {[
                 "import nonebot",
                 "# OneBot",
-                "from nonebot.adapters.onebot.v11 import Bot as OneBot",
+                "from nonebot.adapters.onebot.v11 import Adapter as OneBotAdapter",
                 "# 钉钉",
-                "from nonebot.adapters.ding import Bot as DingBot",
+                "from nonebot.adapters.ding import Adapter as DingAdapter",
                 "driver = nonebot.get_driver()",
-                'driver.register_adapter("onebot", OneBot)',
-                'driver.register_adapter("ding", DingBot)',
+                "driver.register_adapter(OneBotAdapter)",
+                "driver.register_adapter(DingAdapter)",
+              ].join("\n")}
+            </CodeBlock>
+          </HeroFeature>
+        </div>
+      </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 {...thirdFeatures[0]}>
+            <CodeBlock
+              title
+              className={clsx(
+                "inline-block language-python",
+                styles.homeCodeBlock
+              )}
+            >
+              {[
+                "from nonebot import on_message",
+                "# 注册一个消息响应器",
+                "matcher = on_message()",
+                "# 注册一个消息处理器",
+                "# 并重复收到的消息",
+                "@matcher.handle()",
+                "async def handler(event: Event) -> None:",
+                "    await matcher.send(event.get_message())",
+              ].join("\n")}
+            </CodeBlock>
+          </HeroFeature>
+        </div>
+        <div className="text-center">
+          <HeroFeature {...thirdFeatures[1]}>
+            <CodeBlock
+              title
+              className={clsx(
+                "inline-block language-python",
+                styles.homeCodeBlock
+              )}
+            >
+              {[
+                "from nonebot import on_command",
+                "# 注册一个命令响应器",
+                'matcher = on_command("help", alias={"帮助"})',
+                "# 注册一个命令处理器",
+                "# 通过依赖注入获得命令名以及参数",
+                "@matcher.handle()",
+                "async def handler(cmd = Command(), arg = CommandArg()) -> None:",
+                "    await matcher.send()",
               ].join("\n")}
             </CodeBlock>
           </HeroFeature>