docs: add mobile downloads page

website/docusaurus.config.js

@@ -17,6 +17,7 @@ const themeConfig = {
         label: 'Docs',
       },
       { to: '/blog', label: 'Blog', position: 'left' },
+      { to: '/downloads', label: 'Downloads', position: 'left' },
       {
         type: 'localeDropdown',
         position: 'right',

website/package.json

@@ -17,10 +17,10 @@
     "gen:plugin-doc": "ts-node ./scripts/generate-plugin-list.ts"
   },
   "dependencies": {
-    "@docusaurus/core": "2.3.1",
-    "@docusaurus/preset-classic": "2.3.1",
-    "@docusaurus/theme-common": "2.3.1",
-    "@docusaurus/types": "2.3.1",
+    "@docusaurus/core": "2.4.0",
+    "@docusaurus/preset-classic": "2.4.0",
+    "@docusaurus/theme-common": "2.4.0",
+    "@docusaurus/types": "2.4.0",
     "@mdx-js/react": "^1.6.22",
     "@svgr/webpack": "^5.5.0",
     "clsx": "^1.2.1",
@@ -46,7 +46,7 @@
     ]
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "^2.3.1",
+    "@docusaurus/module-type-aliases": "2.4.0",
     "@tsconfig/docusaurus": "^1.0.6",
     "@types/fs-extra": "^9.0.13",
     "@types/glob": "^8.1.0",

website/src/components/FeatureSection.tsx

@@ -207,12 +207,8 @@ export const FeatureSection: React.FC = React.memo(() => {
                 <Link className="button button--primary" to={nightlyUrl}>
                   Web
                 </Link>
-                <Link className="button button--secondary disabled">
-                  Mobile (
-                  <Translate>
-                    in Alpha Test, Join us for Early Experience
-                  </Translate>
-                  )
+                <Link className="button button--secondary" to="/downloads">
+                  Mobile
                 </Link>
                 <Link className="button button--secondary disabled">
                   Desktop (<Translate>in Alpha Test</Translate>)

website/src/pages/downloads.less

@@ -0,0 +1,49 @@
+.downloads-page {
+  text-align: center;
+  max-width: 80rem;
+  margin: auto;
+  margin-top: 2rem;
+
+  @media (min-width: 997px) {
+    margin-top: 6rem;
+  }
+
+  .section {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    flex-direction: column;
+
+    @media (min-width: 997px) {
+      flex-direction: row;
+    }
+
+    .block {
+      h3 {
+        font-size: 2.25rem;
+        font-weight: 700;
+      }
+
+      .btns {
+        * + * {
+          margin-top: 0.5rem;
+        }
+
+        @media (min-width: 997px) {
+          * + * {
+            margin-top: 0;
+            margin-left: 0.5rem;
+          }
+        }
+
+
+        margin-bottom: 1rem;
+      }
+
+      .tip {
+        font-size: 0.8rem;
+        color: #666;
+      }
+    }
+  }
+}

website/src/pages/downloads.tsx

@@ -0,0 +1,51 @@
+import Layout from '@theme/Layout';
+import Link from '@docusaurus/Link';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import React from 'react';
+import './downloads.less';
+
+export default function Downloads() {
+  const { siteConfig } = useDocusaurusContext();
+
+  return (
+    <Layout
+      title={`${siteConfig.title} - ${siteConfig.tagline}`}
+      description={`${siteConfig.tagline}`}
+    >
+      <main>
+        <div className="downloads-page">
+          <div className="section">
+            <div className="block">
+              <img src="/img/gallery/download/mobile.png" />
+            </div>
+
+            <div className="block">
+              <h3>Mobile Apps (test)</h3>
+
+              <p>Use mobile app to visit Tailchat anywhere</p>
+
+              <div className="btns">
+                <Link
+                  className="button button--primary"
+                  to="https://tailchat-app.msgbyte.com/app-release.apk"
+                >
+                  Android
+                </Link>
+                <Link className="button button--secondary disabled">
+                  iOS(Coming soon)
+                </Link>
+              </div>
+
+              <p className="tip">
+                Design with react-native:&nbsp;
+                <Link to="https://github.com/msgbyte/tailchat/tree/master/client/mobile">
+                  Source Code
+                </Link>
+              </p>
+            </div>
+          </div>
+        </div>
+      </main>
+    </Layout>
+  );
+}