diff --git a/www/data/BetaPage.js b/www/data/BetaPage.js index 9832a8c5e74..95ad69b7fcb 100644 --- a/www/data/BetaPage.js +++ b/www/data/BetaPage.js @@ -10,7 +10,7 @@ export const AlphaNumbers = [ fill="none" strokeLinecap="round" strokeLinejoin="round" - className="css-i6dzq1" + className="stroke-white dark:stroke-black" > @@ -32,7 +32,7 @@ export const AlphaNumbers = [ fill="none" strokeLinecap="round" strokeLinejoin="round" - className="css-i6dzq1" + className="stroke-white dark:stroke-black" > @@ -52,7 +52,7 @@ export const AlphaNumbers = [ fill="none" strokeLinecap="round" strokeLinejoin="round" - className="css-i6dzq1" + className="stroke-white dark:stroke-black" > @@ -73,7 +73,7 @@ export const AlphaNumbers = [ fill="none" strokeLinecap="round" strokeLinejoin="round" - className="css-i6dzq1" + className="stroke-white dark:stroke-black" > @@ -96,7 +96,7 @@ export const AlphaNumbers = [ fill="none" strokeLinecap="round" strokeLinejoin="round" - className="css-i6dzq1" + className="stroke-white dark:stroke-black" > @@ -119,7 +119,7 @@ export const AlphaNumbers = [ fill="none" strokeLinecap="round" strokeLinejoin="round" - className="css-i6dzq1" + className="stroke-white dark:stroke-black" > @@ -134,19 +134,32 @@ export const AlphaNumbers = [ 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'] + chapters: [ + { no: 1, name: 'Performance', key: 'performance' }, + { no: 2, name: 'Security', key: 'security' }, + { no: 3, name: 'Reliability', key: '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'] + chapters: [ + { no: 4, name: 'New Features & Integrations', key: 'features' }, + { no: 5, name: 'Beta Pricing', key: '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'] + chapters: [ + { no: 6, name: 'Open Source', key: 'openSource' } + ] }, { 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'] + chapters: [ + { no: 7, name: 'Funding Partners', key: 'funding' }, + { no: 8, name: 'Scaling Our Team', key: 'scaling' }, + { no: 9, name: 'What\'s Next', key: 'next' } + ] }, ] diff --git a/www/pages/beta.tsx b/www/pages/beta.tsx index fdd9ee44276..d0246fcd14c 100644 --- a/www/pages/beta.tsx +++ b/www/pages/beta.tsx @@ -6,13 +6,13 @@ import { YAxis, CartesianGrid, Tooltip, - Legend, Label, LabelList, ResponsiveContainer, } from 'recharts' import Head from 'next/head' +import { useRef } from 'react' import Container from 'components/Container' import Layout from 'components/Layout' import CountUp from 'components/CountUp' @@ -21,87 +21,132 @@ import { AlphaNumbers, IntroductionSegments, PerformanceComparisonData } from 'd const site_title = `${APP_NAME} | We are now in Beta` -type SectionHeaderProps = { - sectionNumber: number - header: string -} +const HamburgerMenu = () => ( +
+ + + + + +
+) -const SectionHeader = (props: SectionHeaderProps) => { +const SectionHeader = (props: any) => { const { sectionNumber, header } = props return (
- 0{sectionNumber} -

{header}

+ + 0{sectionNumber} + +

{header}

) } const Hero = () => ( -
- TBD, scroll down first -
-) - -const Introduction = () => ( -
-
-
+
+
+
+

+ Supabase is an opensource Firebase alternative. We're building the features of Firebase + using enterprise-grade, open source tools. +

- After the launch of our Alpha{' '} - Program in June, we've been fortunate to work with thousands of early adopters on - improving both our Open Source, and Hosted offerings. + Today, we're moving to Beta

-
- -
-

Alpha Program in Numbers

-
- -
- {AlphaNumbers.map((stat: any, idx: number) => ( -
-
-
- {stat.icon} -
-
-
-

- {stat.value} - {stat.unit && {stat.unit}} -

-
-
-

{stat.name}

-
-
- ))} -
- -
- {IntroductionSegments.map((segment: any, segmentIdx: number) => ( - <> -
- {segment.description} -
-
-
- {segment.chapters.map((chapter: string, idx: number) => ( -
-

{`0${idx + 1}`}

-

- {chapter} -

-
- ))} -
- - ))}
) +const Introduction = (props: any) => { + const { scrollTo } = props + return ( +
+
+
+

+ After the launch of our{' '} + + Alpha + {' '} + Program in June, we've been fortunate to work with thousands of early adopters on + improving both our Open Source, and Hosted offerings. +

+
+ +
+

+ Alpha Program in Numbers +

+
+ +
+ {AlphaNumbers.map((stat: any, idx: number) => ( +
+
+
+ {stat.icon} +
+
+
+

+ {stat.value} + {stat.unit && {stat.unit}} +

+
+
+

{stat.name}

+
+
+ ))} +
+ +
+ {IntroductionSegments.map((segment: any, segmentIdx: number) => ( +
+
+

{segment.description}

+
+
+
+ {segment.chapters.map((chapter: any, idx: number) => ( +
scrollTo(chapter.key)} + > +

{`0${ + chapter.no + }`}

+

{chapter.name}

+
+ ))} +
+
+ ))} +
+
+
+ ) +} + const Performance = () => { const readColors = ['#38BC81', 'red'] const writeColors = ['#65D9A5', 'pink'] @@ -165,13 +210,95 @@ const Performance = () => { ) + const ComparisonChartV2 = () => { + return ( +
+
+

Read (requests/s)

+
+
+
+
+ Supabase +
+
+
+

1167

+
+
+
+
+
+
+ Firebase +
+
+
+

366

+
+
+
+
+
+

3.2x

+

faster read requests

+
+ +
+ +
+

Write (requests/s)

+
+
+
+
+ Supabase +
+
+
+

870

+
+
+
+
+
+
+ Firebase +
+
+
+

280

+
+
+
+
+
+

3.1x

+

faster write requests

+
+
+ ) + } + return ( -
-
+
+
-
-
+
+

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 @@ -180,34 +307,53 @@ const Performance = () => {

During our Alpha program we have been obsessively tweaking our stack to tease out superior performance. We chose the hyper-scalable{' '} - + Elixer {' '} to handle our{' '} - + Realtime engine , and have supported the{' '} - + PostgREST {' '} team while they improved the performance of their auto-generated CRUD APIs.

-

+

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{' '} - + benchmarks {' '} are Open Source, and we are seeking contributors to help maintain our code and improve on our methodologies.

-
+ {/*
+
*/} +
+
-
-

+

+

Supabase is now available in 7 different geographic regions, so you can reduce latency by deploying in close proximity to your customer base.

@@ -225,88 +371,77 @@ const Performance = () => { ) } -const Security = () => ( -
-
- +const Security = () => { + return ( +
+
+ -
-
-

- As an infrastructure provider, Security has been a priority from day one. During - Supabase's Alpha period we experienced a single security breach, which was the result of - weak customer passwords. An automated brute force attack accessed a handful of our - customer's databases who had chosen weak passwords. The instances involved were - destroyed, and the users involved reminded the importance of strong passwords. We now - require that all database passwords pass a strength test (provided by the excellent{' '} - - zxcvbn - - ). -

-

- Approaching the launch of our Beta period, we have been working with a number of - security advisors and specialists globally to put in place several new measures and - processes: -

-
    -
  • - Employed DigitalXRAID to run a full Pen Test on both our internal and customer - infrastructure. In the interest of transparency we are making the summary report - available here. We have since patched the higher priority issues and are currently in - the process of resolving the minor and informational issues. -
    • -
  • - Published a disclosure policy to help ethical hackers help us find vulnerabilities in - our systems. It is availablein the usual place. -
    • -
  • - We now run an ongoing internal Capture the Flag competition, where team members are - challenged to breach various components of our systems. -
    • -
  • - Adopted the{' '} - - Snyk - {' '} - dependency monitor as part of our SSDLC on several key component of our system, to - help locate potential vulnerabilities in third party Open Source dependencies. -
    • -
+
+
+

+ As an infrastructure provider, Security has been a priority from day one. During + Supabase's Alpha period we experienced a single security breach, which was the result + of weak customer passwords. An automated brute force attack accessed a handful of our + customer's databases who had chosen weak passwords. The instances involved were + destroyed, and the users involved reminded the importance of strong passwords. We now + require that all database passwords pass a strength test (provided by the excellent{' '} + + zxcvbn + + ). +

+

+ Approaching the launch of our Beta period, we have been working with a number of + security advisors and specialists globally to put in place several new measures and + processes: +

+
    +
  • + Employed DigitalXRAID to run a full Pen Test on both our internal and customer + infrastructure. In the interest of transparency we are making the summary report + available here. We have since patched the higher priority issues and are currently + in the process of resolving the minor and informational issues. +
    • +
  • + Published a disclosure policy to help ethical hackers help us find vulnerabilities + in our systems. It is availablein the usual place. +
    • +
  • + We now run an ongoing internal Capture the Flag competition, where team members are + challenged to breach various components of our systems. +
    • +
  • + Adopted the{' '} + + Snyk + {' '} + dependency monitor as part of our SSDLC on several key component of our system, to + help locate potential vulnerabilities in third party Open Source dependencies. +
    • +
+
- - {/* Joshen: Was trying a card layout */} - {/*
-
- Employed DigitalXRAID to run a full Pen Test on both our internal and customer infrastructure. - In the interest of transparency we are making the summary report available here. We have since patched - the higher priority issues and are currently in the process of resolving the minor and informational issues. -
-
- Published a disclosure policy to help ethical hackers help us find vulnerabilities in our systems. - It is availablein the usual place. -
-
- We now run an ongoing internal Capture the Flag competition, where team members are challenged to breach - various components of our systems. -
-
- Adopted the Snyk dependency monitor as part of our SSDLC on several key component of our system, to help locate - potential vulnerabilities in third party Open Source dependencies. -
-
*/}
-
-) + ) +} const Reliability = () => ( -
-
+
+
-
-
+
+

During Alpha we experienced 2 minor incidents related to availability, neither of which affected customer access to their data. These were: @@ -347,27 +482,116 @@ const Reliability = () => ( ) const NewFeaturesAndIntegrations = () => ( -

-
+
+
-
-
+
+

- Supabase Beta now comes with the following high level features: (Joshen see whether you - can add pizzazz to this part) + If you're new to Supabase, here's some of the things you can expect to get when using + Supabase as your backend and database:

-
    -
  • - Supabase Auth: we provide an easy to use Javascript (and HTTP) interface allowing your - Users to sign in and out of your application. You can define which rows in your - Database a given user is allowed to access (e.g. only his or her shopping cart), and - we even provide confirmation, recovery, and invite email templates which you can - customize on the dashboard, and we'll send all of your transactional emails for you. +
      +
    • +

      Auth

      +

      + We provide an easy to use{' '} + + Javascript + {' '} + (and{' '} + + HTTP + + ) interface allowing your Users to sign in and out of your application. You can + define which rows in your database a given user is allowed to access (e.g. only his + or her shopping cart), and we even provide confirmation, recovery, and invite email + templates which you can customize on the dashboard, and we'll send all of your + transactional emails for you. We support sending your users passwordless links, they + can use to log them into your app, and even offer several OAuth providers including + Google, GitHub, and have more on the way. +

      +
      • +
    • +

      + Realtime +

      +

      + You can{' '} + + subscribe to changes in your database + {' '} + over websockets, so you don't have to continuously poll for new data. Great for + building chat applications, triggering notifications, or piping data to an analytics + dashboard as and when it comes into your database. +

      +
      • +
    • +

      + CRUD API +

      +

      + You can start interacting with your data directly from your front end application + without the need for an ORM or building out an API backend. We support GraphQL-like{' '} + + querying of multiple tables + {' '} + in a single request, and you can even create and{' '} + + invoke complex functions + + . +

      +
      • +
    • +

      + Quickstart Templates +

      +

      + If you're unfamiliar with SQL, we provide a set of Quickstart Templates that you can + start using straight away. Very soon you'll be able to deploy entire apps (front and + back end) with just the click of a button. +

      +
      • +
    • +

      + Table View +

      +

      + View and edit your data like a spreadsheet from within the Supabase dashboard, + create complex relationships, import and export to csv. +

      +
      • +
    • +

      + SQL Editor +

      +

      + No need to install third party SQL tools, you can run queries directly from the + Supabase Dashbaord. +

      • -
    • Vercel + Stripe
      • -
    • Table Editor
      • -
    • SQL Editor
@@ -376,12 +600,12 @@ const NewFeaturesAndIntegrations = () => ( ) const BetaPricing = () => ( -
-
+
+
-
-
+
+

We've been working closely with many Open Source projects, Infrastructure Providers, and of course our Alpha Users, to provide a predictable and sustainable pricing model. @@ -438,12 +662,12 @@ const BetaPricing = () => ( ) const OpenSource = () => ( -

-
+
+
-
-
+
+

Great software is multi generational and stretches far beyond any single company.

@@ -454,7 +678,11 @@ const OpenSource = () => (

Every dollar that is given to Supabase in GitHub{' '} - + sponsorship {' '} will be funneled back into the community to support the next generation of Open Source @@ -463,7 +691,11 @@ const OpenSource = () => (

One of the biggest barriers to Open Source is knowing exactly how you can contribute. We're partnering with{' '} - + Strive School {' '} to educate the next generation of programmers in Open Source by providing tutorials, @@ -491,12 +723,12 @@ const OpenSource = () => ( const FundingPartners = () =>

const ScalingOurTeam = () => ( -
-
+
+
-
-
+
+

We are looking for hires across multiple positions including PostgreSQL engineers, Cloud engineers, SRE's, and Developer Advocates. We are a fully remote team, spanning 4 @@ -518,12 +750,15 @@ const ScalingOurTeam = () => ( ) const WhatsNext = () => ( -

-
+
+
-
-
+
+

If you watch our repos you'll see that development never stops, we ship every day (and night!), and are always improving Supabase based on user feedback. Alongside @@ -564,7 +799,11 @@ const WhatsNext = () => ( beta@supabase.io {' '} or join the{' '} - + discussion {' '} on GitHub to let us know how we can help you build things faster. @@ -576,6 +815,23 @@ const WhatsNext = () => ( ) const Beta = () => { + const references: any = { + performance: useRef(null), + security: useRef(null), + reliability: useRef(null), + features: useRef(null), + pricing: useRef(null), + openSource: useRef(null), + scaling: useRef(null), + next: useRef(null), + } + + const scrollTo = (key: string) => { + if (references[key]) { + references[key].current.scrollIntoView({ behavior: 'smooth', block: 'start' }) + } + } + return ( @@ -597,16 +853,36 @@ const Beta = () => { +

+ + +
- - - - - - - - - + +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
) diff --git a/www/tailwind.config.js b/www/tailwind.config.js index 6148f249cb1..802f0dd9294 100644 --- a/www/tailwind.config.js +++ b/www/tailwind.config.js @@ -110,6 +110,7 @@ module.exports = { extend: { inset: ['group-hover'], stroke: ['dark'], + height: ['hover'], }, }, plugins: [],