Fix/adjust login page layout

frontend/src/domains/auth/presentation/components/AuthVisualPanel.tsx

@@ -1,10 +1,9 @@
-import { Image } from "@unpic/react"
-import { Bell, Instagram, Linkedin, Search, TrendingUp } from "lucide-react"
+import { Image } from "@unpic/react";
+import { Bell, Instagram, Linkedin, Search, TrendingUp } from "lucide-react";
 
 export default function LeftSide() {
   return (
     <aside className="relative hidden w-full lg:w-1/2 flex-col justify-between p-8 xl:p-12 lg:flex overflow-hidden min-h-screen select-none transition-colors duration-300 font-sans">
-
       <div className="absolute right-0 top-0 bottom-0 w-[85%] bg-neutral-100 dark:bg-neutral-900 rounded-l-[120px] overflow-hidden -z-10 transition-colors">
         <Image
           src="/leftSide.png"
@@ -17,64 +16,60 @@ export default function LeftSide() {
       </div>
 
       <div className="max-w-xl z-10 space-y-4 mt-6">
-        <h1 className="text-4xl xl:text-5xl font-extrabold tracking-tight text-gray-950 dark:text-white leading-tight">
+        <h1 className="text-4xl xl:text-5xl font-extrabold tracking-normal text-gray-950 dark:text-white leading-tight">
           Conectando talentos <br />
-          <span className="bg-gradient-to-r from-blue-600 via-purple-500 to-amber-500 bg-clip-text text-transparent dark:from-blue-400 dark:via-purple-400 dark:to-amber-400">
-            às melhores oportunidades
-          </span>
+          às melhores oportunidades
         </h1>
-        <p className="text-sm xl:text-base font-semibold text-gray-600 dark:text-neutral-400 max-w-lg">
-          Centralizamos oportunidades para ajudar profissionais de tecnologia a encontrarem sua próxima vaga global.
+        <p className="text-lg xl:text-xl font-semibold text-[#004726] dark:text-neutral-400 max-w-lg">
+          Centralizamos oportunidades para ajudar profissionais de tecnologia a
+          encontrarem sua próxima vaga.
         </p>
       </div>
 
-      <div className="absolute left-8 xl:left-12 top-[35%] space-y-4 z-10 w-full max-w-[220px] xl:max-w-[240px]">
-
-        <div className="flex flex-col gap-3 bg-white/40 dark:bg-neutral-900/40 backdrop-blur-md p-4 rounded-2xl border border-white/60 dark:border-neutral-800/50 hover:border-blue-500/50 dark:hover:border-blue-400/50 hover:shadow-lg hover:shadow-blue-500/5 transition-all duration-300 group">
-          <div className="bg-gradient-to-br from-blue-600 to-blue-700 dark:from-blue-500 dark:to-blue-600 p-2.5 rounded-xl text-white w-fit shadow-sm shadow-blue-500/20">
+      <div className="absolute left-8 xl:left-12 top-[35%] space-y-4 z-10 w-[170px]">
+        {" "}
+        <div className=" w-[170px] h-[113px] -translate-x-4 flex flex-col gap-3 bg-white/40 dark:bg-neutral-900/40 backdrop-blur-md p-4 rounded-2xl border border-[#C0C9BF] dark:border-neutral-800/50 hover:border-teal-500/50 dark:hover:border-teal-400/50 hover:shadow-lg hover:shadow-teal-500/5 transition-all duration-300 group">
+          <div className="bg-gradient-to-br from-[#004726] to-[#00663A] dark:from-[#004726] dark:to-[#00663A] p-2.5 rounded-xl text-white w-fit shadow-sm shadow-green-900/20">
             <Search className="h-4 w-4" />
           </div>
           <p className="text-xs font-bold text-gray-900 dark:text-neutral-200 leading-tight">
             Encontre vagas e mentorias
           </p>
         </div>
-
-        <div className="flex flex-col gap-3 bg-white/40 dark:bg-neutral-900/40 backdrop-blur-md p-4 rounded-2xl border border-white/60 dark:border-neutral-800/50 hover:border-purple-500/50 dark:hover:border-purple-400/50 hover:shadow-lg hover:shadow-purple-500/5 translate-x-6 xl:translate-x-10 transition-all duration-300 group">
-          <div className="bg-gradient-to-br from-purple-600 to-purple-700 dark:from-purple-500 dark:to-purple-600 p-2.5 rounded-xl text-white w-fit shadow-sm shadow-purple-500/20">
+        <div className=" w-[170px] h-[113px] translate-x-40 flex flex-col gap-3 bg-white/40 dark:bg-neutral-900/40 backdrop-blur-md p-4 rounded-2xl border border-[#004726]/50 dark:border-[#004726]/50 hover:border-teal-500/50 dark:hover:border-[#004726] hover:shadow-lg hover:shadow-[#004726]/10 transition-all duration-300 group">
+          <div className="bg-gradient-to-br from-[#004726] to-[#00663A] dark:from-[#004726] dark:to-[#00663A] p-2.5 rounded-xl text-white w-fit shadow-sm shadow-green-900/20">
             <Bell className="h-4 w-4" />
           </div>
           <p className="text-xs font-bold text-gray-900 dark:text-neutral-200 leading-tight">
             Novas oportunidades
           </p>
         </div>
-
-        <div className="flex flex-col gap-3 bg-white/40 dark:bg-neutral-900/40 backdrop-blur-md p-4 rounded-2xl border border-white/60 dark:border-neutral-800/50 hover:border-teal-500/50 dark:hover:border-teal-400/50 hover:shadow-lg hover:shadow-teal-500/5 transition-all duration-300 group">
-          <div className="bg-gradient-to-br from-teal-600 to-teal-700 dark:from-teal-500 dark:to-teal-600 p-2.5 rounded-xl text-white w-fit shadow-sm shadow-teal-500/20">
+        <div className=" w-[170px] h-[113px] -translate-x-4 flex flex-col gap-3 bg-white/40 dark:bg-neutral-900/40 backdrop-blur-md p-4 rounded-2xl border border-[#C0C9BF] dark:border-neutral-800/50 hover:border-teal-500/50 dark:hover:border-teal-400/50 hover:shadow-lg hover:shadow-teal-500/5 transition-all duration-300 group">
+          <div className="bg-gradient-to-br from-[#004726] to-[#00663A] dark:from-[#004726] dark:to-[#00663A] p-2.5 rounded-xl text-white w-fit shadow-sm shadow-green-900/20">
             <TrendingUp className="h-4 w-4" />
           </div>
           <p className="text-xs font-bold text-gray-900 dark:text-neutral-200 leading-tight">
             Desenvolvimento profissional
           </p>
         </div>
-
       </div>
 
       <div className="flex gap-3 z-10 mt-auto pl-2">
         <a
           href="https://instagram.com/"
           target="_blank"
           rel="noopener noreferrer"
-          className="bg-white dark:bg-neutral-800 border border-gray-200 dark:border-neutral-700 p-2.5 rounded-xl text-gray-700 dark:text-neutral-300 hover:text-blue-600 dark:hover:text-blue-400 hover:border-blue-500/30 dark:hover:border-blue-400/30 transition-all shadow-sm"
+          className="bg-[#004726] hover:bg-[#00663A] dark:bg-[#004726] dark:hover:bg-[#00804A] border border-[#004726] p-2.5 rounded-xl text-white hover:border-[#00663A] transition-all shadow-sm"
         >
           <Instagram className="h-4 w-4" />
         </a>
         <a
           href="#"
-          className="bg-white dark:bg-neutral-800 border border-gray-200 dark:border-neutral-700 p-2.5 rounded-xl text-gray-700 dark:text-neutral-300 hover:text-blue-600 dark:hover:text-blue-400 hover:border-blue-500/30 dark:hover:border-blue-400/30 transition-all shadow-sm"
+          className="bg-[#004726] hover:bg-[#00663A] dark:bg-[#004726] dark:hover:bg-[#00804A] border border-[#004726] p-2.5 rounded-xl text-white hover:border-[#00663A] transition-all shadow-sm"
         >
           <Linkedin className="h-4 w-4" />
         </a>
       </div>
     </aside>
-  )
+  );
 }

frontend/src/domains/auth/presentation/components/LoginFormPanel.tsx

@@ -10,6 +10,8 @@ import { motion } from "framer-motion";
 import { ArrowLeft, Eye, EyeOff } from "lucide-react";
 import { FormEvent, useState } from "react";
 import { useNavigate } from "react-router-dom";
+import { useTheme } from "@/shared/hooks/useTheme";
+import { ThemeToggle } from "@/shared/ui/theme-toggle";
 
 const STATIC_STARS = Array.from({ length: 40 }).map((_, i) => {
   const random = (min: number, max: number) =>
@@ -56,6 +58,7 @@ function StarsBackground() {
 export default function RightSide() {
   const navigate = useNavigate();
   const { login } = useAuth();
+  const { resolvedTheme, toggleTheme } = useTheme();
   const [showPassword, setShowPassword] = useState(false);
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
@@ -152,14 +155,16 @@ export default function RightSide() {
         <StarsBackground />
       </div>
       <div className="relative z-10 w-full max-w-2xl mx-auto flex flex-col items-center gap-8">
-        <div className="w-full self-start">
+        <div className="w-full flex items-center justify-between">
           <a
             href="/"
-            className="inline-flex items-center gap-2 text-sm font-medium text-gray-500 dark:text-neutral-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors group"
+            className="inline-flex items-center gap-2 text-sm font-medium text-gray-500 dark:text-neutral-400 hover:text-[#00804A] dark:hover:text-[#00A65A] transition-colors group"
           >
             <ArrowLeft className="h-4 w-4 transform group-hover:-translate-x-1 transition-transform" />
             Voltar para a página principal
           </a>
+
+          <ThemeToggle theme={resolvedTheme} onToggle={toggleTheme} />
         </div>
         <div className="text-center w-full">
           <h2 className="text-5xl sm:text-6xl font-extrabold tracking-tight text-gray-900 dark:text-white flex items-center justify-center gap-1 select-none">
@@ -168,15 +173,7 @@ export default function RightSide() {
             <span className="text-purple-500">!</span>
             <span className="text-blue-500 font-light">&gt;</span>
           </h2>
-          <p className="mt-4 text-sm text-gray-500 dark:text-neutral-400 font-medium">
-            Novo por aqui?{" "}
-            <a
-              href="/register"
-              className="font-semibold bg-gradient-to-r from-blue-600 to-purple-500 bg-clip-text text-transparent dark:from-blue-400 dark:to-purple-400 underline underline-offset-2 hover:opacity-80 transition-opacity"
-            >
-              Cadastre-se
-            </a>
-          </p>
+
         </div>
       </div>
       <form
@@ -268,7 +265,7 @@ export default function RightSide() {
           </label>
           <a
             href="#"
-            className="font-semibold text-blue-600 dark:text-blue-400 hover:underline underline-offset-2 transition-all"
+            className="font-semibold text-[#0EBB69] hover:underline underline-offset-2 transition-all"
           >
             Esqueceu a senha?
           </a>
@@ -278,10 +275,19 @@ export default function RightSide() {
           disabled={isLoading}
           whileHover={{ scale: isLoading ? 1 : 1.01 }}
           whileTap={{ scale: isLoading ? 1 : 0.99 }}
-          className="w-full bg-gradient-to-r from-blue-600 via-purple-600 to-teal-600 hover:opacity-95 text-white py-3.5 px-4 rounded-xl font-bold text-base focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all shadow-md shadow-blue-500/10 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
+          className="w-full bg-gradient-to-r from-[#004726] to-[#00663A] hover:opacity-95 text-white py-3.5 px-4 rounded-xl font-bold text-base focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all shadow-md shadow-blue-500/10 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
         >
           {isLoading ? "Entrando..." : "Entrar"}
         </motion.button>
+        <p className="mt-4 text-sm text-gray-500 dark:text-neutral-400 font-medium text-center">
+            Novo por aqui?{" "}
+            <a
+              href="/register"
+              className="font-semibold text-[#0EBB69] underline underline-offset-2 hover:opacity-80 transition-opacity"
+            >
+              Cadastre-se
+            </a>
+          </p>
       </form>
       <div className="relative z-10 w-full max-w-2xl mx-auto">
         <div className="relative mb-6">

frontend/src/domains/auth/presentation/components/RegisterFormPanel.tsx

@@ -4,6 +4,9 @@ import { ArrowLeft, Eye, EyeOff } from "lucide-react";
 import { FormEvent, useState } from "react";
 import PhoneInput from "react-phone-number-input";
 import "react-phone-number-input/style.css";
+import { ThemeToggle } from "@/shared/ui/theme-toggle";
+import { useTheme } from "@/shared/hooks/useTheme";
+
 import {
   getGithubAuthUrl,
   getGoogleAuthUrl,
@@ -88,7 +91,9 @@ export default function RegisterSide() {
   const [levelError, setLevelError] = useState("");
 
   const [isLoading, setIsLoading] = useState(false);
-  const [apiError, setApiError] = useState("");
+  const [apiError, setApiError] = useState("");  
+  const { resolvedTheme, toggleTheme } = useTheme();
+
 
   const handleGoogleLogin = async () => {
     setIsLoading(true);
@@ -220,14 +225,16 @@ export default function RegisterSide() {
         <StarsBackground />
       </div>
       <div className="relative z-10 w-full max-w-2xl mx-auto flex flex-col items-center gap-8">
-        <div className="w-full self-start">
+        <div className="w-full self-start flex justify-between items-center">
           <a
             href="/login"
             className="inline-flex items-center gap-2 text-sm font-medium text-gray-500 dark:text-neutral-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors group"
           >
             <ArrowLeft className="h-4 w-4 transform group-hover:-translate-x-1 transition-transform" />
             Voltar para o login
           </a>
+
+          <ThemeToggle theme={resolvedTheme} onToggle={toggleTheme} />
         </div>
         <div className="text-center w-full">
           <h2 className="text-5xl sm:text-6xl font-extrabold tracking-tight text-gray-900 dark:text-white flex items-center justify-center gap-1 select-none">
@@ -236,15 +243,7 @@ export default function RegisterSide() {
             <span className="text-purple-500">!</span>
             <span className="text-blue-500 font-light">&gt;</span>
           </h2>
-          <p className="mt-4 text-sm text-gray-500 dark:text-neutral-400 font-medium">
-            Já tem conta?{" "}
-            <a
-              href="/login"
-              className="font-semibold bg-gradient-to-r from-blue-600 to-purple-500 bg-clip-text text-transparent dark:from-blue-400 dark:to-purple-400 underline underline-offset-2 hover:opacity-80 transition-opacity"
-            >
-              Entrar
-            </a>
-          </p>
+
         </div>
       </div>
       <form
@@ -430,10 +429,19 @@ export default function RegisterSide() {
           disabled={isLoading}
           whileHover={{ scale: isLoading ? 1 : 1.01 }}
           whileTap={{ scale: isLoading ? 1 : 0.99 }}
-          className="w-full bg-gradient-to-r from-blue-600 via-purple-600 to-teal-600 hover:opacity-95 text-white py-3.5 px-4 rounded-xl font-bold text-base focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all shadow-md shadow-blue-500/10 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
+          className="w-full bg-gradient-to-r from-[#004726] to-[#00663A] hover:opacity-95 text-white py-3.5 px-4 rounded-xl font-bold text-base focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all shadow-md shadow-blue-500/10 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
         >
           {isLoading ? "Cadastrando..." : "Cadastrar"}
         </motion.button>
+         <p className="mt-4 text-sm text-gray-500 dark:text-neutral-400 font-medium text-center">
+            Já tem conta?{" "}
+            <a
+              href="/login"
+              className="font-semibold text-[#0EBB69] underline underline-offset-2 hover:opacity-80 transition-opacity"
+            >
+              Entrar
+            </a>
+          </p>
       </form>
       <div className="relative z-10 w-full max-w-2xl mx-auto">
         <div className="relative mb-6">