From 7cb9c6db983d858eb7bcc41ae3a19df4fff24ee2 Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Wed, 2 Dec 2020 16:06:46 +0800
Subject: [PATCH] Init beta page

---
 www/components/Layout.tsx |  10 +-
 www/data/BetaPage.js      | 151 ++++++++++++++++++++++++
 www/pages/beta.tsx        | 241 ++++++++++++++++++++++++++++++++++++++
 3 files changed, 398 insertions(+), 4 deletions(-)
 create mode 100644 www/data/BetaPage.js
 create mode 100644 www/pages/beta.tsx

diff --git a/www/components/Layout.tsx b/www/components/Layout.tsx
index 18b389f2c35..136ee184d54 100644
--- a/www/components/Layout.tsx
+++ b/www/components/Layout.tsx
@@ -4,12 +4,14 @@ import Footer from 'components/Footer/index'
 import Meta from 'components/Meta'
 
 type Props = {
-  preview?: boolean
+  hideHeader?: boolean
+  hideFooter?: boolean
   children: React.ReactNode
 }
 
-const Layout = ({ preview, children }: Props) => {
+const Layout = (props: Props) => {
 
+  const { hideHeader = false, hideFooter = false, children } = props
   const [darkMode, setDarkMode] = useState<boolean>(true)
 
   useEffect(() => {
@@ -28,11 +30,11 @@ const Layout = ({ preview, children }: Props) => {
   return (
     <>
       <Meta />
-      <Nav darkMode={darkMode} />
+      {!hideHeader && <Nav darkMode={darkMode} />}
       <div className="min-h-screen bg-gray-100">
         <main>{children}</main>
       </div>
-      <Footer darkMode={darkMode} updateTheme={updateTheme}/>
+      {!hideFooter && <Footer darkMode={darkMode} updateTheme={updateTheme}/>}
     </>
   )
 }
diff --git a/www/data/BetaPage.js b/www/data/BetaPage.js
new file mode 100644
index 00000000000..22d668cd4a0
--- /dev/null
+++ b/www/data/BetaPage.js
@@ -0,0 +1,151 @@
+export const AlphaNumbers = [
+  {
+    icon: (
+      <svg
+        viewBox="0 0 24 24"
+        width="24"
+        height="24"
+        stroke="white"
+        strokeWidth="2"
+        fill="none"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className="css-i6dzq1"
+      >
+        <ellipse cx="12" cy="5" rx="9" ry="3" />
+        <path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3" />
+        <path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5" />
+      </svg>
+    ),
+    value: 3011,
+    unit: null,
+    name: 'Hosted Databases'
+  },
+  {
+    icon: (
+      <svg
+        viewBox="0 0 24 24"
+        width="24"
+        height="24"
+        stroke="white"
+        strokeWidth="2"
+        fill="none"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className="css-i6dzq1"
+      >
+        <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
+      </svg>
+    ),
+    value: 5460,
+    unit: null,
+    name: 'Github Stars'
+  },
+  {
+    icon: (
+      <svg
+        viewBox="0 0 24 24"
+        width="24"
+        height="24"
+        stroke="white"
+        stroke-width="2"
+        fill="none"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        Class="css-i6dzq1"
+      >
+        <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
+        <polyline points="22 4 12 14.01 9 11.01" />
+      </svg>
+    ),
+    value: 499,
+    unit: null,
+    name: 'Github issues resolved'
+  },
+  {
+    icon: (
+      <svg
+        viewBox="0 0 24 24"
+        width="24"
+        height="24"
+        stroke="white"
+        strokeWidth="2"
+        fill="none"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className="css-i6dzq1"
+      >
+        <line x1="6" y1="3" x2="6" y2="15" />
+        <circle cx="18" cy="6" r="3" />
+        <circle cx="6" cy="18" r="3" />
+        <path d="M18 9a9 9 0 0 1-9 9" />
+      </svg>
+    ),
+    value: 379,
+    unit: null,
+    name: 'Forks of our repositories'
+  },
+  {
+    icon: (
+      <svg
+        viewBox="0 0 24 24"
+        width="24"
+        height="24"
+        stroke="white"
+        strokeWidth="2"
+        fill="none"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className="css-i6dzq1"
+      >
+        <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
+        <circle cx="9" cy="7" r="4" />
+        <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
+        <path d="M16 3.13a4 4 0 0 1 0 7.75" />
+      </svg>
+    ),
+    value: 87,
+    unit: null,
+    name: 'Active Github contributors'
+  },
+  {
+    icon: (
+      <svg
+        viewBox="0 0 24 24"
+        width="24"
+        height="24"
+        stroke="white"
+        stroke-width="2"
+        fill="none"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className="css-i6dzq1"
+      >
+        <polyline points="4 17 10 11 4 5" />
+        <line x1="12" y1="19" x2="20" y2="19" />
+      </svg>
+    ),
+    value: 80.6,
+    unit: 'M',
+    name: 'Database queries'
+  },
+]
+
+export const IntroductionSegments = [
+  {
+    description: "In preparation for some of our users moving into production, we've put extra effort into 3 key areas of Supabase",
+    chapters: ['Performance', 'Security', 'Reliability']
+  },
+  {
+    description: "We have received an incredible number of requests for new features and integrations from our Alpha Users, and we are factoring these conversations into our Beta Pricing model.",
+    chapters: ['New Features & Integrations', 'Beta Pricing']
+  },
+  {
+    description: "Open Source is, and will always be, at the core of everything that we do. Find out how we've been working with the community to support existing OSS projects and Communities.",
+    chapters: ['Open Source']
+  },
+  {
+    description: "And finally, we are bringing on 23 new Funding Partners to help us achieve our goal of becoming the default backend for every business. Find out who they are, and what we have in store for 2021.",
+    chapters: ['Funding Partners', 'Scaling Our Team', 'What\'s Next']
+  },
+]
\ No newline at end of file
diff --git a/www/pages/beta.tsx b/www/pages/beta.tsx
new file mode 100644
index 00000000000..80e1765704a
--- /dev/null
+++ b/www/pages/beta.tsx
@@ -0,0 +1,241 @@
+import Head from 'next/head'
+import Container from 'components/Container'
+import Layout from 'components/Layout'
+
+import { APP_NAME, DESCRIPTION } from 'lib/constants'
+
+import { AlphaNumbers, IntroductionSegments } from 'data/BetaPage'
+
+const site_title = `${APP_NAME} | We are now in Beta`
+
+type SectionHeaderProps = {
+  sectionNumber: number,
+  header: string
+}
+
+const SectionHeader = (props: SectionHeaderProps) => {
+  const { sectionNumber, header } = props
+  return (
+    <div className="col-span-12">
+      <span className="block font-mono text-3xl text-dark-300 mb-3">0{sectionNumber}</span>
+      <h3 className="text-6xl">{header}</h3>
+    </div>
+  )
+}
+
+const Hero = () => (
+  <div className="w-screen h-screen bg-dark-500 flex items-center justify-center text-white">
+    TBD, scroll down first
+  </div>
+)
+
+const Introduction = () => (
+  <div className="bg-gray-50">
+    <div className="container mx-auto px-28 py-20 grid grid-cols-12 gap-4">
+
+      <div className="col-span-7 text-base mb-20">
+        <p>
+          After the launch of our <span className="text-brand-700">Alpha</span> Program
+          in June, we've been fortunate to work with thousands of early adopters
+          on improving both our Open Source, and Hosted offerings.
+        </p>
+      </div>
+
+      <div className="col-span-12 text-base mb-10">
+        <p className="w-60 pb-2 border-b-2 border-dark-100">
+          Alpha Program in Numbers
+        </p>
+      </div>
+
+      <div className="col-span-12 grid grid-cols-12 gap-y-20 mb-20">
+        {AlphaNumbers.map((stat: any, idx: number) => (
+          <div key={`stat_${idx}`} className="col-span-4 grid grid-cols-12 gap-x-6 items-center">
+            <div className="col-span-2">
+              <div className="w-12 h-12 rounded-md bg-dark-700 flex items-center justify-center">
+                {stat.icon}
+              </div>
+            </div>
+            <div className="col-span-10">
+              <p className="text-6xl">
+                {stat.value}
+                {stat.unit && <span className="text-2xl ml-1">{stat.unit}</span>}
+              </p>
+            </div>
+            <div className="col-span-10 col-start-3">
+              <p className="text-dark-300">{stat.name}</p>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <div className="col-span-12 grid grid-cols-12 gap-y-10">
+        {IntroductionSegments.map((segment: any, segmentIdx: number) => (
+          <>
+            <div key={`introSegment_${segmentIdx}`} className="col-span-4">
+              {segment.description}
+            </div>
+            <div className="col-span-2" />
+            <div className="col-span-6 flex flex-col">
+              {segment.chapters.map((chapter: string, idx: number) => (
+                <div className="flex items-center mb-5">
+                  <p className="font-mono text-xs text-dark-300">{`0${idx + 1}`}</p>
+                  <p className="ml-4 text-base border-b border-gray-400 cursor-pointer">{chapter}</p>
+                </div>
+              ))}
+            </div>
+          </>
+        ))}
+      </div>
+
+    </div>
+  </div>
+)
+
+const Performance = () => (
+  <div className="bg-white">
+    <div className="container mx-auto px-28 py-20 grid grid-cols-12 gap-y-10">
+      <SectionHeader sectionNumber={1} header="Performance" />
+      
+      <div className="col-span-12 grid grid-cols-12 gap-x-8 mb-10">
+        <div className="col-span-7 text-base">
+          <p className="mb-10">
+            Supabase grew out of a need for a faster and more scalable web-ready datastore.
+            Postgres enables our users to handle massive amounts of data without sacrificing read and write speed.
+          </p>
+          <p className="mb-10">
+            During our Alpha program we have been obsessively tweaking our stack to tease out superior performance.
+            We chose the hyper-scalable <a href="#" className="text-brand-700">Elixer</a> to handle our <a href="#" className="text-brand-700">Realtime engine</a>,
+            and have supported the <a href="#" className="text-brand-700">PostgREST</a> team while they improved the
+            performance of their auto-generated CRUD APIs.
+          </p>
+          <p>
+            We are proud to publish the results of our benchmarks here and we'll continue to seek gains throughout
+            our Beta program and beyond. Our <a href="#" className="text-brand-700">benchmarks</a> are Open Source,
+            and we are seeking contributors to help maintain our code and improve on our methodologies.
+          </p>
+        </div>
+      </div>
+
+      <div className="col-span-12 bg-dark-200 flex items-center justify-center py-64 text-center mb-10">
+        Benchmark graph goes here
+      </div>
+
+      <div className="col-span-12 grid grid-cols-12 gap-x-8">
+        <div className="col-span-7 text-base">
+          <p className="mb-10">
+          Supabase is now available in 7 different geographic regions, so you can reduce latency by deploying in close
+          proximity to your customer base.
+          </p>
+          <p className="mb-10">
+          A key metric in how we measure Supabase is what we call "Time to Value". How fast can a user go from sign up,
+          to making their first API request? How fast can they from being in Production and generating value for their
+          own customers? We've made several case studies available on our website here, with a special focus on how Supabase
+          enables them to build and scale their product in as little time as possible.
+          </p>
+        </div>
+        <div className="col-span-6"></div>
+      </div>
+
+    </div>
+  </div>
+)
+
+const Security = () => (
+  <div className="bg-gray-50">
+    <div className="container mx-auto px-28 py-12">
+      <SectionHeader sectionNumber={2} header="Security" />
+    </div>
+  </div>
+)
+
+const Reliability = () => (
+  <div className="bg-white">
+    <div className="container mx-auto px-28 py-12">
+      <SectionHeader sectionNumber={3} header="Reliability" />
+    </div>
+  </div>
+)
+
+const NewFeaturesAndIntegrations = () => (
+  <div className="bg-white">
+    <div className="container mx-auto px-28 py-12">
+      <SectionHeader sectionNumber={4} header="New Features & Integrations" />
+    </div>
+  </div>
+)
+
+const BetaPricing = () => (
+  <div className="bg-gray-50">
+    <div className="container mx-auto px-28 py-12">
+      <SectionHeader sectionNumber={5} header="Beta Pricing" />
+    </div>
+  </div>
+)
+
+const OpenSource = () => (
+  <div className="bg-white">
+    <div className="container mx-auto px-28 py-12">
+      <SectionHeader sectionNumber={6} header="Open Source" />
+    </div>
+  </div>
+)
+
+// Skip this segment first
+const FundingPartners = () => (
+  <div></div>
+)
+
+const ScalingOurTeam = () => (
+  <div className="bg-gray-50">
+    <div className="container mx-auto px-28 py-12">
+      <SectionHeader sectionNumber={8} header="Scaling Our Team" />
+    </div>
+  </div>
+)
+
+const WhatsNext = () => (
+  <div className="bg-white">
+    <div className="container mx-auto px-28 py-12">
+      <SectionHeader sectionNumber={9} header="What's Next" />
+    </div>
+  </div>
+)
+
+const Beta = () => {
+  return (
+    <Layout hideHeader={true}>
+      <Head>
+        <title>{site_title}</title>
+        <meta name="description" content={DESCRIPTION} />
+        <meta property="og:type" content="website" />
+        <meta name="og:title" property="og:title" content={site_title} />
+        <meta name="og:description" property="og:description" content={DESCRIPTION} />
+        <meta property="og:site_name" content="" />
+        <meta property="og:url" content="/public/og/og-image.jpg" />
+        <meta name="twitter:card" content="summary" />
+        <meta name="twitter:title" content="" />
+        <meta name="twitter:description" content={DESCRIPTION} />
+        <meta name="twitter:site" content={site_title} />
+        <meta name="twitter:creator" content="supabase_io" />
+        <link rel="icon" type="image/png" href="/public/favicon/favicon.ico" />
+        <link rel="apple-touch-icon" href="/public/favicon/favicon.ico" />
+        <meta property="og:image" content="/public/og/og-image.jpg" />
+        <meta name="twitter:image" content="/public/og/og-image.jpg" />
+      </Head>
+      <Container>
+        <Hero />
+        <Introduction />
+        <Performance />
+        <Security />
+        <Reliability />
+        <NewFeaturesAndIntegrations />
+        <BetaPricing />
+        <OpenSource />
+        <ScalingOurTeam />
+        <WhatsNext />
+      </Container>
+    </Layout>
+  )
+}
+
+export default Beta
\ No newline at end of file