1 files changed, 69 insertions, 0 deletions
diff --git a/FrontEnd/src/app/views/home/WebsiteIntroduction.tsx b/FrontEnd/src/app/views/home/WebsiteIntroduction.tsx
new file mode 100644
index 00000000..f4ceebcc
--- /dev/null
+++ b/FrontEnd/src/app/views/home/WebsiteIntroduction.tsx
@@ -0,0 +1,69 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+
+const WebsiteIntroduction: React.FC<{
+  className?: string;
+  style?: React.CSSProperties;
+}> = ({ className, style }) => {
+  const { i18n } = useTranslation();
+
+  if (i18n.language.startsWith("zh")) {
+    return (
+      <div className={className} style={style}>
+        <h2>欢迎来到时间线！🎉🎉🎉</h2>
+        <p>
+          本网站由无数个独立的时间线构成，每一个时间线都是一个消息列表，类似于一个聊天软件（比如QQ）。
+        </p>
+        <p>
+          如果你拥有一个账号，登陆后你可以自由地在属于你的时间线中发送内容，支持markdown和上传图片哦！你可以创建一个新的时间线来开启一个新的话题。你也可以设置相关权限，只让一部分人能看到时间线的内容。
+        </p>
+        <p>
+          如果你没有账号，那么你可以去浏览一下公开的时间线，比如下面这些站长设置的高光时间线。
+        </p>
+        <p>
+          鉴于这个网站在我的小型服务器上部署，所以没有开放注册。如果你也想把这个服务部署到自己的服务器上，你可以在关于页面找到一些信息。
+        </p>
+        <p>
+          <small className="text-secondary">
+            这一段介绍是我的对象抱怨多次我的网站他根本看不明白之后加的，希望你能顺利看懂这个网站的逻辑！😅
+          </small>
+        </p>
+      </div>
+    );
+  } else {
+    return (
+      <div className={className} style={style}>
+        <h2>Welcome to Timeline!🎉🎉🎉</h2>
+        <p>
+          This website consists of many individual timelines. Each timeline is a
+          list of messages just like a chat app.
+        </p>
+        <p>
+          If you do have an account, you can post messages, which supports
+          Markdown and images, in your timelines after logging in. You can also
+          create a new timeline to open a new topic. You can set the permission
+          of a timeline to only allow specified people to see the content of the
+          timeline.
+        </p>
+        <p>
+          If you don&apos;t have an account, you can view some public timelines
+          like highlight timelines below set by website manager.
+        </p>
+        <p>
+          Since this website is hosted on my tiny server, so account registry is
+          not opened. If you want to host this service on your own server, you
+          can find some useful information on about page.
+        </p>
+        <p>
+          <small className="text-secondary">
+            This introduction is added after my lover complained a lot of times
+            about the obscuration of my website. May you understand the logic of
+            it!😅
+          </small>
+        </p>
+      </div>
+    );
+  }
+};
+
+export default WebsiteIntroduction;