Skip to content
Snippets Groups Projects
index.tsx 3.33 KiB
Newer Older
import Head from 'next/head';
insert's avatar
insert committed
import classNames from 'classnames';

import styles from './index.module.scss';
import flex from '../components/util/flex.module.scss';

insert's avatar
insert committed
import { useState, FormEvent } from 'react';
import axios from 'axios';

insert's avatar
insert committed
export default function Home() {
insert's avatar
insert committed
    let [ sent, setSent ] = useState(false);
    let [ email, setEmail ] = useState('');

    function submit(e: FormEvent<HTMLFormElement>) {
        e.preventDefault();
        setSent(true);

        axios.post('/api/send', { email });
    }

insert's avatar
insert committed
    return (
        <div>
            <Head>
                <title>Revolt</title>
                <link rel="icon" href="/favicon.ico" />
insert's avatar
insert committed
                <meta name="viewport" content="width=device-width, initial-scale=0.75, user-scalable=0"></meta>
                <meta property="og:title" content="REVOLT" />
                <meta property="og:description" content="Don't bother with chat apps that don't respect your privacy. REVOLT is a brand new chat platform designed around you." />
                <meta property="og:url" content="https://revolt.chat" />
                <meta property="og:image" content="/embed.png" />
                <meta property="twitter:card" content="summary_large_image"></meta>
                <meta property="twitter:image" content="/embed.png"></meta>
                <meta property="og:image:type" content="image/png" />
                <meta property="og:image:width" content="1280" />
                <meta property="og:image:height" content="720" />
insert's avatar
insert committed
            </Head>
        
            <main>
                <div className={styles.hero}>
                    <div className={styles.nav}>
                        <img className={styles.logo} src="/logo.svg" />
                    </div>
                    <div className={classNames(styles.body, flex.columns)}>
                        <div className={classNames(flex.column, styles.heroText)}>
                            <div className={styles.primary}>
                                <h2>Don't bother with chat apps that don't respect your privacy.</h2>
insert's avatar
insert committed
                                <h3>Communication is critical.<br/>Privacy is essential.</h3>
insert's avatar
insert committed
                                {
                                    sent ? <h4>Thanks! We'll keep you up to date.</h4> :
                                    <form className={styles.signup} onSubmit={submit}>
                                        <input
insert's avatar
insert committed
                                            type="email"
insert's avatar
insert committed
                                            placeholder="Please enter your email."
insert's avatar
insert committed
                                            value={email}
                                            onChange={e => setEmail(e.currentTarget.value)}
                                        />
                                        <button>Join waiting list.</button>
                                    </form>
                                }
insert's avatar
insert committed
                            </div>
                        </div>
                        <div className={classNames(flex.column, styles.heroImage)}>
insert's avatar
insert committed
                            <div className={styles.container}>
                                <img src="/concept_inner.svg" />
                            </div>
insert's avatar
insert committed
                        </div>
                    </div>
                    <div className={styles.heroFix}></div>
                </div>
            </main>
        </div>
insert's avatar
insert committed
}