+
+
+ {helperText && (
+
+ {helperText}
+
+ )}
+
+ );
+};
diff --git a/frontend/src/components/ui/input/styles.module.css b/frontend/src/components/ui/input/styles.module.css
new file mode 100644
index 0000000..9020b7f
--- /dev/null
+++ b/frontend/src/components/ui/input/styles.module.css
@@ -0,0 +1,143 @@
+.input__wrapper {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ width: 100%;
+}
+
+.label {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ cursor: pointer;
+}
+
+.label__text {
+ font-size: 0.875rem;
+ font-weight: 500;
+ color: #374151;
+}
+
+.input__container {
+ position: relative;
+ height: 48px;
+ width: 100%;
+ box-sizing: border-box;
+}
+
+.input {
+ width: 100%;
+ height: 100%;
+ padding: 0 48px;
+ border-radius: 4px;
+ font-size: 1rem;
+ border: 1px solid #d1d5db;
+ box-sizing: border-box;
+ transition: border-color 0.2s ease;
+}
+
+.input:focus {
+ outline: none;
+ border-color: black;
+ color: black;
+}
+
+.input__error {
+ border-color: #ef4444;
+ color: #ef4444;
+}
+
+.input__warning {
+ border-color: #f59e0b;
+ color: #f59e0b;
+}
+
+.input__success {
+ border-color: #10b981;
+ color: #10b981;
+}
+
+.helper__text {
+ font-size: 1rem;
+ margin-top: 8px;
+ color: #6b7280;
+}
+
+.helper__text__error {
+ color: #ef4444;
+}
+
+.helper__text__warning {
+ color: #f59e0b;
+}
+
+.icon {
+ width: 20px;
+ height: 20px;
+ color: white;
+}
+
+/* ícone à esquerda */
+.icon__left {
+ position: absolute;
+ left: 8px;
+ top: 50%;
+ transform: translateY(-50%);
+ width: 32px;
+ height: 32px;
+ background-color: #d1d5db;
+ color: white;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 2px;
+ pointer-events: none;
+ transition: background-color 0.2s ease;
+}
+
+/* Quando o container recebe foco, o ícone fica preto */
+.input__container:focus-within .icon__left {
+ background-color: black;
+}
+
+.icon__left__error {
+ background-color: #ef4444;
+}
+
+.icon__left__warning {
+ background-color: #f59e0b;
+}
+
+/* ícone de olho à direita */
+.icon__right {
+ position: absolute;
+ right: 8px;
+ top: 50%;
+ transform: translateY(-50%);
+ width: 32px;
+ height: 32px;
+ background-color: transparent;
+ border: none;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ outline: none;
+}
+
+/* escondido até o foco */
+.eyeToggle {
+ opacity: 0;
+ pointer-events: none;
+ transition: opacity 0.2s ease;
+}
+
+/* quando o container recebe foco */
+.input__container:focus-within .eyeToggle {
+ opacity: 1;
+ pointer-events: auto;
+}
+
+.input__container:focus-within .eyeToggle .icon {
+ color: black;
+}
diff --git a/frontend/src/components/ui/link/index.tsx b/frontend/src/components/ui/link/index.tsx
new file mode 100644
index 0000000..35ae4e7
--- /dev/null
+++ b/frontend/src/components/ui/link/index.tsx
@@ -0,0 +1,16 @@
+import type { ComponentProps } from "react";
+
+import styles from "./styles.module.css";
+
+interface ILink extends ComponentProps<"a"> {
+ label: string;
+ href: string;
+}
+
+export const Link = ({ label, href }: ILink) => {
+ return (
+
+ {label}
+
+ );
+};
diff --git a/frontend/src/components/ui/link/styles.module.css b/frontend/src/components/ui/link/styles.module.css
new file mode 100644
index 0000000..a705154
--- /dev/null
+++ b/frontend/src/components/ui/link/styles.module.css
@@ -0,0 +1,3 @@
+a {
+ color: black;
+}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index e69de29..4ce567c 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -0,0 +1,9 @@
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+
+ font-size: 16px;
+}
+
+body { font-family: 'Inter', sans-serif; }
\ No newline at end of file
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index bef5202..096965c 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -1,10 +1,10 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import './index.css'
-import App from './App.tsx'
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "./index.css";
+import App from "./app/App.tsx";
-createRoot(document.getElementById('root')!).render(
-
+
+
+ );
+};
diff --git a/frontend/src/pages/login/desktop.module.css b/frontend/src/pages/login/desktop.module.css
new file mode 100644
index 0000000..3be23df
--- /dev/null
+++ b/frontend/src/pages/login/desktop.module.css
@@ -0,0 +1,125 @@
+.global__container {
+ width: 100%;
+ min-height: 100vh;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.container {
+ display: flex;
+ gap: 36px;
+ padding: 24px;
+ border: 1px solid rgba(0, 0, 0, 0.15);
+ border-radius: 8px;
+}
+
+.content__container {
+ width: 363px;
+}
+
+.logo__container {
+ margin-bottom: 24px;
+}
+
+.header__container {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ margin-bottom: 16px;
+}
+
+.header__container h1 {
+ font-size: 1.5rem;
+ font-weight: 600;
+}
+
+.header__container h2 {
+ font-size: 1rem;
+ font-weight: 500;
+ color: gray;
+}
+
+.main__container {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ margin-bottom: 24px;
+}
+
+.inputs__container {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+}
+
+.password__container {
+ display: flex;
+ flex-direction: column;
+ align-items: end;
+ gap: 12px;
+ margin-bottom: 16px;
+}
+
+.footer__container {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+}
+.footer__container .separator__container {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 16px;
+}
+
+.separator__container p {
+ white-space: nowrap;
+}
+
+.separator__container hr {
+ flex: 1;
+ height: 1px;
+ border: none;
+ background: rgba(0, 0, 0, 0.15);
+}
+
+.submitButton {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 8px;
+ height: 48px;
+ background-color: black;
+ color: white;
+ border: none;
+ border-radius: 4px;
+ font-size: 1rem;
+ cursor: pointer;
+ transition: all 0.2s ease;
+ font-weight: 500;
+}
+
+.submitButton:hover:not(:disabled) {
+ background-color: #333;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.submitButton:disabled {
+ background-color: #e0e0e0;
+ color: #999;
+ cursor: not-allowed;
+ transform: none;
+ box-shadow: none;
+}
+
+.image__container {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.image__container img {
+ flex: 1;
+ object-fit: cover;
+}
diff --git a/frontend/src/pages/login/index.tsx b/frontend/src/pages/login/index.tsx
new file mode 100644
index 0000000..efa13cf
--- /dev/null
+++ b/frontend/src/pages/login/index.tsx
@@ -0,0 +1,190 @@
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { AtSign, ArrowLeft, ArrowRight, Mail } from "lucide-react";
+import { Input } from "@/components/ui/input";
+import { loginSchema, type LoginFormData } from "@/app/schemas/loginSchema";
+
+import { userIsMobile } from "@/app/hooks/userIsMobile";
+
+import desktop from "./desktop.module.css";
+import mobile from "./mobile.module.css";
+import { Link } from "@/components/ui/link";
+import { useNavigate } from "react-router-dom";
+
+import { FcGoogle as GoogleIcon } from "react-icons/fc";
+
+export const Login = () => {
+ const isMobile = userIsMobile();
+
+ const navigate = useNavigate();
+
+ const {
+ register,
+ handleSubmit,
+ formState: { errors, isSubmitting },
+ } = useFormWelcome to DEVdecola
+Your one-stop solution for all things development!
+
+
+
+ 
+
+
+
+ );
+
+ const LoginMobile = () => (
+
+
+
+
+
+
+
+
+
+ LOGO | 5kbyte
+
+ Preparado para continuar sua jornada?
++ Entre com seu e-mail e senha para acessar sua conta + DevDeCola. +
+
+ + Preparado para continuar sua jornada? +
++ Entre com seu e-mail e senha para acessar sua conta + DevDeCola. +
+
+
+
+
+
+
+ ou continue com +
+
+
+
+
+ + ou continue com +
+
+
+ Novo por aqui?
+ +