diff --git a/src/pages/index.js b/src/pages/index.js
deleted file mode 100644
index affcd90..0000000
--- a/src/pages/index.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import React from 'react';
-import clsx from 'clsx';
-import Link from '@docusaurus/Link';
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import Layout from '@theme/Layout';
-import HomepageFeatures from '@site/src/components/HomepageFeatures';
-
-import styles from './index.module.css';
-
-function HomepageHeader() {
-  const {siteConfig} = useDocusaurusContext();
-  return (
-    <header className={clsx('hero hero--primary', styles.heroBanner)}>
-      <div className="container">
-        <h1 className="hero__title">{siteConfig.title}</h1>
-        <p className="hero__subtitle">{siteConfig.tagline}</p>
-        <div className={styles.buttons}>
-          <Link
-            className="button button--secondary button--lg"
-            to="/docs/intro">
-            Docusaurus Tutorial - 5min ⏱️
-          </Link>
-        </div>
-      </div>
-    </header>
-  );
-}
-
-export default function Home() {
-  const {siteConfig} = useDocusaurusContext();
-  return (
-    <Layout
-      title={`Hello from ${siteConfig.title}`}
-      description="Description will go into a meta tag in <head />">
-      <HomepageHeader />
-      <main>
-        <HomepageFeatures />
-      </main>
-    </Layout>
-  );
-}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
new file mode 100644
index 0000000..24f72c7
--- /dev/null
+++ b/src/pages/index.tsx
@@ -0,0 +1,126 @@
+import React from 'react';
+import clsx from 'clsx';
+import Link from '@docusaurus/Link';
+import Translate, {translate} from '@docusaurus/Translate';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import Layout from '@theme/Layout';
+import HomepageFeatures from '@site/src/components/HomepageFeatures';
+import useBaseUrl, {useBaseUrlUtils} from '@docusaurus/useBaseUrl';
+import Heading from '@theme/Heading';
+import styles from './styles.module.css';
+
+function HomepageHeader() {
+  const {siteConfig} = useDocusaurusContext();
+  return (
+    <header className={clsx('hero hero--primary', styles.heroBanner)}>
+      <div className="container">
+        <h1 className="hero__title">{siteConfig.title}</h1>
+        <p className="hero__subtitle">{siteConfig.tagline}</p>
+        <div className={styles.buttons}>
+          <Link
+            className="button button--secondary button--lg"
+            to="/docs/intro">
+            Docusaurus Tutorial - 5min ⏱️
+          </Link>
+        </div>
+      </div>
+    </header>
+  );
+}
+
+function TopBanner() {
+  return (
+    <div className={styles.topBanner}>
+      <div className={styles.topBannerTitle}>
+        {'🎉\xa0'}
+        <Link
+          to="https://realityworld.com"
+          className={styles.topBannerTitleText}>
+          <Translate id="homepage.banner.launch.2.0">
+            {'我们即将开源!️'}
+          </Translate>
+        </Link>
+        {'\xa0🥳'}
+      </div>
+      <div style={{display: 'flex', alignItems: 'center', flexWrap: 'wrap'}}>
+        <div style={{flex: 1, whiteSpace: 'nowrap'}}>
+          <div className={styles.topBannerDescription}>
+            包括框架代码、以及十万字以上的技术文档
+          </div>
+        </div>
+        <div
+          style={{
+            flexGrow: 1,
+            flexShrink: 0,
+            padding: '0.5rem',
+            display: 'flex',
+            justifyContent: 'center',
+          }}>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function HeroBanner() {
+  return (
+    <div className={styles.hero} data-theme="dark">
+      <div className={styles.heroInner}>
+        <Heading as="h1" className={styles.heroProjectTagline}>
+          <img
+            alt={translate({message: 'Docusaurus with Keytar'})}
+            className={styles.heroLogo}
+            src={useBaseUrl('/img/reality_world_logo.jpg')}
+            width="300"
+            height="300"
+          />
+          <span
+            className={styles.heroTitleTextHtml}
+            // eslint-disable-next-line react/no-danger
+            dangerouslySetInnerHTML={{
+              __html: translate({
+                id: 'homepage.hero.title',
+                message:
+                  'A <b>self-evolving</b> and <b>interoperable</b> system for future digital world',
+                description:
+                  'Home page hero title, can contain simple html tags',
+              }),
+            }}
+          />
+        </Heading>
+        <div className={styles.indexCtas}>
+          <Link className="button button--primary">
+            <Translate>Whitepaper</Translate>
+          </Link>
+          <Link className="button button--primary">
+            <Translate>Documentation</Translate>
+          </Link>
+          <span className={styles.indexCtasGitHubButtonWrapper}>
+            <iframe
+              className={styles.indexCtasGitHubButton}
+              src="https://ghbtns.com/github-btn.html?user=cogine&amp;repo=realityworld&amp;type=star&amp;count=true&amp;size=large"
+              width={160}
+              height={30}
+              title="电子版下载"
+            />
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function Home(): JSX.Element {
+  const {siteConfig} = useDocusaurusContext();
+  return (
+    <Layout
+      title={`A self-evolving and interoperable system for future digital world`}
+      description="Description will go into a meta tag in <head />">
+      <main>
+        <TopBanner/>
+        <HeroBanner />
+        <HomepageFeatures />
+      </main>
+    </Layout>
+  );
+}
diff --git a/src/pages/styles.module.css b/src/pages/styles.module.css
index d318799..ed3e63b 100644
--- a/src/pages/styles.module.css
+++ b/src/pages/styles.module.css
@@ -232,3 +232,28 @@ html[data-theme='dark'] .topBannerTitleText {
 .test-marker-site-index-page {
   content: 'site-index-page';
 }
+
+
+
+
+
+
+
+.heroBanner {
+  padding: 4rem 0;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+}
+
+@media screen and (max-width: 996px) {
+  .heroBanner {
+    padding: 2rem;
+  }
+}
+
+.buttons {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
