diff --git a/App.tsx b/App.tsx
index b8c258d..c4c647b 100644
--- a/App.tsx
+++ b/App.tsx
@@ -9,6 +9,9 @@ import { TeamPage } from "./pages/Team";
 import { FinancePage } from "./pages/Finance";
 import { SettingsPage } from "./pages/Settings";
 import { AlbumsPage } from "./pages/Albums";
+import { PrivacyPolicy } from "./pages/PrivacyPolicy";
+import { TermsOfUse } from "./pages/TermsOfUse";
+import { LGPD } from "./pages/LGPD";
 import { AuthProvider, useAuth } from "./contexts/AuthContext";
 import { DataProvider } from "./contexts/DataContext";
 import { Construction } from "lucide-react";
@@ -30,6 +33,9 @@ const AppContent: React.FC = () => {
       );
     if (currentPage === "login") return user ? <Dashboard /> : <Login />;
     if (currentPage === "register") return user ? <Dashboard /> : <Register onNavigate={setCurrentPage} />;
+    if (currentPage === "privacy") return <PrivacyPolicy onNavigate={setCurrentPage} />;
+    if (currentPage === "terms") return <TermsOfUse onNavigate={setCurrentPage} />;
+    if (currentPage === "lgpd") return <LGPD onNavigate={setCurrentPage} />;
 
     if (!user) return <Login />;
 
@@ -70,100 +76,87 @@ const AppContent: React.FC = () => {
       <main>{renderPage()}</main>
 
       {currentPage === "home" && (
-        <footer className="bg-brand-black text-white py-20">
-          <div className="w-full max-w-[1400px] mx-auto px-8 sm:px-12 lg:px-20">
-            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-16 lg:gap-24 mb-20">
+        <footer className="bg-gradient-to-br from-brand-purple to-brand-purple/90 text-brand-black py-16 md:py-20">
+          <div className="w-full max-w-[1600px] mx-auto px-6 sm:px-8 md:px-12 lg:px-16 xl:px-20">
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 sm:gap-10 md:gap-12 lg:gap-16 xl:gap-20 mb-12 md:mb-16">
               {/* Logo e Descrição */}
               <div className="lg:col-span-1">
-                <h3 className="text-2xl font-serif font-bold mb-4" style={{color: '#B9CF33'}}>
-                  Photum Formaturas
-                </h3>
-                <p className="text-gray-400 text-sm leading-relaxed">
+                <img src="/logo.png" alt="Photum Formaturas" className="h-40 sm:h-34 md:h-28 lg:h-42 mb-4 md:mb-6" />
+                <p className="text-brand-black/80 text-sm sm:text-base md:text-lg leading-relaxed">
                   Eternizando momentos únicos com excelência e profissionalismo desde 2020.
                 </p>
               </div>
 
               {/* Serviços */}
               <div>
-                <h4 className="font-bold text-white mb-4 uppercase tracking-wider text-sm">Serviços</h4>
-                <ul className="space-y-3 text-gray-400 text-sm">
-                  <li>
-                    <a href="#" className="hover:text-brand-gold transition-colors">
-                      Fotografia de Eventos
-                    </a>
-                  </li>
-                  <li>
-                    <a href="#" className="hover:text-brand-gold transition-colors">
-                      Álbuns Personalizados
-                    </a>
-                  </li>
-                  <li>
-                    <a href="#" className="hover:text-brand-gold transition-colors">
-                      Gestão de Formaturas
-                    </a>
-                  </li>
-                  <li>
-                    <a href="#" className="hover:text-brand-gold transition-colors">
-                      Cobertura Completa
-                    </a>
-                  </li>
+                <h4 className="font-bold text-brand-black mb-4 md:mb-6 uppercase tracking-wider text-sm sm:text-base md:text-lg">Serviços</h4>
+                <ul className="space-y-2 md:space-y-3 text-brand-black/70 text-sm sm:text-base md:text-lg">
+                  <li>Fotografia de Eventos</li>
+                  <li>Álbuns Personalizados</li>
+                  <li>Gestão de Formaturas</li>
+                  <li>Cobertura Completa</li>
                 </ul>
               </div>
 
               {/* Links Úteis */}
               <div>
-                <h4 className="font-bold text-white mb-4 uppercase tracking-wider text-sm">Links Úteis</h4>
-                <ul className="space-y-3 text-gray-400 text-sm">
+                <h4 className="font-bold text-brand-black mb-4 md:mb-6 uppercase tracking-wider text-sm sm:text-base md:text-lg">Links Úteis</h4>
+                <ul className="space-y-2 md:space-y-3 text-brand-black/70 text-sm sm:text-base md:text-lg">
                   <li>
-                    <a href="#" onClick={() => setCurrentPage('login')} className="hover:text-brand-gold transition-colors">
+                    <a href="#" onClick={() => setCurrentPage('login')} className="hover:text-brand-black transition-colors">
                       Área do Cliente
                     </a>
                   </li>
                   <li>
-                    <a href="#" onClick={() => setCurrentPage('register')} className="hover:text-brand-gold transition-colors">
+                    <a href="#" onClick={() => setCurrentPage('register')} className="hover:text-brand-black transition-colors">
                       Cadastre sua Formatura
                     </a>
                   </li>
-                  <li>
-                    <a href="#" className="hover:text-brand-gold transition-colors">
-                      Portfólio
-                    </a>
-                  </li>
-                  <li>
-                    <a href="#" className="hover:text-brand-gold transition-colors">
-                      FAQ
-                    </a>
-                  </li>
                 </ul>
               </div>
 
               {/* Contato */}
               <div>
-                <h4 className="font-bold text-white mb-4 uppercase tracking-wider text-sm">Contato</h4>
-                <ul className="space-y-3 text-gray-400 text-sm">
-                  <li className="flex items-center gap-2">
-                    <span>📧</span>
-                    <a href="mailto:contato@photum.com.br" className="hover:text-brand-gold transition-colors">
+                <h4 className="font-bold text-brand-black mb-4 md:mb-6 uppercase tracking-wider text-sm sm:text-base md:text-lg">Contato</h4>
+                <ul className="space-y-3 md:space-y-4 text-brand-black/70 text-sm sm:text-base md:text-lg">
+                  <li className="flex items-center gap-2 md:gap-3">
+                    <svg className="w-5 h-5 md:w-6 md:h-6 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24">
+                      <path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
+                    </svg>
+                    <a href="mailto:contato@photum.com.br" className="hover:text-brand-black transition-colors break-all">
                       contato@photum.com.br
                     </a>
                   </li>
-                  <li className="flex items-center gap-2">
-                    <span>📱</span>
-                    <span>(11) 99999-9999</span>
+                  <li className="flex items-start gap-2 md:gap-3">
+                    <svg className="w-5 h-5 md:w-6 md:h-6 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 24 24">
+                      <path d="M20 15.5c-1.25 0-2.45-.2-3.57-.57-.35-.11-.74-.03-1.02.24l-2.2 2.2c-2.83-1.44-5.15-3.75-6.59-6.59l2.2-2.21c.28-.26.36-.65.25-1C8.7 6.45 8.5 5.25 8.5 4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1zM19 12h2c0-4.97-4.03-9-9-9v2c3.87 0 7 3.13 7 7zm-4 0h2c0-2.76-2.24-5-5-5v2c1.66 0 3 1.34 3 3z"/>
+                    </svg>
+                    <div>
+                      <p>(19) 3405 5024</p>
+                      <p>(19) 3621 4621</p>
+                    </div>
                   </li>
-                  <li className="flex items-center gap-2">
-                    <span>📍</span>
-                    <span>São Paulo, SP</span>
+                  <li className="flex items-center gap-2 md:gap-3">
+                    <svg className="w-5 h-5 md:w-6 md:h-6 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24">
+                      <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
+                    </svg>
+                    <span>Americana, SP</span>
                   </li>
-                  <li className="flex gap-4 mt-4">
-                    <a href="#" className="hover:text-brand-gold transition-colors text-xl">
-                      📷
+                  <li className="flex gap-4 md:gap-5 mt-4 md:mt-6">
+                    <a href="#" className="hover:text-brand-black transition-colors">
+                      <svg className="w-7 h-7 md:w-8 md:h-8" fill="currentColor" viewBox="0 0 24 24">
+                        <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
+                      </svg>
                     </a>
-                    <a href="#" className="hover:text-brand-gold transition-colors text-xl">
-                      👥
+                    <a href="#" className="hover:text-brand-black transition-colors">
+                      <svg className="w-7 h-7 md:w-8 md:h-8" fill="currentColor" viewBox="0 0 24 24">
+                        <path d="M22.675 0h-21.35c-.732 0-1.325.593-1.325 1.325v21.351c0 .731.593 1.324 1.325 1.324h11.495v-9.294h-3.128v-3.622h3.128v-2.671c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12v9.293h6.116c.73 0 1.323-.593 1.323-1.325v-21.35c0-.732-.593-1.325-1.325-1.325z"/>
+                      </svg>
                     </a>
-                    <a href="#" className="hover:text-brand-gold transition-colors text-xl">
-                      ▶️
+                    <a href="#" className="hover:text-brand-black transition-colors">
+                      <svg className="w-7 h-7 md:w-8 md:h-8" fill="currentColor" viewBox="0 0 24 24">
+                        <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/>
+                      </svg>
                     </a>
                   </li>
                 </ul>
@@ -171,16 +164,16 @@ const AppContent: React.FC = () => {
             </div>
 
             {/* Bottom Bar */}
-            <div className="border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center text-sm text-gray-500">
+            <div className="border-t border-black/20 pt-6 md:pt-8 flex flex-col md:flex-row justify-between items-center text-xs sm:text-sm md:text-base text-brand-black/60 gap-4">
               <p>&copy; 2025 PhotumFormaturas. Todos os direitos reservados.</p>
-              <div className="flex space-x-8 mt-4 md:mt-0">
-                <a href="#" className="hover:text-brand-gold transition-colors">
+              <div className="flex flex-wrap justify-center gap-4 sm:gap-6 md:gap-8">
+                <a href="#" onClick={() => setCurrentPage('privacy')} className="hover:text-brand-black transition-colors">
                   Política de Privacidade
                 </a>
-                <a href="#" className="hover:text-brand-gold transition-colors">
+                <a href="#" onClick={() => setCurrentPage('terms')} className="hover:text-brand-black transition-colors">
                   Termos de Uso
                 </a>
-                <a href="#" className="hover:text-brand-gold transition-colors">
+                <a href="#" onClick={() => setCurrentPage('lgpd')} className="hover:text-brand-black transition-colors">
                   LGPD
                 </a>
               </div>
diff --git a/index.html b/index.html
index 462537e..2fc7e6a 100644
--- a/index.html
+++ b/index.html
@@ -38,32 +38,117 @@
       width: 8px;
     }
 
-    ::- webkit - scrollbar - track {
+    ::-webkit-scrollbar-track {
       background: #f1f1f1;
     }
 
-    :: -webkit - scrollbar - thumb {
+    ::-webkit-scrollbar-thumb {
       background: #B9CF33;
-      border - radius: 4px;
+      border-radius: 4px;
     }
 
-    :: -webkit - scrollbar - thumb:hover {
+    ::-webkit-scrollbar-thumb:hover {
       background: #a5bd2e;
     }
 
-    .fade -in {
-      animation: fadeIn 0.5s ease- out forwards;
+    /* Loading Screen */
+    #loading-screen {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: linear-gradient(135deg, #492E61 0%, #6B4694 100%);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      z-index: 9999;
+      animation: fadeOut 0.5s ease-out 2.5s forwards;
     }
 
-    .slide - up {
-      animation: slideUp 0.6s ease - out forwards;
+    @keyframes fadeOut {
+      to {
+        opacity: 0;
+        visibility: hidden;
+      }
+    }
+
+    .loading-logo {
+      width: 200px;
+      height: auto;
+      margin-bottom: 30px;
+      animation: scaleIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
+    }
+
+    @keyframes scaleIn {
+      from {
+        opacity: 0;
+        transform: scale(0.5);
+      }
+      to {
+        opacity: 1;
+        transform: scale(1);
+      }
+    }
+
+    .loading-text {
+      color: white;
+      font-size: 24px;
+      font-weight: 300;
+      letter-spacing: 3px;
+      margin-bottom: 20px;
+      animation: fadeInUp 0.8s ease-out 0.3s both;
+    }
+
+    @keyframes fadeInUp {
+      from {
+        opacity: 0;
+        transform: translateY(20px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+
+    .loading-bar {
+      width: 200px;
+      height: 3px;
+      background: rgba(255, 255, 255, 0.2);
+      border-radius: 10px;
+      overflow: hidden;
+      animation: fadeInUp 0.8s ease-out 0.5s both;
+    }
+
+    .loading-bar-fill {
+      height: 100%;
+      background: linear-gradient(90deg, #B9CF33, #C2388B);
+      border-radius: 10px;
+      animation: loadingProgress 2s ease-out forwards;
+    }
+
+    @keyframes loadingProgress {
+      from {
+        width: 0%;
+      }
+      to {
+        width: 100%;
+      }
+    }
+
+    .fade-in {
+      animation: fadeIn 0.5s ease-out forwards;
+    }
+
+    .slide-up {
+      animation: slideUp 0.6s ease-out forwards;
     }
 
     @keyframes fadeIn {
       from {
         opacity: 0;
       }
-
       to {
         opacity: 1;
       }
@@ -74,7 +159,22 @@
         opacity: 0;
         transform: translateY(20px);
       }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
 
+    /* Page entrance animation */
+    #root {
+      animation: pageEntrance 0.5s ease-out 2.5s both;
+    }
+
+    @keyframes pageEntrance {
+      from {
+        opacity: 0;
+        transform: translateY(10px);
+      }
       to {
         opacity: 1;
         transform: translateY(0);
@@ -84,6 +184,15 @@
 </head>
 
 <body class="bg-white text-brand-black antialiased selection:bg-brand-gold selection:text-white">
+  <!-- Loading Screen -->
+  <div id="loading-screen">
+    <img src="/logo.png" alt="Photum Formaturas" class="loading-logo" />
+    <div class="loading-text">PHOTUM FORMATURAS</div>
+    <div class="loading-bar">
+      <div class="loading-bar-fill"></div>
+    </div>
+  </div>
+
   <div id="root"></div>
   <script type="module" src="/index.tsx"></script>
 </body>
diff --git a/pages/Home.tsx b/pages/Home.tsx
index 1217266..6b60fe3 100644
--- a/pages/Home.tsx
+++ b/pages/Home.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { Camera, Heart, Shield, Star, BookOpen } from 'lucide-react';
 
 const HERO_IMAGES = [
@@ -10,8 +10,38 @@ interface HomeProps {
   onEnter: () => void;
 }
 
+// Hook para detectar quando elemento está visível
+const useIntersectionObserver = (options = {}) => {
+  const [isVisible, setIsVisible] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(([entry]) => {
+      if (entry.isIntersecting) {
+        setIsVisible(true);
+      }
+    }, { threshold: 0.1, ...options });
+
+    if (ref.current) {
+      observer.observe(ref.current);
+    }
+
+    return () => {
+      if (ref.current) {
+        observer.unobserve(ref.current);
+      }
+    };
+  }, []);
+
+  return [ref, isVisible] as const;
+};
+
 export const Home: React.FC<HomeProps> = ({ onEnter }) => {
   const [currentSlide, setCurrentSlide] = useState(0);
+  const [albumsRef, albumsVisible] = useIntersectionObserver();
+  const [ctaRef, ctaVisible] = useIntersectionObserver();
+  const [testimonialsRef, testimonialsVisible] = useIntersectionObserver();
+  const [contactRef, contactVisible] = useIntersectionObserver();
 
   useEffect(() => {
     const timer = setInterval(() => {
@@ -60,20 +90,20 @@ export const Home: React.FC<HomeProps> = ({ onEnter }) => {
       </div>
 
       {/* Albums Section */}
-      <section className="py-24 relative overflow-hidden" style={{ backgroundColor: '#ffffff' }}>
+      <section ref={albumsRef} className="py-24 relative overflow-hidden" style={{ backgroundColor: '#ffffff' }}>
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="flex flex-col lg:flex-row items-center gap-16">
             {/* Left side - Icon and Text */}
-            <div className="lg:w-1/2 text-left fade-in">
-              <div className="inline-flex items-center justify-center w-36 h-36 mb-8 transform transition-transform duration-300 hover:scale-110 hover:rotate-3">
+            <div className="lg:w-1/2 text-left">
+              <div className={`inline-flex items-center justify-center w-36 h-36 mb-8 transform transition-all duration-700 ease-out ${albumsVisible ? 'opacity-100 scale-100 rotate-0' : 'opacity-0 scale-75 -rotate-12'} hover:scale-110 hover:rotate-3`}>
                 <img src="/HOME_17.png" alt="Álbuns" className="w-full h-full object-contain drop-shadow-2xl" />
               </div>
               
-              <h2 className="text-5xl md:text-6xl font-bold mb-8 leading-tight" style={{color: '#B9CF33'}}>
+              <h2 className={`text-5xl md:text-6xl font-bold mb-8 leading-tight transition-all duration-700 ease-out delay-100 ${albumsVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`} style={{color: '#B9CF33'}}>
                 ÁLBUNS<br/>PERSONALIZADOS
               </h2>
               
-              <div className="space-y-3 text-gray-700">
+              <div className={`space-y-3 text-gray-700 transition-all duration-700 ease-out delay-200 ${albumsVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}>
                 <p className="text-lg leading-relaxed">
                   Escolha a cor, tamanho, tecido, acabamento, modelo,
                 </p>
@@ -87,19 +117,19 @@ export const Home: React.FC<HomeProps> = ({ onEnter }) => {
             </div>
 
             {/* Right side - CTA */}
-            <div className="lg:w-2/8 flex flex-col items-center lg:items-start justify-center ml-40 slide-up">
+            <div ref={ctaRef} className={`lg:w-2/8 flex flex-col items-center lg:items-start justify-center ml-40 transition-all duration-700 ease-out delay-300 ${ctaVisible ? 'opacity-100 translate-x-0 scale-100' : 'opacity-0 translate-x-20 scale-90'}`}>
               <div className="bg-white rounded-lg shadow-2xl p-10 border-t-4 transform transition-all duration-300 hover:shadow-xl hover:-translate-y-2" style={{ borderColor: '#B9CF33' }}>
-                <div className="flex justify-center mb-6">
+                <div className={`flex justify-center mb-6 transition-all duration-700 ease-out delay-400 ${ctaVisible ? 'opacity-100 scale-100' : 'opacity-0 scale-80'}`}>
                   <div className="w-29 h-29 transform transition-transform duration-300 hover:scale-110">
                     <img src="/logo.png" alt="Cadastrar" className="w-full h-full object-contain drop-shadow-lg" />
                   </div>
                 </div>
-                <p className="text-gray-700 text-xl mb-5 text-center font-medium leading-relaxed">
+                <p className={`text-gray-700 text-xl mb-5 text-center font-medium leading-relaxed transition-all duration-700 ease-out delay-500 ${ctaVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-5'}`}>
                   Faça parte da Photum e cadastre sua formatura.
                 </p>
                 <button
                   onClick={onEnter}
-                  className="w-full px-10 py-5 text-white font-bold text-lg rounded-md transition-all duration-300 transform hover:scale-105 hover:shadow-2xl active:scale-95"
+                  className={`w-full px-10 py-5 text-white font-bold text-lg rounded-md transition-all duration-700 ease-out delay-600 transform hover:scale-105 hover:shadow-2xl active:scale-95 ${ctaVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-5'}`}
                   style={{ backgroundColor: '#B9CF33' }}
                 >
                   Cadastrar Formatura
@@ -115,33 +145,36 @@ export const Home: React.FC<HomeProps> = ({ onEnter }) => {
       </section>
 
       {/* Contact Section */}
-      <section className="py-24 relative overflow-hidden" style={{ backgroundColor: '#492E61' }}>
-        <div className="max-w-7xl mx-auto px-8 sm:px-12 lg:px-20">
-          <div className="text-center mb-16">
-            <h2 className="text-4xl md:text-5xl font-bold text-white mb-4 tracking-wide">ENTRE EM CONTATO</h2>
-            <p className="text-white/90 text-lg">Envie sua mensagem, ligue ou faça uma visita em nossa empresa!</p>
+      <section ref={contactRef} className="py-16 relative overflow-hidden" style={{ backgroundColor: '#492E61' }}>
+        {/* Decorative gradient circles */}
+        <div className="absolute -top-24 -right-24 w-96 h-96 rounded-full opacity-10 blur-3xl" style={{ backgroundColor: '#B9CF33' }}></div>
+        <div className="absolute -bottom-24 -left-24 w-96 h-96 rounded-full opacity-10 blur-3xl" style={{ backgroundColor: '#C2388B' }}></div>
+        
+        <div className="max-w-7xl mx-auto px-8 sm:px-12 lg:px-20 relative z-10">
+          <div className={`text-center mb-12 transition-all duration-700 ${contactVisible ? 'opacity-100 translate-y-0' : 'opacity-0 -translate-y-10'}`}>
+            <h2 className="text-3xl md:text-4xl font-bold text-[#B9CF32] mb-3 tracking-wide">ENTRE EM CONTATO</h2>
+            <p className="text-white/90">Envie sua mensagem, ligue ou faça uma visita em nossa empresa!</p>
           </div>
 
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-20 items-start max-w-6xl mx-auto">
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start max-w-6xl mx-auto">
             {/* Left side - Contact Info */}
-            <div className="space-y-6 text-white">
+            <div className={`space-y-5 text-white transition-all duration-700 delay-200 ${contactVisible ? 'opacity-100 translate-x-0' : 'opacity-0 -translate-x-20'}`}>
               <div className="group">
-                <div className="flex items-start gap-4 p-3 rounded-lg transition-all duration-300 hover:bg-white/10">
-                  <div className="flex-shrink-0 w-10 h-10 rounded-full bg-white/20 flex items-center justify-center">
-                    <svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
+                <div className="flex items-start gap-3 p-3 rounded-xl transition-all duration-300 hover:bg-white/10 hover:shadow-lg hover:-translate-y-1 cursor-pointer border border-white/5 hover:border-white/20">
+                  <div className="flex-shrink-0 w-10 h-10 rounded-full bg-white/20 flex items-center justify-center transition-transform duration-300 group-hover:scale-110">
+                    <svg className="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
+                      <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
                     </svg>
                   </div>
                   <div className="flex-1">
-                    <p className="font-semibold mb-1">Rua Bom Recreio, 305</p>
+                    <p className="font-bold mb-1">Rua Bom Recreio, 305</p>
                     <p className="text-white/80 text-sm">Jd. Boer II • Americana SP</p>
-                    <p className="text-white/80 text-sm mb-1">CEP 13477-720</p>
+                    <p className="text-white/80 text-sm mb-2">CEP 13477-720</p>
                     <a 
-                      href="https://goo.gl/maps/4EwukztUUXP2" 
+                      href="https://www.google.com/maps/place/Photum+Formaturas/@-22.7442887,-47.290221,21z/data=!4m12!1m5!3m4!2zMjLCsDQ0JzM5LjMiUyA0N8KwMTcnMjQuOCJX!8m2!3d-22.744247!4d-47.290221!3m5!1s0x94c89755cd9e70a9:0x15496eb4ec405483!8m2!3d-22.7442757!4d-47.2902662!16s%2Fg%2F11g6my_mm1?hl=pt&entry=ttu&g_ep=EgoyMDI1MTEyMy4xIKXMDSoASAFQAw%3D%3D" 
                       target="_blank" 
                       rel="noopener noreferrer"
-                      className="text-xs underline hover:text-white/70 transition-colors inline-flex items-center gap-1"
+                      className="text-xs underline hover:text-white transition-colors inline-flex items-center gap-1 font-medium"
                     >
                       Ver no mapa →
                     </a>
@@ -149,29 +182,42 @@ export const Home: React.FC<HomeProps> = ({ onEnter }) => {
                 </div>
               </div>
 
+              {/* Mini Map */}
+              <div className="rounded-xl overflow-hidden shadow-lg border border-white/10 h-48">
+                <iframe 
+                  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d235.28736842715582!2d-47.29022099999999!3d-22.7442887!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94c89755cd9e70a9%3A0x15496eb4ec405483!2sPhotum%20Formaturas!5e0!3m2!1spt-BR!2sbr!4v1701234567890!5m2!1spt-BR!2sbr"
+                  width="100%"
+                  height="100%"
+                  style={{ border: 0 }}
+                  allowFullScreen
+                  loading="lazy"
+                  referrerPolicy="no-referrer-when-downgrade"
+                ></iframe>
+              </div>
+
               <div className="group">
-                <div className="flex items-start gap-4 p-3 rounded-lg transition-all duration-300 hover:bg-white/10">
-                  <div className="flex-shrink-0 w-10 h-10 rounded-full bg-white/20 flex items-center justify-center">
-                    <svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
+                <div className="flex items-start gap-3 p-3 rounded-xl transition-all duration-300 hover:bg-white/10 hover:shadow-lg hover:-translate-y-1 cursor-pointer border border-white/5 hover:border-white/20">
+                  <div className="flex-shrink-0 w-10 h-10 rounded-full bg-white/20 flex items-center justify-center transition-transform duration-300 group-hover:scale-110">
+                    <svg className="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
+                      <path d="M20 15.5c-1.25 0-2.45-.2-3.57-.57-.35-.11-.74-.03-1.02.24l-2.2 2.2c-2.83-1.44-5.15-3.75-6.59-6.59l2.2-2.21c.28-.26.36-.65.25-1C8.7 6.45 8.5 5.25 8.5 4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1zM19 12h2c0-4.97-4.03-9-9-9v2c3.87 0 7 3.13 7 7zm-4 0h2c0-2.76-2.24-5-5-5v2c1.66 0 3 1.34 3 3z"/>
                     </svg>
                   </div>
                   <div className="flex-1">
-                    <p>(19) 3405.5024</p>
-                    <p>(19) 3621.4621</p>
+                    <p className="font-semibold">(19) 3405.5024</p>
+                    <p className="font-semibold">(19) 3621.4621</p>
                   </div>
                 </div>
               </div>
 
               <div className="group">
-                <div className="flex items-start gap-4 p-3 rounded-lg transition-all duration-300 hover:bg-white/10">
-                  <div className="flex-shrink-0 w-10 h-10 rounded-full bg-white/20 flex items-center justify-center">
-                    <svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+                <div className="flex items-start gap-3 p-3 rounded-xl transition-all duration-300 hover:bg-white/10 hover:shadow-lg hover:-translate-y-1 cursor-pointer border border-white/5 hover:border-white/20">
+                  <div className="flex-shrink-0 w-10 h-10 rounded-full bg-white/20 flex items-center justify-center transition-transform duration-300 group-hover:scale-110">
+                    <svg className="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
+                      <path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
                     </svg>
                   </div>
                   <div className="flex-1">
-                    <a href="mailto:contato@photum.com.br" className="hover:text-white/70 transition-colors">
+                    <a href="mailto:contato@photum.com.br" className="font-semibold hover:text-white transition-colors">
                       contato@photum.com.br
                     </a>
                   </div>
@@ -180,26 +226,36 @@ export const Home: React.FC<HomeProps> = ({ onEnter }) => {
             </div>
 
             {/* Right side - Contact Form */}
-            <div className="space-y-5 bg-white/5 p-6 rounded-xl backdrop-blur-sm">
+            <div className={`space-y-5 bg-gradient-to-br from-white/10 to-white/5 p-6 rounded-2xl backdrop-blur-md border border-white/10 shadow-2xl transition-all duration-700 delay-300 ${contactVisible ? 'opacity-100 translate-x-0' : 'opacity-0 translate-x-20'}`}>
               <input
                 type="text"
                 placeholder="Nome"
-                className="w-full px-3 py-3 bg-transparent border-b-2 border-white/30 text-white placeholder-white/60 focus:border-white focus:outline-none transition-colors"
+                className="w-full px-4 py-3 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-4 py-3 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-3 bg-transparent border-b-2 border-white/30 text-white placeholder-white/60 focus:border-white focus:outline-none transition-colors"
+                className="w-full px-4 py-3 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={4}
-                className="w-full px-3 py-3 bg-transparent border-b-2 border-white/30 text-white placeholder-white/60 focus:border-white focus:outline-none transition-colors resize-none"
+                className="w-full px-4 py-3 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-8 py-3 bg-white text-brand-black font-bold rounded-lg hover:bg-white/90 transition-all transform hover:scale-[1.02] active:scale-95 shadow-lg"
+                className="w-full px-10 py-3 text-white font-bold rounded-xl hover:opacity-90 transition-all duration-300 transform hover:scale-105 hover:shadow-2xl active:scale-95 relative overflow-hidden group flex items-center justify-center gap-2"
+                style={{ backgroundColor: '#B9CF32' }}
               >
-                enviar
+                <span className="relative z-10">Enviar</span>
+                <svg className="w-5 h-5 relative z-10 rotate-45" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
+                </svg>
+                <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-700"></div>
               </button>
             </div>
           </div>
diff --git a/pages/LGPD.tsx b/pages/LGPD.tsx
new file mode 100644
index 0000000..404e50f
--- /dev/null
+++ b/pages/LGPD.tsx
@@ -0,0 +1,135 @@
+import React from 'react';
+
+interface LGPDProps {
+  onNavigate: (page: string) => void;
+}
+
+export const LGPD: React.FC<LGPDProps> = ({ onNavigate }) => {
+  return (
+    <div className="min-h-screen bg-white py-20 px-8">
+      <div className="max-w-4xl mx-auto">
+        <button
+          onClick={() => onNavigate('home')}
+          className="mb-8 text-brand-purple hover:underline flex items-center gap-2"
+        >
+          ← Voltar para Home
+        </button>
+        
+        <h1 className="text-4xl font-bold mb-8" style={{ color: '#B9CF33' }}>
+          LGPD - Lei Geral de Proteção de Dados
+        </h1>
+
+        <div className="prose prose-lg max-w-none text-gray-700 space-y-6">
+          <section>
+            <h2 className="text-2xl font-bold mb-4 text-brand-purple">Nosso Compromisso com a LGPD</h2>
+            <p>
+              A Photum Formaturas está totalmente comprometida com a proteção de dados pessoais conforme
+              estabelecido pela Lei Geral de Proteção de Dados (Lei nº 13.709/2018).
+            </p>
+          </section>
+
+          <section>
+            <h2 className="text-2xl font-bold mb-4 text-brand-purple">1. Princípios que Seguimos</h2>
+            <ul className="list-disc pl-6 space-y-2">
+              <li><strong>Finalidade:</strong> Coletamos dados apenas para propósitos específicos e legítimos</li>
+              <li><strong>Adequação:</strong> O tratamento é compatível com as finalidades informadas</li>
+              <li><strong>Necessidade:</strong> Limitamos a coleta ao mínimo necessário</li>
+              <li><strong>Transparência:</strong> Informamos claramente sobre o uso dos dados</li>
+              <li><strong>Segurança:</strong> Adotamos medidas técnicas e administrativas para proteção</li>
+              <li><strong>Prevenção:</strong> Evitamos danos por meio de boas práticas</li>
+            </ul>
+          </section>
+
+          <section>
+            <h2 className="text-2xl font-bold mb-4 text-brand-purple">2. Seus Direitos sob a LGPD</h2>
+            <p>Como titular de dados, você tem os seguintes direitos:</p>
+            <ul className="list-disc pl-6 space-y-2">
+              <li><strong>Confirmação e Acesso:</strong> Saber se tratamos seus dados e acessá-los</li>
+              <li><strong>Correção:</strong> Corrigir dados incompletos, inexatos ou desatualizados</li>
+              <li><strong>Anonimização, Bloqueio ou Eliminação:</strong> Solicitar remoção de dados desnecessários</li>
+              <li><strong>Portabilidade:</strong> Receber seus dados em formato estruturado</li>
+              <li><strong>Eliminação:</strong> Excluir dados tratados com seu consentimento</li>
+              <li><strong>Informação:</strong> Saber com quem compartilhamos seus dados</li>
+              <li><strong>Revogação do Consentimento:</strong> Retirar autorização a qualquer momento</li>
+              <li><strong>Oposição:</strong> Se opor ao tratamento realizado com base em uma das hipóteses legais</li>
+            </ul>
+          </section>
+
+          <section>
+            <h2 className="text-2xl font-bold mb-4 text-brand-purple">3. Tratamento de Dados</h2>
+            <p>Tratamos dados pessoais nas seguintes situações:</p>
+            <ul className="list-disc pl-6 space-y-2">
+              <li>Mediante seu consentimento</li>
+              <li>Para cumprimento de obrigação legal</li>
+              <li>Para execução de contrato</li>
+              <li>Para exercício regular de direitos</li>
+              <li>Para proteção do crédito</li>
+              <li>Por legítimo interesse</li>
+            </ul>
+          </section>
+
+          <section>
+            <h2 className="text-2xl font-bold mb-4 text-brand-purple">4. Compartilhamento de Dados</h2>
+            <p>
+              Seus dados podem ser compartilhados apenas com:
+            </p>
+            <ul className="list-disc pl-6 space-y-2">
+              <li>Prestadores de serviços essenciais (processamento de pagamentos, armazenamento em nuvem)</li>
+              <li>Autoridades quando exigido por lei</li>
+              <li>Parceiros comerciais, mediante seu consentimento explícito</li>
+            </ul>
+          </section>
+
+          <section>
+            <h2 className="text-2xl font-bold mb-4 text-brand-purple">5. Segurança dos Dados</h2>
+            <p>Implementamos medidas de segurança como:</p>
+            <ul className="list-disc pl-6 space-y-2">
+              <li>Criptografia de dados sensíveis</li>
+              <li>Controles de acesso rigorosos</li>
+              <li>Monitoramento constante de segurança</li>
+              <li>Treinamento de equipe sobre proteção de dados</li>
+              <li>Backups regulares e seguros</li>
+            </ul>
+          </section>
+
+          <section>
+            <h2 className="text-2xl font-bold mb-4 text-brand-purple">6. Retenção de Dados</h2>
+            <p>
+              Mantemos seus dados pessoais apenas pelo tempo necessário para cumprir as finalidades
+              para as quais foram coletados, incluindo requisitos legais, contratuais e de prestação de contas.
+            </p>
+          </section>
+
+          <section>
+            <h2 className="text-2xl font-bold mb-4 text-brand-purple">7. Encarregado de Dados (DPO)</h2>
+            <p>
+              Para exercer seus direitos ou esclarecer dúvidas sobre o tratamento de dados pessoais,
+              entre em contato com nosso Encarregado de Proteção de Dados:
+            </p>
+            <p className="mt-4">
+              <strong>E-mail:</strong>{' '}
+              <a href="mailto:lgpd@photum.com.br" className="text-brand-purple hover:underline">
+                lgpd@photum.com.br
+              </a>
+            </p>
+            <p>
+              <strong>Telefone:</strong> (19) 3405-5024
+            </p>
+          </section>
+
+          <section>
+            <h2 className="text-2xl font-bold mb-4 text-brand-purple">8. Autoridade Nacional</h2>
+            <p>
+              Você também pode entrar em contato com a Autoridade Nacional de Proteção de Dados (ANPD)
+              para questões relacionadas à proteção de seus dados pessoais.
+            </p>
+          </section>
+
+          <p className="text-sm text-gray-500 mt-8">
+            Última atualização: Dezembro de 2025
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/pages/Login.tsx b/pages/Login.tsx
index f464cd1..d0cc2a0 100644
--- a/pages/Login.tsx
+++ b/pages/Login.tsx
@@ -46,7 +46,7 @@ export const Login: React.FC = () => {
           alt="Photum Login" 
           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="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>
@@ -58,33 +58,100 @@ export const Login: React.FC = () => {
       <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">Bem-vindo de volta</span>
+            <span className="font-bold tracking-widest uppercase text-sm" style={{color: '#B9CF33'}}>Bem-vindo de volta</span>
             <h2 className="mt-2 text-3xl font-serif font-bold text-gray-900">Acesse sua conta</h2>
+            <p className="mt-2 text-sm text-gray-600">
+              Não tem uma conta?{' '}
+              <button
+                type="button"
+                onClick={() => window.location.hash = '#register'}
+                className="font-medium hover:opacity-80 transition-opacity"
+                style={{color: '#B9CF33'}}
+              >
+                Cadastre-se
+              </button>
+            </p>
           </div>
 
           <form className="mt-8 space-y-6" onSubmit={handleLogin}>
             <div className="space-y-4">
-              <Input 
-                label="E-mail Corporativo ou Pessoal"
-                type="email" 
-                required 
-                placeholder="nome@exemplo.com"
-                value={email}
-                onChange={(e) => setEmail(e.target.value)}
-                error={error}
-              />
-              <Input 
-                label="Senha"
-                type="password" 
-                placeholder="••••••••"
-                readOnly
-                className="bg-gray-50 cursor-not-allowed"
-              />
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-2">
+                  E-MAIL CORPORATIVO OU PESSOAL
+                </label>
+                <input
+                  type="email"
+                  required
+                  placeholder="nome@exemplo.com"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:border-transparent transition-all"
+                  style={{focusRing: '2px solid #B9CF33'}}
+                  onFocus={(e) => e.target.style.borderColor = '#B9CF33'}
+                  onBlur={(e) => e.target.style.borderColor = '#d1d5db'}
+                />
+                {error && <span className="text-xs text-red-500 mt-1 block">{error}</span>}
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-2">
+                  SENHA
+                </label>
+                <div className="relative">
+                  <input
+                    type="password"
+                    placeholder="••••••••"
+                    readOnly
+                    className="w-full px-4 py-3 border border-gray-300 rounded-lg bg-gray-50 cursor-not-allowed"
+                  />
+                  <button type="button" className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400">
+                    <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+                    </svg>
+                  </button>
+                </div>
+              </div>
             </div>
 
-            <Button type="submit" className="w-full" size="lg" isLoading={isLoading}>
-              Entrar no Sistema
-            </Button>
+            <button
+              type="submit"
+              disabled={isLoading}
+              className="w-full px-10 py-4 text-white font-bold 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: '#1a1a1a'}}
+            >
+              {isLoading ? 'Entrando...' : 'Entrar no Sistema'}
+            </button>
+          </form>
+
+          {/* Demo Users Quick Select */}
+          <div className="mt-10 pt-10 border-t border-gray-200">
+            <p className="text-xs uppercase tracking-widest mb-4 text-center text-gray-400">Usuários de Demonstração (Clique para preencher)</p>
+            <div className="grid grid-cols-2 gap-3">
+              {availableUsers.map(user => (
+                <button
+                  key={user.id}
+                  onClick={() => fillCredentials(user.email)}
+                  className="flex flex-col items-start 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'}}
+                  onMouseEnter={(e) => {
+                    e.currentTarget.style.borderColor = '#B9CF33';
+                    e.currentTarget.style.boxShadow = '0 4px 12px rgba(185, 207, 51, 0.15)';
+                  }}
+                  onMouseLeave={(e) => {
+                    e.currentTarget.style.borderColor = '#e5e7eb';
+                    e.currentTarget.style.boxShadow = 'none';
+                  }}
+                >
+                  <span className="text-sm font-bold text-gray-900">{user.name}</span>
+                  <span className="text-xs uppercase tracking-wide mt-1 font-semibold" style={{color: '#B9CF33'}}>{getRoleLabel(user.role)}</span>
+                  <span className="text-xs text-gray-500 mt-1 truncate w-full">{user.email}</span>
+                </button>
+              ))}
+            </div>
+          </div>yle={{backgroundColor: '#1a1a1a'}}
+            >
+              {isLoading ? 'Entrando...' : 'Entrar no Sistema'}
+            </button>
           </form>
 
           {/* Demo Users Quick Select */}
@@ -95,10 +162,13 @@ export const Login: React.FC = () => {
                 <button
                   key={user.id}
                   onClick={() => fillCredentials(user.email)}
-                  className="flex flex-col items-start p-3 border border-gray-200 rounded-sm hover:border-brand-gold hover:bg-gray-50 transition-all text-left group"
+                  className="flex flex-col items-start p-3 border border-gray-200 rounded-lg hover:bg-gray-50 transition-all text-left group"
+                  style={{borderColor: '#e5e7eb'}}
+                  onMouseEnter={(e) => e.currentTarget.style.borderColor = '#B9CF33'}
+                  onMouseLeave={(e) => e.currentTarget.style.borderColor = '#e5e7eb'}
                 >
                   <span className="text-xs font-bold text-gray-700 group-hover:text-brand-black">{user.name}</span>
-                  <span className="text-[10px] uppercase tracking-wide text-brand-gold mt-1">{getRoleLabel(user.role)}</span>
+                  <span className="text-[10px] uppercase tracking-wide mt-1" style={{color: '#B9CF33'}}>{getRoleLabel(user.role)}</span>
                   <span className="text-[10px] text-gray-400 mt-0.5 truncate w-full">{user.email}</span>
                 </button>
               ))}
diff --git a/pages/PrivacyPolicy.tsx b/pages/PrivacyPolicy.tsx
new file mode 100644
index 0000000..ef88037
--- /dev/null
+++ b/pages/PrivacyPolicy.tsx
@@ -0,0 +1,95 @@
+import React from 'react';
+
+interface PrivacyPolicyProps {
+  onNavigate: (page: string) => void;
+}
+
+export const PrivacyPolicy: React.FC<PrivacyPolicyProps> = ({ onNavigate }) => {
+  return (
+    <div className="min-h-screen bg-white py-20 px-8">
+      <div className="max-w-4xl mx-auto">
+        <button
+          onClick={() => onNavigate('home')}
+          className="mb-8 text-brand-purple hover:underline flex items-center gap-2"
+        >
+          ← Voltar para Home
+        </button>
+        
+        <h1 className="text-4xl font-bold mb-8" style={{ color: '#B9CF33' }}>
+          Política de Privacidade
+        </h1>
+
+        <div className="prose prose-lg max-w-none text-gray-700 space-y-6">
+          <section>
+            <h2 className="text-2xl font-bold mb-4 text-brand-purple">1. Informações que Coletamos</h2>
+            <p>
+              A Photum Formaturas coleta informações que você nos fornece diretamente ao criar uma conta,
+              solicitar serviços ou entrar em contato conosco. Isso pode incluir:
+            </p>
+            <ul className="list-disc pl-6 space-y-2">
+              <li>Nome completo</li>
+              <li>Endereço de e-mail</li>
+              <li>Número de telefone</li>
+              <li>Informações sobre o evento (formatura)</li>
+              <li>Dados de pagamento (processados de forma segura)</li>
+            </ul>
+          </section>
+
+          <section>
+            <h2 className="text-2xl font-bold mb-4 text-brand-purple">2. Como Usamos suas Informações</h2>
+            <p>Utilizamos as informações coletadas para:</p>
+            <ul className="list-disc pl-6 space-y-2">
+              <li>Fornecer e gerenciar nossos serviços de fotografia</li>
+              <li>Processar pagamentos e enviar confirmações</li>
+              <li>Comunicar sobre seus eventos e serviços contratados</li>
+              <li>Melhorar nossos serviços e experiência do cliente</li>
+              <li>Enviar atualizações e informações relevantes</li>
+            </ul>
+          </section>
+
+          <section>
+            <h2 className="text-2xl font-bold mb-4 text-brand-purple">3. Proteção de Dados</h2>
+            <p>
+              Implementamos medidas de segurança técnicas e organizacionais para proteger suas informações
+              pessoais contra acesso não autorizado, alteração, divulgação ou destruição.
+            </p>
+          </section>
+
+          <section>
+            <h2 className="text-2xl font-bold mb-4 text-brand-purple">4. Compartilhamento de Informações</h2>
+            <p>
+              Não vendemos, alugamos ou compartilhamos suas informações pessoais com terceiros, exceto
+              quando necessário para fornecer nossos serviços ou quando exigido por lei.
+            </p>
+          </section>
+
+          <section>
+            <h2 className="text-2xl font-bold mb-4 text-brand-purple">5. Seus Direitos</h2>
+            <p>Você tem o direito de:</p>
+            <ul className="list-disc pl-6 space-y-2">
+              <li>Acessar suas informações pessoais</li>
+              <li>Corrigir dados incorretos</li>
+              <li>Solicitar a exclusão de seus dados</li>
+              <li>Retirar seu consentimento a qualquer momento</li>
+              <li>Solicitar a portabilidade de seus dados</li>
+            </ul>
+          </section>
+
+          <section>
+            <h2 className="text-2xl font-bold mb-4 text-brand-purple">6. Contato</h2>
+            <p>
+              Para questões sobre esta Política de Privacidade, entre em contato conosco em:{' '}
+              <a href="mailto:contato@photum.com.br" className="text-brand-purple hover:underline">
+                contato@photum.com.br
+              </a>
+            </p>
+          </section>
+
+          <p className="text-sm text-gray-500 mt-8">
+            Última atualização: Dezembro de 2025
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/pages/Register.tsx b/pages/Register.tsx
index 859ff93..94ed539 100644
--- a/pages/Register.tsx
+++ b/pages/Register.tsx
@@ -136,7 +136,7 @@ export const Register: React.FC<RegisterProps> = ({ onNavigate }) => {
                     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="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">Faça parte da Photum</h1>
                         <p className="text-xl font-light tracking-wide max-w-md mx-auto">
@@ -150,13 +150,14 @@ export const Register: React.FC<RegisterProps> = ({ onNavigate }) => {
             <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>
+                        <span className="font-bold tracking-widest uppercase text-sm" style={{color: '#B9CF33'}}>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"
+                                className="font-medium hover:opacity-80 transition-opacity"
+                                style={{color: '#B9CF33'}}
                             >
                                 Faça login
                             </button>
@@ -219,15 +220,16 @@ export const Register: React.FC<RegisterProps> = ({ onNavigate }) => {
                                     type="checkbox"
                                     checked={agreedToTerms}
                                     onChange={(e) => setAgreedToTerms(e.target.checked)}
-                                    className="mt-1 h-4 w-4 text-brand-gold focus:ring-brand-gold border-gray-300 rounded"
+                                    className="mt-1 h-4 w-4 border-gray-300 rounded focus:ring-2"
+                                    style={{accentColor: '#B9CF33'}}
                                 />
                                 <label className="ml-2 text-sm text-gray-600">
                                     Concordo com os{' '}
-                                    <a href="#" className="text-brand-gold hover:text-brand-gold/80">
+                                    <a href="#" className="hover:opacity-80 transition-opacity" style={{color: '#B9CF33'}}>
                                         termos de uso
                                     </a>{' '}
                                     e{' '}
-                                    <a href="#" className="text-brand-gold hover:text-brand-gold/80">
+                                    <a href="#" className="hover:opacity-80 transition-opacity" style={{color: '#B9CF33'}}>
                                         política de privacidade
                                     </a>
                                 </label>
@@ -237,12 +239,13 @@ export const Register: React.FC<RegisterProps> = ({ onNavigate }) => {
                             )}
                         </div>
 
-                        <div className="flex items-start bg-gray-50 border border-gray-200 rounded-sm p-4">
+                        <div className="flex items-start bg-gray-50 border border-gray-200 rounded-lg p-4">
                             <input
                                 type="checkbox"
                                 checked={formData.wantsToAddInstitution}
                                 onChange={(e) => setFormData(prev => ({ ...prev, wantsToAddInstitution: e.target.checked }))}
-                                className="mt-1 h-4 w-4 text-brand-gold focus:ring-brand-gold border-gray-300 rounded"
+                                className="mt-1 h-4 w-4 border-gray-300 rounded focus:ring-2"
+                                style={{accentColor: '#B9CF33'}}
                             />
                             <label className="ml-2 text-sm text-gray-700">
                                 <span className="font-medium">Cadastrar universidade agora (Opcional)</span>
diff --git a/pages/TermsOfUse.tsx b/pages/TermsOfUse.tsx
new file mode 100644
index 0000000..99ae331
--- /dev/null
+++ b/pages/TermsOfUse.tsx
@@ -0,0 +1,108 @@
+import React from 'react';
+
+interface TermsOfUseProps {
+  onNavigate: (page: string) => void;
+}
+
+export const TermsOfUse: React.FC<TermsOfUseProps> = ({ onNavigate }) => {
+  return (
+    <div className="min-h-screen bg-white py-20 px-8">
+      <div className="max-w-4xl mx-auto">
+        <button
+          onClick={() => onNavigate('home')}
+          className="mb-8 text-brand-purple hover:underline flex items-center gap-2"
+        >
+          ← Voltar para Home
+        </button>
+        
+        <h1 className="text-4xl font-bold mb-8" style={{ color: '#B9CF33' }}>
+          Termos de Uso
+        </h1>
+
+        <div className="prose prose-lg max-w-none text-gray-700 space-y-6">
+          <section>
+            <h2 className="text-2xl font-bold mb-4 text-brand-purple">1. Aceitação dos Termos</h2>
+            <p>
+              Ao acessar e usar os serviços da Photum Formaturas, você concorda em cumprir e estar
+              vinculado a estes Termos de Uso. Se você não concordar com algum destes termos,
+              não utilize nossos serviços.
+            </p>
+          </section>
+
+          <section>
+            <h2 className="text-2xl font-bold mb-4 text-brand-purple">2. Serviços Oferecidos</h2>
+            <p>
+              A Photum Formaturas oferece serviços de fotografia profissional, gestão de eventos de formatura,
+              criação de álbuns personalizados e plataforma digital para gerenciamento de fotos.
+            </p>
+          </section>
+
+          <section>
+            <h2 className="text-2xl font-bold mb-4 text-brand-purple">3. Cadastro e Conta</h2>
+            <ul className="list-disc pl-6 space-y-2">
+              <li>Você deve fornecer informações precisas e completas ao criar uma conta</li>
+              <li>Você é responsável por manter a confidencialidade de sua senha</li>
+              <li>Você deve notificar imediatamente sobre qualquer uso não autorizado de sua conta</li>
+              <li>Contas são pessoais e intransferíveis</li>
+            </ul>
+          </section>
+
+          <section>
+            <h2 className="text-2xl font-bold mb-4 text-brand-purple">4. Direitos Autorais e Uso de Imagens</h2>
+            <p>
+              Todas as fotografias produzidas pela Photum Formaturas são protegidas por direitos autorais.
+              Os clientes recebem licença de uso pessoal e não comercial das imagens adquiridas.
+            </p>
+            <ul className="list-disc pl-6 space-y-2 mt-4">
+              <li>As imagens não podem ser usadas para fins comerciais sem autorização</li>
+              <li>A Photum Formaturas pode usar as imagens em seu portfólio e materiais promocionais</li>
+              <li>É proibida a reprodução não autorizada das fotografias</li>
+            </ul>
+          </section>
+
+          <section>
+            <h2 className="text-2xl font-bold mb-4 text-brand-purple">5. Pagamentos e Cancelamentos</h2>
+            <p>
+              Os valores dos serviços são estabelecidos em contrato. Cancelamentos devem seguir as
+              políticas específicas acordadas no momento da contratação.
+            </p>
+          </section>
+
+          <section>
+            <h2 className="text-2xl font-bold mb-4 text-brand-purple">6. Limitação de Responsabilidade</h2>
+            <p>
+              A Photum Formaturas não se responsabiliza por:
+            </p>
+            <ul className="list-disc pl-6 space-y-2">
+              <li>Problemas técnicos causados por terceiros</li>
+              <li>Perdas indiretas ou consequenciais</li>
+              <li>Eventos fora de nosso controle (caso fortuito ou força maior)</li>
+            </ul>
+          </section>
+
+          <section>
+            <h2 className="text-2xl font-bold mb-4 text-brand-purple">7. Modificações dos Termos</h2>
+            <p>
+              Reservamos o direito de modificar estes termos a qualquer momento. As alterações entrarão
+              em vigor imediatamente após sua publicação no site.
+            </p>
+          </section>
+
+          <section>
+            <h2 className="text-2xl font-bold mb-4 text-brand-purple">8. Contato</h2>
+            <p>
+              Para questões sobre estes Termos de Uso, entre em contato:{' '}
+              <a href="mailto:contato@photum.com.br" className="text-brand-purple hover:underline">
+                contato@photum.com.br
+              </a>
+            </p>
+          </section>
+
+          <p className="text-sm text-gray-500 mt-8">
+            Última atualização: Dezembro de 2025
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};