diff --git a/App.tsx b/App.tsx
index c4c647b..81353b7 100644
--- a/App.tsx
+++ b/App.tsx
@@ -31,13 +31,13 @@ const AppContent: React.FC = () => {
       return (
         <Home onEnter={() => setCurrentPage(user ? "dashboard" : "login")} />
       );
-    if (currentPage === "login") return user ? <Dashboard /> : <Login />;
+    if (currentPage === "login") return user ? <Dashboard /> : <Login onNavigate={setCurrentPage} />;
     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 />;
+    if (!user) return <Login onNavigate={setCurrentPage} />;
 
     switch (currentPage) {
       case "dashboard":
diff --git a/pages/Home.tsx b/pages/Home.tsx
index 6b60fe3..3d18556 100644
--- a/pages/Home.tsx
+++ b/pages/Home.tsx
@@ -53,7 +53,7 @@ export const Home: React.FC<HomeProps> = ({ onEnter }) => {
   return (
     <div className="min-h-screen bg-white">
       {/* Hero Section */}
-      <div className="relative h-[70vh] w-full overflow-hidden">
+      <div className="relative h-[50vh] sm:h-[60vh] md:h-[70vh] w-full overflow-hidden">
         {HERO_IMAGES.map((img, idx) => (
           <div
             key={idx}
@@ -66,23 +66,23 @@ export const Home: React.FC<HomeProps> = ({ onEnter }) => {
 
         {/* 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-5xl lg:text-6xl font-serif text-white leading-tight">
+          <div className="max-w-4xl space-y-4 sm:space-y-6 slide-up">
+            <h1 className="text-3xl sm: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">
+            <p className="text-base sm: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>
         </div>
 
         {/* Carousel Dots */}
-        <div className="absolute bottom-10 left-0 right-0 flex justify-center space-x-3">
+        <div className="absolute bottom-4 sm:bottom-10 left-0 right-0 flex justify-center space-x-2 sm:space-x-3">
           {HERO_IMAGES.map((_, idx) => (
             <button
               key={idx}
-              className={`w-2 h-2 rounded-full transition-all ${idx === currentSlide ? 'bg-brand-gold w-8' : 'bg-white/50'}`}
+              className={`w-2 h-2 rounded-full transition-all ${idx === currentSlide ? 'bg-brand-gold w-6 sm:w-8' : 'bg-white/50'}`}
               onClick={() => setCurrentSlide(idx)}
             />
           ))}
@@ -90,46 +90,46 @@ export const Home: React.FC<HomeProps> = ({ onEnter }) => {
       </div>
 
       {/* Albums Section */}
-      <section ref={albumsRef} className="py-24 relative overflow-hidden" style={{ backgroundColor: '#ffffff' }}>
+      <section ref={albumsRef} className="py-12 sm:py-16 md: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">
+          <div className="flex flex-col lg:flex-row items-center gap-8 sm:gap-12 lg:gap-16">
             {/* Left side - Icon and Text */}
-            <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`}>
+            <div className="lg:w-1/2 text-center lg:text-left w-full">
+              <div className={`inline-flex items-center justify-center w-24 h-24 sm:w-32 sm:h-32 md:w-36 md:h-36 mb-6 sm: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 transition-all duration-700 ease-out delay-100 ${albumsVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`} style={{color: '#B9CF33'}}>
+              <h2 className={`text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold mb-4 sm:mb-6 md: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 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">
+              <div className={`space-y-2 sm: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-sm sm:text-base md:text-lg leading-relaxed">
                   Escolha a cor, tamanho, tecido, acabamento, modelo,
                 </p>
-                <p className="text-lg leading-relaxed">
+                <p className="text-sm sm:text-base md:text-lg leading-relaxed">
                   laminação, tipo de impressão e muito mais!
                 </p>
-                <p className="text-xl font-semibold text-brand-black mt-4">
+                <p className="text-base sm:text-lg md:text-xl font-semibold text-brand-black mt-3 sm:mt-4">
                   Tenha seu álbum exclusivo e de acordo com o seu gosto.
                 </p>
               </div>
             </div>
 
             {/* Right side - CTA */}
-            <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 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">
+            <div ref={ctaRef} className={`w-full lg:w-2/8 flex flex-col items-center lg:items-start justify-center lg:ml-40 mt-8 lg:mt-0 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-6 sm:p-8 md:p-10 border-t-4 transform transition-all duration-300 hover:shadow-xl hover:-translate-y-2 w-full max-w-sm" style={{ borderColor: '#B9CF33' }}>
+                <div className={`flex justify-center mb-4 sm:mb-6 transition-all duration-700 ease-out delay-400 ${ctaVisible ? 'opacity-100 scale-100' : 'opacity-0 scale-80'}`}>
+                  <div className="w-38 h-38 sm:w-38 sm:h-38 md:w-50 md:h-50 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 transition-all duration-700 ease-out delay-500 ${ctaVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-5'}`}>
+                <p className={`text-gray-700 text-base sm:text-lg md:text-xl mb-4 sm: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-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'}`}
+                  className={`w-full px-6 sm:px-8 md:px-10 py-3 sm:py-4 md:py-5 text-white font-bold text-base sm: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
@@ -140,36 +140,36 @@ export const Home: React.FC<HomeProps> = ({ onEnter }) => {
         </div>
         
         {/* Decorative elements */}
-        <div className="absolute top-10 right-10 w-32 h-32 rounded-full opacity-10" style={{ backgroundColor: '#B9CF33' }}></div>
-        <div className="absolute bottom-10 left-10 w-24 h-24 rounded-full opacity-10" style={{ backgroundColor: '#C2388B' }}></div>
+        <div className="hidden sm:block absolute top-10 right-10 w-32 h-32 rounded-full opacity-10" style={{ backgroundColor: '#B9CF33' }}></div>
+        <div className="hidden sm:block absolute bottom-10 left-10 w-24 h-24 rounded-full opacity-10" style={{ backgroundColor: '#C2388B' }}></div>
       </section>
 
       {/* Contact Section */}
-      <section ref={contactRef} className="py-16 relative overflow-hidden" style={{ backgroundColor: '#492E61' }}>
+      <section ref={contactRef} className="py-8 sm:py-12 md: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="hidden md:block absolute -top-24 -right-24 w-96 h-96 rounded-full opacity-10 blur-3xl" style={{ backgroundColor: '#B9CF33' }}></div>
+        <div className="hidden md:block 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 className="max-w-7xl mx-auto px-4 sm:px-6 md:px-8 lg:px-12 xl:px-20 relative z-10">
+          <div className={`text-center mb-8 sm:mb-10 md:mb-12 transition-all duration-700 ${contactVisible ? 'opacity-100 translate-y-0' : 'opacity-0 -translate-y-10'}`}>
+            <h2 className="text-2xl sm:text-3xl md:text-4xl font-bold text-[#B9CF32] mb-2 sm:mb-3 tracking-wide">ENTRE EM CONTATO</h2>
+            <p className="text-sm sm:text-base 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-12 items-start max-w-6xl mx-auto">
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 sm:gap-8 md:gap-12 items-start max-w-6xl mx-auto">
             {/* Left side - Contact Info */}
-            <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={`space-y-3 sm:space-y-4 md: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-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 items-start gap-2 sm:gap-3 p-2.5 sm: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-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-2">CEP 13477-720</p>
+                  <div className="flex-1 min-w-0">
+                    <p className="font-bold mb-0.5 sm:mb-1 text-sm sm:text-base">Rua Bom Recreio, 305</p>
+                    <p className="text-white/80 text-xs sm:text-sm">Jd. Boer II • Americana SP</p>
+                    <p className="text-white/80 text-xs sm:text-sm mb-1 sm:mb-2">CEP 13477-720</p>
                     <a 
                       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" 
@@ -183,7 +183,7 @@ export const Home: React.FC<HomeProps> = ({ onEnter }) => {
               </div>
 
               {/* Mini Map */}
-              <div className="rounded-xl overflow-hidden shadow-lg border border-white/10 h-48">
+              <div className="rounded-xl overflow-hidden shadow-lg border border-white/10 h-40 sm: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%"
@@ -203,21 +203,21 @@ export const Home: React.FC<HomeProps> = ({ onEnter }) => {
                     </svg>
                   </div>
                   <div className="flex-1">
-                    <p className="font-semibold">(19) 3405.5024</p>
-                    <p className="font-semibold">(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-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">
+                <div className="flex items-start gap-2 sm:gap-3 p-2.5 sm: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-8 h-8 sm:w-10 sm:h-10 rounded-full bg-white/20 flex items-center justify-center transition-transform duration-300 group-hover:scale-110">
+                    <svg className="w-5 h-5 sm:w-6 sm: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="font-semibold hover:text-white transition-colors">
+                  <div className="flex-1 min-w-0">
+                    <a href="mailto:contato@photum.com.br" className="font-semibold hover:text-white transition-colors text-sm sm:text-base break-all">
                       contato@photum.com.br
                     </a>
                   </div>
@@ -226,33 +226,33 @@ export const Home: React.FC<HomeProps> = ({ onEnter }) => {
             </div>
 
             {/* Right side - Contact Form */}
-            <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'}`}>
+            <div className={`space-y-3 sm:space-y-4 md:space-y-5 bg-gradient-to-br from-white/10 to-white/5 p-4 sm:p-5 md: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-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"
+                className="w-full px-3 sm:px-4 py-2.5 sm:py-3 text-sm sm:text-base 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"
+                className="w-full px-3 sm:px-4 py-2.5 sm:py-3 text-sm sm:text-base 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-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"
+                className="w-full px-3 sm:px-4 py-2.5 sm:py-3 text-sm sm:text-base 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-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"
+                className="w-full px-3 sm:px-4 py-2.5 sm:py-3 text-sm sm:text-base 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-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"
+                className="w-full px-6 sm:px-8 md:px-10 py-2.5 sm:py-3 text-sm sm:text-base 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' }}
               >
                 <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">
+                <svg className="w-4 h-4 sm:w-5 sm: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>
diff --git a/pages/LGPD.tsx b/pages/LGPD.tsx
index 404e50f..83c5f8f 100644
--- a/pages/LGPD.tsx
+++ b/pages/LGPD.tsx
@@ -1,135 +1,269 @@
-import React from 'react';
+import React, { useState } from 'react';
 
 interface LGPDProps {
   onNavigate: (page: string) => void;
 }
 
+interface Section {
+  id: number;
+  title: string;
+  icon: string;
+  content: React.ReactNode;
+}
+
 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>
+  const [openSection, setOpenSection] = useState<number | null>(null);
 
-        <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">
+  const sections: Section[] = [
+    {
+      id: 1,
+      title: 'Compromisso com a LGPD',
+      icon: '<svg className="w-12 h-12" fill="none" stroke="#B9CF33" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" /></svg>',
+      content: (
+        <p>
+          A Photum Formaturas está comprometida em proteger seus dados pessoais e cumprir todas as
+          disposições da Lei Geral de Proteção de Dados (Lei nº 13.709/2018). Esta página explica
+          como tratamos seus dados em conformidade com a LGPD.
+        </p>
+      )
+    },
+    {
+      id: 2,
+      title: 'Princípios da LGPD',
+      icon: '<svg className="w-12 h-12" fill="none" stroke="#B9CF33" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2m0-2v2m0 16V5m0 16H9m3 0h3" /></svg>',
+      content: (
+        <>
+          <p className="mb-4">Nosso tratamento de dados segue os seguintes princípios:</p>
+          <ul className="list-none space-y-2">
+            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> <strong>Finalidade:</strong> Tratamento para propósitos específicos e legítimos</li>
+            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> <strong>Adequação:</strong> Compatível com as finalidades informadas</li>
+            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> <strong>Necessidade:</strong> Limitado ao mínimo necessário</li>
+            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> <strong>Transparência:</strong> Informações claras e acessíveis</li>
+            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> <strong>Segurança:</strong> Medidas técnicas e administrativas adequadas</li>
+          </ul>
+        </>
+      )
+    },
+    {
+      id: 3,
+      title: 'Seus Direitos como Titular',
+      icon: '<svg className="w-12 h-12" fill="none" stroke="#B9CF33" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" /></svg>',
+      content: (
+        <>
+          <p className="mb-4">A LGPD garante diversos direitos sobre seus dados pessoais:</p>
+          <ul className="list-none space-y-2">
+            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Confirmação da existência de tratamento</li>
+            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Acesso aos dados</li>
+            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Correção de dados incompletos ou desatualizados</li>
+            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Anonimização, bloqueio ou eliminação de dados desnecessários</li>
+            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Portabilidade dos dados a outro fornecedor</li>
+            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Eliminação dos dados tratados com seu consentimento</li>
+            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Informação sobre o compartilhamento de dados</li>
+            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Revogação do consentimento</li>
+          </ul>
+        </>
+      )
+    },
+    {
+      id: 4,
+      title: 'Bases Legais para Tratamento',
+      icon: '<svg className="w-12 h-12" fill="none" stroke="#B9CF33" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" /></svg>',
+      content: (
+        <>
+          <p className="mb-4">Tratamos seus dados com base nas seguintes hipóteses legais:</p>
+          <ul className="list-none space-y-2">
+            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Consentimento do titular</li>
+            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Cumprimento de obrigação legal ou regulatória</li>
+            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Execução de contrato ou procedimentos preliminares</li>
+            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Exercício regular de direitos</li>
+            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Legítimos interesses do controlador</li>
+          </ul>
+        </>
+      )
+    },
+    {
+      id: 5,
+      title: 'Compartilhamento de Dados',
+      icon: '<svg className="w-12 h-12" fill="none" stroke="#B9CF33" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" /></svg>',
+      content: (
+        <>
+          <p className="mb-4">Seus dados podem ser compartilhados com:</p>
+          <ul className="list-none space-y-2">
+            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Prestadores de serviços de pagamento</li>
+            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Provedores de infraestrutura tecnológica</li>
+            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Autoridades governamentais (quando exigido por lei)</li>
+            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Parceiros comerciais (com seu consentimento)</li>
+          </ul>
+          <p className="mt-4">
+            Todos os terceiros são obrigados a manter a confidencialidade e segurança de seus dados.
+          </p>
+        </>
+      )
+    },
+    {
+      id: 6,
+      title: 'Segurança dos Dados',
+      icon: '<svg className="w-12 h-12" fill="none" stroke="#B9CF33" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" /></svg>',
+      content: (
+        <>
+          <p className="mb-4">Implementamos medidas de segurança técnicas e organizacionais:</p>
+          <ul className="list-none space-y-2">
+            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Criptografia de dados sensíveis</li>
+            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Controles de acesso rigorosos</li>
+            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Monitoramento contínuo de segurança</li>
+            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Treinamento regular da equipe</li>
+            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Plano de resposta a incidentes</li>
+          </ul>
+        </>
+      )
+    },
+    {
+      id: 7,
+      title: 'Retenção de Dados',
+      icon: '<svg className="w-12 h-12" fill="none" stroke="#B9CF33" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>',
+      content: (
+        <p>
+          Mantemos seus dados pessoais apenas pelo tempo necessário para cumprir as finalidades para
+          as quais foram coletados, incluindo requisitos legais, contratuais, de resolução de disputas
+          e aplicação de nossos acordos. Após esse período, os dados são eliminados ou anonimizados de
+          forma segura.
+        </p>
+      )
+    },
+    {
+      id: 8,
+      title: 'Encarregado de Proteção de Dados (DPO)',
+      icon: '<svg className="w-12 h-12" fill="none" stroke="#B9CF33" 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" /></svg>',
+      content: (
+        <>
+          <p className="mb-4">
+            Nosso Encarregado de Proteção de Dados está disponível para esclarecer dúvidas e receber
+            solicitações relacionadas aos seus direitos:
+          </p>
+          <div className="bg-white p-4 rounded-lg border-l-4 mt-4" style={{borderColor: '#B9CF33'}}>
+            <p className="font-semibold text-gray-800 mb-2">Contato do DPO:</p>
+            <p className="text-gray-700">
+              <a href="mailto:lgpd@photum.com.br" className="font-semibold hover:opacity-80 transition-opacity" style={{color: '#B9CF33'}}>
                 lgpd@photum.com.br
               </a>
             </p>
-            <p>
-              <strong>Telefone:</strong> (19) 3405-5024
+          </div>
+        </>
+      )
+    },
+    {
+      id: 9,
+      title: 'Autoridade Nacional de Proteção de Dados (ANPD)',
+      icon: '<svg className="w-12 h-12" fill="none" stroke="#492E61" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" /></svg>',
+      content: (
+        <>
+          <p className="mb-4">
+            Você tem o direito de apresentar reclamação à Autoridade Nacional de Proteção de Dados:
+          </p>
+          <div className="bg-white p-4 rounded-lg border-l-4" style={{borderColor: '#492E61'}}>
+            <p className="font-semibold text-gray-800 mb-2">ANPD:</p>
+            <p className="text-gray-700">
+              Website:{' '}
+              <a href="https://www.gov.br/anpd" target="_blank" rel="noopener noreferrer" className="hover:opacity-80 transition-opacity" style={{color: '#492E61'}}>
+                www.gov.br/anpd
+              </a>
             </p>
-          </section>
+          </div>
+        </>
+      )
+    }
+  ];
 
-          <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>
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-white py-12 sm:py-20 px-4 sm:px-8">
+      <div className="max-w-6xl mx-auto">
+        <button
+          onClick={() => onNavigate('home')}
+          className="mb-8 flex items-center gap-2 text-gray-600 hover:text-[#492E61] transition-all duration-300 group"
+        >
+          <svg className="w-5 h-5 transform group-hover:-translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+          </svg>
+          Voltar para Home
+        </button>
+        
+        <div className="text-center mb-12 fade-in">
+          <h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold mb-4" style={{ color: '#B9CF33' }}>
+            Lei Geral de Proteção de Dados
+          </h1>
+          <p className="text-gray-600 text-lg">Transparência e segurança no tratamento dos seus dados</p>
+        </div>
 
-          <p className="text-sm text-gray-500 mt-8">
-            Última atualização: Dezembro de 2025
+        <div className="grid gap-4 sm:gap-6">
+          {sections.map((section, index) => (
+            <div
+              key={section.id}
+              className="bg-white rounded-2xl shadow-lg overflow-hidden transform transition-all duration-500 hover:shadow-2xl"
+              style={{
+                animation: `fadeInUp 0.6s ease-out ${index * 0.1}s both`
+              }}
+            >
+              <button
+                onClick={() => setOpenSection(openSection === section.id ? null : section.id)}
+                className="w-full px-6 sm:px-8 py-6 flex items-center justify-between text-left bg-gradient-to-r from-white to-gray-50 hover:from-gray-50 hover:to-gray-100 transition-all duration-300"
+              >
+                <div className="flex items-center gap-4 flex-1">
+                  <div className="transform transition-transform duration-300 hover:scale-110" dangerouslySetInnerHTML={{ __html: section.icon }} />
+                  <h2 className="text-xl sm:text-2xl font-bold text-gray-800">
+                    {section.title}
+                  </h2>
+                </div>
+                <svg
+                  className={`w-6 h-6 transition-transform duration-300 ${
+                    openSection === section.id ? 'rotate-180' : ''
+                  }`}
+                  style={{ color: '#492E61' }}
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                </svg>
+              </button>
+              
+              <div
+                className={`overflow-hidden transition-all duration-500 ${
+                  openSection === section.id ? 'max-h-[1000px] opacity-100' : 'max-h-0 opacity-0'
+                }`}
+              >
+                <div className="px-6 sm:px-8 py-6 bg-gradient-to-br from-gray-50 to-white border-t border-gray-100">
+                  <div className="text-gray-700 leading-relaxed">
+                    {section.content}
+                  </div>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <div className="mt-12 text-center p-6 bg-white rounded-2xl shadow-lg">
+          <p className="text-gray-600">
+            <span className="font-semibold" style={{ color: '#492E61' }}>Última atualização:</span> Janeiro de 2025
           </p>
         </div>
       </div>
+
+      <style>{`
+        @keyframes fadeInUp {
+          from {
+            opacity: 0;
+            transform: translateY(30px);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+        
+        .fade-in {
+          animation: fadeInUp 0.8s ease-out;
+        }
+      `}</style>
     </div>
   );
 };
diff --git a/pages/Login.tsx b/pages/Login.tsx
index d0cc2a0..9e84e0c 100644
--- a/pages/Login.tsx
+++ b/pages/Login.tsx
@@ -5,7 +5,11 @@ import { Button } from '../components/Button';
 import { Input } from '../components/Input';
 import { UserRole } from '../types';
 
-export const Login: React.FC = () => {
+interface LoginProps {
+  onNavigate?: (page: string) => void;
+}
+
+export const Login: React.FC<LoginProps> = ({ onNavigate }) => {
   const { login, availableUsers } = useAuth();
   const [email, setEmail] = useState('');
   const [isLoading, setIsLoading] = useState(false);
@@ -38,9 +42,9 @@ export const Login: React.FC = () => {
   }
 
   return (
-    <div className="min-h-screen flex bg-white">
+    <div className="min-h-screen flex flex-col lg:flex-row bg-white">
       {/* Left Side - Image */}
-      <div className="hidden lg:block lg:w-1/2 relative overflow-hidden">
+      <div className="hidden lg:flex lg:w-1/2 relative overflow-hidden">
         <img 
           src="https://images.unsplash.com/photo-1519741497674-611481863552?ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80" 
           alt="Photum Login" 
@@ -55,16 +59,16 @@ export const Login: React.FC = () => {
       </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="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">
           <div className="text-center lg:text-left">
-            <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">
+            <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?{' '}
               <button
                 type="button"
-                onClick={() => window.location.hash = '#register'}
+                onClick={() => onNavigate?.('register')}
                 className="font-medium hover:opacity-80 transition-opacity"
                 style={{color: '#B9CF33'}}
               >
@@ -73,10 +77,10 @@ export const Login: React.FC = () => {
             </p>
           </div>
 
-          <form className="mt-8 space-y-6" onSubmit={handleLogin}>
-            <div className="space-y-4">
+          <form className="mt-6 sm:mt-8 space-y-4 sm:space-y-6" onSubmit={handleLogin}>
+            <div className="space-y-3 sm:space-y-4">
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-2">
+                <label className="block text-xs sm:text-sm font-medium text-gray-700 mb-1.5 sm:mb-2">
                   E-MAIL CORPORATIVO OU PESSOAL
                 </label>
                 <input
@@ -85,7 +89,7 @@ export const Login: React.FC = () => {
                   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"
+                  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'}}
                   onFocus={(e) => e.target.style.borderColor = '#B9CF33'}
                   onBlur={(e) => e.target.style.borderColor = '#d1d5db'}
@@ -93,7 +97,7 @@ export const Login: React.FC = () => {
                 {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">
+                <label className="block text-xs sm:text-sm font-medium text-gray-700 mb-1.5 sm:mb-2">
                   SENHA
                 </label>
                 <div className="relative">
@@ -101,7 +105,7 @@ export const Login: React.FC = () => {
                     type="password"
                     placeholder="••••••••"
                     readOnly
-                    className="w-full px-4 py-3 border border-gray-300 rounded-lg bg-gray-50 cursor-not-allowed"
+                    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 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">
@@ -116,7 +120,7 @@ export const Login: React.FC = () => {
             <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"
+              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: '#1a1a1a'}}
             >
               {isLoading ? 'Entrando...' : 'Entrar no Sistema'}
@@ -124,14 +128,14 @@ export const Login: React.FC = () => {
           </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">
+          <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">
               {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]"
+                  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'}}
                   onMouseEnter={(e) => {
                     e.currentTarget.style.borderColor = '#B9CF33';
@@ -142,34 +146,9 @@ export const Login: React.FC = () => {
                     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 */}
-          <div className="mt-10 pt-10 border-t border-gray-100">
-            <p className="text-xs text-gray-400 uppercase tracking-widest mb-4 text-center">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-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 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>
+                  <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>
                 </button>
               ))}
             </div>
diff --git a/pages/PrivacyPolicy.tsx b/pages/PrivacyPolicy.tsx
index ef88037..988ed82 100644
--- a/pages/PrivacyPolicy.tsx
+++ b/pages/PrivacyPolicy.tsx
@@ -1,95 +1,201 @@
-import React from 'react';
+import React, { useState } from 'react';
 
 interface PrivacyPolicyProps {
   onNavigate: (page: string) => void;
 }
 
+interface Section {
+  id: number;
+  title: string;
+  icon: string;
+  content: React.ReactNode;
+}
+
 export const PrivacyPolicy: React.FC<PrivacyPolicyProps> = ({ onNavigate }) => {
+  const [openSection, setOpenSection] = useState<number | null>(null);
+
+  const sections: Section[] = [
+    {
+      id: 1,
+      title: 'Informações que Coletamos',
+      icon: '<svg className="w-12 h-12" fill="none" stroke="#B9CF33" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /></svg>',
+      content: (
+        <>
+          <p className="mb-4">
+            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-none space-y-2">
+            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Nome completo</li>
+            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Endereço de e-mail</li>
+            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Número de telefone</li>
+            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Informações sobre o evento (formatura)</li>
+            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Dados de pagamento (processados de forma segura)</li>
+          </ul>
+        </>
+      )
+    },
+    {
+      id: 2,
+      title: 'Como Usamos suas Informações',
+      icon: '<svg className="w-12 h-12" fill="none" stroke="#B9CF33" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" /></svg>',
+      content: (
+        <>
+          <p className="mb-4">Utilizamos as informações coletadas para:</p>
+          <ul className="list-none space-y-2">
+            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Fornecer e gerenciar nossos serviços de fotografia</li>
+            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Processar pagamentos e enviar confirmações</li>
+            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Comunicar sobre seus eventos e serviços contratados</li>
+            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Melhorar nossos serviços e experiência do cliente</li>
+            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Enviar atualizações e informações relevantes</li>
+          </ul>
+        </>
+      )
+    },
+    {
+      id: 3,
+      title: 'Proteção de Dados',
+      icon: '<svg className="w-12 h-12" fill="none" stroke="#B9CF33" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" /></svg>',
+      content: (
+        <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>
+      )
+    },
+    {
+      id: 4,
+      title: 'Compartilhamento de Informações',
+      icon: '<svg className="w-12 h-12" fill="none" stroke="#B9CF33" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" /></svg>',
+      content: (
+        <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>
+      )
+    },
+    {
+      id: 5,
+      title: 'Seus Direitos',
+      icon: '<svg className="w-12 h-12" fill="none" stroke="#B9CF33" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2m0-2v2m0 16V5m0 16H9m3 0h3" /></svg>',
+      content: (
+        <>
+          <p className="mb-4">Você tem o direito de:</p>
+          <ul className="list-none space-y-2">
+            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Acessar suas informações pessoais</li>
+            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Corrigir dados incorretos</li>
+            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Solicitar a exclusão de seus dados</li>
+            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Retirar seu consentimento a qualquer momento</li>
+            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Solicitar a portabilidade de seus dados</li>
+          </ul>
+        </>
+      )
+    },
+    {
+      id: 6,
+      title: 'Contato',
+      icon: '<svg className="w-12 h-12" fill="none" stroke="#B9CF33" 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" /></svg>',
+      content: (
+        <p>
+          Para questões sobre esta Política de Privacidade, entre em contato conosco em:{' '}
+          <a href="mailto:contato@photum.com.br" className="font-semibold hover:opacity-80 transition-opacity" style={{color: '#B9CF33'}}>
+            contato@photum.com.br
+          </a>
+        </p>
+      )
+    }
+  ];
+
   return (
-    <div className="min-h-screen bg-white py-20 px-8">
-      <div className="max-w-4xl mx-auto">
+    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-white py-12 sm:py-20 px-4 sm:px-8">
+      <div className="max-w-6xl mx-auto">
         <button
           onClick={() => onNavigate('home')}
-          className="mb-8 text-brand-purple hover:underline flex items-center gap-2"
+          className="mb-8 flex items-center gap-2 text-gray-600 hover:text-[#492E61] transition-all duration-300 group"
         >
-          ← Voltar para Home
+          <svg className="w-5 h-5 transform group-hover:-translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+          </svg>
+          Voltar para Home
         </button>
         
-        <h1 className="text-4xl font-bold mb-8" style={{ color: '#B9CF33' }}>
-          Política de Privacidade
-        </h1>
+        <div className="text-center mb-12 fade-in">
+          <h1 className="text-4xl sm:text-5xl md:text-6xl font-bold mb-4" style={{ color: '#B9CF33' }}>
+            Política de Privacidade
+          </h1>
+          <p className="text-gray-600 text-lg">Sua privacidade é nossa prioridade</p>
+        </div>
 
-        <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>
+        <div className="grid gap-4 sm:gap-6">
+          {sections.map((section, index) => (
+            <div
+              key={section.id}
+              className="bg-white rounded-2xl shadow-lg overflow-hidden transform transition-all duration-500 hover:shadow-2xl"
+              style={{
+                animation: `fadeInUp 0.6s ease-out ${index * 0.1}s both`
+              }}
+            >
+              <button
+                onClick={() => setOpenSection(openSection === section.id ? null : section.id)}
+                className="w-full px-6 sm:px-8 py-6 flex items-center justify-between text-left bg-gradient-to-r from-white to-gray-50 hover:from-gray-50 hover:to-gray-100 transition-all duration-300"
+              >
+                <div className="flex items-center gap-4 flex-1">
+                  <div className="transform transition-transform duration-300 hover:scale-110" dangerouslySetInnerHTML={{ __html: section.icon }} />
+                  <h2 className="text-xl sm:text-2xl font-bold text-gray-800">
+                    {section.title}
+                  </h2>
+                </div>
+                <svg
+                  className={`w-6 h-6 transition-transform duration-300 ${
+                    openSection === section.id ? 'rotate-180' : ''
+                  }`}
+                  style={{ color: '#492E61' }}
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                </svg>
+              </button>
+              
+              <div
+                className={`overflow-hidden transition-all duration-500 ${
+                  openSection === section.id ? 'max-h-[1000px] opacity-100' : 'max-h-0 opacity-0'
+                }`}
+              >
+                <div className="px-6 sm:px-8 py-6 bg-gradient-to-br from-gray-50 to-white border-t border-gray-100">
+                  <div className="text-gray-700 leading-relaxed">
+                    {section.content}
+                  </div>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
 
-          <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
+        <div className="mt-12 text-center p-6 bg-white rounded-2xl shadow-lg">
+          <p className="text-gray-600">
+            <span className="font-semibold" style={{ color: '#492E61' }}>Última atualização:</span> Janeiro de 2025
           </p>
         </div>
       </div>
+
+      <style>{`
+        @keyframes fadeInUp {
+          from {
+            opacity: 0;
+            transform: translateY(30px);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+        
+        .fade-in {
+          animation: fadeInUp 0.8s ease-out;
+        }
+      `}</style>
     </div>
   );
 };
diff --git a/pages/Register.tsx b/pages/Register.tsx
index 94ed539..fd28c8e 100644
--- a/pages/Register.tsx
+++ b/pages/Register.tsx
@@ -128,9 +128,9 @@ export const Register: React.FC<RegisterProps> = ({ onNavigate }) => {
     }
 
     return (
-        <div className="min-h-screen flex bg-white">
+        <div className="min-h-screen flex flex-col lg:flex-row bg-white">
             {/* Left Side - Image */}
-            <div className="hidden lg:block lg:w-1/2 relative overflow-hidden">
+            <div className="hidden lg:flex lg:w-1/2 relative overflow-hidden">
                 <img
                     src="https://images.unsplash.com/photo-1541339907198-e08756dedf3f?fm=jpg&q=60&w=3000&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                     alt="Photum Cadastro"
@@ -147,12 +147,12 @@ export const Register: React.FC<RegisterProps> = ({ onNavigate }) => {
             </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="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">
                     <div className="text-center lg:text-left">
-                        <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">
+                        <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')}
@@ -164,8 +164,8 @@ export const Register: React.FC<RegisterProps> = ({ onNavigate }) => {
                         </p>
                     </div>
 
-                    <form className="mt-8 space-y-5" onSubmit={handleSubmit}>
-                        <div className="space-y-4">
+                    <form className="mt-6 sm:mt-8 space-y-4 sm:space-y-5" onSubmit={handleSubmit}>
+                        <div className="space-y-3 sm:space-y-4">
                             <Input
                                 label="Nome Completo"
                                 type="text"
@@ -220,18 +220,28 @@ export const Register: React.FC<RegisterProps> = ({ onNavigate }) => {
                                     type="checkbox"
                                     checked={agreedToTerms}
                                     onChange={(e) => setAgreedToTerms(e.target.checked)}
-                                    className="mt-1 h-4 w-4 border-gray-300 rounded focus:ring-2"
+                                    className="mt-0.5 sm:mt-1 h-4 w-4 flex-shrink-0 border-gray-300 rounded focus:ring-2"
                                     style={{accentColor: '#B9CF33'}}
                                 />
-                                <label className="ml-2 text-sm text-gray-600">
+                                <label className="ml-2 text-xs sm:text-sm text-gray-600">
                                     Concordo com os{' '}
-                                    <a href="#" className="hover:opacity-80 transition-opacity" style={{color: '#B9CF33'}}>
+                                    <button
+                                        type="button"
+                                        onClick={() => onNavigate('terms')}
+                                        className="hover:opacity-80 transition-opacity underline"
+                                        style={{color: '#B9CF33'}}
+                                    >
                                         termos de uso
-                                    </a>{' '}
+                                    </button>{' '}
                                     e{' '}
-                                    <a href="#" className="hover:opacity-80 transition-opacity" style={{color: '#B9CF33'}}>
+                                    <button
+                                        type="button"
+                                        onClick={() => onNavigate('privacy')}
+                                        className="hover:opacity-80 transition-opacity underline"
+                                        style={{color: '#B9CF33'}}
+                                    >
                                         política de privacidade
-                                    </a>
+                                    </button>
                                 </label>
                             </div>
                             {error && error.includes('termos') && (
@@ -239,17 +249,17 @@ export const Register: React.FC<RegisterProps> = ({ onNavigate }) => {
                             )}
                         </div>
 
-                        <div className="flex items-start bg-gray-50 border border-gray-200 rounded-lg p-4">
+                        <div className="flex items-start bg-gray-50 border border-gray-200 rounded-lg p-3 sm:p-4">
                             <input
                                 type="checkbox"
                                 checked={formData.wantsToAddInstitution}
                                 onChange={(e) => setFormData(prev => ({ ...prev, wantsToAddInstitution: e.target.checked }))}
-                                className="mt-1 h-4 w-4 border-gray-300 rounded focus:ring-2"
+                                className="mt-0.5 sm:mt-1 h-4 w-4 flex-shrink-0 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>
-                                <p className="text-xs text-gray-500 mt-1">
+                            <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>
+                                <p className="text-[10px] sm:text-xs text-gray-500 mt-1">
                                     Você pode cadastrar sua universidade durante o cadastro ou posteriormente no sistema.
                                     Trabalhamos exclusivamente com eventos fotográficos em universidades.
                                 </p>
diff --git a/pages/TermsOfUse.tsx b/pages/TermsOfUse.tsx
index 99ae331..354d7c9 100644
--- a/pages/TermsOfUse.tsx
+++ b/pages/TermsOfUse.tsx
@@ -1,108 +1,220 @@
-import React from 'react';
+import React, { useState } from 'react';
 
 interface TermsOfUseProps {
   onNavigate: (page: string) => void;
 }
 
+interface Section {
+  id: number;
+  title: string;
+  icon: string;
+  content: React.ReactNode;
+}
+
 export const TermsOfUse: React.FC<TermsOfUseProps> = ({ onNavigate }) => {
+  const [openSection, setOpenSection] = useState<number | null>(null);
+
+  const sections: Section[] = [
+    {
+      id: 1,
+      title: 'Aceitação dos Termos',
+      icon: '<svg className="w-12 h-12" fill="none" stroke="#B9CF33" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>',
+      content: (
+        <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>
+      )
+    },
+    {
+      id: 2,
+      title: 'Descrição dos Serviços',
+      icon: '<svg className="w-12 h-12" fill="none" stroke="#B9CF33" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" /><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" /></svg>',
+      content: (
+        <>
+          <p className="mb-4">A Photum Formaturas oferece:</p>
+          <ul className="list-none space-y-2">
+            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Serviços de fotografia para formaturas</li>
+            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Álbuns digitais e físicos</li>
+            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Galeria online para visualização e download de fotos</li>
+            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Serviços personalizados de acordo com as necessidades do cliente</li>
+          </ul>
+        </>
+      )
+    },
+    {
+      id: 3,
+      title: 'Conta de Usuário',
+      icon: '<svg className="w-12 h-12" fill="none" stroke="#B9CF33" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" /></svg>',
+      content: (
+        <>
+          <p className="mb-4">Para acessar alguns recursos, você precisará criar uma conta. Você concorda em:</p>
+          <ul className="list-none space-y-2">
+            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Fornecer informações precisas e atualizadas</li>
+            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Manter a segurança de sua senha</li>
+            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Notificar-nos sobre qualquer uso não autorizado de sua conta</li>
+            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Ser responsável por todas as atividades em sua conta</li>
+          </ul>
+        </>
+      )
+    },
+    {
+      id: 4,
+      title: 'Direitos de Propriedade Intelectual',
+      icon: '<svg className="w-12 h-12" fill="none" stroke="#492E61" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" strokeWidth={2} /><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 9a3 3 0 00-3-3 3 3 0 00-3 3m0 6a3 3 0 003 3 3 3 0 003-3" /></svg>',
+      content: (
+        <p>
+          Todas as fotografias e conteúdos produzidos pela Photum Formaturas são protegidos por direitos autorais.
+          Os clientes recebem uma licença para uso pessoal das fotos adquiridas, mas a reprodução comercial
+          requer autorização prévia.
+        </p>
+      )
+    },
+    {
+      id: 5,
+      title: 'Pagamentos e Reembolsos',
+      icon: '<svg className="w-12 h-12" fill="none" stroke="#B9CF33" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" /></svg>',
+      content: (
+        <>
+          <p className="mb-4">Nossos termos de pagamento incluem:</p>
+          <ul className="list-none space-y-2">
+            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Pagamento parcial na reserva do serviço</li>
+            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Saldo remanescente até a data do evento</li>
+            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Reembolsos disponíveis conforme política específica</li>
+            <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Cancelamentos devem ser notificados com antecedência mínima</li>
+          </ul>
+        </>
+      )
+    },
+    {
+      id: 6,
+      title: 'Responsabilidades e Limitações',
+      icon: '<svg className="w-12 h-12" fill="none" stroke="#FFA500" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>',
+      content: (
+        <p>
+          A Photum Formaturas se esforça para fornecer serviços de alta qualidade, mas não se responsabiliza
+          por circunstâncias além de nosso controle, como condições climáticas adversas ou problemas técnicos
+          no local do evento.
+        </p>
+      )
+    },
+    {
+      id: 7,
+      title: 'Modificações nos Termos',
+      icon: '<svg className="w-12 h-12" fill="none" stroke="#B9CF33" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" /></svg>',
+      content: (
+        <p>
+          Reservamo-nos o direito de modificar estes Termos de Uso a qualquer momento. Alterações significativas
+          serão notificadas aos usuários. O uso continuado dos serviços após mudanças constitui aceitação dos
+          novos termos.
+        </p>
+      )
+    },
+    {
+      id: 8,
+      title: 'Contato',
+      icon: '<svg className="w-12 h-12" fill="none" stroke="#B9CF33" 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" /></svg>',
+      content: (
+        <p>
+          Para dúvidas sobre estes Termos de Uso, entre em contato conosco em:{' '}
+          <a href="mailto:contato@photum.com.br" className="font-semibold hover:opacity-80 transition-opacity" style={{color: '#B9CF33'}}>
+            contato@photum.com.br
+          </a>
+        </p>
+      )
+    }
+  ];
+
   return (
-    <div className="min-h-screen bg-white py-20 px-8">
-      <div className="max-w-4xl mx-auto">
+    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-white py-12 sm:py-20 px-4 sm:px-8">
+      <div className="max-w-6xl mx-auto">
         <button
           onClick={() => onNavigate('home')}
-          className="mb-8 text-brand-purple hover:underline flex items-center gap-2"
+          className="mb-8 flex items-center gap-2 text-gray-600 hover:text-[#492E61] transition-all duration-300 group"
         >
-          ← Voltar para Home
+          <svg className="w-5 h-5 transform group-hover:-translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+          </svg>
+          Voltar para Home
         </button>
         
-        <h1 className="text-4xl font-bold mb-8" style={{ color: '#B9CF33' }}>
-          Termos de Uso
-        </h1>
+        <div className="text-center mb-12 fade-in">
+          <h1 className="text-4xl sm:text-5xl md:text-6xl font-bold mb-4" style={{ color: '#B9CF33' }}>
+            Termos de Uso
+          </h1>
+          <p className="text-gray-600 text-lg">Condições para uso de nossos serviços</p>
+        </div>
 
-        <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>
+        <div className="grid gap-4 sm:gap-6">
+          {sections.map((section, index) => (
+            <div
+              key={section.id}
+              className="bg-white rounded-2xl shadow-lg overflow-hidden transform transition-all duration-500 hover:shadow-2xl"
+              style={{
+                animation: `fadeInUp 0.6s ease-out ${index * 0.1}s both`
+              }}
+            >
+              <button
+                onClick={() => setOpenSection(openSection === section.id ? null : section.id)}
+                className="w-full px-6 sm:px-8 py-6 flex items-center justify-between text-left bg-gradient-to-r from-white to-gray-50 hover:from-gray-50 hover:to-gray-100 transition-all duration-300"
+              >
+                <div className="flex items-center gap-4 flex-1">
+                  <div className="transform transition-transform duration-300 hover:scale-110" dangerouslySetInnerHTML={{ __html: section.icon }} />
+                  <h2 className="text-xl sm:text-2xl font-bold text-gray-800">
+                    {section.title}
+                  </h2>
+                </div>
+                <svg
+                  className={`w-6 h-6 transition-transform duration-300 ${
+                    openSection === section.id ? 'rotate-180' : ''
+                  }`}
+                  style={{ color: '#492E61' }}
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                </svg>
+              </button>
+              
+              <div
+                className={`overflow-hidden transition-all duration-500 ${
+                  openSection === section.id ? 'max-h-[1000px] opacity-100' : 'max-h-0 opacity-0'
+                }`}
+              >
+                <div className="px-6 sm:px-8 py-6 bg-gradient-to-br from-gray-50 to-white border-t border-gray-100">
+                  <div className="text-gray-700 leading-relaxed">
+                    {section.content}
+                  </div>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
 
-          <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
+        <div className="mt-12 text-center p-6 bg-white rounded-2xl shadow-lg">
+          <p className="text-gray-600">
+            <span className="font-semibold" style={{ color: '#492E61' }}>Última atualização:</span> Janeiro de 2025
           </p>
         </div>
       </div>
+
+      <style>{`
+        @keyframes fadeInUp {
+          from {
+            opacity: 0;
+            transform: translateY(30px);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+        
+        .fade-in {
+          animation: fadeInUp 0.8s ease-out;
+        }
+      `}</style>
     </div>
   );
 };