atualização

App.tsx

@@ -3,6 +3,7 @@ import { Navbar } from "./components/Navbar";
 import { Home } from "./pages/Home";
 import { Dashboard } from "./pages/Dashboard";
 import { Login } from "./pages/Login";
+import { Register } from "./pages/Register";
 import { CalendarPage } from "./pages/Calendar";
 import { TeamPage } from "./pages/Team";
 import { FinancePage } from "./pages/Finance";
@@ -28,6 +29,7 @@ const AppContent: React.FC = () => {
         <Home onEnter={() => setCurrentPage(user ? "dashboard" : "login")} />
       );
     if (currentPage === "login") return user ? <Dashboard /> : <Login />;
+    if (currentPage === "register") return user ? <Dashboard /> : <Register onNavigate={setCurrentPage} />;
 
     if (!user) return <Login />;
 
@@ -70,7 +72,7 @@ const AppContent: React.FC = () => {
       {currentPage === "home" && (
         <footer className="bg-white border-t border-gray-100 py-12">
           <div className="max-w-7xl mx-auto px-4 flex flex-col md:flex-row justify-between items-center text-sm text-gray-500">
-            <p>&copy; 2024 PhotumFormaturas. Todos os direitos reservados.</p>
+            <p>&copy; 2025 PhotumFormaturas. Todos os direitos reservados.</p>
             <div className="flex space-x-6 mt-4 md:mt-0">
               <a href="#" className="hover:text-brand-black">
                 Política de Privacidade

components/Navbar.tsx

@@ -2,7 +2,7 @@
 import React, { useState, useEffect } from 'react';
 import { UserRole } from '../types';
 import { useAuth } from '../contexts/AuthContext';
-import { Menu, X, LogOut } from 'lucide-react';
+import { Menu, X, LogOut, User } from 'lucide-react';
 import { Button } from './Button';
 
 interface NavbarProps {
@@ -14,6 +14,7 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
   const { user, logout } = useAuth();
   const [isScrolled, setIsScrolled] = useState(false);
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+  const [isAccountDropdownOpen, setIsAccountDropdownOpen] = useState(false);
 
   useEffect(() => {
     const handleScroll = () => {
@@ -63,11 +64,10 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
 
   return (
     <nav
-      className={`fixed w-full z-50 transition-all duration-300 ${isScrolled ? 'bg-white/95 backdrop-blur-md shadow-sm py-2' : 'bg-white py-4'
+      className="fixed w-full z-50 bg-white shadow-sm py-3"
-        }`}
     >
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div className="flex justify-between items-center h-12">
+        <div className="flex justify-between items-center h-16">
 
           {/* Logo */}
           <div
@@ -77,7 +77,7 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
             <img
               src="/logo.png"
               alt="Photum Formaturas"
-              className="h-24 md:h-25 w-auto object-contain transition-all hover:opacity-100"
+              className="h-30 mb-6 w-auto object-contain"
             />
           </div>
 
@@ -113,9 +113,48 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
                 </button>
               </div>
             ) : (
-              <Button onClick={() => onNavigate('login')} size="sm">
+              <div className="relative">
-                Login
+                <button
-              </Button>
+                  onClick={() => setIsAccountDropdownOpen(!isAccountDropdownOpen)}
+                  className="flex items-center gap-2 p-2 rounded-full hover:bg-gray-100 transition-colors"
+                >
+                  <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>
+                  </div>
+                </button>
+
+                {/* Dropdown Popup - Centralizado */}
+                {isAccountDropdownOpen && (
+                  <div className="absolute left-1/2 -translate-x-1/2 top-full mt-2 w-64 bg-white rounded-xl shadow-xl border border-gray-200 overflow-hidden z-50 fade-in">
+                    <div className="p-4 space-y-3">
+                      <Button
+                        onClick={() => {
+                          onNavigate('login');
+                          setIsAccountDropdownOpen(false);
+                        }}
+                        variant="secondary"
+                        className="w-full rounded-xl"
+                      >
+                        ENTRAR
+                      </Button>
+
+                      <Button
+                        onClick={() => {
+                          onNavigate('register');
+                          setIsAccountDropdownOpen(false);
+                        }}
+                        className="w-full bg-purple-600 text-white hover:bg-purple-700 focus:ring-purple-500 rounded-xl"
+                      >
+                        Cadastre-se agora
+                      </Button>
+                    </div>
+                  </div>
+                )}
+              </div>
             )}
           </div>
 
@@ -160,9 +199,14 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
                   <Button variant="ghost" size="sm" onClick={logout}>Sair</Button>
                 </div>
               ) : (
-                <Button className="w-full" onClick={() => onNavigate('login')}>
+                <div className="flex flex-col gap-2">
-                  Acessar Painel
+                  <Button className="w-full rounded-lg" size="lg" variant="secondary" onClick={() => { onNavigate('login'); setIsMobileMenuOpen(false); }}>
-                </Button>
+                    ENTRAR
+                  </Button>
+                  <Button className="w-full bg-purple-600 text-white hover:bg-purple-700 focus:ring-purple-500 rounded-lg" size="lg" onClick={() => { onNavigate('register'); setIsMobileMenuOpen(false); }}>
+                    Cadastre-se agora
+                  </Button>
+                </div>
               )}
             </div>
           </div>

pages/Home.tsx

@@ -1,5 +1,4 @@
 import React, { useState, useEffect } from 'react';
-import { Button } from '../components/Button';
 import { Camera, Heart, Shield, Star } from 'lucide-react';
 
 const HERO_IMAGES = [
@@ -24,35 +23,27 @@ export const Home: React.FC<HomeProps> = ({ onEnter }) => {
   return (
     <div className="min-h-screen bg-white">
       {/* Hero Section */}
-      <div className="relative h-screen w-full overflow-hidden">
+      <div className="relative h-[70vh] w-full overflow-hidden">
         {HERO_IMAGES.map((img, idx) => (
           <div
             key={idx}
             className={`absolute inset-0 transition-opacity duration-1000 ease-in-out ${idx === currentSlide ? 'opacity-100' : 'opacity-0'}`}
           >
-            <img src={img} alt="Hero" className="w-full h-full object-cover" />
+            <img src={img} alt="Hero" className="w-full h-full object-cover scale-110" />
             <div className="absolute inset-0 bg-black/40"></div>
           </div>
         ))}
 
-        {/* Text and Buttons - Only visible on first slide */}
+        {/* Text - Only visible on first slide */}
         <div className={`absolute inset-0 flex items-center justify-center text-center px-4 transition-opacity duration-500 ${currentSlide === 0 ? 'opacity-100' : 'opacity-0 pointer-events-none'}`}>
           <div className="max-w-4xl space-y-6 slide-up">
-            <h1 className="text-4xl md:text-6xl lg:text-7xl font-serif text-white leading-tight">
+            <h1 className="text-4xl md:text-5xl lg:text-6xl font-serif text-white leading-tight">
               Eternizando Momentos <br />
               <span className="text-brand-gold italic">Únicos</span>
             </h1>
             <p className="text-lg md:text-xl text-gray-200 font-light max-w-2xl mx-auto tracking-wide">
               Gestão completa para eventos inesquecíveis. Do planejamento à entrega do álbum perfeito.
             </p>
-            <div className="pt-8 space-x-4">
-              <Button size="xl" variant="secondary" onClick={onEnter}>
-                Área do Cliente
-              </Button>
-              <Button size="lg" variant="outline" className="border-white text-white hover:bg-white hover:text-black">
-                Ver Portfólio
-              </Button>
-            </div>
           </div>
         </div>
 
@@ -77,19 +68,35 @@ export const Home: React.FC<HomeProps> = ({ onEnter }) => {
           </div>
 
           <div className="grid grid-cols-1 md:grid-cols-3 gap-12">
-            {[
+            <div className="text-center group">
-              { icon: <Camera size={32} />, title: "Qualidade Impecável", desc: "Equipamentos de última geração e profissionais premiados." },
+              <div className="inline-flex items-center justify-center w-20 h-20 rounded-full bg-gray-100 text-gray-700 mb-6 transition-all">
-              { icon: <Shield size={32} />, title: "Segurança Total", desc: "Backup duplo em nuvem e contratos transparentes." },
+                <Camera size={40} strokeWidth={1.5} />
-              { icon: <Heart size={32} />, title: "Atendimento Humanizado", desc: "Entendemos que seu evento é um sonho a ser realizado." }
-            ].map((feature, idx) => (
-              <div key={idx} className="text-center group p-6 rounded-lg hover:bg-gray-50 transition-colors">
-                <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-gray-100 text-brand-black mb-6 group-hover:bg-brand-gold group-hover:text-white transition-colors">
-                  {feature.icon}
-                </div>
-                <h4 className="text-xl font-medium mb-3">{feature.title}</h4>
-                <p className="text-gray-500 font-light leading-relaxed">{feature.desc}</p>
               </div>
-            ))}
+              <h4 className="text-xl font-bold mb-3 text-brand-black">Qualidade Impecável</h4>
+              <p className="text-gray-600 leading-relaxed">
+                Equipamentos de última geração e profissionais premiados.
+              </p>
+            </div>
+
+            <div className="text-center group">
+              <div className="inline-flex items-center justify-center w-20 h-20 rounded-full bg-gray-100 text-gray-700 mb-6 transition-all">
+                <Shield size={40} strokeWidth={1.5} />
+              </div>
+              <h4 className="text-xl font-bold mb-3 text-brand-black">Segurança Total</h4>
+              <p className="text-gray-600 leading-relaxed">
+                Backup duplo em nuvem e contratos transparentes.
+              </p>
+            </div>
+
+            <div className="text-center group">
+              <div className="inline-flex items-center justify-center w-20 h-20 rounded-full bg-gray-100 text-gray-700 mb-6 transition-all">
+                <Heart size={40} strokeWidth={1.5} />
+              </div>
+              <h4 className="text-xl font-bold mb-3 text-brand-black">Atendimento Humanizado</h4>
+              <p className="text-gray-600 leading-relaxed">
+                Entendemos que seu evento é um sonho a ser realizado.
+              </p>
+            </div>
           </div>
         </div>
       </section>

pages/Login.tsx

@@ -48,7 +48,7 @@ export const Login: React.FC = () => {
         />
         <div className="absolute inset-0 bg-brand-black/40 flex items-center justify-center">
             <div className="text-center text-white p-12">
-                <h1 className="text-5xl font-serif font-bold mb-4">Photum Manager</h1>
+                <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>

pages/Register.tsx

@@ -0,0 +1,186 @@
+
+import React, { useState } from 'react';
+import { Button } from '../components/Button';
+import { Input } from '../components/Input';
+
+interface RegisterProps {
+    onNavigate: (page: string) => void;
+}
+
+export const Register: React.FC<RegisterProps> = ({ onNavigate }) => {
+    const [formData, setFormData] = useState({
+        name: '',
+        email: '',
+        phone: '',
+        password: '',
+        confirmPassword: ''
+    });
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState('');
+    const [success, setSuccess] = useState(false);
+
+    const handleChange = (field: string, value: string) => {
+        setFormData(prev => ({ ...prev, [field]: value }));
+        setError('');
+    };
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        setIsLoading(true);
+        setError('');
+
+        // Validações
+        if (formData.password !== formData.confirmPassword) {
+            setError('As senhas não coincidem');
+            setIsLoading(false);
+            return;
+        }
+
+        if (formData.password.length < 6) {
+            setError('A senha deve ter no mínimo 6 caracteres');
+            setIsLoading(false);
+            return;
+        }
+
+        // Simular registro (conta será criada como Cliente/EVENT_OWNER automaticamente)
+        setTimeout(() => {
+            setIsLoading(false);
+            setSuccess(true);
+            setTimeout(() => {
+                onNavigate('login');
+            }, 2000);
+        }, 1500);
+    };
+
+    if (success) {
+        return (
+            <div className="min-h-screen flex items-center justify-center bg-white">
+                <div className="text-center fade-in">
+                    <div className="w-16 h-16 bg-green-500 rounded-full flex items-center justify-center mx-auto mb-4">
+                        <svg className="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                        </svg>
+                    </div>
+                    <h2 className="text-2xl font-bold text-gray-900 mb-2">Cadastro realizado com sucesso!</h2>
+                    <p className="text-gray-600">Redirecionando para o login...</p>
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div className="min-h-screen flex bg-white">
+            {/* Left Side - Image */}
+            <div className="hidden lg:block lg:w-1/2 relative overflow-hidden">
+                <img
+                    src="https://images.unsplash.com/photo-1511285560929-80b456fea0bc?ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80"
+                    alt="Photum Cadastro"
+                    className="absolute inset-0 w-full h-full object-cover"
+                />
+                <div className="absolute inset-0 bg-brand-black/40 flex items-center justify-center">
+                    <div className="text-center text-white p-12">
+                        <h1 className="text-5xl font-serif font-bold mb-4">Faça parte da Photum</h1>
+                        <p className="text-xl font-light tracking-wide max-w-md mx-auto">
+                            Eternize seus momentos especiais com a melhor plataforma de gestão de eventos fotográficos.
+                        </p>
+                    </div>
+                </div>
+            </div>
+
+            {/* Right Side - Form */}
+            <div className="w-full lg:w-1/2 flex items-center justify-center p-8 lg:p-16">
+                <div className="max-w-md w-full space-y-8 fade-in">
+                    <div className="text-center lg:text-left">
+                        <span className="text-brand-gold font-bold tracking-widest uppercase text-sm">Comece agora</span>
+                        <h2 className="mt-2 text-3xl font-serif font-bold text-gray-900">Crie sua conta</h2>
+                        <p className="mt-2 text-sm text-gray-600">
+                            Já tem uma conta?{' '}
+                            <button
+                                onClick={() => onNavigate('login')}
+                                className="text-brand-gold hover:text-brand-gold/80 font-medium"
+                            >
+                                Faça login
+                            </button>
+                        </p>
+                    </div>
+
+                    <form className="mt-8 space-y-5" onSubmit={handleSubmit}>
+                        <div className="space-y-4">
+                            <Input
+                                label="Nome Completo"
+                                type="text"
+                                required
+                                placeholder="João Silva"
+                                value={formData.name}
+                                onChange={(e) => handleChange('name', e.target.value)}
+                            />
+
+                            <Input
+                                label="E-mail"
+                                type="email"
+                                required
+                                placeholder="nome@exemplo.com"
+                                value={formData.email}
+                                onChange={(e) => handleChange('email', e.target.value)}
+                            />
+
+                            <Input
+                                label="Telefone"
+                                type="tel"
+                                required
+                                placeholder="(00) 00000-0000"
+                                value={formData.phone}
+                                onChange={(e) => handleChange('phone', e.target.value)}
+                            />
+
+                            <Input
+                                label="Senha"
+                                type="password"
+                                required
+                                placeholder="••••••••"
+                                value={formData.password}
+                                onChange={(e) => handleChange('password', e.target.value)}
+                            />
+
+                            <Input
+                                label="Confirmar Senha"
+                                type="password"
+                                required
+                                placeholder="••••••••"
+                                value={formData.confirmPassword}
+                                onChange={(e) => handleChange('confirmPassword', e.target.value)}
+                                error={error}
+                            />
+                        </div>
+
+                        <div className="flex items-start">
+                            <input
+                                type="checkbox"
+                                required
+                                className="mt-1 h-4 w-4 text-brand-gold focus:ring-brand-gold border-gray-300 rounded"
+                            />
+                            <label className="ml-2 text-sm text-gray-600">
+                                Concordo com os{' '}
+                                <a href="#" className="text-brand-gold hover:text-brand-gold/80">
+                                    termos de uso
+                                </a>{' '}
+                                e{' '}
+                                <a href="#" className="text-brand-gold hover:text-brand-gold/80">
+                                    política de privacidade
+                                </a>
+                            </label>
+                        </div>
+
+                        <Button type="submit" className="w-full" size="lg" isLoading={isLoading}>
+                            Criar Conta
+                        </Button>
+                    </form>
+
+                    <div className="text-center text-xs text-gray-500 pt-4">
+                        Ao criar uma conta, você concorda em receber atualizações e novidades sobre nossos serviços.
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};