home page

Cogine · Aug 29, 2023 · f85d046 · f85d046
1 parent 4368e86
commit f85d046
Show file tree

Hide file tree

Showing 3 changed files with 151 additions and 41 deletions.
diff --git a/src/pages/index.js b/src/pages/index.js
diff --git a/src/pages/index.tsx 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
@@ -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;
+}