vasceannie/supabase
1
0
Fork 0
Code Issues Pull Requests Actions 8 Packages Projects Releases Wiki Activity

Sending the users to the signup form

Browse Source
This commit is contained in:
Paul Copplestone
2020-01-03 20:56:26 +08:00
parent f312193ea1
commit d89b36fcda
2 changed files with 54 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/docusaurus.config.js
View File

@@ -35,7 +35,7 @@ module.exports = {
// },
{
href: 'https://app.supabase.io',
label: 'Get Early Access →',
label: 'Request Early Access →',
position: 'right',
},
],

128
web/src/pages/index.js
View File

@@ -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