From 4e9b743928ac8bd0db4d0ea35dbff7d91dab2878 Mon Sep 17 00:00:00 2001
From: yagostn <yagosantana835@gmail.com>
Date: Thu, 4 Dec 2025 10:36:33 -0300
Subject: [PATCH] feat: atuializacao de layout

---
 frontend/components/Navbar.tsx | 183 ++++++++++++++++++++++++++++++---
 frontend/pages/Calendar.tsx    |  10 +-
 frontend/pages/Home.tsx        |   8 +-
 frontend/pages/Login.tsx       |  68 +++++++-----
 frontend/pages/Register.tsx    |  23 +++--
 5 files changed, 233 insertions(+), 59 deletions(-)

diff --git a/frontend/components/Navbar.tsx b/frontend/components/Navbar.tsx
index e6f3f33..234776c 100644
--- a/frontend/components/Navbar.tsx
+++ b/frontend/components/Navbar.tsx
@@ -30,6 +30,19 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
     return () => window.removeEventListener("scroll", handleScroll);
   }, []);
 
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (isAccountDropdownOpen) {
+        const target = event.target as HTMLElement;
+        if (!target.closest('.relative')) {
+          setIsAccountDropdownOpen(false);
+        }
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [isAccountDropdownOpen]);
+
   const getLinks = () => {
     if (!user) return [];
 
@@ -213,16 +226,14 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
                     onClick={() =>
                       setIsAccountDropdownOpen(!isAccountDropdownOpen)
                     }
-                    className="flex items-center gap-2 p-2 rounded-full hover:bg-gray-100 transition-colors"
+                    className="flex items-center gap-2 px-4 py-2 rounded-full hover:bg-gray-100 transition-colors shadow-md"
                   >
                     <div className="w-10 h-10 rounded-full border-2 border-brand-gold flex items-center justify-center text-brand-gold hover:bg-brand-gold hover:text-white transition-colors">
                       <User size={24} />
                     </div>
                     <div className="text-left hidden lg:block">
                       <p className="text-xs text-gray-500">Olá, bem-vindo(a)</p>
-                      <p className="text-sm font-medium text-brand-black">
-                        Entrar / Cadastrar
-                      </p>
+                      <p className="text-xs font-semibold text-gray-700">Entrar/Cadastrar</p>
                     </div>
                   </button>
 
@@ -234,7 +245,8 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
                         <div className="w-16 h-16 mx-auto mb-3 rounded-full bg-white/20 backdrop-blur-sm flex items-center justify-center border-2 border-white/30">
                           <User size={32} className="text-white" />
                         </div>
-                        <p className="text-white/90 text-sm mb-1">Olá, bem-vindo(a)</p>
+                        <p className="text-white/70 text-xs mb-1">Olá, bem-vindo(a)</p>
+                        <p className="text-white font-semibold text-base">Entrar/Cadastrar</p>
                       </div>
 
                       {/* Botões */}
@@ -267,14 +279,159 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
               )}
             </div>
 
-            {/* Mobile Button */}
-            <div className="md:hidden flex items-center">
-              <button
-                onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
-                className="text-brand-black hover:text-brand-gold p-2"
-              >
-                {isMobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
-              </button>
+            {/* Mobile Buttons */}
+            <div className="md:hidden flex items-center gap-2">
+              {user ? (
+                <>
+                  <div className="relative">
+                    <button
+                      onClick={() => setIsAccountDropdownOpen(!isAccountDropdownOpen)}
+                      className="h-10 w-10 rounded-full bg-gray-100 overflow-hidden border border-gray-200 ring-2 ring-transparent active:ring-brand-gold transition-all shadow-md"
+                    >
+                      <img
+                        src={user.avatar}
+                        alt="Avatar"
+                        className="w-full h-full object-cover"
+                      />
+                    </button>
+
+                    {/* Profile Preview Dropdown Mobile */}
+                    {isAccountDropdownOpen && (
+                      <div className="absolute right-0 top-full mt-3 w-80 bg-white rounded-2xl shadow-2xl border border-gray-100 overflow-hidden z-50 fade-in">
+                        {/* Header com foto e info */}
+                        <div className="bg-gradient-to-r from-[#492E61] to-[#5a3a7a] p-6 text-center relative">
+                          <div className="w-20 h-20 mx-auto mb-3 rounded-full bg-white/20 backdrop-blur-sm flex items-center justify-center border-4 border-white/30 overflow-hidden">
+                            <img
+                              src={user.avatar}
+                              alt={user.name}
+                              className="w-full h-full object-cover"
+                            />
+                          </div>
+                          <h3 className="text-white font-bold text-lg mb-1">{user.name}</h3>
+                          <p className="text-white/90 text-sm mb-1">{user.email}</p>
+                          <span className="inline-block px-3 py-1 bg-white/20 backdrop-blur-sm rounded-full text-xs font-medium text-white border border-white/30">
+                            {getRoleLabel()}
+                          </span>
+                        </div>
+
+                        {/* Menu Items */}
+                        <div className="p-4 space-y-2 bg-gray-50">
+                          {/* Editar Perfil - Apenas para Fotógrafos e Clientes */}
+                          {(user.role === UserRole.PHOTOGRAPHER || user.role === UserRole.EVENT_OWNER) && (
+                            <button
+                              onClick={() => {
+                                setIsEditProfileModalOpen(true);
+                                setIsAccountDropdownOpen(false);
+                              }}
+                              className="w-full flex items-center gap-3 px-4 py-3 rounded-xl hover:bg-white transition-colors text-left group"
+                            >
+                              <div className="w-10 h-10 rounded-lg bg-[#492E61]/10 flex items-center justify-center group-hover:bg-[#492E61]/20 transition-colors">
+                                <User size={20} className="text-[#492E61]" />
+                              </div>
+                              <div className="flex-1">
+                                <p className="text-sm font-semibold text-gray-900">Editar Perfil</p>
+                                <p className="text-xs text-gray-500">Atualize suas informações</p>
+                              </div>
+                            </button>
+                          )}
+
+                          {/* Configurações - Apenas para CEO e Business Owner */}
+                          {(user.role === UserRole.BUSINESS_OWNER || user.role === UserRole.SUPERADMIN) && (
+                            <button
+                              onClick={() => {
+                                onNavigate("settings");
+                                setIsAccountDropdownOpen(false);
+                              }}
+                              className="w-full flex items-center gap-3 px-4 py-3 rounded-xl hover:bg-white transition-colors text-left group"
+                            >
+                              <div className="w-10 h-10 rounded-lg bg-gray-200 flex items-center justify-center group-hover:bg-gray-300 transition-colors">
+                                <Settings size={20} className="text-gray-600" />
+                              </div>
+                              <div className="flex-1">
+                                <p className="text-sm font-semibold text-gray-900">Configurações</p>
+                                <p className="text-xs text-gray-500">Preferências da conta</p>
+                              </div>
+                            </button>
+                          )}
+
+                          {/* Sair */}
+                          <button
+                            onClick={() => {
+                              logout();
+                              setIsAccountDropdownOpen(false);
+                            }}
+                            className="w-full flex items-center gap-3 px-4 py-3 rounded-xl hover:bg-red-50 transition-colors text-left group border-t border-gray-200 mt-2 pt-4"
+                          >
+                            <div className="w-10 h-10 rounded-lg bg-red-100 flex items-center justify-center group-hover:bg-red-200 transition-colors">
+                              <LogOut size={20} className="text-red-600" />
+                            </div>
+                            <div className="flex-1">
+                              <p className="text-sm font-semibold text-red-600">Sair da Conta</p>
+                              <p className="text-xs text-red-400">Desconectar do sistema</p>
+                            </div>
+                          </button>
+                        </div>
+                      </div>
+                    )}
+                  </div>
+
+                  {/* Menu Hamburguer - Apenas para usuários logados */}
+                  <button
+                    onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
+                    className="text-brand-black hover:text-brand-gold p-2"
+                  >
+                    {isMobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
+                  </button>
+                </>
+              ) : (
+                <div className="relative">
+                  <button
+                    onClick={() => setIsAccountDropdownOpen(!isAccountDropdownOpen)}
+                    className="w-10 h-10 rounded-full border-2 border-brand-gold flex items-center justify-center text-brand-gold shadow-md"
+                  >
+                    <User size={20} />
+                  </button>
+
+                  {/* Dropdown Popup Mobile */}
+                  {isAccountDropdownOpen && (
+                    <div className="absolute right-0 top-full mt-3 w-72 bg-white rounded-2xl shadow-2xl border border-gray-100 overflow-hidden z-50 fade-in">
+                      {/* Header com ícone */}
+                      <div className="bg-gradient-to-r from-[#492E61] to-[#5a3a7a] p-6 text-center">
+                        <div className="w-16 h-16 mx-auto mb-3 rounded-full bg-white/20 backdrop-blur-sm flex items-center justify-center border-2 border-white/30">
+                          <User size={32} className="text-white" />
+                        </div>
+                        <p className="text-white/70 text-xs mb-1">Olá, bem-vindo(a)</p>
+                        <p className="text-white font-semibold text-base">Entrar/Cadastrar</p>
+                      </div>
+
+                      {/* Botões */}
+                      <div className="p-5 space-y-3 bg-gray-50">
+                        <Button
+                          onClick={() => {
+                            onNavigate("login");
+                            setIsAccountDropdownOpen(false);
+                          }}
+                          variant="secondary"
+                          className="w-full rounded-xl shadow-sm hover:shadow-md transition-shadow"
+                        >
+                          ENTRAR
+                        </Button>
+
+                        <Button
+                          onClick={() => {
+                            onNavigate("register");
+                            setIsAccountDropdownOpen(false);
+                          }}
+                          variant="primary"
+                          className="w-full rounded-xl shadow-sm hover:shadow-md transition-shadow"
+                        >
+                          Cadastre-se agora
+                        </Button>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              )}
             </div>
           </div>
         </div>
diff --git a/frontend/pages/Calendar.tsx b/frontend/pages/Calendar.tsx
index a0ccae1..2411358 100644
--- a/frontend/pages/Calendar.tsx
+++ b/frontend/pages/Calendar.tsx
@@ -162,7 +162,7 @@ export const CalendarPage: React.FC = () => {
                 {/* Header */}
                 <div className="mb-4 sm:mb-6 md:mb-8 flex flex-col gap-3 sm:gap-4">
                     <div>
-                        <h1 className="text-2xl sm:text-3xl md:text-4xl font-bold text-[#492E61] mb-1 sm:mb-2">
+                        <h1 className="text-2xl sm:text-3xl md:text-4xl font-bold text-[#B8D033] mb-1 sm:mb-2">
                             Minha Agenda
                         </h1>
                         <p className="text-xs sm:text-sm md:text-base text-gray-600">
@@ -170,14 +170,6 @@ export const CalendarPage: React.FC = () => {
                         </p>
                     </div>
                     <div className="flex gap-2">
-                        <button className="flex items-center gap-2 px-3 sm:px-4 py-2 sm:py-2.5 bg-[#492E61] text-white rounded-xl hover:bg-[#3a2450] transition-colors shadow-lg text-sm sm:text-base">
-                            <Plus size={18} className="sm:w-5 sm:h-5" />
-                            <span className="hidden xs:inline">Novo Evento</span>
-                            <span className="xs:hidden">Novo</span>
-                        </button>
-                        <button className="p-2 sm:p-2.5 border border-gray-300 rounded-xl hover:bg-gray-50 transition-colors">
-                            <Filter size={18} className="sm:w-5 sm:h-5 text-gray-600" />
-                        </button>
                     </div>
                 </div>
 
diff --git a/frontend/pages/Home.tsx b/frontend/pages/Home.tsx
index 5e2203b..474ae7d 100644
--- a/frontend/pages/Home.tsx
+++ b/frontend/pages/Home.tsx
@@ -230,22 +230,22 @@ export const Home: React.FC<HomeProps> = ({ onEnter }) => {
               <input
                 type="text"
                 placeholder="Nome"
-                className="w-full px-3 py-2 text-sm bg-white/5 border-b-2 border-white/20 text-white placeholder-white/50 focus:border-white focus:bg-white/10 focus:outline-none transition-all duration-300 rounded-t-lg"
+                className="w-full px-5 py-2 text-sm bg-white/5 border-b-2 border-white/20 text-white placeholder-white/50 focus:border-white focus:bg-white/10 focus:outline-none transition-all duration-300 rounded-t-lg"
               />
               <input
                 type="email"
                 placeholder="E-mail"
-                className="w-full px-3 py-2 text-sm bg-white/5 border-b-2 border-white/20 text-white placeholder-white/50 focus:border-white focus:bg-white/10 focus:outline-none transition-all duration-300 rounded-t-lg"
+                className="w-full px-5 py-2 text-sm bg-white/5 border-b-2 border-white/20 text-white placeholder-white/50 focus:border-white focus:bg-white/10 focus:outline-none transition-all duration-300 rounded-t-lg"
               />
               <input
                 type="tel"
                 placeholder="Telefone"
-                className="w-full px-3 py-2 text-sm bg-white/5 border-b-2 border-white/20 text-white placeholder-white/50 focus:border-white focus:bg-white/10 focus:outline-none transition-all duration-300 rounded-t-lg"
+                className="w-full px-5 py-2 text-sm bg-white/5 border-b-2 border-white/20 text-white placeholder-white/50 focus:border-white focus:bg-white/10 focus:outline-none transition-all duration-300 rounded-t-lg"
               />
               <textarea
                 placeholder="Mensagem"
                 rows={3}
-                className="w-full px-3 py-2 text-sm bg-white/5 border-b-2 border-white/20 text-white placeholder-white/50 focus:border-white focus:bg-white/10 focus:outline-none transition-all duration-300 resize-none rounded-t-lg"
+                className="w-full px-5 py-2 text-sm bg-white/5 border-b-2 border-white/20 text-white placeholder-white/50 focus:border-white focus:bg-white/10 focus:outline-none transition-all duration-300 resize-none rounded-t-lg"
               ></textarea>
               <button
                 className="w-full px-6 py-2.5 text-sm text-white font-bold rounded-lg hover:opacity-90 transition-all duration-300 transform hover:scale-105 hover:shadow-xl active:scale-95 relative overflow-hidden group flex items-center justify-center gap-2"
diff --git a/frontend/pages/Login.tsx b/frontend/pages/Login.tsx
index 59887fc..e04c934 100644
--- a/frontend/pages/Login.tsx
+++ b/frontend/pages/Login.tsx
@@ -19,7 +19,7 @@ export const Login: React.FC<LoginProps> = ({ onNavigate }) => {
     e.preventDefault();
     setIsLoading(true);
     setError('');
-    
+
     const success = await login(email);
     if (!success) {
       setError('Usuário não encontrado. Tente um dos e-mails de demonstração.');
@@ -32,37 +32,46 @@ export const Login: React.FC<LoginProps> = ({ onNavigate }) => {
   };
 
   const getRoleLabel = (role: UserRole) => {
-      switch(role) {
-          case UserRole.SUPERADMIN: return "Superadmin";
-          case UserRole.BUSINESS_OWNER: return "Empresa";
-          case UserRole.PHOTOGRAPHER: return "Fotógrafo";
-          case UserRole.EVENT_OWNER: return "Cliente";
-          default: return role;
-      }
+    switch (role) {
+      case UserRole.SUPERADMIN: return "Superadmin";
+      case UserRole.BUSINESS_OWNER: return "Empresa";
+      case UserRole.PHOTOGRAPHER: return "Fotógrafo";
+      case UserRole.EVENT_OWNER: return "Cliente";
+      default: return role;
+    }
   }
 
   return (
     <div className="min-h-screen flex flex-col lg:flex-row bg-white">
       {/* Left Side - Image */}
       <div className="hidden lg:flex lg:w-1/2 relative overflow-hidden">
-        <img 
-          src="https://plus.unsplash.com/premium_photo-1713296255442-e9338f42aad8?q=80&w=722&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" 
-          alt="Photum Login" 
+        <img
+          src="https://plus.unsplash.com/premium_photo-1713296255442-e9338f42aad8?q=80&w=722&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+          alt="Photum Login"
           className="absolute inset-0 w-full h-full object-cover"
         />
         <div className="absolute inset-0 bg-gradient-to-br from-[#492E61]/90 to-[#492E61]/70 flex items-center justify-center">
-            <div className="text-center text-white p-12">
-                <h1 className="text-5xl font-serif font-bold mb-4">Photum Formaturas</h1>
-                <p className="text-xl font-light tracking-wide max-w-md mx-auto">Gestão de eventos premium para quem não abre mão da excelência.</p>
-            </div>
+          <div className="text-center text-white p-12">
+            <h1 className="text-5xl font-serif font-bold mb-4">Photum Formaturas</h1>
+            <p className="text-xl font-light tracking-wide max-w-md mx-auto">Gestão de eventos premium para quem não abre mão da excelência.</p>
+          </div>
         </div>
       </div>
 
       {/* Right Side - Form */}
       <div className="w-full lg:w-1/2 flex items-center justify-center p-4 sm:p-6 md:p-8 lg:p-16">
         <div className="max-w-md w-full space-y-6 sm:space-y-8 fade-in">
+          {/* Logo Mobile */}
+          <div className="lg:hidden flex justify-center mb-6">
+            <img
+              src="/logo.png"
+              alt="Photum Formaturas"
+              className="h-16 w-auto object-contain"
+            />
+          </div>
+
           <div className="text-center lg:text-left">
-            <span className="font-bold tracking-widest uppercase text-xs sm:text-sm" style={{color: '#B9CF33'}}>Bem-vindo de volta</span>
+            <span className="font-bold tracking-widest uppercase text-xs sm:text-sm" style={{ color: '#B9CF33' }}>Bem-vindo de volta</span>
             <h2 className="mt-2 text-2xl sm:text-3xl font-serif font-bold text-gray-900">Acesse sua conta</h2>
             <p className="mt-2 text-xs sm:text-sm text-gray-600">
               Não tem uma conta?{' '}
@@ -70,7 +79,7 @@ export const Login: React.FC<LoginProps> = ({ onNavigate }) => {
                 type="button"
                 onClick={() => onNavigate?.('register')}
                 className="font-medium hover:opacity-80 transition-opacity"
-                style={{color: '#B9CF33'}}
+                style={{ color: '#B9CF33' }}
               >
                 Cadastre-se
               </button>
@@ -90,7 +99,7 @@ export const Login: React.FC<LoginProps> = ({ onNavigate }) => {
                   value={email}
                   onChange={(e) => setEmail(e.target.value)}
                   className="w-full px-3 sm:px-4 py-2.5 sm:py-3 text-sm sm:text-base border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:border-transparent transition-all"
-                  style={{focusRing: '2px solid #B9CF33'}}
+                  style={{ focusRing: '2px solid #B9CF33' }}
                   onFocus={(e) => e.target.style.borderColor = '#B9CF33'}
                   onBlur={(e) => e.target.style.borderColor = '#d1d5db'}
                 />
@@ -121,22 +130,22 @@ export const Login: React.FC<LoginProps> = ({ onNavigate }) => {
               type="submit"
               disabled={isLoading}
               className="w-full px-6 sm:px-10 py-3 sm:py-4 text-white font-bold text-base sm:text-lg rounded-lg transition-all duration-300 transform hover:scale-[1.02] hover:shadow-xl active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed"
-              style={{backgroundColor: '#4E345F'}}
+              style={{ backgroundColor: '#4E345F' }}
             >
               {isLoading ? 'Entrando...' : 'Entrar no Sistema'}
             </button>
           </form>
 
-          {/* Demo Users Quick Select */}
+          {/* Demo Users Quick Select - Melhorado para Mobile */}
           <div className="mt-6 sm:mt-10 pt-6 sm:pt-10 border-t border-gray-200">
             <p className="text-[10px] sm:text-xs uppercase tracking-widest mb-3 sm:mb-4 text-center text-gray-400">Usuários de Demonstração (Clique para preencher)</p>
-            <div className="grid grid-cols-1 sm:grid-cols-2 gap-2 sm:gap-3">
+            <div className="space-y-2">
               {availableUsers.map(user => (
                 <button
                   key={user.id}
                   onClick={() => fillCredentials(user.email)}
-                  className="flex flex-col items-start p-3 sm:p-4 border-2 rounded-lg hover:bg-gray-50 transition-all duration-300 text-left group transform hover:scale-[1.02]"
-                  style={{borderColor: '#e5e7eb'}}
+                  className="w-full flex items-center justify-between p-3 sm:p-4 border-2 rounded-xl hover:bg-gray-50 transition-all duration-300 text-left group transform hover:scale-[1.01] active:scale-[0.99]"
+                  style={{ borderColor: '#e5e7eb' }}
                   onMouseEnter={(e) => {
                     e.currentTarget.style.borderColor = '#B9CF33';
                     e.currentTarget.style.boxShadow = '0 4px 12px rgba(185, 207, 51, 0.15)';
@@ -146,9 +155,16 @@ export const Login: React.FC<LoginProps> = ({ onNavigate }) => {
                     e.currentTarget.style.boxShadow = 'none';
                   }}
                 >
-                  <span className="text-xs sm:text-sm font-bold text-gray-900">{user.name}</span>
-                  <span className="text-[10px] sm:text-xs uppercase tracking-wide mt-0.5 sm:mt-1 font-semibold" style={{color: '#B9CF33'}}>{getRoleLabel(user.role)}</span>
-                  <span className="text-[10px] sm:text-xs text-gray-500 mt-0.5 sm:mt-1 truncate w-full">{user.email}</span>
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-2 mb-1">
+                      <span className="text-sm sm:text-base font-bold text-gray-900 truncate">{user.name}</span>
+                      <span className="text-[10px] sm:text-xs uppercase tracking-wide font-semibold px-2 py-0.5 rounded-full whitespace-nowrap" style={{ backgroundColor: '#B9CF33', color: '#fff' }}>{getRoleLabel(user.role)}</span>
+                    </div>
+                    <span className="text-xs sm:text-sm text-gray-500 truncate block">{user.email}</span>
+                  </div>
+                  <svg className="w-5 h-5 text-gray-400 group-hover:text-[#B9CF33] transition-colors flex-shrink-0 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                  </svg>
                 </button>
               ))}
             </div>
diff --git a/frontend/pages/Register.tsx b/frontend/pages/Register.tsx
index fd28c8e..aee64b0 100644
--- a/frontend/pages/Register.tsx
+++ b/frontend/pages/Register.tsx
@@ -81,7 +81,7 @@ export const Register: React.FC<RegisterProps> = ({ onNavigate }) => {
         };
         addInstitution(newInstitution);
         setShowInstitutionForm(false);
-        
+
         // Complete registration
         setIsLoading(true);
         setTimeout(() => {
@@ -149,15 +149,24 @@ export const Register: React.FC<RegisterProps> = ({ onNavigate }) => {
             {/* Right Side - Form */}
             <div className="w-full lg:w-1/2 flex items-center justify-center p-4 sm:p-6 md:p-8 lg:p-16">
                 <div className="max-w-md w-full space-y-6 sm:space-y-8 fade-in">
+                    {/* Logo Mobile */}
+                    <div className="lg:hidden flex justify-center mb-6">
+                        <img
+                            src="/logo.png"
+                            alt="Photum Formaturas"
+                            className="h-16 w-auto object-contain"
+                        />
+                    </div>
+
                     <div className="text-center lg:text-left">
-                        <span className="font-bold tracking-widest uppercase text-xs sm:text-sm" style={{color: '#B9CF33'}}>Comece agora</span>
+                        <span className="font-bold tracking-widest uppercase text-xs sm:text-sm" style={{ color: '#B9CF33' }}>Comece agora</span>
                         <h2 className="mt-2 text-2xl sm:text-3xl font-serif font-bold text-gray-900">Crie sua conta</h2>
                         <p className="mt-2 text-xs sm:text-sm text-gray-600">
                             Já tem uma conta?{' '}
                             <button
                                 onClick={() => onNavigate('login')}
                                 className="font-medium hover:opacity-80 transition-opacity"
-                                style={{color: '#B9CF33'}}
+                                style={{ color: '#B9CF33' }}
                             >
                                 Faça login
                             </button>
@@ -221,7 +230,7 @@ export const Register: React.FC<RegisterProps> = ({ onNavigate }) => {
                                     checked={agreedToTerms}
                                     onChange={(e) => setAgreedToTerms(e.target.checked)}
                                     className="mt-0.5 sm:mt-1 h-4 w-4 flex-shrink-0 border-gray-300 rounded focus:ring-2"
-                                    style={{accentColor: '#B9CF33'}}
+                                    style={{ accentColor: '#B9CF33' }}
                                 />
                                 <label className="ml-2 text-xs sm:text-sm text-gray-600">
                                     Concordo com os{' '}
@@ -229,7 +238,7 @@ export const Register: React.FC<RegisterProps> = ({ onNavigate }) => {
                                         type="button"
                                         onClick={() => onNavigate('terms')}
                                         className="hover:opacity-80 transition-opacity underline"
-                                        style={{color: '#B9CF33'}}
+                                        style={{ color: '#B9CF33' }}
                                     >
                                         termos de uso
                                     </button>{' '}
@@ -238,7 +247,7 @@ export const Register: React.FC<RegisterProps> = ({ onNavigate }) => {
                                         type="button"
                                         onClick={() => onNavigate('privacy')}
                                         className="hover:opacity-80 transition-opacity underline"
-                                        style={{color: '#B9CF33'}}
+                                        style={{ color: '#B9CF33' }}
                                     >
                                         política de privacidade
                                     </button>
@@ -255,7 +264,7 @@ export const Register: React.FC<RegisterProps> = ({ onNavigate }) => {
                                 checked={formData.wantsToAddInstitution}
                                 onChange={(e) => setFormData(prev => ({ ...prev, wantsToAddInstitution: e.target.checked }))}
                                 className="mt-0.5 sm:mt-1 h-4 w-4 flex-shrink-0 border-gray-300 rounded focus:ring-2"
-                                style={{accentColor: '#B9CF33'}}
+                                style={{ accentColor: '#B9CF33' }}
                             />
                             <label className="ml-2 text-xs sm:text-sm text-gray-700">
                                 <span className="font-medium text-xs sm:text-sm">Cadastrar universidade agora (Opcional)</span>