feat: login and signup page

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ifsp-eventos-web",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "private": true,
   "scripts": {
     "dev": "next dev",

src/app/auth/log-in/login.css

@@ -0,0 +1,75 @@
+.full-page-wrapper {
+  background-color: var(--black);
+  background-image: radial-gradient(circle farthest-corner at 100% 100%, var(--gradient-blue), transparent 44%), radial-gradient(circle farthest-corner at 0% 100%, var(--gradient-red), transparent 32%);
+  width: 100%;
+  max-width: none;
+  padding: 24px 12px;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.text-field {
+  border: 1px solid var(--silver);
+  background-color: var(--back-grey);
+  border-radius: 9px;
+  min-width: 120px;
+  height: 44px;
+  margin-bottom: 16px;
+  padding: 19px 12px;
+  font-size: 15px;
+  line-height: 1.4em;
+  transition: border-color .2s;
+  display: block;
+  width: 100%;
+  color: #333;
+  vertical-align: middle;
+}
+
+.button {
+  background-color: var(--black);
+  color: var(--white);
+  text-align: center;
+  border-radius: 9px;
+  flex: none;
+  margin-bottom: 8px;
+  padding: 8px 28px;
+  font-size: 18px;
+  font-weight: 500;
+  line-height: 1.5;
+  transition: box-shadow .2s, transform .2s, border-color .2s, color .2s, background-color .2s;
+  box-shadow: 0 2px #2020200d;
+  cursor: pointer;
+  border: 0;
+  text-decoration: none;
+  display: inline-block;
+  width: 100%;
+}
+
+.button:hover {
+  background-color: var(--dark-grey);
+}
+
+.form-card-footer {
+  grid-column-gap: 8px;
+  flex-wrap: wrap;
+  justify-content: center;
+  font-size: 14px;
+  margin-top: 12px;
+  display: flex;
+}
+
+.below-card-link {
+  color: var(--light-grey);
+  margin-top: 24px;
+  font-size: 14px;
+  display: inline-block;
+  text-decoration: none;
+  transition: color .2s;
+}
+
+.below-card-link:hover {
+  color: var(--soft-grey);
+}

src/app/auth/log-in/page.tsx

@@ -0,0 +1,42 @@
+import Link from "next/link";
+import Image from "next/image";
+
+import "./login.css";
+import {Button} from "@nextui-org/react";
+
+export default function Login() {
+  return (
+    <div className="full-page-wrapper text-black">
+      <Link href="/" className="z-10 mb-8 opacity-100 hover:opacity-80 duration-200 text-grey">
+        <Image priority={true} className="border-0 inline-block" src={"/images/logo_branca_recortada.png"}
+               alt={"logo branca"}
+               width={190} height={100}/>
+      </Link>
+
+      <div className="p-10 bg-white rounded-xl shadow-sm max-w-[380px]">
+        <form className="block mt-0">
+          <div className="mb-8 text-center min-w-72">
+            <span className="font-semibold block mb-3 text-2xl">Entrar</span>
+            <p className="mb-1.5 text-sm opacity-75">Preencha seus dados de login abaixo.</p>
+          </div>
+          <input maxLength={256} placeholder="E-mail" name="email"
+                 className="text-field" type="email" autoComplete="username" required/>
+          <input maxLength={256} placeholder="Senha" name="password" id="wf-log-in-email"
+                 className="text-field" type="password" autoComplete="password" required/>
+          <Button isLoading={false} type="submit" className="button data-[hover=true]:opacity-100"
+          >Entrar</Button>
+          <div className="form-card-footer">
+            <span>Não tem uma conta?</span>
+            <Link className="text-grey duration-200 hover:opacity-90" href="/auth/sign-up">Registre-se</Link>
+          </div>
+        </form>
+      </div>
+
+      <div className="hidden bg-silver text-small p-4 text-black rounded-md mt-2.5 max-w-[380px]">
+        {/*show error*/}
+      </div>
+
+      <Link href="/auth/reset-password" className="below-card-link">Esqueceu sua senha?</Link>
+    </div>
+  )
+}

src/app/auth/sign-up/page.tsx

@@ -0,0 +1,81 @@
+"use client"
+
+import Link from "next/link";
+import Image from "next/image";
+
+import "./signup.css";
+import {Button} from "@nextui-org/react";
+import {useMask} from "@react-input/mask";
+import React from "react";
+
+export default function Register() {
+  const [email, setEmail] = React.useState("");
+  const [password, setPassword] = React.useState("");
+  const [confirmPassword, setConfirmPassword] = React.useState("");
+  const phoneRef = useMask({
+    mask: "(__) _____-____",
+    replacement: {_: /\d/},
+  });
+  const cpfRef = useMask({
+    mask: "nnn.nnn.nnn-nn",
+    replacement: {n: /\d/},
+  });
+  const validateEmail = (value: string) =>
+    value.match(/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i);
+  const validatePassword = (value: string) => value.length >= 6;
+
+  const isEmailInvalid = React.useMemo(() => {
+    if (email === "") return false;
+    return validateEmail(email.trim()) ? false : true;
+  }, [email]);
+  const isPasswordInvalid = React.useMemo(() => {
+    if (password === "") return false;
+    return validatePassword(password) ? false : true;
+  }, [password]);
+  const isConfirmPasswordInvalid = React.useMemo(() => {
+    if (confirmPassword === "") return false;
+    return password === confirmPassword ? false : true;
+  }, [password, confirmPassword]);
+
+
+  return (
+    <div className="full-page-wrapper text-black">
+      <Link href="/" className="z-10 relative mb-8 opacity-100 hover:opacity-80 duration-200 text-grey w-[190px] h-[46px]">
+        <Image priority={true} className="absolute object-contain border-0 inline-block h-auto" src={"/images/logo_branca_recortada.png"} alt={"logo"}
+               fill/>
+      </Link>
+
+      <div className="p-10 bg-white rounded-xl shadow-sm max-w-[380px]">
+        <form className="block mt-0">
+          <div className="mb-8 text-center min-w-72">
+            <span className="font-semibold block mb-3 text-2xl">Registre-se</span>
+          </div>
+          <input maxLength={256} placeholder="Nome completo" name="name" title="Nome completo"
+                 className="text-field" type="text" autoComplete="off" required/>
+          <input maxLength={256} placeholder="CPF" ref={cpfRef} name="cpf" title="CPF"
+                 className="text-field" type="text" autoComplete="off" required/>
+          <input maxLength={256} placeholder="E-mail" name="email" title="E-mail"
+                 className="text-field" type="email" autoComplete="email" required/>
+          <input maxLength={256} placeholder="Celular" ref={phoneRef} name="phone" title="Celular"
+                 className="text-field" type="text" autoComplete="off" required/>
+          <input type={"date"} placeholder="Nascimento" autoComplete="off" name="date" title="Data de nascimento"
+                 required className="text-field"/>
+          <input maxLength={256} placeholder="Senha" name="password" title="Senha"
+                 className="text-field" type="password" autoComplete="off" required/>
+          <input maxLength={256} placeholder="Confirmar senha" name="confirm_password" title="Confirmar senha"
+                 className="text-field" type="password" autoComplete="off" required/>
+          <Button isLoading={false} type="submit" className="button data-[hover=true]:opacity-100"
+          >Registrar</Button>
+          <div className="form-card-footer">
+            <span>Já tem uma conta?</span>
+            <Link className="text-grey duration-200 hover:opacity-90" href="/auth/log-in">Entre</Link>
+          </div>
+        </form>
+      </div>
+
+      <div className="hidden bg-silver text-small p-4 text-black rounded-md mt-2.5 max-w-[380px]">
+        {/*show error*/}
+      </div>
+    </div>
+  )
+}

src/app/auth/sign-up/signup.css

@@ -0,0 +1,75 @@
+.full-page-wrapper {
+  background-color: var(--black);
+  background-image: radial-gradient(circle farthest-corner at 100% 100%, var(--gradient-blue), transparent 44%), radial-gradient(circle farthest-corner at 0% 100%, var(--gradient-red), transparent 32%);
+  width: 100%;
+  max-width: none;
+  padding: 24px 12px;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.text-field {
+  border: 1px solid var(--silver);
+  background-color: var(--back-grey);
+  border-radius: 9px;
+  min-width: 120px;
+  height: 44px;
+  margin-bottom: 16px;
+  padding: 19px 12px;
+  font-size: 15px;
+  line-height: 1.4em;
+  transition: border-color .2s;
+  display: block;
+  width: 100%;
+  color: #333;
+  vertical-align: middle;
+}
+
+.button {
+  background-color: var(--black);
+  color: var(--white);
+  text-align: center;
+  border-radius: 9px;
+  flex: none;
+  margin-bottom: 8px;
+  padding: 8px 28px;
+  font-size: 18px;
+  font-weight: 500;
+  line-height: 1.5;
+  transition: box-shadow .2s, transform .2s, border-color .2s, color .2s, background-color .2s;
+  box-shadow: 0 2px #2020200d;
+  cursor: pointer;
+  border: 0;
+  text-decoration: none;
+  display: inline-block;
+  width: 100%;
+}
+
+.button:hover {
+  background-color: var(--dark-grey);
+}
+
+.form-card-footer {
+  grid-column-gap: 8px;
+  flex-wrap: wrap;
+  justify-content: center;
+  font-size: 14px;
+  margin-top: 12px;
+  display: flex;
+}
+
+.below-card-link {
+  color: var(--light-grey);
+  margin-top: 24px;
+  font-size: 14px;
+  display: inline-block;
+  text-decoration: none;
+  transition: color .2s;
+}
+
+.below-card-link:hover {
+  color: var(--soft-grey);
+}

src/app/globals.css

@@ -65,10 +65,4 @@ h3 {
 ::-webkit-scrollbar-thumb {
   background: #f0ffd9;
   border-radius: 4px;
-}
-
-#__next {
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
 }

src/components/Footer.tsx

@@ -60,7 +60,7 @@ const Footer = () => {
       <div className="col-start-8 col-span-1 flex flex-col justify-start">
         <h5 className="footer-header">gerenciamento</h5>
         <Link
-          href="/auth/sign-in"
+          href="/auth/log-in"
           className="footer-link"
         >
           Entrar

src/components/Header.tsx

@@ -37,9 +37,9 @@ export default function Header({search=""} : {search?: string}) {
             <Link href={"/events"}>Eventos</Link>
           </div>
           <div className={`inline-block cursor-pointer text-neutral-500 duration-200 hover:text-neutral-950`}>
-            <Link href={"#entrar"}>Entrar</Link>
+            <Link href={"/auth/log-in"}>Entrar</Link>
           </div>
-          <Link href={"#registrar"}>
+          <Link href={"/auth/sign-up"}>
             <div
               className={`inline-block cursor-pointer duration-200 bg-neutral-900 hover:bg-opacity-90 text-white py-1.5 px-5 rounded-md`}>
               Registre-se

src/components/home/Hero.tsx

@@ -16,7 +16,7 @@ const Hero = () => {
             Não deixe para depois: explore nosso catálogo de eventos que ocorrem anualmente no IFSP Cubatão
           </p>
 
-          <Link href="/events" className="button w-button">Visualizar</Link>
+          <Link href="/events" className="hero-button">Visualizar</Link>
         </div>
 
         <div className={`flex justify-end`}>

src/components/home/hero.css

@@ -22,11 +22,11 @@
   position: relative;
 }
 
-.button:hover {
+.hero-button:hover {
   background-color: var(--dark-grey);
 }
 
-.button {
+.hero-button {
   background-color: var(--black);
   color: var(--white);
   text-align: center;