Criação da página de login (Elementos e estilo)

Nós iremos então na pasta “pages”, nela nós iremos criar um arquivo chamado “login.tsx” e iremos criar a sua função. Nós iremos importar o estilo criado para registro e login.
```
import styles from "../styles/registerLogin.module.scss";

const Login = function () {
  return <></>;
};

export default Login;
```

Nós iremos então fazer a configuração do nosso login. Nós iremos utilizar o head, main e header, que nem fizemos no registro.

import Head from "next/head";
import HeaderGeneric from "../src/components/common/headerGeneric";
import styles from "../styles/registerLogin.module.scss";

const Login = function () {
  return (
    <>
      <Head>
        <title>Onebitflix - Login</title>
        <link rel="shortcut icon" href="/favicon.svg" type="image/x-icon" />
      </Head>
      <main className={styles.main}>
        <HeaderGeneric logoUrl="/" btnUrl="/register" btnContent="Quero fazer parte" />
      </main>
    </>
  );
};

export default Login;

Nós podemos ver agora em “/login” que temos o header e também o main está como queremos, com o seu gradiente.

Agora vamos colocar os itens de formulário aqui também. Só que nós iremos colocar apenas um input para email e outro para senha.

Nós iremos colocar as mesmas classes que colocamos em registro, pois assim iremos reaproveitar todo o visual do formulário.

<Container className="py-5">
	<p className={styles.formTitle}>Bem-vindo(a) ao OneBitFlix!</p>
	<Form className={styles.form}>
	  <p className="text-center">
	    <strong>Bem-vindo(a) ao OneBitFlix!</strong>
    </p>
    <FormGroup>
	    <Label for="email" className={styles.label}>
	      E-MAIL
      </Label>
      <Input
	      id="email"
        name="email"
        type="email"
        placeholder="Qual o seu email?"
        required
        className={styles.input}
      />
    </FormGroup>
    <FormGroup>
	    <Label for="password" className={styles.label}>
	      SENHA
      </Label>
      <Input
	      id="password"
        name="password"
        type="password"
        placeholder="Qual a sua senha?"
        required
        className={styles.input}
      />
    </FormGroup>
	  <Button outline className={styles.formBtn}>
	    ENTRAR
    </Button>
	</Form>
</Container>

Nós iremos então fazer a chamada do footer depois de container, que nem fizemos no registro.
```
		</Container>
	<Footer />
</main>
```