rede5/photum
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

atualização

Browse source
This commit is contained in:
Yago Santana 2025-12-02 09:08:10 -03:00
parent 2a5ee8ca19
commit 7f5c8ae2be
7 changed files with 742 additions and 401 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
App.tsx
View file

@ -31,13 +31,13 @@ const AppContent: React.FC = () => {
return ( return (
<Home onEnter={() => setCurrentPage(user ? "dashboard" : "login")} /> <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 === "register") return user ? <Dashboard /> : <Register onNavigate={setCurrentPage} />;
if (currentPage === "privacy") return <PrivacyPolicy onNavigate={setCurrentPage} />; if (currentPage === "privacy") return <PrivacyPolicy onNavigate={setCurrentPage} />;
if (currentPage === "terms") return <TermsOfUse onNavigate={setCurrentPage} />; if (currentPage === "terms") return <TermsOfUse onNavigate={setCurrentPage} />;
if (currentPage === "lgpd") return <LGPD onNavigate={setCurrentPage} />; if (currentPage === "lgpd") return <LGPD onNavigate={setCurrentPage} />;
if (!user) return <Login />; if (!user) return <Login onNavigate={setCurrentPage} />;
switch (currentPage) { switch (currentPage) {
case "dashboard": case "dashboard":

104
pages/Home.tsx
View file

@ -53,7 +53,7 @@ export const Home: React.FC<HomeProps> = ({ onEnter }) => {
return ( return (
<div className="min-h-screen bg-white"> <div className="min-h-screen bg-white">
{/* Hero Section */} {/* 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) => ( {HERO_IMAGES.map((img, idx) => (
<div <div
key={idx} key={idx}
@ -66,23 +66,23 @@ export const Home: React.FC<HomeProps> = ({ onEnter }) => {
{/* Text - Only visible on first slide */} {/* Text - Only visible on first slide */}
<div className={`absolute inset-0 flex items-center justify-center text-center px-4 transition-opacity duration-500 ${currentSlide === 0 ? 'opacity-100' : 'opacity-0 pointer-events-none'}`}> <div className={`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"> <div className="max-w-4xl space-y-4 sm:space-y-6 slide-up">
<h1 className="text-4xl md:text-5xl lg:text-6xl font-serif text-white leading-tight"> <h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-serif text-white leading-tight">
Eternizando Momentos <br /> Eternizando Momentos <br />
<span className="text-brand-gold italic">Únicos</span> <span className="text-brand-gold italic">Únicos</span>
</h1> </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. Gestão completa para eventos inesquecíveis. Do planejamento à entrega do álbum perfeito.
</p> </p>
</div> </div>
</div> </div>
{/* Carousel Dots */} {/* 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) => ( {HERO_IMAGES.map((_, idx) => (
<button <button
key={idx} 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)} onClick={() => setCurrentSlide(idx)}
/> />
))} ))}
@ -90,46 +90,46 @@ export const Home: React.FC<HomeProps> = ({ onEnter }) => {
</div> </div>
{/* Albums Section */} {/* 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="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 */} {/* Left side - Icon and Text */}
<div className="lg:w-1/2 text-left"> <div className="lg:w-1/2 text-center lg:text-left w-full">
<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={`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" /> <img src="/HOME_17.png" alt="Álbuns" className="w-full h-full object-contain drop-shadow-2xl" />
</div> </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 ÁLBUNS<br/>PERSONALIZADOS
</h2> </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'}`}> <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-lg leading-relaxed"> <p className="text-sm sm:text-base md:text-lg leading-relaxed">
Escolha a cor, tamanho, tecido, acabamento, modelo, Escolha a cor, tamanho, tecido, acabamento, modelo,
</p> </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! laminação, tipo de impressão e muito mais!
</p> </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. Tenha seu álbum exclusivo e de acordo com o seu gosto.
</p> </p>
</div> </div>
</div> </div>
{/* Right side - CTA */} {/* 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 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-10 border-t-4 transform transition-all duration-300 hover:shadow-xl hover:-translate-y-2" style={{ borderColor: '#B9CF33' }}> <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-6 transition-all duration-700 ease-out delay-400 ${ctaVisible ? 'opacity-100 scale-100' : 'opacity-0 scale-80'}`}> <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-29 h-29 transform transition-transform duration-300 hover:scale-110"> <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" /> <img src="/logo.png" alt="Cadastrar" className="w-full h-full object-contain drop-shadow-lg" />
</div> </div>
</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. Faça parte da Photum e cadastre sua formatura.
</p> </p>
<button <button
onClick={onEnter} 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' }} style={{ backgroundColor: '#B9CF33' }}
> >
Cadastrar Formatura Cadastrar Formatura
@ -140,36 +140,36 @@ export const Home: React.FC<HomeProps> = ({ onEnter }) => {
</div> </div>
{/* Decorative elements */} {/* Decorative elements */}
<div className="absolute top-10 right-10 w-32 h-32 rounded-full opacity-10" style={{ backgroundColor: '#B9CF33' }}></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="absolute bottom-10 left-10 w-24 h-24 rounded-full opacity-10" style={{ backgroundColor: '#C2388B' }}></div> <div className="hidden sm:block absolute bottom-10 left-10 w-24 h-24 rounded-full opacity-10" style={{ backgroundColor: '#C2388B' }}></div>
</section> </section>
{/* Contact 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 */} {/* 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="hidden md:block 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 -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="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-12 transition-all duration-700 ${contactVisible ? 'opacity-100 translate-y-0' : 'opacity-0 -translate-y-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-3xl md:text-4xl font-bold text-[#B9CF32] mb-3 tracking-wide">ENTRE EM CONTATO</h2> <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-white/90">Envie sua mensagem, ligue ou faça uma visita em nossa empresa!</p> <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>
<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 */} {/* 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="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"> <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"> <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"/> <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> </svg>
</div> </div>
<div className="flex-1"> <div className="flex-1 min-w-0">
<p className="font-bold mb-1">Rua Bom Recreio, 305</p> <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-sm">Jd. Boer II • Americana SP</p> <p className="text-white/80 text-xs sm:text-sm">Jd. Boer II • Americana SP</p>
<p className="text-white/80 text-sm mb-2">CEP 13477-720</p> <p className="text-white/80 text-xs sm:text-sm mb-1 sm:mb-2">CEP 13477-720</p>
<a <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" 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" target="_blank"
@ -183,7 +183,7 @@ export const Home: React.FC<HomeProps> = ({ onEnter }) => {
</div> </div>
{/* Mini Map */} {/* 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 <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" 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%" width="100%"
@ -203,21 +203,21 @@ export const Home: React.FC<HomeProps> = ({ onEnter }) => {
</svg> </svg>
</div> </div>
<div className="flex-1"> <div className="flex-1">
<p className="font-semibold">(19) 3405.5024</p> <p className="font-semibold">(19) 3405 5024</p>
<p className="font-semibold">(19) 3621.4621</p> <p className="font-semibold">(19) 3621 4621</p>
</div> </div>
</div> </div>
</div> </div>
<div className="group"> <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"> <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-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24"> <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"/> <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> </svg>
</div> </div>
<div className="flex-1"> <div className="flex-1 min-w-0">
<a href="mailto:contato@photum.com.br" className="font-semibold hover:text-white transition-colors"> <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 contato@photum.com.br
</a> </a>
</div> </div>
@ -226,33 +226,33 @@ export const Home: React.FC<HomeProps> = ({ onEnter }) => {
</div> </div>
{/* Right side - Contact Form */} {/* 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 <input
type="text" type="text"
placeholder="Nome" 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 <input
type="email" type="email"
placeholder="E-mail" 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 <input
type="tel" type="tel"
placeholder="Telefone" 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 <textarea
placeholder="Mensagem" placeholder="Mensagem"
rows={4} 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> ></textarea>
<button <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' }} style={{ backgroundColor: '#B9CF32' }}
> >
<span className="relative z-10">Enviar</span> <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" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
</svg> </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> <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>

366
pages/LGPD.tsx
View file

@ -1,135 +1,269 @@
import React from 'react'; import React, { useState } from 'react';
interface LGPDProps { interface LGPDProps {
onNavigate: (page: string) => void; onNavigate: (page: string) => void;
} }
interface Section {
id: number;
title: string;
icon: string;
content: React.ReactNode;
}
export const LGPD: React.FC<LGPDProps> = ({ onNavigate }) => { export const LGPD: React.FC<LGPDProps> = ({ onNavigate }) => {
return ( const [openSection, setOpenSection] = useState<number | null>(null);
<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' }}> const sections: Section[] = [
LGPD - Lei Geral de Proteção de Dados {
</h1> id: 1,
title: 'Compromisso com a LGPD',
<div className="prose prose-lg max-w-none text-gray-700 space-y-6"> 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>',
<section> content: (
<h2 className="text-2xl font-bold mb-4 text-brand-purple">Nosso Compromisso com a LGPD</h2> <p>
<p> A Photum Formaturas está comprometida em proteger seus dados pessoais e cumprir todas as
A Photum Formaturas está totalmente comprometida com a proteção de dados pessoais conforme disposições da Lei Geral de Proteção de Dados (Lei nº 13.709/2018). Esta página explica
estabelecido pela Lei Geral de Proteção de Dados (Lei nº 13.709/2018). como tratamos seus dados em conformidade com a LGPD.
</p> </p>
</section> )
},
<section> {
<h2 className="text-2xl font-bold mb-4 text-brand-purple">1. Princípios que Seguimos</h2> id: 2,
<ul className="list-disc pl-6 space-y-2"> title: 'Princípios da LGPD',
<li><strong>Finalidade:</strong> Coletamos dados apenas para propósitos específicos e legítimos</li> 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>',
<li><strong>Adequação:</strong> O tratamento é compatível com as finalidades informadas</li> content: (
<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> <p className="mb-4">Nosso tratamento de dados segue os seguintes princípios:</p>
<li><strong>Segurança:</strong> Adotamos medidas técnicas e administrativas para proteção</li> <ul className="list-none space-y-2">
<li><strong>Prevenção:</strong> Evitamos danos por meio de boas práticas</li> <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>
</ul> <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> <strong>Adequação:</strong> Compatível com as finalidades informadas</li>
</section> <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>
<section> <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> <strong>Segurança:</strong> Medidas técnicas e administrativas adequadas</li>
<h2 className="text-2xl font-bold mb-4 text-brand-purple">2. Seus Direitos sob a LGPD</h2> </ul>
<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> id: 3,
<li><strong>Portabilidade:</strong> Receber seus dados em formato estruturado</li> title: 'Seus Direitos como Titular',
<li><strong>Eliminação:</strong> Excluir dados tratados com seu consentimento</li> 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>',
<li><strong>Informação:</strong> Saber com quem compartilhamos seus dados</li> content: (
<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> <p className="mb-4">A LGPD garante diversos direitos sobre seus dados pessoais:</p>
</ul> <ul className="list-none space-y-2">
</section> <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>
<section> <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Correção de dados incompletos ou desatualizados</li>
<h2 className="text-2xl font-bold mb-4 text-brand-purple">3. Tratamento de Dados</h2> <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Anonimização, bloqueio ou eliminação de dados desnecessários</li>
<p>Tratamos dados pessoais nas seguintes situações:</p> <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Portabilidade dos dados a outro fornecedor</li>
<ul className="list-disc pl-6 space-y-2"> <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Eliminação dos dados tratados com seu consentimento</li>
<li>Mediante seu consentimento</li> <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Informação sobre o compartilhamento de dados</li>
<li>Para cumprimento de obrigação legal</li> <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Revogação do consentimento</li>
<li>Para execução de contrato</li> </ul>
<li>Para exercício regular de direitos</li> </>
<li>Para proteção do crédito</li> )
<li>Por legítimo interesse</li> },
</ul> {
</section> id: 4,
title: 'Bases Legais para Tratamento',
<section> 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>',
<h2 className="text-2xl font-bold mb-4 text-brand-purple">4. Compartilhamento de Dados</h2> content: (
<p> <>
Seus dados podem ser compartilhados apenas com: <p className="mb-4">Tratamos seus dados com base nas seguintes hipóteses legais:</p>
</p> <ul className="list-none space-y-2">
<ul className="list-disc pl-6 space-y-2"> <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Consentimento do titular</li>
<li>Prestadores de serviços essenciais (processamento de pagamentos, armazenamento em nuvem)</li> <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Cumprimento de obrigação legal ou regulatória</li>
<li>Autoridades quando exigido por lei</li> <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Execução de contrato ou procedimentos preliminares</li>
<li>Parceiros comerciais, mediante seu consentimento explícito</li> <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Exercício regular de direitos</li>
</ul> <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Legítimos interesses do controlador</li>
</section> </ul>
</>
<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"> id: 5,
<li>Criptografia de dados sensíveis</li> title: 'Compartilhamento de Dados',
<li>Controles de acesso rigorosos</li> 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>',
<li>Monitoramento constante de segurança</li> content: (
<li>Treinamento de equipe sobre proteção de dados</li> <>
<li>Backups regulares e seguros</li> <p className="mb-4">Seus dados podem ser compartilhados com:</p>
</ul> <ul className="list-none space-y-2">
</section> <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>
<section> <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Autoridades governamentais (quando exigido por lei)</li>
<h2 className="text-2xl font-bold mb-4 text-brand-purple">6. Retenção de Dados</h2> <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Parceiros comerciais (com seu consentimento)</li>
<p> </ul>
Mantemos seus dados pessoais apenas pelo tempo necessário para cumprir as finalidades <p className="mt-4">
para as quais foram coletados, incluindo requisitos legais, contratuais e de prestação de contas. Todos os terceiros são obrigados a manter a confidencialidade e segurança de seus dados.
</p> </p>
</section> </>
)
<section> },
<h2 className="text-2xl font-bold mb-4 text-brand-purple">7. Encarregado de Dados (DPO)</h2> {
<p> id: 6,
Para exercer seus direitos ou esclarecer dúvidas sobre o tratamento de dados pessoais, title: 'Segurança dos Dados',
entre em contato com nosso Encarregado de 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>',
</p> content: (
<p className="mt-4"> <>
<strong>E-mail:</strong>{' '} <p className="mb-4">Implementamos medidas de segurança técnicas e organizacionais:</p>
<a href="mailto:lgpd@photum.com.br" className="text-brand-purple hover:underline"> <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 lgpd@photum.com.br
</a> </a>
</p> </p>
<p> </div>
<strong>Telefone:</strong> (19) 3405-5024 </>
)
},
{
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> </p>
</section> </div>
</>
)
}
];
<section> return (
<h2 className="text-2xl font-bold mb-4 text-brand-purple">8. Autoridade Nacional</h2> <div className="min-h-screen bg-gradient-to-br from-gray-50 to-white py-12 sm:py-20 px-4 sm:px-8">
<p> <div className="max-w-6xl mx-auto">
Você também pode entrar em contato com a Autoridade Nacional de Proteção de Dados (ANPD) <button
para questões relacionadas à proteção de seus dados pessoais. onClick={() => onNavigate('home')}
</p> className="mb-8 flex items-center gap-2 text-gray-600 hover:text-[#492E61] transition-all duration-300 group"
</section> >
<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>
<p className="text-sm text-gray-500 mt-8"> <div className="text-center mb-12 fade-in">
Última atualização: Dezembro de 2025 <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>
<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> </p>
</div> </div>
</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> </div>
); );
}; };

75
pages/Login.tsx
View file

@ -5,7 +5,11 @@ import { Button } from '../components/Button';
import { Input } from '../components/Input'; import { Input } from '../components/Input';
import { UserRole } from '../types'; 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 { login, availableUsers } = useAuth();
const [email, setEmail] = useState(''); const [email, setEmail] = useState('');
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
@ -38,9 +42,9 @@ export const Login: React.FC = () => {
} }
return ( 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 */} {/* 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 <img
src="https://images.unsplash.com/photo-1519741497674-611481863552?ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80" src="https://images.unsplash.com/photo-1519741497674-611481863552?ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80"
alt="Photum Login" alt="Photum Login"
@ -55,16 +59,16 @@ export const Login: React.FC = () => {
</div> </div>
{/* Right Side - Form */} {/* Right Side - Form */}
<div className="w-full lg:w-1/2 flex items-center justify-center p-8 lg:p-16"> <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-8 fade-in"> <div className="max-w-md w-full space-y-6 sm:space-y-8 fade-in">
<div className="text-center lg:text-left"> <div className="text-center lg:text-left">
<span className="font-bold tracking-widest uppercase text-sm" style={{color: '#B9CF33'}}>Bem-vindo de volta</span> <span className="font-bold tracking-widest uppercase text-xs sm:text-sm" style={{color: '#B9CF33'}}>Bem-vindo de volta</span>
<h2 className="mt-2 text-3xl font-serif font-bold text-gray-900">Acesse sua conta</h2> <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-sm text-gray-600"> <p className="mt-2 text-xs sm:text-sm text-gray-600">
Não tem uma conta?{' '} Não tem uma conta?{' '}
<button <button
type="button" type="button"
onClick={() => window.location.hash = '#register'} onClick={() => onNavigate?.('register')}
className="font-medium hover:opacity-80 transition-opacity" className="font-medium hover:opacity-80 transition-opacity"
style={{color: '#B9CF33'}} style={{color: '#B9CF33'}}
> >
@ -73,10 +77,10 @@ export const Login: React.FC = () => {
</p> </p>
</div> </div>
<form className="mt-8 space-y-6" onSubmit={handleLogin}> <form className="mt-6 sm:mt-8 space-y-4 sm:space-y-6" onSubmit={handleLogin}>
<div className="space-y-4"> <div className="space-y-3 sm:space-y-4">
<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">
E-MAIL CORPORATIVO OU PESSOAL E-MAIL CORPORATIVO OU PESSOAL
</label> </label>
<input <input
@ -85,7 +89,7 @@ export const Login: React.FC = () => {
placeholder="nome@exemplo.com" placeholder="nome@exemplo.com"
value={email} value={email}
onChange={(e) => setEmail(e.target.value)} 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'}} style={{focusRing: '2px solid #B9CF33'}}
onFocus={(e) => e.target.style.borderColor = '#B9CF33'} onFocus={(e) => e.target.style.borderColor = '#B9CF33'}
onBlur={(e) => e.target.style.borderColor = '#d1d5db'} 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>} {error && <span className="text-xs text-red-500 mt-1 block">{error}</span>}
</div> </div>
<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 SENHA
</label> </label>
<div className="relative"> <div className="relative">
@ -101,7 +105,7 @@ export const Login: React.FC = () => {
type="password" type="password"
placeholder="••••••••" placeholder="••••••••"
readOnly 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"> <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"> <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 <button
type="submit" type="submit"
disabled={isLoading} 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'}} style={{backgroundColor: '#1a1a1a'}}
> >
{isLoading ? 'Entrando...' : 'Entrar no Sistema'} {isLoading ? 'Entrando...' : 'Entrar no Sistema'}
@ -124,14 +128,14 @@ export const Login: React.FC = () => {
</form> </form>
{/* Demo Users Quick Select */} {/* Demo Users Quick Select */}
<div className="mt-10 pt-10 border-t border-gray-200"> <div className="mt-6 sm:mt-10 pt-6 sm: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> <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-2 gap-3"> <div className="grid grid-cols-1 sm:grid-cols-2 gap-2 sm:gap-3">
{availableUsers.map(user => ( {availableUsers.map(user => (
<button <button
key={user.id} key={user.id}
onClick={() => fillCredentials(user.email)} 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'}} style={{borderColor: '#e5e7eb'}}
onMouseEnter={(e) => { onMouseEnter={(e) => {
e.currentTarget.style.borderColor = '#B9CF33'; e.currentTarget.style.borderColor = '#B9CF33';
@ -142,34 +146,9 @@ export const Login: React.FC = () => {
e.currentTarget.style.boxShadow = 'none'; e.currentTarget.style.boxShadow = 'none';
}} }}
> >
<span className="text-sm font-bold text-gray-900">{user.name}</span> <span className="text-xs sm: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-[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-xs text-gray-500 mt-1 truncate w-full">{user.email}</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>
</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>
</button> </button>
))} ))}
</div> </div>

254
pages/PrivacyPolicy.tsx
View file

@ -1,95 +1,201 @@
import React from 'react'; import React, { useState } from 'react';
interface PrivacyPolicyProps { interface PrivacyPolicyProps {
onNavigate: (page: string) => void; onNavigate: (page: string) => void;
} }
interface Section {
id: number;
title: string;
icon: string;
content: React.ReactNode;
}
export const PrivacyPolicy: React.FC<PrivacyPolicyProps> = ({ onNavigate }) => { 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 ( return (
<div className="min-h-screen bg-white py-20 px-8"> <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-4xl mx-auto"> <div className="max-w-6xl mx-auto">
<button <button
onClick={() => onNavigate('home')} 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> </button>
<h1 className="text-4xl font-bold mb-8" style={{ color: '#B9CF33' }}> <div className="text-center mb-12 fade-in">
Política de Privacidade <h1 className="text-4xl sm:text-5xl md:text-6xl font-bold mb-4" style={{ color: '#B9CF33' }}>
</h1> 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"> <div className="grid gap-4 sm:gap-6">
<section> {sections.map((section, index) => (
<h2 className="text-2xl font-bold mb-4 text-brand-purple">1. Informações que Coletamos</h2> <div
<p> key={section.id}
A Photum Formaturas coleta informações que você nos fornece diretamente ao criar uma conta, className="bg-white rounded-2xl shadow-lg overflow-hidden transform transition-all duration-500 hover:shadow-2xl"
solicitar serviços ou entrar em contato conosco. Isso pode incluir: style={{
</p> animation: `fadeInUp 0.6s ease-out ${index * 0.1}s both`
<ul className="list-disc pl-6 space-y-2"> }}
<li>Nome completo</li> >
<li>Endereço de e-mail</li> <button
<li>Número de telefone</li> onClick={() => setOpenSection(openSection === section.id ? null : section.id)}
<li>Informações sobre o evento (formatura)</li> 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"
<li>Dados de pagamento (processados de forma segura)</li> >
</ul> <div className="flex items-center gap-4 flex-1">
</section> <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>
<section> <div
<h2 className="text-2xl font-bold mb-4 text-brand-purple">2. Como Usamos suas Informações</h2> className={`overflow-hidden transition-all duration-500 ${
<p>Utilizamos as informações coletadas para:</p> openSection === section.id ? 'max-h-[1000px] opacity-100' : 'max-h-0 opacity-0'
<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> <div className="px-6 sm:px-8 py-6 bg-gradient-to-br from-gray-50 to-white border-t border-gray-100">
<li>Comunicar sobre seus eventos e serviços contratados</li> <div className="text-gray-700 leading-relaxed">
<li>Melhorar nossos serviços e experiência do cliente</li> {section.content}
<li>Enviar atualizações e informações relevantes</li> </div>
</ul> </div>
</section> </div>
</div>
))}
</div>
<section> <div className="mt-12 text-center p-6 bg-white rounded-2xl shadow-lg">
<h2 className="text-2xl font-bold mb-4 text-brand-purple">3. Proteção de Dados</h2> <p className="text-gray-600">
<p> <span className="font-semibold" style={{ color: '#492E61' }}>Última atualização:</span> Janeiro de 2025
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> </p>
</div> </div>
</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> </div>
); );
}; };

50
pages/Register.tsx
View file

@ -128,9 +128,9 @@ export const Register: React.FC<RegisterProps> = ({ onNavigate }) => {
} }
return ( 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 */} {/* 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 <img
src="https://images.unsplash.com/photo-1541339907198-e08756dedf3f?fm=jpg&q=60&w=3000&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" 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" alt="Photum Cadastro"
@ -147,12 +147,12 @@ export const Register: React.FC<RegisterProps> = ({ onNavigate }) => {
</div> </div>
{/* Right Side - Form */} {/* Right Side - Form */}
<div className="w-full lg:w-1/2 flex items-center justify-center p-8 lg:p-16"> <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-8 fade-in"> <div className="max-w-md w-full space-y-6 sm:space-y-8 fade-in">
<div className="text-center lg:text-left"> <div className="text-center lg:text-left">
<span className="font-bold tracking-widest uppercase text-sm" style={{color: '#B9CF33'}}>Comece agora</span> <span className="font-bold tracking-widest uppercase text-xs sm:text-sm" style={{color: '#B9CF33'}}>Comece agora</span>
<h2 className="mt-2 text-3xl font-serif font-bold text-gray-900">Crie sua conta</h2> <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-sm text-gray-600"> <p className="mt-2 text-xs sm:text-sm text-gray-600">
Já tem uma conta?{' '} Já tem uma conta?{' '}
<button <button
onClick={() => onNavigate('login')} onClick={() => onNavigate('login')}
@ -164,8 +164,8 @@ export const Register: React.FC<RegisterProps> = ({ onNavigate }) => {
</p> </p>
</div> </div>
<form className="mt-8 space-y-5" onSubmit={handleSubmit}> <form className="mt-6 sm:mt-8 space-y-4 sm:space-y-5" onSubmit={handleSubmit}>
<div className="space-y-4"> <div className="space-y-3 sm:space-y-4">
<Input <Input
label="Nome Completo" label="Nome Completo"
type="text" type="text"
@ -220,18 +220,28 @@ export const Register: React.FC<RegisterProps> = ({ onNavigate }) => {
type="checkbox" type="checkbox"
checked={agreedToTerms} checked={agreedToTerms}
onChange={(e) => setAgreedToTerms(e.target.checked)} 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'}} 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{' '} 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 termos de uso
</a>{' '} </button>{' '}
e{' '} 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 política de privacidade
</a> </button>
</label> </label>
</div> </div>
{error && error.includes('termos') && ( {error && error.includes('termos') && (
@ -239,17 +249,17 @@ export const Register: React.FC<RegisterProps> = ({ onNavigate }) => {
)} )}
</div> </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 <input
type="checkbox" type="checkbox"
checked={formData.wantsToAddInstitution} checked={formData.wantsToAddInstitution}
onChange={(e) => setFormData(prev => ({ ...prev, wantsToAddInstitution: e.target.checked }))} 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'}} style={{accentColor: '#B9CF33'}}
/> />
<label className="ml-2 text-sm text-gray-700"> <label className="ml-2 text-xs sm:text-sm text-gray-700">
<span className="font-medium">Cadastrar universidade agora (Opcional)</span> <span className="font-medium text-xs sm:text-sm">Cadastrar universidade agora (Opcional)</span>
<p className="text-xs text-gray-500 mt-1"> <p className="text-[10px] sm:text-xs text-gray-500 mt-1">
Você pode cadastrar sua universidade durante o cadastro ou posteriormente no sistema. Você pode cadastrar sua universidade durante o cadastro ou posteriormente no sistema.
Trabalhamos exclusivamente com eventos fotográficos em universidades. Trabalhamos exclusivamente com eventos fotográficos em universidades.
</p> </p>

286
pages/TermsOfUse.tsx
View file

@ -1,108 +1,220 @@
import React from 'react'; import React, { useState } from 'react';
interface TermsOfUseProps { interface TermsOfUseProps {
onNavigate: (page: string) => void; onNavigate: (page: string) => void;
} }
interface Section {
id: number;
title: string;
icon: string;
content: React.ReactNode;
}
export const TermsOfUse: React.FC<TermsOfUseProps> = ({ onNavigate }) => { 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 ( return (
<div className="min-h-screen bg-white py-20 px-8"> <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-4xl mx-auto"> <div className="max-w-6xl mx-auto">
<button <button
onClick={() => onNavigate('home')} 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> </button>
<h1 className="text-4xl font-bold mb-8" style={{ color: '#B9CF33' }}> <div className="text-center mb-12 fade-in">
Termos de Uso <h1 className="text-4xl sm:text-5xl md:text-6xl font-bold mb-4" style={{ color: '#B9CF33' }}>
</h1> 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"> <div className="grid gap-4 sm:gap-6">
<section> {sections.map((section, index) => (
<h2 className="text-2xl font-bold mb-4 text-brand-purple">1. Aceitação dos Termos</h2> <div
<p> key={section.id}
Ao acessar e usar os serviços da Photum Formaturas, você concorda em cumprir e estar className="bg-white rounded-2xl shadow-lg overflow-hidden transform transition-all duration-500 hover:shadow-2xl"
vinculado a estes Termos de Uso. Se você não concordar com algum destes termos, style={{
não utilize nossos serviços. animation: `fadeInUp 0.6s ease-out ${index * 0.1}s both`
</p> }}
</section> >
<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>
<section> <div
<h2 className="text-2xl font-bold mb-4 text-brand-purple">2. Serviços Oferecidos</h2> className={`overflow-hidden transition-all duration-500 ${
<p> openSection === section.id ? 'max-h-[1000px] opacity-100' : 'max-h-0 opacity-0'
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> <div className="px-6 sm:px-8 py-6 bg-gradient-to-br from-gray-50 to-white border-t border-gray-100">
</section> <div className="text-gray-700 leading-relaxed">
{section.content}
</div>
</div>
</div>
</div>
))}
</div>
<section> <div className="mt-12 text-center p-6 bg-white rounded-2xl shadow-lg">
<h2 className="text-2xl font-bold mb-4 text-brand-purple">3. Cadastro e Conta</h2> <p className="text-gray-600">
<ul className="list-disc pl-6 space-y-2"> <span className="font-semibold" style={{ color: '#492E61' }}>Última atualização:</span> Janeiro de 2025
<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> </p>
</div> </div>
</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> </div>
); );
}; };