refactor: login screen

package.json

@@ -31,6 +31,7 @@
     "dotenv": "^16.4.5",
     "js-cookie": "^3.0.5",
     "jwt-decode": "^4.0.0",
+    "lucide-react": "^0.545.0",
     "process": "^0.11.10",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

src/components/footer/Footer.tsx

@@ -1,15 +1,12 @@
-import { useAuth } from '@/hooks/useAuth'
 import LinkedinIcon from '../svgComponents/icons/linkedin'
 import EmailIcon from '../svgComponents/icons/EmailIcon'
 
 export default function Footer() {
-  const { user } = useAuth()
-
   return (
     <footer className="bg-roxo-900 bottom-0 flex min-h-[150px] w-screen flex-col items-start sm:items-center justify-center px-6 py-8">
       <div className="flex flex-col sm:flex-row py-4 gap-6 sm:gap-20">
         <div className="">
-          <h3 className="font-bold text-2xl text-verde-300">QuestIO</h3>
+          <a href="https://www.vlab.dc.ufscar.br" className="font-bold text-2xl text-verde-300 transition-color duration-300 hover:text-[#2eb875]">QuestIO</a>
         </div>
 
         <div className="flex flex-row flex-wrap gap-4">
@@ -20,15 +17,27 @@ export default function Footer() {
           </a>
 
           <a
-            href={`/profile/${user?.id}`}
+            href={`https://www.vlab.dc.ufscar.br/tutoriais`}
+            className="flex items-center text-roxo-500 text-sm font-semibold py-2 px-4 border border-roxo-500 rounded-full transition delay-10 duration-200 ease-in-out hover:border-[#9386d9] hover:text-[#9386d9]">
+            Tutoriais
+          </a>
+
+          <a
+            href={`https://legacy.vlab.dc.ufscar.br/camera.php`}
+            className="flex items-center text-roxo-500 text-sm font-semibold py-2 px-4 border border-roxo-500 rounded-full transition delay-10 duration-200 ease-in-out hover:border-[#9386d9] hover:text-[#9386d9]">
+            Vlab
+          </a>
+
+          <a
+            href={`https://legacy.vlab.dc.ufscar.br/agenda`}
             className="flex items-center text-roxo-500 text-sm font-semibold py-2 px-4 border border-roxo-500 rounded-full transition delay-10 duration-200 ease-in-out hover:border-[#9386d9] hover:text-[#9386d9]">
-            Perfil
+            Agenda
           </a>
 
           <a
-            href={`https://www.vlab.dc.ufscar.br/`}
+            href={`https://www.vlab.dc.ufscar.br/equipe.html`}
             className="flex items-center text-roxo-500 text-sm font-semibold py-2 px-4 border border-roxo-500 rounded-full transition delay-10 duration-200 ease-in-out hover:border-[#9386d9] hover:text-[#9386d9]">
-            Sobre
+            Equipe
           </a>
         </div>
 

src/components/forgotPassword/ForgotPasswordForm.tsx

@@ -1,14 +1,13 @@
-import Button from '../utility/Button'
-import ModalSquareForm from '../utility/ModalSquareForm'
-import FormTitle from '../form/FormTitle'
-import Information from './Information'
+import { useState } from 'react'
 import { forgotPassword } from '@/services/api/auth'
 import { z } from 'zod'
 import { useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
+import Button from '../utility/Button'
+import FormTitle from '../form/FormTitle'
 import ErrorMessage from '../form/ErrorMessage'
 import RecoveryLink from '../login/RecoveryLink'
-import { useState } from 'react'
+import FormInput from '../form/FormInput'
 
 const EmailSchema = z.object({
   email: z
@@ -48,41 +47,30 @@ export default function ForgotPasswordForm() {
 
   return (
     <>
-   <div className="relative flex flex-col gap-16 mt-14 items-center justify-center p-5 lg:px-14 lg:py-10 xl:min-w-[30rem]">
-    <div className="absolute top-[-63px]">
-    {showRecoveryLink && <RecoveryLink
-      text="Link de Recuperação enviado"
-       />}
-       </div>
-    <ModalSquareForm>
-      <div className="relative flex flex-col items-center justify-center p-5 lg:px-14 lg:py-10 xl:min-w-[30rem]">
-        <FormTitle title="Recuperar senha"></FormTitle>
-        <Information></Information>
+      <div className="absolute top-24">
+        {showRecoveryLink && <RecoveryLink text="Link de Recuperação enviado"/>}
+      </div>
+
+      <div className="h-auto bg-[#f8f7fc] flex flex-col items-center justify-center border border-roxo-300 rounded mt-8 sm:mt-0 p-8 sm:p-12 min-w-full sm:min-w-[36rem]">
+        <FormTitle title="Recuperar senha"/>
 
-        <form className="mt-4 flex flex-col items-center justify-center sm:mt-10 md:mt-8" onSubmit={handleSubmit(handleClick)}>
-          <div className="mb-4">
-            <label className="mb-2 block font-mono text-sm font-semibold text-preto-texto sm:text-[12px] md:text-base lg:text-base">
-              {"email"}
-            </label>
+        <p className="w-full text-cinzaClaro mt-3 text-start text-sm">
+          Informe o e-mail da sua conta
+        </p>
 
-            <input
-              {...register('email', {
-                required: 'O campo do e-mail é obrigatório'
-              })}
-              className={`border-2 border-roxo-300 px-2 py-1  text-base font-semibold text-preto-texto shadow-default-roxo-300 focus:border-roxo-900 focus:shadow-roxo-900 sm:border-[2.5px] sm:px-3 sm:text-lg md:border-4 md:px-4 md:text-xl lg:text-2xl`}
+        <form className="mt-8 w-full flex flex-col items-center justify-center" onSubmit={handleSubmit(handleClick)}>
+          <div className="w-full flex flex-col items-start">
+            <FormInput
+              registerProps={register('email')}
               type="text"
+              label="E-mail"
             />
-
-            <div className="ml-auto mt-4 mr-auto">
-              {errors.email &&  <ErrorMessage error={errors.email.message}/>}
-            </div>
-
+            {errors.email &&  <ErrorMessage error={errors.email.message}/>}
           </div>
-          <Button type="submit" disabled={isSubmitting} className="mt-4" text="Enviar"></Button>
+
+          <Button type="submit" disabled={isSubmitting} className="my-4 w-full" text="Enviar"></Button>
         </form>
       </div>
-    </ModalSquareForm>
-    </div>
     </>
   )
 }

src/components/form/ForgotPassword.tsx

@@ -2,9 +2,9 @@ import { Link } from 'react-router-dom'
 
 export default function ForgotPassword() {
   return (
-    <div className="ml-auto pb-4 text-sm font-bold text-roxo-300 sm:pb-5 sm:text-[10px] md:pb-6 md:text-sm">
+    <div className="ml-auto mb-4 text-sm underline text-roxo-500">
       <Link className="hover:text-roxo-900" to="/forgotPassword">
-        esqueceu a senha?
+        Esqueceu a senha?
       </Link>
     </div>
   )

src/components/form/FormInput.tsx

@@ -13,12 +13,13 @@ const FormInput: React.FC<FormInputProps> = ({
   registerProps,
 }) => {
   return (
-    <div className="mb-4">
-      <label className="mb-2 block font-mono text-sm font-semibold text-preto-texto sm:text-[12px] md:text-base lg:text-base">
+    <div className="mb-4 w-full">
+      <label className="mb-2 block font-mono text-[14px] uppercase tracking-wider text-roxo-500">
         {label}
       </label>
+
       <input
-        className={`border-2 border-roxo-300 px-2 py-1 text-base font-semibold text-preto-texto shadow-default-roxo-300 focus:border-roxo-900 focus:shadow-roxo-900 sm:border-[2.5px] sm:px-3 sm:text-lg md:border-4 md:px-4 md:text-xl lg:text-2xl`}
+        className={`w-full border-2 border-roxo-300 p-2 text-base font-medium text-roxo-900 shadow-default-roxo-300 focus:outline-none focus:ring-0 focus:border-roxo-300`}
         type={type}
         {...registerProps}
       />

src/components/form/FormTitle.tsx

@@ -4,7 +4,7 @@ interface FormTitleProps {
 
 export default function FormTitle({ title }: FormTitleProps) {
   return (
-    <h1 className="mr-auto text-2xl font-bold leading-8 text-preto-texto sm:mt-5 sm:text-[25px] sm:leading-9 md:mt-6 md:text-3xl md:leading-10 lg:text-5xl">
+    <h1 className="mr-auto text-3xl sm:text-4xl font-bold text-roxo-900">
       {title}
     </h1>
   )

src/components/header/HeaderLinks.tsx

@@ -0,0 +1,76 @@
+import { useState } from 'react'
+import { Link } from 'react-router-dom'
+import { Menu, X } from 'lucide-react'
+import Logo from '@/components/svgComponents/Logo'
+
+type NavLink = {
+  label: string
+  href: string
+}
+
+interface HeaderLinksProps {
+  links?: NavLink[]
+}
+
+export default function HeaderLinks({
+  links = [
+    { label: 'Tutoriais', href: 'https://www.vlab.dc.ufscar.br/tutoriais/' },
+    { label: 'Vlab', href: 'https://legacy.vlab.dc.ufscar.br/camera.php' },
+    { label: 'Agenda', href: 'https://legacy.vlab.dc.ufscar.br/agenda/' },
+    { label: 'Equipe', href: 'https://www.vlab.dc.ufscar.br/equipe.html' },
+  ],
+}: HeaderLinksProps) {
+  const [menuOpen, setMenuOpen] = useState(false)
+
+  return (
+    <header className={`w-full flex items-center justify-between sm:justify-start absolute top-0 z-50 p-5 sm:p-12 ${menuOpen ? "bg-[#f8f7fc] sm:bg-transparent" : "bg-transparent"}`}>
+      {/* Logo */}
+      <div className="flex items-center mr-8">
+        <Logo
+          link="https://www.vlab.dc.ufscar.br"
+          className="w-[48px] sm:w-[64px] aspect-square cursor-pointer text-roxo-300 transition duration-300 ease-in-out hover:text-roxo-900"
+        />
+      </div>
+
+      <nav className="hidden sm:flex flex-row flex-wrap items-center gap-4">
+        {links.map((link) => (
+          <Link
+            key={link.href}
+            to={link.href}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="py-2 px-4 text-sm bg-[#f8f7fc] border border-roxo-300 text-roxo-300 rounded-full transition-all duration-300 hover:bg-roxo-300 hover:text-white"
+          >
+            {link.label}
+          </Link>
+        ))}
+      </nav>
+
+      {/* Botão mobile */}
+      <button
+        onClick={() => setMenuOpen(!menuOpen)}
+        className="sm:hidden p-2 border border-roxo-500 rounded text-roxo-300 bg-[#f8f7fc] hover:text-roxo-900 transition-all duration-300 active:bg-[#d6cef5]"
+      >
+        {menuOpen ? <X size={24} /> : <Menu size={24} />}
+      </button>
+
+      {/* Menu mobile */}
+      {menuOpen && (
+        <div className="absolute top-full left-0 w-full bg-[#f8f7fc] shadow-md flex flex-col items-center pt-1 px-5 sm:hidden">
+          {links.map((link) => (
+            <Link
+              key={link.href}
+              to={link.href}
+              target="_blank"
+              rel="noopener noreferrer"
+              onClick={() => setMenuOpen(false)}
+              className="w-full text-center py-5 px-2 text-sm border-t border-[#d6cef5] text-roxo-300 active:bg-[#d6cef5]"
+            >
+              {link.label}
+            </Link>
+          ))}
+        </div>
+      )}
+    </header>
+  )
+}