From d89b36fcdaa920aac03762543ea15fcba004154e Mon Sep 17 00:00:00 2001
From: Paul Copplestone <pcopplestone@gmail.com>
Date: Fri, 3 Jan 2020 20:56:26 +0800
Subject: [PATCH] Sending the users to the signup form

---
 web/docusaurus.config.js |   2 +-
 web/src/pages/index.js   | 128 ++++++++++++++++-----------------------
 2 files changed, 54 insertions(+), 76 deletions(-)

diff --git a/web/docusaurus.config.js b/web/docusaurus.config.js
index d791929d79..b48aa34182 100755
--- a/web/docusaurus.config.js
+++ b/web/docusaurus.config.js
@@ -35,7 +35,7 @@ module.exports = {
         // },
         {
           href: 'https://app.supabase.io',
-          label: 'Get Early Access →',
+          label: 'Request Early Access →',
           position: 'right',
         },
       ],
diff --git a/web/src/pages/index.js b/web/src/pages/index.js
index 47096728a2..074ed93049 100755
--- a/web/src/pages/index.js
+++ b/web/src/pages/index.js
@@ -1,41 +1,37 @@
-import React from "react";
-import classnames from "classnames";
-import Layout from "@theme/Layout";
-import Link from "@docusaurus/Link";
-import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
-import useBaseUrl from "@docusaurus/useBaseUrl";
-import styles from "./styles.module.css";
+import React from 'react'
+import classnames from 'classnames'
+import Layout from '@theme/Layout'
+import Link from '@docusaurus/Link'
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
+import useBaseUrl from '@docusaurus/useBaseUrl'
+import styles from './styles.module.css'
 
 const features = [
   {
     title: <>Chat apps</>,
-    imageUrl: "",
-    description: (
-      <>Build a realtime chat application using PostgreSQL and Expo.</>
-    ),
-    href: "/docs/guides/examples"
+    imageUrl: '',
+    description: <>Build a realtime chat application using PostgreSQL and Expo.</>,
+    href: '/docs/guides/examples',
   },
   {
     title: <>Realtime dashboards</>,
-    imageUrl: "",
-    description: <>Get live analytics using PostgreSQL and D3.js.</>,
-    href: "/docs/guides/examples"
+    imageUrl: '',
+    description: <>Build live dashboards using PostgreSQL and D3.js.</>,
+    href: '/docs/guides/examples',
   },
   {
     title: <>Event sourcing</>,
-    imageUrl: "",
-    description: (
-      <>Log all your database changes to an immutable logging system.</>
-    ),
-    href: "/docs/guides/examples"
-  }
-];
+    imageUrl: '',
+    description: <>Log all your database changes to an immutable logging system.</>,
+    href: '/docs/guides/examples',
+  },
+]
 
 function Feature({ imageUrl, title, description, href }) {
-  const imgUrl = useBaseUrl(imageUrl);
+  const imgUrl = useBaseUrl(imageUrl)
   return (
-    <div className={classnames("col", styles.feature)}>
-      <a className={classnames("card", styles.featureCard)} href={href}>
+    <div className={classnames('col', styles.feature)}>
+      <a className={classnames('card', styles.featureCard)} href={href}>
         <div className="card__body">
           {imgUrl && (
             <div className="">
@@ -47,27 +43,26 @@ function Feature({ imageUrl, title, description, href }) {
         </div>
       </a>
     </div>
-  );
+  )
 }
 function HowCard({ title, heading, description }) {
   return (
-    <div className={classnames("col", styles.howCard)}>
+    <div className={classnames('col', styles.howCard)}>
       <div className="">
         <h3>{title}</h3>
         <h4>{heading}</h4>
         <p>{description}</p>
       </div>
     </div>
-  );
+  )
 }
 
-
 function Home() {
-  const context = useDocusaurusContext();
-  const { siteConfig = {} } = context;
+  const context = useDocusaurusContext()
+  const { siteConfig = {} } = context
   return (
     <Layout title={`${siteConfig.title}`} description={siteConfig.tagline}>
-      <header className={classnames("hero shadow--md", styles.heroBanner)}>
+      <header className={classnames('hero shadow--md', styles.heroBanner)}>
         <div className="container text--center">
           <h2 className="hero__title">{siteConfig.tagline}</h2>
           <p className="hero__subtitle">
@@ -80,29 +75,27 @@ function Home() {
               className={classnames(styles.heroImage)}
             /> */}
           </div>
+          <Link
+            className={classnames(
+              'button button--outline button--md button--secondary',
+              styles.button
+            )}
+            to={useBaseUrl('docs/about')}
+          >
+            Learn More
+          </Link>
+          <Link
+            className={classnames(
+              'button button--outline button--md button--primary',
+              styles.button
+            )}
+            to={'https://app.supabase.io'}
+          >
+            Request Early Access
+          </Link>
         </div>
       </header>
 
-      <div className={classnames("container text--center")}>
-        <Link
-          className={classnames(
-            "button button--outline button--md button--secondary",
-            styles.button
-          )}
-          to={useBaseUrl("docs/about")}
-        >
-          Learn More
-        </Link>
-        <Link
-          className={classnames(
-            "button button--outline button--md button--primary",
-            styles.button
-          )}
-          to={useBaseUrl("docs/about")}
-        >
-          Get Started
-        </Link>
-      </div>
       <main>
         {features && features.length && (
           <section className={styles.features}>
@@ -124,44 +117,29 @@ function Home() {
                 title="1."
                 heading="Connect Supabase to PostgreSQL"
                 description={
-                  <>
-                    Login to Supabase to connect to your your existing
-                    PostgreSQL database.
-                  </>
+                  <>Login to Supabase to connect to your your existing PostgreSQL database.</>
                 }
               />
               <HowCard
                 title="2."
                 heading="@todo"
-                description={
-                  <>
-                    We introspect your database and provide an instant realtime
-                    API.
-                  </>
-                }
-              />
-              <HowCard
-                title="3."
-                heading="@todo"
-                description={<>@todo</>}
+                description={<>We introspect your database and provide an instant realtime API.</>}
               />
+              <HowCard title="3." heading="@todo" description={<>@todo</>} />
             </div>
           </div>
         </section>
 
-        <section
-          style={{ marginTop: 40, padding: 20 }}
-          className="hero is--dark"
-        >
+        <section style={{ marginTop: 40, padding: 20 }} className="hero is--dark">
           <div className="container text--right">
             <div className="">
               <strong>Try Supabase for free</strong>
               <Link
                 className={classnames(
-                  "button button--outline button--md button--primary",
+                  'button button--outline button--md button--primary',
                   styles.button
                 )}
-                to={useBaseUrl("docs/about")}
+                to={'https://app.supabase.io'}
               >
                 GO
               </Link>
@@ -170,7 +148,7 @@ function Home() {
         </section>
       </main>
     </Layout>
-  );
+  )
 }
 
-export default Home;
+export default Home