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>

352
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á totalmente comprometida com a proteção de dados pessoais conforme A Photum Formaturas está comprometida em proteger seus dados pessoais e cumprir todas as
estabelecido pela Lei Geral de Proteção de Dados (Lei nº 13.709/2018). 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> </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>
<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> </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> id: 3,
<ul className="list-disc pl-6 space-y-2"> title: 'Seus Direitos como Titular',
<li><strong>Confirmação e Acesso:</strong> Saber se tratamos seus dados e acessá-los</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>Correção:</strong> Corrigir dados incompletos, inexatos ou desatualizados</li> content: (
<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> <p className="mb-4">A LGPD garante diversos direitos sobre seus dados pessoais:</p>
<li><strong>Eliminação:</strong> Excluir dados tratados com seu consentimento</li> <ul className="list-none space-y-2">
<li><strong>Informação:</strong> Saber com quem compartilhamos seus dados</li> <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Confirmação da existência de tratamento</li>
<li><strong>Revogação do Consentimento:</strong> Retirar autorização a qualquer momento</li> <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Acesso aos dados</li>
<li><strong>Oposição:</strong> Se opor ao tratamento realizado com base em uma das hipóteses legais</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> </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> id: 4,
<ul className="list-disc pl-6 space-y-2"> title: 'Bases Legais para Tratamento',
<li>Mediante 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="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>',
<li>Para cumprimento de obrigação legal</li> content: (
<li>Para execução de contrato</li> <>
<li>Para exercício regular de direitos</li> <p className="mb-4">Tratamos seus dados com base nas seguintes hipóteses legais:</p>
<li>Para proteção do crédito</li> <ul className="list-none space-y-2">
<li>Por legítimo interesse</li> <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> </ul>
</section> </>
)
<section> },
<h2 className="text-2xl font-bold mb-4 text-brand-purple">4. Compartilhamento de Dados</h2> {
<p> id: 5,
Seus dados podem ser compartilhados apenas com: title: 'Compartilhamento de Dados',
</p> 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>',
<ul className="list-disc pl-6 space-y-2"> content: (
<li>Prestadores de serviços essenciais (processamento de pagamentos, armazenamento em nuvem)</li> <>
<li>Autoridades quando exigido por lei</li> <p className="mb-4">Seus dados podem ser compartilhados com:</p>
<li>Parceiros comerciais, mediante seu consentimento explícito</li> <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> </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"> <p className="mt-4">
<strong>E-mail:</strong>{' '} Todos os terceiros são obrigados a manter a confidencialidade e segurança de seus dados.
<a href="mailto:lgpd@photum.com.br" className="text-brand-purple hover:underline"> </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 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> </p>
</section> <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>
<section> <p className="text-gray-700">
<h2 className="text-2xl font-bold mb-4 text-brand-purple">8. Autoridade Nacional</h2> Website:{' '}
<p> <a href="https://www.gov.br/anpd" target="_blank" rel="noopener noreferrer" className="hover:opacity-80 transition-opacity" style={{color: '#492E61'}}>
Você também pode entrar em contato com a Autoridade Nacional de Proteção de Dados (ANPD) www.gov.br/anpd
para questões relacionadas à proteção de seus dados pessoais. </a>
</p> </p>
</section> </div>
</>
)
}
];
<p className="text-sm text-gray-500 mt-8"> return (
Última atualização: Dezembro de 2025 <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>
<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>

230
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 }) => {
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[] = [
Política de Privacidade {
</h1> id: 1,
title: 'Informações que Coletamos',
<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 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>',
<section> content: (
<h2 className="text-2xl font-bold mb-4 text-brand-purple">1. Informações que Coletamos</h2> <>
<p> <p className="mb-4">
A Photum Formaturas coleta informações que você nos fornece diretamente ao criar uma conta, 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: solicitar serviços ou entrar em contato conosco. Isso pode incluir:
</p> </p>
<ul className="list-disc pl-6 space-y-2"> <ul className="list-none space-y-2">
<li>Nome completo</li> <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Nome completo</li>
<li>Endereço de e-mail</li> <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Endereço de e-mail</li>
<li>Número de telefone</li> <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Número de telefone</li>
<li>Informações sobre o evento (formatura)</li> <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Informações sobre o evento (formatura)</li>
<li>Dados de pagamento (processados de forma segura)</li> <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Dados de pagamento (processados de forma segura)</li>
</ul> </ul>
</section> </>
)
<section> },
<h2 className="text-2xl font-bold mb-4 text-brand-purple">2. Como Usamos suas Informações</h2> {
<p>Utilizamos as informações coletadas para:</p> id: 2,
<ul className="list-disc pl-6 space-y-2"> title: 'Como Usamos suas Informações',
<li>Fornecer e gerenciar nossos serviços de fotografia</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="M13 10V3L4 14h7v7l9-11h-7z" /></svg>',
<li>Processar pagamentos e enviar confirmações</li> content: (
<li>Comunicar sobre seus eventos e serviços contratados</li> <>
<li>Melhorar nossos serviços e experiência do cliente</li> <p className="mb-4">Utilizamos as informações coletadas para:</p>
<li>Enviar atualizações e informações relevantes</li> <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> </ul>
</section> </>
)
<section> },
<h2 className="text-2xl font-bold mb-4 text-brand-purple">3. Proteção de Dados</h2> {
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> <p>
Implementamos medidas de segurança técnicas e organizacionais para proteger suas informações 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. pessoais contra acesso não autorizado, alteração, divulgação ou destruição.
</p> </p>
</section> )
},
<section> {
<h2 className="text-2xl font-bold mb-4 text-brand-purple">4. Compartilhamento de Informações</h2> 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> <p>
Não vendemos, alugamos ou compartilhamos suas informações pessoais com terceiros, exceto 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. quando necessário para fornecer nossos serviços ou quando exigido por lei.
</p> </p>
</section> )
},
<section> {
<h2 className="text-2xl font-bold mb-4 text-brand-purple">5. Seus Direitos</h2> id: 5,
<p>Você tem o direito de:</p> title: 'Seus Direitos',
<ul className="list-disc pl-6 space-y-2"> 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>Acessar suas informações pessoais</li> content: (
<li>Corrigir dados incorretos</li> <>
<li>Solicitar a exclusão de seus dados</li> <p className="mb-4">Você tem o direito de:</p>
<li>Retirar seu consentimento a qualquer momento</li> <ul className="list-none space-y-2">
<li>Solicitar a portabilidade de seus dados</li> <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> </ul>
</section> </>
)
<section> },
<h2 className="text-2xl font-bold mb-4 text-brand-purple">6. Contato</h2> {
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> <p>
Para questões sobre esta Política de Privacidade, entre em contato conosco em:{' '} 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"> <a href="mailto:contato@photum.com.br" className="font-semibold hover:opacity-80 transition-opacity" style={{color: '#B9CF33'}}>
contato@photum.com.br contato@photum.com.br
</a> </a>
</p> </p>
</section> )
}
];
<p className="text-sm text-gray-500 mt-8"> return (
Última atualização: Dezembro de 2025 <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-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="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>
); );
}; };

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>

274
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 }) => {
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[] = [
Termos de Uso {
</h1> id: 1,
title: 'Aceitação dos Termos',
<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-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>',
<section> content: (
<h2 className="text-2xl font-bold mb-4 text-brand-purple">1. Aceitação dos Termos</h2>
<p> <p>
Ao acessar e usar os serviços da Photum Formaturas, você concorda em cumprir e estar Ao acessar e usar os serviços da Photum Formaturas, você concorda em cumprir e estar vinculado
vinculado a estes Termos de Uso. Se você não concordar com algum destes termos, a estes Termos de Uso. Se você não concordar com algum destes termos, não utilize nossos serviços.
não utilize nossos serviços.
</p> </p>
</section> )
},
<section> {
<h2 className="text-2xl font-bold mb-4 text-brand-purple">2. Serviços Oferecidos</h2> id: 2,
<p> title: 'Descrição dos Serviços',
A Photum Formaturas oferece serviços de fotografia profissional, gestão de eventos de formatura, 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>',
criação de álbuns personalizados e plataforma digital para gerenciamento de fotos. content: (
</p> <>
</section> <p className="mb-4">A Photum Formaturas oferece:</p>
<ul className="list-none space-y-2">
<section> <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Serviços de fotografia para formaturas</li>
<h2 className="text-2xl font-bold mb-4 text-brand-purple">3. Cadastro e Conta</h2> <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Álbuns digitais e físicos</li>
<ul className="list-disc pl-6 space-y-2"> <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Galeria online para visualização e download de fotos</li>
<li>Você deve fornecer informações precisas e completas ao criar uma conta</li> <li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Serviços personalizados de acordo com as necessidades do cliente</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> </ul>
</section> </>
)
<section> },
<h2 className="text-2xl font-bold mb-4 text-brand-purple">4. Direitos Autorais e Uso de Imagens</h2> {
<p> id: 3,
Todas as fotografias produzidas pela Photum Formaturas são protegidas por direitos autorais. title: 'Conta de Usuário',
Os clientes recebem licença de uso pessoal e não comercial das imagens adquiridas. 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>',
</p> content: (
<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> <p className="mb-4">Para acessar alguns recursos, você precisará criar uma conta. Você concorda em:</p>
<li>A Photum Formaturas pode usar as imagens em seu portfólio e materiais promocionais</li> <ul className="list-none space-y-2">
<li>É proibida a reprodução não autorizada das fotografias</li> <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> </ul>
</section> </>
)
<section> },
<h2 className="text-2xl font-bold mb-4 text-brand-purple">5. Pagamentos e Cancelamentos</h2> {
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> <p>
Os valores dos serviços são estabelecidos em contrato. Cancelamentos devem seguir as Todas as fotografias e conteúdos produzidos pela Photum Formaturas são protegidos por direitos autorais.
políticas específicas acordadas no momento da contratação. Os clientes recebem uma licença para uso pessoal das fotos adquiridas, mas a reprodução comercial
requer autorização prévia.
</p> </p>
</section> )
},
<section> {
<h2 className="text-2xl font-bold mb-4 text-brand-purple">6. Limitação de Responsabilidade</h2> id: 5,
<p> title: 'Pagamentos e Reembolsos',
A Photum Formaturas não se responsabiliza por: 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>',
</p> content: (
<ul className="list-disc pl-6 space-y-2"> <>
<li>Problemas técnicos causados por terceiros</li> <p className="mb-4">Nossos termos de pagamento incluem:</p>
<li>Perdas indiretas ou consequenciais</li> <ul className="list-none space-y-2">
<li>Eventos fora de nosso controle (caso fortuito ou força maior)</li> <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> </ul>
</section> </>
)
<section> },
<h2 className="text-2xl font-bold mb-4 text-brand-purple">7. Modificações dos Termos</h2> {
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> <p>
Reservamos o direito de modificar estes termos a qualquer momento. As alterações entrarão A Photum Formaturas se esforça para fornecer serviços de alta qualidade, mas não se responsabiliza
em vigor imediatamente após sua publicação no site. por circunstâncias além de nosso controle, como condições climáticas adversas ou problemas técnicos
no local do evento.
</p> </p>
</section> )
},
<section> {
<h2 className="text-2xl font-bold mb-4 text-brand-purple">8. Contato</h2> 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> <p>
Para questões sobre estes Termos de Uso, entre em contato:{' '} Reservamo-nos o direito de modificar estes Termos de Uso a qualquer momento. Alterações significativas
<a href="mailto:contato@photum.com.br" className="text-brand-purple hover:underline"> 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 contato@photum.com.br
</a> </a>
</p> </p>
</section> )
}
];
<p className="text-sm text-gray-500 mt-8"> return (
Última atualização: Dezembro de 2025 <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-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="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>
); );
}; };