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

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

104
pages/Home.tsx
View file

@ -53,7 +53,7 @@ export const Home: React.FC<HomeProps> = ({ onEnter }) => {
return (
<div className="min-h-screen bg-white">
{/* Hero Section */}
<div className="relative h-[70vh] w-full overflow-hidden">
<div className="relative h-[50vh] sm:h-[60vh] md:h-[70vh] w-full overflow-hidden">
{HERO_IMAGES.map((img, idx) => (
<div
key={idx}
@ -66,23 +66,23 @@ export const Home: React.FC<HomeProps> = ({ onEnter }) => {
{/* Text - Only visible on first slide */}
<div className={`absolute inset-0 flex items-center justify-center text-center px-4 transition-opacity duration-500 ${currentSlide === 0 ? 'opacity-100' : 'opacity-0 pointer-events-none'}`}>
<div className="max-w-4xl space-y-6 slide-up">
<h1 className="text-4xl md:text-5xl lg:text-6xl font-serif text-white leading-tight">
<div className="max-w-4xl space-y-4 sm:space-y-6 slide-up">
<h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-serif text-white leading-tight">
Eternizando Momentos <br />
<span className="text-brand-gold italic">Únicos</span>
</h1>
<p className="text-lg md:text-xl text-gray-200 font-light max-w-2xl mx-auto tracking-wide">
<p className="text-base sm:text-lg md:text-xl text-gray-200 font-light max-w-2xl mx-auto tracking-wide">
Gestão completa para eventos inesquecíveis. Do planejamento à entrega do álbum perfeito.
</p>
</div>
</div>
{/* Carousel Dots */}
<div className="absolute bottom-10 left-0 right-0 flex justify-center space-x-3">
<div className="absolute bottom-4 sm:bottom-10 left-0 right-0 flex justify-center space-x-2 sm:space-x-3">
{HERO_IMAGES.map((_, idx) => (
<button
key={idx}
className={`w-2 h-2 rounded-full transition-all ${idx === currentSlide ? 'bg-brand-gold w-8' : 'bg-white/50'}`}
className={`w-2 h-2 rounded-full transition-all ${idx === currentSlide ? 'bg-brand-gold w-6 sm:w-8' : 'bg-white/50'}`}
onClick={() => setCurrentSlide(idx)}
/>
))}
@ -90,46 +90,46 @@ export const Home: React.FC<HomeProps> = ({ onEnter }) => {
</div>
{/* Albums Section */}
<section ref={albumsRef} className="py-24 relative overflow-hidden" style={{ backgroundColor: '#ffffff' }}>
<section ref={albumsRef} className="py-12 sm:py-16 md:py-24 relative overflow-hidden" style={{ backgroundColor: '#ffffff' }}>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex flex-col lg:flex-row items-center gap-16">
<div className="flex flex-col lg:flex-row items-center gap-8 sm:gap-12 lg:gap-16">
{/* Left side - Icon and Text */}
<div className="lg:w-1/2 text-left">
<div className={`inline-flex items-center justify-center w-36 h-36 mb-8 transform transition-all duration-700 ease-out ${albumsVisible ? 'opacity-100 scale-100 rotate-0' : 'opacity-0 scale-75 -rotate-12'} hover:scale-110 hover:rotate-3`}>
<div className="lg:w-1/2 text-center lg:text-left w-full">
<div className={`inline-flex items-center justify-center w-24 h-24 sm:w-32 sm:h-32 md:w-36 md:h-36 mb-6 sm:mb-8 transform transition-all duration-700 ease-out ${albumsVisible ? 'opacity-100 scale-100 rotate-0' : 'opacity-0 scale-75 -rotate-12'} hover:scale-110 hover:rotate-3`}>
<img src="/HOME_17.png" alt="Álbuns" className="w-full h-full object-contain drop-shadow-2xl" />
</div>
<h2 className={`text-5xl md:text-6xl font-bold mb-8 leading-tight transition-all duration-700 ease-out delay-100 ${albumsVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`} style={{color: '#B9CF33'}}>
<h2 className={`text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold mb-4 sm:mb-6 md:mb-8 leading-tight transition-all duration-700 ease-out delay-100 ${albumsVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`} style={{color: '#B9CF33'}}>
ÁLBUNS<br/>PERSONALIZADOS
</h2>
<div className={`space-y-3 text-gray-700 transition-all duration-700 ease-out delay-200 ${albumsVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}>
<p className="text-lg leading-relaxed">
<div className={`space-y-2 sm:space-y-3 text-gray-700 transition-all duration-700 ease-out delay-200 ${albumsVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}>
<p className="text-sm sm:text-base md:text-lg leading-relaxed">
Escolha a cor, tamanho, tecido, acabamento, modelo,
</p>
<p className="text-lg leading-relaxed">
<p className="text-sm sm:text-base md:text-lg leading-relaxed">
laminação, tipo de impressão e muito mais!
</p>
<p className="text-xl font-semibold text-brand-black mt-4">
<p className="text-base sm:text-lg md:text-xl font-semibold text-brand-black mt-3 sm:mt-4">
Tenha seu álbum exclusivo e de acordo com o seu gosto.
</p>
</div>
</div>
{/* Right side - CTA */}
<div ref={ctaRef} className={`lg:w-2/8 flex flex-col items-center lg:items-start justify-center ml-40 transition-all duration-700 ease-out delay-300 ${ctaVisible ? 'opacity-100 translate-x-0 scale-100' : 'opacity-0 translate-x-20 scale-90'}`}>
<div className="bg-white rounded-lg shadow-2xl p-10 border-t-4 transform transition-all duration-300 hover:shadow-xl hover:-translate-y-2" style={{ borderColor: '#B9CF33' }}>
<div className={`flex justify-center mb-6 transition-all duration-700 ease-out delay-400 ${ctaVisible ? 'opacity-100 scale-100' : 'opacity-0 scale-80'}`}>
<div className="w-29 h-29 transform transition-transform duration-300 hover:scale-110">
<div ref={ctaRef} className={`w-full lg:w-2/8 flex flex-col items-center lg:items-start justify-center lg:ml-40 mt-8 lg:mt-0 transition-all duration-700 ease-out delay-300 ${ctaVisible ? 'opacity-100 translate-x-0 scale-100' : 'opacity-0 translate-x-20 scale-90'}`}>
<div className="bg-white rounded-lg shadow-2xl p-6 sm:p-8 md:p-10 border-t-4 transform transition-all duration-300 hover:shadow-xl hover:-translate-y-2 w-full max-w-sm" style={{ borderColor: '#B9CF33' }}>
<div className={`flex justify-center mb-4 sm:mb-6 transition-all duration-700 ease-out delay-400 ${ctaVisible ? 'opacity-100 scale-100' : 'opacity-0 scale-80'}`}>
<div className="w-38 h-38 sm:w-38 sm:h-38 md:w-50 md:h-50 transform transition-transform duration-300 hover:scale-110">
<img src="/logo.png" alt="Cadastrar" className="w-full h-full object-contain drop-shadow-lg" />
</div>
</div>
<p className={`text-gray-700 text-xl mb-5 text-center font-medium leading-relaxed transition-all duration-700 ease-out delay-500 ${ctaVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-5'}`}>
<p className={`text-gray-700 text-base sm:text-lg md:text-xl mb-4 sm:mb-5 text-center font-medium leading-relaxed transition-all duration-700 ease-out delay-500 ${ctaVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-5'}`}>
Faça parte da Photum e cadastre sua formatura.
</p>
<button
onClick={onEnter}
className={`w-full px-10 py-5 text-white font-bold text-lg rounded-md transition-all duration-700 ease-out delay-600 transform hover:scale-105 hover:shadow-2xl active:scale-95 ${ctaVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-5'}`}
className={`w-full px-6 sm:px-8 md:px-10 py-3 sm:py-4 md:py-5 text-white font-bold text-base sm:text-lg rounded-md transition-all duration-700 ease-out delay-600 transform hover:scale-105 hover:shadow-2xl active:scale-95 ${ctaVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-5'}`}
style={{ backgroundColor: '#B9CF33' }}
>
Cadastrar Formatura
@ -140,36 +140,36 @@ export const Home: React.FC<HomeProps> = ({ onEnter }) => {
</div>
{/* Decorative elements */}
<div className="absolute top-10 right-10 w-32 h-32 rounded-full opacity-10" style={{ backgroundColor: '#B9CF33' }}></div>
<div className="absolute bottom-10 left-10 w-24 h-24 rounded-full opacity-10" style={{ backgroundColor: '#C2388B' }}></div>
<div className="hidden sm:block absolute top-10 right-10 w-32 h-32 rounded-full opacity-10" style={{ backgroundColor: '#B9CF33' }}></div>
<div className="hidden sm:block absolute bottom-10 left-10 w-24 h-24 rounded-full opacity-10" style={{ backgroundColor: '#C2388B' }}></div>
</section>
{/* Contact Section */}
<section ref={contactRef} className="py-16 relative overflow-hidden" style={{ backgroundColor: '#492E61' }}>
<section ref={contactRef} className="py-8 sm:py-12 md:py-16 relative overflow-hidden" style={{ backgroundColor: '#492E61' }}>
{/* Decorative gradient circles */}
<div className="absolute -top-24 -right-24 w-96 h-96 rounded-full opacity-10 blur-3xl" style={{ backgroundColor: '#B9CF33' }}></div>
<div className="absolute -bottom-24 -left-24 w-96 h-96 rounded-full opacity-10 blur-3xl" style={{ backgroundColor: '#C2388B' }}></div>
<div className="hidden md:block absolute -top-24 -right-24 w-96 h-96 rounded-full opacity-10 blur-3xl" style={{ backgroundColor: '#B9CF33' }}></div>
<div className="hidden md:block absolute -bottom-24 -left-24 w-96 h-96 rounded-full opacity-10 blur-3xl" style={{ backgroundColor: '#C2388B' }}></div>
<div className="max-w-7xl mx-auto px-8 sm:px-12 lg:px-20 relative z-10">
<div className={`text-center mb-12 transition-all duration-700 ${contactVisible ? 'opacity-100 translate-y-0' : 'opacity-0 -translate-y-10'}`}>
<h2 className="text-3xl md:text-4xl font-bold text-[#B9CF32] mb-3 tracking-wide">ENTRE EM CONTATO</h2>
<p className="text-white/90">Envie sua mensagem, ligue ou faça uma visita em nossa empresa!</p>
<div className="max-w-7xl mx-auto px-4 sm:px-6 md:px-8 lg:px-12 xl:px-20 relative z-10">
<div className={`text-center mb-8 sm:mb-10 md:mb-12 transition-all duration-700 ${contactVisible ? 'opacity-100 translate-y-0' : 'opacity-0 -translate-y-10'}`}>
<h2 className="text-2xl sm:text-3xl md:text-4xl font-bold text-[#B9CF32] mb-2 sm:mb-3 tracking-wide">ENTRE EM CONTATO</h2>
<p className="text-sm sm:text-base text-white/90">Envie sua mensagem, ligue ou faça uma visita em nossa empresa!</p>
</div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start max-w-6xl mx-auto">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6 sm:gap-8 md:gap-12 items-start max-w-6xl mx-auto">
{/* Left side - Contact Info */}
<div className={`space-y-5 text-white transition-all duration-700 delay-200 ${contactVisible ? 'opacity-100 translate-x-0' : 'opacity-0 -translate-x-20'}`}>
<div className={`space-y-3 sm:space-y-4 md:space-y-5 text-white transition-all duration-700 delay-200 ${contactVisible ? 'opacity-100 translate-x-0' : 'opacity-0 -translate-x-20'}`}>
<div className="group">
<div className="flex items-start gap-3 p-3 rounded-xl transition-all duration-300 hover:bg-white/10 hover:shadow-lg hover:-translate-y-1 cursor-pointer border border-white/5 hover:border-white/20">
<div className="flex items-start gap-2 sm:gap-3 p-2.5 sm:p-3 rounded-xl transition-all duration-300 hover:bg-white/10 hover:shadow-lg hover:-translate-y-1 cursor-pointer border border-white/5 hover:border-white/20">
<div className="flex-shrink-0 w-10 h-10 rounded-full bg-white/20 flex items-center justify-center transition-transform duration-300 group-hover:scale-110">
<svg className="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
</svg>
</div>
<div className="flex-1">
<p className="font-bold mb-1">Rua Bom Recreio, 305</p>
<p className="text-white/80 text-sm">Jd. Boer II • Americana SP</p>
<p className="text-white/80 text-sm mb-2">CEP 13477-720</p>
<div className="flex-1 min-w-0">
<p className="font-bold mb-0.5 sm:mb-1 text-sm sm:text-base">Rua Bom Recreio, 305</p>
<p className="text-white/80 text-xs sm:text-sm">Jd. Boer II • Americana SP</p>
<p className="text-white/80 text-xs sm:text-sm mb-1 sm:mb-2">CEP 13477-720</p>
<a
href="https://www.google.com/maps/place/Photum+Formaturas/@-22.7442887,-47.290221,21z/data=!4m12!1m5!3m4!2zMjLCsDQ0JzM5LjMiUyA0N8KwMTcnMjQuOCJX!8m2!3d-22.744247!4d-47.290221!3m5!1s0x94c89755cd9e70a9:0x15496eb4ec405483!8m2!3d-22.7442757!4d-47.2902662!16s%2Fg%2F11g6my_mm1?hl=pt&entry=ttu&g_ep=EgoyMDI1MTEyMy4xIKXMDSoASAFQAw%3D%3D"
target="_blank"
@ -183,7 +183,7 @@ export const Home: React.FC<HomeProps> = ({ onEnter }) => {
</div>
{/* Mini Map */}
<div className="rounded-xl overflow-hidden shadow-lg border border-white/10 h-48">
<div className="rounded-xl overflow-hidden shadow-lg border border-white/10 h-40 sm:h-48">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d235.28736842715582!2d-47.29022099999999!3d-22.7442887!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94c89755cd9e70a9%3A0x15496eb4ec405483!2sPhotum%20Formaturas!5e0!3m2!1spt-BR!2sbr!4v1701234567890!5m2!1spt-BR!2sbr"
width="100%"
@ -203,21 +203,21 @@ export const Home: React.FC<HomeProps> = ({ onEnter }) => {
</svg>
</div>
<div className="flex-1">
<p className="font-semibold">(19) 3405.5024</p>
<p className="font-semibold">(19) 3621.4621</p>
<p className="font-semibold">(19) 3405 5024</p>
<p className="font-semibold">(19) 3621 4621</p>
</div>
</div>
</div>
<div className="group">
<div className="flex items-start gap-3 p-3 rounded-xl transition-all duration-300 hover:bg-white/10 hover:shadow-lg hover:-translate-y-1 cursor-pointer border border-white/5 hover:border-white/20">
<div className="flex-shrink-0 w-10 h-10 rounded-full bg-white/20 flex items-center justify-center transition-transform duration-300 group-hover:scale-110">
<svg className="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
<div className="flex items-start gap-2 sm:gap-3 p-2.5 sm:p-3 rounded-xl transition-all duration-300 hover:bg-white/10 hover:shadow-lg hover:-translate-y-1 cursor-pointer border border-white/5 hover:border-white/20">
<div className="flex-shrink-0 w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-white/20 flex items-center justify-center transition-transform duration-300 group-hover:scale-110">
<svg className="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
<path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
</svg>
</div>
<div className="flex-1">
<a href="mailto:contato@photum.com.br" className="font-semibold hover:text-white transition-colors">
<div className="flex-1 min-w-0">
<a href="mailto:contato@photum.com.br" className="font-semibold hover:text-white transition-colors text-sm sm:text-base break-all">
contato@photum.com.br
</a>
</div>
@ -226,33 +226,33 @@ export const Home: React.FC<HomeProps> = ({ onEnter }) => {
</div>
{/* Right side - Contact Form */}
<div className={`space-y-5 bg-gradient-to-br from-white/10 to-white/5 p-6 rounded-2xl backdrop-blur-md border border-white/10 shadow-2xl transition-all duration-700 delay-300 ${contactVisible ? 'opacity-100 translate-x-0' : 'opacity-0 translate-x-20'}`}>
<div className={`space-y-3 sm:space-y-4 md:space-y-5 bg-gradient-to-br from-white/10 to-white/5 p-4 sm:p-5 md:p-6 rounded-2xl backdrop-blur-md border border-white/10 shadow-2xl transition-all duration-700 delay-300 ${contactVisible ? 'opacity-100 translate-x-0' : 'opacity-0 translate-x-20'}`}>
<input
type="text"
placeholder="Nome"
className="w-full px-4 py-3 bg-white/5 border-b-2 border-white/20 text-white placeholder-white/50 focus:border-white focus:bg-white/10 focus:outline-none transition-all duration-300 rounded-t-lg"
className="w-full px-3 sm:px-4 py-2.5 sm:py-3 text-sm sm:text-base bg-white/5 border-b-2 border-white/20 text-white placeholder-white/50 focus:border-white focus:bg-white/10 focus:outline-none transition-all duration-300 rounded-t-lg"
/>
<input
type="email"
placeholder="E-mail"
className="w-full px-4 py-3 bg-white/5 border-b-2 border-white/20 text-white placeholder-white/50 focus:border-white focus:bg-white/10 focus:outline-none transition-all duration-300 rounded-t-lg"
className="w-full px-3 sm:px-4 py-2.5 sm:py-3 text-sm sm:text-base bg-white/5 border-b-2 border-white/20 text-white placeholder-white/50 focus:border-white focus:bg-white/10 focus:outline-none transition-all duration-300 rounded-t-lg"
/>
<input
type="tel"
placeholder="Telefone"
className="w-full px-4 py-3 bg-white/5 border-b-2 border-white/20 text-white placeholder-white/50 focus:border-white focus:bg-white/10 focus:outline-none transition-all duration-300 rounded-t-lg"
className="w-full px-3 sm:px-4 py-2.5 sm:py-3 text-sm sm:text-base bg-white/5 border-b-2 border-white/20 text-white placeholder-white/50 focus:border-white focus:bg-white/10 focus:outline-none transition-all duration-300 rounded-t-lg"
/>
<textarea
placeholder="Mensagem"
rows={4}
className="w-full px-4 py-3 bg-white/5 border-b-2 border-white/20 text-white placeholder-white/50 focus:border-white focus:bg-white/10 focus:outline-none transition-all duration-300 resize-none rounded-t-lg"
className="w-full px-3 sm:px-4 py-2.5 sm:py-3 text-sm sm:text-base bg-white/5 border-b-2 border-white/20 text-white placeholder-white/50 focus:border-white focus:bg-white/10 focus:outline-none transition-all duration-300 resize-none rounded-t-lg"
></textarea>
<button
className="w-full px-10 py-3 text-white font-bold rounded-xl hover:opacity-90 transition-all duration-300 transform hover:scale-105 hover:shadow-2xl active:scale-95 relative overflow-hidden group flex items-center justify-center gap-2"
className="w-full px-6 sm:px-8 md:px-10 py-2.5 sm:py-3 text-sm sm:text-base text-white font-bold rounded-xl hover:opacity-90 transition-all duration-300 transform hover:scale-105 hover:shadow-2xl active:scale-95 relative overflow-hidden group flex items-center justify-center gap-2"
style={{ backgroundColor: '#B9CF32' }}
>
<span className="relative z-10">Enviar</span>
<svg className="w-5 h-5 relative z-10 rotate-45" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg className="w-4 h-4 sm:w-5 sm:h-5 relative z-10 rotate-45" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
</svg>
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-700"></div>

366
pages/LGPD.tsx
View file

@ -1,135 +1,269 @@
import React from 'react';
import React, { useState } from 'react';
interface LGPDProps {
onNavigate: (page: string) => void;
}
interface Section {
id: number;
title: string;
icon: string;
content: React.ReactNode;
}
export const LGPD: React.FC<LGPDProps> = ({ onNavigate }) => {
return (
<div className="min-h-screen bg-white py-20 px-8">
<div className="max-w-4xl mx-auto">
<button
onClick={() => onNavigate('home')}
className="mb-8 text-brand-purple hover:underline flex items-center gap-2"
>
← Voltar para Home
</button>
<h1 className="text-4xl font-bold mb-8" style={{ color: '#B9CF33' }}>
LGPD - Lei Geral de Proteção de Dados
</h1>
const [openSection, setOpenSection] = useState<number | null>(null);
<div className="prose prose-lg max-w-none text-gray-700 space-y-6">
<section>
<h2 className="text-2xl font-bold mb-4 text-brand-purple">Nosso Compromisso com a LGPD</h2>
<p>
A Photum Formaturas está totalmente comprometida com a proteção de dados pessoais conforme
estabelecido pela Lei Geral de Proteção de Dados (Lei nº 13.709/2018).
</p>
</section>
<section>
<h2 className="text-2xl font-bold mb-4 text-brand-purple">1. Princípios que Seguimos</h2>
<ul className="list-disc pl-6 space-y-2">
<li><strong>Finalidade:</strong> Coletamos dados apenas para propósitos específicos e legítimos</li>
<li><strong>Adequação:</strong> O tratamento é compatível com as finalidades informadas</li>
<li><strong>Necessidade:</strong> Limitamos a coleta ao mínimo necessário</li>
<li><strong>Transparência:</strong> Informamos claramente sobre o uso dos dados</li>
<li><strong>Segurança:</strong> Adotamos medidas técnicas e administrativas para proteção</li>
<li><strong>Prevenção:</strong> Evitamos danos por meio de boas práticas</li>
</ul>
</section>
<section>
<h2 className="text-2xl font-bold mb-4 text-brand-purple">2. Seus Direitos sob a LGPD</h2>
<p>Como titular de dados, você tem os seguintes direitos:</p>
<ul className="list-disc pl-6 space-y-2">
<li><strong>Confirmação e Acesso:</strong> Saber se tratamos seus dados e acessá-los</li>
<li><strong>Correção:</strong> Corrigir dados incompletos, inexatos ou desatualizados</li>
<li><strong>Anonimização, Bloqueio ou Eliminação:</strong> Solicitar remoção de dados desnecessários</li>
<li><strong>Portabilidade:</strong> Receber seus dados em formato estruturado</li>
<li><strong>Eliminação:</strong> Excluir dados tratados com seu consentimento</li>
<li><strong>Informação:</strong> Saber com quem compartilhamos seus dados</li>
<li><strong>Revogação do Consentimento:</strong> Retirar autorização a qualquer momento</li>
<li><strong>Oposição:</strong> Se opor ao tratamento realizado com base em uma das hipóteses legais</li>
</ul>
</section>
<section>
<h2 className="text-2xl font-bold mb-4 text-brand-purple">3. Tratamento de Dados</h2>
<p>Tratamos dados pessoais nas seguintes situações:</p>
<ul className="list-disc pl-6 space-y-2">
<li>Mediante seu consentimento</li>
<li>Para cumprimento de obrigação legal</li>
<li>Para execução de contrato</li>
<li>Para exercício regular de direitos</li>
<li>Para proteção do crédito</li>
<li>Por legítimo interesse</li>
</ul>
</section>
<section>
<h2 className="text-2xl font-bold mb-4 text-brand-purple">4. Compartilhamento de Dados</h2>
<p>
Seus dados podem ser compartilhados apenas com:
</p>
<ul className="list-disc pl-6 space-y-2">
<li>Prestadores de serviços essenciais (processamento de pagamentos, armazenamento em nuvem)</li>
<li>Autoridades quando exigido por lei</li>
<li>Parceiros comerciais, mediante seu consentimento explícito</li>
</ul>
</section>
<section>
<h2 className="text-2xl font-bold mb-4 text-brand-purple">5. Segurança dos Dados</h2>
<p>Implementamos medidas de segurança como:</p>
<ul className="list-disc pl-6 space-y-2">
<li>Criptografia de dados sensíveis</li>
<li>Controles de acesso rigorosos</li>
<li>Monitoramento constante de segurança</li>
<li>Treinamento de equipe sobre proteção de dados</li>
<li>Backups regulares e seguros</li>
</ul>
</section>
<section>
<h2 className="text-2xl font-bold mb-4 text-brand-purple">6. Retenção de Dados</h2>
<p>
Mantemos seus dados pessoais apenas pelo tempo necessário para cumprir as finalidades
para as quais foram coletados, incluindo requisitos legais, contratuais e de prestação de contas.
</p>
</section>
<section>
<h2 className="text-2xl font-bold mb-4 text-brand-purple">7. Encarregado de Dados (DPO)</h2>
<p>
Para exercer seus direitos ou esclarecer dúvidas sobre o tratamento de dados pessoais,
entre em contato com nosso Encarregado de Proteção de Dados:
</p>
<p className="mt-4">
<strong>E-mail:</strong>{' '}
<a href="mailto:lgpd@photum.com.br" className="text-brand-purple hover:underline">
const sections: Section[] = [
{
id: 1,
title: 'Compromisso com a LGPD',
icon: '<svg className="w-12 h-12" fill="none" stroke="#B9CF33" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" /></svg>',
content: (
<p>
A Photum Formaturas está comprometida em proteger seus dados pessoais e cumprir todas as
disposições da Lei Geral de Proteção de Dados (Lei nº 13.709/2018). Esta página explica
como tratamos seus dados em conformidade com a LGPD.
</p>
)
},
{
id: 2,
title: 'Princípios da LGPD',
icon: '<svg className="w-12 h-12" fill="none" stroke="#B9CF33" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2m0-2v2m0 16V5m0 16H9m3 0h3" /></svg>',
content: (
<>
<p className="mb-4">Nosso tratamento de dados segue os seguintes princípios:</p>
<ul className="list-none space-y-2">
<li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> <strong>Finalidade:</strong> Tratamento para propósitos específicos e legítimos</li>
<li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> <strong>Adequação:</strong> Compatível com as finalidades informadas</li>
<li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> <strong>Necessidade:</strong> Limitado ao mínimo necessário</li>
<li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> <strong>Transparência:</strong> Informações claras e acessíveis</li>
<li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> <strong>Segurança:</strong> Medidas técnicas e administrativas adequadas</li>
</ul>
</>
)
},
{
id: 3,
title: 'Seus Direitos como Titular',
icon: '<svg className="w-12 h-12" fill="none" stroke="#B9CF33" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" /></svg>',
content: (
<>
<p className="mb-4">A LGPD garante diversos direitos sobre seus dados pessoais:</p>
<ul className="list-none space-y-2">
<li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Confirmação da existência de tratamento</li>
<li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Acesso aos dados</li>
<li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Correção de dados incompletos ou desatualizados</li>
<li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Anonimização, bloqueio ou eliminação de dados desnecessários</li>
<li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Portabilidade dos dados a outro fornecedor</li>
<li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Eliminação dos dados tratados com seu consentimento</li>
<li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Informação sobre o compartilhamento de dados</li>
<li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Revogação do consentimento</li>
</ul>
</>
)
},
{
id: 4,
title: 'Bases Legais para Tratamento',
icon: '<svg className="w-12 h-12" fill="none" stroke="#B9CF33" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" /></svg>',
content: (
<>
<p className="mb-4">Tratamos seus dados com base nas seguintes hipóteses legais:</p>
<ul className="list-none space-y-2">
<li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Consentimento do titular</li>
<li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Cumprimento de obrigação legal ou regulatória</li>
<li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Execução de contrato ou procedimentos preliminares</li>
<li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Exercício regular de direitos</li>
<li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Legítimos interesses do controlador</li>
</ul>
</>
)
},
{
id: 5,
title: 'Compartilhamento de Dados',
icon: '<svg className="w-12 h-12" fill="none" stroke="#B9CF33" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" /></svg>',
content: (
<>
<p className="mb-4">Seus dados podem ser compartilhados com:</p>
<ul className="list-none space-y-2">
<li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Prestadores de serviços de pagamento</li>
<li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Provedores de infraestrutura tecnológica</li>
<li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Autoridades governamentais (quando exigido por lei)</li>
<li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Parceiros comerciais (com seu consentimento)</li>
</ul>
<p className="mt-4">
Todos os terceiros são obrigados a manter a confidencialidade e segurança de seus dados.
</p>
</>
)
},
{
id: 6,
title: 'Segurança dos Dados',
icon: '<svg className="w-12 h-12" fill="none" stroke="#B9CF33" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" /></svg>',
content: (
<>
<p className="mb-4">Implementamos medidas de segurança técnicas e organizacionais:</p>
<ul className="list-none space-y-2">
<li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Criptografia de dados sensíveis</li>
<li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Controles de acesso rigorosos</li>
<li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Monitoramento contínuo de segurança</li>
<li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Treinamento regular da equipe</li>
<li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Plano de resposta a incidentes</li>
</ul>
</>
)
},
{
id: 7,
title: 'Retenção de Dados',
icon: '<svg className="w-12 h-12" fill="none" stroke="#B9CF33" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>',
content: (
<p>
Mantemos seus dados pessoais apenas pelo tempo necessário para cumprir as finalidades para
as quais foram coletados, incluindo requisitos legais, contratuais, de resolução de disputas
e aplicação de nossos acordos. Após esse período, os dados são eliminados ou anonimizados de
forma segura.
</p>
)
},
{
id: 8,
title: 'Encarregado de Proteção de Dados (DPO)',
icon: '<svg className="w-12 h-12" fill="none" stroke="#B9CF33" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /></svg>',
content: (
<>
<p className="mb-4">
Nosso Encarregado de Proteção de Dados está disponível para esclarecer dúvidas e receber
solicitações relacionadas aos seus direitos:
</p>
<div className="bg-white p-4 rounded-lg border-l-4 mt-4" style={{borderColor: '#B9CF33'}}>
<p className="font-semibold text-gray-800 mb-2">Contato do DPO:</p>
<p className="text-gray-700">
<a href="mailto:lgpd@photum.com.br" className="font-semibold hover:opacity-80 transition-opacity" style={{color: '#B9CF33'}}>
lgpd@photum.com.br
</a>
</p>
<p>
<strong>Telefone:</strong> (19) 3405-5024
</div>
</>
)
},
{
id: 9,
title: 'Autoridade Nacional de Proteção de Dados (ANPD)',
icon: '<svg className="w-12 h-12" fill="none" stroke="#492E61" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" /></svg>',
content: (
<>
<p className="mb-4">
Você tem o direito de apresentar reclamação à Autoridade Nacional de Proteção de Dados:
</p>
<div className="bg-white p-4 rounded-lg border-l-4" style={{borderColor: '#492E61'}}>
<p className="font-semibold text-gray-800 mb-2">ANPD:</p>
<p className="text-gray-700">
Website:{' '}
<a href="https://www.gov.br/anpd" target="_blank" rel="noopener noreferrer" className="hover:opacity-80 transition-opacity" style={{color: '#492E61'}}>
www.gov.br/anpd
</a>
</p>
</section>
</div>
</>
)
}
];
<section>
<h2 className="text-2xl font-bold mb-4 text-brand-purple">8. Autoridade Nacional</h2>
<p>
Você também pode entrar em contato com a Autoridade Nacional de Proteção de Dados (ANPD)
para questões relacionadas à proteção de seus dados pessoais.
</p>
</section>
return (
<div className="min-h-screen bg-gradient-to-br from-gray-50 to-white py-12 sm:py-20 px-4 sm:px-8">
<div className="max-w-6xl mx-auto">
<button
onClick={() => onNavigate('home')}
className="mb-8 flex items-center gap-2 text-gray-600 hover:text-[#492E61] transition-all duration-300 group"
>
<svg className="w-5 h-5 transform group-hover:-translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
</svg>
Voltar para Home
</button>
<div className="text-center mb-12 fade-in">
<h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold mb-4" style={{ color: '#B9CF33' }}>
Lei Geral de Proteção de Dados
</h1>
<p className="text-gray-600 text-lg">Transparência e segurança no tratamento dos seus dados</p>
</div>
<p className="text-sm text-gray-500 mt-8">
Última atualização: Dezembro de 2025
<div className="grid gap-4 sm:gap-6">
{sections.map((section, index) => (
<div
key={section.id}
className="bg-white rounded-2xl shadow-lg overflow-hidden transform transition-all duration-500 hover:shadow-2xl"
style={{
animation: `fadeInUp 0.6s ease-out ${index * 0.1}s both`
}}
>
<button
onClick={() => setOpenSection(openSection === section.id ? null : section.id)}
className="w-full px-6 sm:px-8 py-6 flex items-center justify-between text-left bg-gradient-to-r from-white to-gray-50 hover:from-gray-50 hover:to-gray-100 transition-all duration-300"
>
<div className="flex items-center gap-4 flex-1">
<div className="transform transition-transform duration-300 hover:scale-110" dangerouslySetInnerHTML={{ __html: section.icon }} />
<h2 className="text-xl sm:text-2xl font-bold text-gray-800">
{section.title}
</h2>
</div>
<svg
className={`w-6 h-6 transition-transform duration-300 ${
openSection === section.id ? 'rotate-180' : ''
}`}
style={{ color: '#492E61' }}
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
</svg>
</button>
<div
className={`overflow-hidden transition-all duration-500 ${
openSection === section.id ? 'max-h-[1000px] opacity-100' : 'max-h-0 opacity-0'
}`}
>
<div className="px-6 sm:px-8 py-6 bg-gradient-to-br from-gray-50 to-white border-t border-gray-100">
<div className="text-gray-700 leading-relaxed">
{section.content}
</div>
</div>
</div>
</div>
))}
</div>
<div className="mt-12 text-center p-6 bg-white rounded-2xl shadow-lg">
<p className="text-gray-600">
<span className="font-semibold" style={{ color: '#492E61' }}>Última atualização:</span> Janeiro de 2025
</p>
</div>
</div>
<style>{`
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.fade-in {
animation: fadeInUp 0.8s ease-out;
}
`}</style>
</div>
);
};

75
pages/Login.tsx
View file

@ -5,7 +5,11 @@ import { Button } from '../components/Button';
import { Input } from '../components/Input';
import { UserRole } from '../types';
export const Login: React.FC = () => {
interface LoginProps {
onNavigate?: (page: string) => void;
}
export const Login: React.FC<LoginProps> = ({ onNavigate }) => {
const { login, availableUsers } = useAuth();
const [email, setEmail] = useState('');
const [isLoading, setIsLoading] = useState(false);
@ -38,9 +42,9 @@ export const Login: React.FC = () => {
}
return (
<div className="min-h-screen flex bg-white">
<div className="min-h-screen flex flex-col lg:flex-row bg-white">
{/* Left Side - Image */}
<div className="hidden lg:block lg:w-1/2 relative overflow-hidden">
<div className="hidden lg:flex lg:w-1/2 relative overflow-hidden">
<img
src="https://images.unsplash.com/photo-1519741497674-611481863552?ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80"
alt="Photum Login"
@ -55,16 +59,16 @@ export const Login: React.FC = () => {
</div>
{/* Right Side - Form */}
<div className="w-full lg:w-1/2 flex items-center justify-center p-8 lg:p-16">
<div className="max-w-md w-full space-y-8 fade-in">
<div className="w-full lg:w-1/2 flex items-center justify-center p-4 sm:p-6 md:p-8 lg:p-16">
<div className="max-w-md w-full space-y-6 sm:space-y-8 fade-in">
<div className="text-center lg:text-left">
<span className="font-bold tracking-widest uppercase text-sm" style={{color: '#B9CF33'}}>Bem-vindo de volta</span>
<h2 className="mt-2 text-3xl font-serif font-bold text-gray-900">Acesse sua conta</h2>
<p className="mt-2 text-sm text-gray-600">
<span className="font-bold tracking-widest uppercase text-xs sm:text-sm" style={{color: '#B9CF33'}}>Bem-vindo de volta</span>
<h2 className="mt-2 text-2xl sm:text-3xl font-serif font-bold text-gray-900">Acesse sua conta</h2>
<p className="mt-2 text-xs sm:text-sm text-gray-600">
Não tem uma conta?{' '}
<button
type="button"
onClick={() => window.location.hash = '#register'}
onClick={() => onNavigate?.('register')}
className="font-medium hover:opacity-80 transition-opacity"
style={{color: '#B9CF33'}}
>
@ -73,10 +77,10 @@ export const Login: React.FC = () => {
</p>
</div>
<form className="mt-8 space-y-6" onSubmit={handleLogin}>
<div className="space-y-4">
<form className="mt-6 sm:mt-8 space-y-4 sm:space-y-6" onSubmit={handleLogin}>
<div className="space-y-3 sm:space-y-4">
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">
<label className="block text-xs sm:text-sm font-medium text-gray-700 mb-1.5 sm:mb-2">
E-MAIL CORPORATIVO OU PESSOAL
</label>
<input
@ -85,7 +89,7 @@ export const Login: React.FC = () => {
placeholder="nome@exemplo.com"
value={email}
onChange={(e) => setEmail(e.target.value)}
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:border-transparent transition-all"
className="w-full px-3 sm:px-4 py-2.5 sm:py-3 text-sm sm:text-base border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:border-transparent transition-all"
style={{focusRing: '2px solid #B9CF33'}}
onFocus={(e) => e.target.style.borderColor = '#B9CF33'}
onBlur={(e) => e.target.style.borderColor = '#d1d5db'}
@ -93,7 +97,7 @@ export const Login: React.FC = () => {
{error && <span className="text-xs text-red-500 mt-1 block">{error}</span>}
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">
<label className="block text-xs sm:text-sm font-medium text-gray-700 mb-1.5 sm:mb-2">
SENHA
</label>
<div className="relative">
@ -101,7 +105,7 @@ export const Login: React.FC = () => {
type="password"
placeholder="••••••••"
readOnly
className="w-full px-4 py-3 border border-gray-300 rounded-lg bg-gray-50 cursor-not-allowed"
className="w-full px-3 sm:px-4 py-2.5 sm:py-3 text-sm sm:text-base border border-gray-300 rounded-lg bg-gray-50 cursor-not-allowed"
/>
<button type="button" className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400">
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@ -116,7 +120,7 @@ export const Login: React.FC = () => {
<button
type="submit"
disabled={isLoading}
className="w-full px-10 py-4 text-white font-bold text-lg rounded-lg transition-all duration-300 transform hover:scale-[1.02] hover:shadow-xl active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed"
className="w-full px-6 sm:px-10 py-3 sm:py-4 text-white font-bold text-base sm:text-lg rounded-lg transition-all duration-300 transform hover:scale-[1.02] hover:shadow-xl active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed"
style={{backgroundColor: '#1a1a1a'}}
>
{isLoading ? 'Entrando...' : 'Entrar no Sistema'}
@ -124,14 +128,14 @@ export const Login: React.FC = () => {
</form>
{/* Demo Users Quick Select */}
<div className="mt-10 pt-10 border-t border-gray-200">
<p className="text-xs uppercase tracking-widest mb-4 text-center text-gray-400">Usuários de Demonstração (Clique para preencher)</p>
<div className="grid grid-cols-2 gap-3">
<div className="mt-6 sm:mt-10 pt-6 sm:pt-10 border-t border-gray-200">
<p className="text-[10px] sm:text-xs uppercase tracking-widest mb-3 sm:mb-4 text-center text-gray-400">Usuários de Demonstração (Clique para preencher)</p>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-2 sm:gap-3">
{availableUsers.map(user => (
<button
key={user.id}
onClick={() => fillCredentials(user.email)}
className="flex flex-col items-start p-4 border-2 rounded-lg hover:bg-gray-50 transition-all duration-300 text-left group transform hover:scale-[1.02]"
className="flex flex-col items-start p-3 sm:p-4 border-2 rounded-lg hover:bg-gray-50 transition-all duration-300 text-left group transform hover:scale-[1.02]"
style={{borderColor: '#e5e7eb'}}
onMouseEnter={(e) => {
e.currentTarget.style.borderColor = '#B9CF33';
@ -142,34 +146,9 @@ export const Login: React.FC = () => {
e.currentTarget.style.boxShadow = 'none';
}}
>
<span className="text-sm font-bold text-gray-900">{user.name}</span>
<span className="text-xs uppercase tracking-wide mt-1 font-semibold" style={{color: '#B9CF33'}}>{getRoleLabel(user.role)}</span>
<span className="text-xs text-gray-500 mt-1 truncate w-full">{user.email}</span>
</button>
))}
</div>
</div>yle={{backgroundColor: '#1a1a1a'}}
>
{isLoading ? 'Entrando...' : 'Entrar no Sistema'}
</button>
</form>
{/* Demo Users Quick Select */}
<div className="mt-10 pt-10 border-t border-gray-100">
<p className="text-xs text-gray-400 uppercase tracking-widest mb-4 text-center">Usuários de Demonstração (Clique para preencher)</p>
<div className="grid grid-cols-2 gap-3">
{availableUsers.map(user => (
<button
key={user.id}
onClick={() => fillCredentials(user.email)}
className="flex flex-col items-start p-3 border border-gray-200 rounded-lg hover:bg-gray-50 transition-all text-left group"
style={{borderColor: '#e5e7eb'}}
onMouseEnter={(e) => e.currentTarget.style.borderColor = '#B9CF33'}
onMouseLeave={(e) => e.currentTarget.style.borderColor = '#e5e7eb'}
>
<span className="text-xs font-bold text-gray-700 group-hover:text-brand-black">{user.name}</span>
<span className="text-[10px] uppercase tracking-wide mt-1" style={{color: '#B9CF33'}}>{getRoleLabel(user.role)}</span>
<span className="text-[10px] text-gray-400 mt-0.5 truncate w-full">{user.email}</span>
<span className="text-xs sm:text-sm font-bold text-gray-900">{user.name}</span>
<span className="text-[10px] sm:text-xs uppercase tracking-wide mt-0.5 sm:mt-1 font-semibold" style={{color: '#B9CF33'}}>{getRoleLabel(user.role)}</span>
<span className="text-[10px] sm:text-xs text-gray-500 mt-0.5 sm:mt-1 truncate w-full">{user.email}</span>
</button>
))}
</div>

256
pages/PrivacyPolicy.tsx
View file

@ -1,95 +1,201 @@
import React from 'react';
import React, { useState } from 'react';
interface PrivacyPolicyProps {
onNavigate: (page: string) => void;
}
interface Section {
id: number;
title: string;
icon: string;
content: React.ReactNode;
}
export const PrivacyPolicy: React.FC<PrivacyPolicyProps> = ({ onNavigate }) => {
const [openSection, setOpenSection] = useState<number | null>(null);
const sections: Section[] = [
{
id: 1,
title: 'Informações que Coletamos',
icon: '<svg className="w-12 h-12" fill="none" stroke="#B9CF33" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /></svg>',
content: (
<>
<p className="mb-4">
A Photum Formaturas coleta informações que você nos fornece diretamente ao criar uma conta,
solicitar serviços ou entrar em contato conosco. Isso pode incluir:
</p>
<ul className="list-none space-y-2">
<li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Nome completo</li>
<li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Endereço de e-mail</li>
<li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Número de telefone</li>
<li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Informações sobre o evento (formatura)</li>
<li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Dados de pagamento (processados de forma segura)</li>
</ul>
</>
)
},
{
id: 2,
title: 'Como Usamos suas Informações',
icon: '<svg className="w-12 h-12" fill="none" stroke="#B9CF33" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" /></svg>',
content: (
<>
<p className="mb-4">Utilizamos as informações coletadas para:</p>
<ul className="list-none space-y-2">
<li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Fornecer e gerenciar nossos serviços de fotografia</li>
<li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Processar pagamentos e enviar confirmações</li>
<li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Comunicar sobre seus eventos e serviços contratados</li>
<li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Melhorar nossos serviços e experiência do cliente</li>
<li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Enviar atualizações e informações relevantes</li>
</ul>
</>
)
},
{
id: 3,
title: 'Proteção de Dados',
icon: '<svg className="w-12 h-12" fill="none" stroke="#B9CF33" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" /></svg>',
content: (
<p>
Implementamos medidas de segurança técnicas e organizacionais para proteger suas informações
pessoais contra acesso não autorizado, alteração, divulgação ou destruição.
</p>
)
},
{
id: 4,
title: 'Compartilhamento de Informações',
icon: '<svg className="w-12 h-12" fill="none" stroke="#B9CF33" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" /></svg>',
content: (
<p>
Não vendemos, alugamos ou compartilhamos suas informações pessoais com terceiros, exceto
quando necessário para fornecer nossos serviços ou quando exigido por lei.
</p>
)
},
{
id: 5,
title: 'Seus Direitos',
icon: '<svg className="w-12 h-12" fill="none" stroke="#B9CF33" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2m0-2v2m0 16V5m0 16H9m3 0h3" /></svg>',
content: (
<>
<p className="mb-4">Você tem o direito de:</p>
<ul className="list-none space-y-2">
<li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Acessar suas informações pessoais</li>
<li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Corrigir dados incorretos</li>
<li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Solicitar a exclusão de seus dados</li>
<li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Retirar seu consentimento a qualquer momento</li>
<li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Solicitar a portabilidade de seus dados</li>
</ul>
</>
)
},
{
id: 6,
title: 'Contato',
icon: '<svg className="w-12 h-12" fill="none" stroke="#B9CF33" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /></svg>',
content: (
<p>
Para questões sobre esta Política de Privacidade, entre em contato conosco em:{' '}
<a href="mailto:contato@photum.com.br" className="font-semibold hover:opacity-80 transition-opacity" style={{color: '#B9CF33'}}>
contato@photum.com.br
</a>
</p>
)
}
];
return (
<div className="min-h-screen bg-white py-20 px-8">
<div className="max-w-4xl mx-auto">
<div className="min-h-screen bg-gradient-to-br from-gray-50 to-white py-12 sm:py-20 px-4 sm:px-8">
<div className="max-w-6xl mx-auto">
<button
onClick={() => onNavigate('home')}
className="mb-8 text-brand-purple hover:underline flex items-center gap-2"
className="mb-8 flex items-center gap-2 text-gray-600 hover:text-[#492E61] transition-all duration-300 group"
>
← Voltar para Home
<svg className="w-5 h-5 transform group-hover:-translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
</svg>
Voltar para Home
</button>
<h1 className="text-4xl font-bold mb-8" style={{ color: '#B9CF33' }}>
Política de Privacidade
</h1>
<div className="text-center mb-12 fade-in">
<h1 className="text-4xl sm:text-5xl md:text-6xl font-bold mb-4" style={{ color: '#B9CF33' }}>
Política de Privacidade
</h1>
<p className="text-gray-600 text-lg">Sua privacidade é nossa prioridade</p>
</div>
<div className="prose prose-lg max-w-none text-gray-700 space-y-6">
<section>
<h2 className="text-2xl font-bold mb-4 text-brand-purple">1. Informações que Coletamos</h2>
<p>
A Photum Formaturas coleta informações que você nos fornece diretamente ao criar uma conta,
solicitar serviços ou entrar em contato conosco. Isso pode incluir:
</p>
<ul className="list-disc pl-6 space-y-2">
<li>Nome completo</li>
<li>Endereço de e-mail</li>
<li>Número de telefone</li>
<li>Informações sobre o evento (formatura)</li>
<li>Dados de pagamento (processados de forma segura)</li>
</ul>
</section>
<div className="grid gap-4 sm:gap-6">
{sections.map((section, index) => (
<div
key={section.id}
className="bg-white rounded-2xl shadow-lg overflow-hidden transform transition-all duration-500 hover:shadow-2xl"
style={{
animation: `fadeInUp 0.6s ease-out ${index * 0.1}s both`
}}
>
<button
onClick={() => setOpenSection(openSection === section.id ? null : section.id)}
className="w-full px-6 sm:px-8 py-6 flex items-center justify-between text-left bg-gradient-to-r from-white to-gray-50 hover:from-gray-50 hover:to-gray-100 transition-all duration-300"
>
<div className="flex items-center gap-4 flex-1">
<div className="transform transition-transform duration-300 hover:scale-110" dangerouslySetInnerHTML={{ __html: section.icon }} />
<h2 className="text-xl sm:text-2xl font-bold text-gray-800">
{section.title}
</h2>
</div>
<svg
className={`w-6 h-6 transition-transform duration-300 ${
openSection === section.id ? 'rotate-180' : ''
}`}
style={{ color: '#492E61' }}
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
</svg>
</button>
<div
className={`overflow-hidden transition-all duration-500 ${
openSection === section.id ? 'max-h-[1000px] opacity-100' : 'max-h-0 opacity-0'
}`}
>
<div className="px-6 sm:px-8 py-6 bg-gradient-to-br from-gray-50 to-white border-t border-gray-100">
<div className="text-gray-700 leading-relaxed">
{section.content}
</div>
</div>
</div>
</div>
))}
</div>
<section>
<h2 className="text-2xl font-bold mb-4 text-brand-purple">2. Como Usamos suas Informações</h2>
<p>Utilizamos as informações coletadas para:</p>
<ul className="list-disc pl-6 space-y-2">
<li>Fornecer e gerenciar nossos serviços de fotografia</li>
<li>Processar pagamentos e enviar confirmações</li>
<li>Comunicar sobre seus eventos e serviços contratados</li>
<li>Melhorar nossos serviços e experiência do cliente</li>
<li>Enviar atualizações e informações relevantes</li>
</ul>
</section>
<section>
<h2 className="text-2xl font-bold mb-4 text-brand-purple">3. Proteção de Dados</h2>
<p>
Implementamos medidas de segurança técnicas e organizacionais para proteger suas informações
pessoais contra acesso não autorizado, alteração, divulgação ou destruição.
</p>
</section>
<section>
<h2 className="text-2xl font-bold mb-4 text-brand-purple">4. Compartilhamento de Informações</h2>
<p>
Não vendemos, alugamos ou compartilhamos suas informações pessoais com terceiros, exceto
quando necessário para fornecer nossos serviços ou quando exigido por lei.
</p>
</section>
<section>
<h2 className="text-2xl font-bold mb-4 text-brand-purple">5. Seus Direitos</h2>
<p>Você tem o direito de:</p>
<ul className="list-disc pl-6 space-y-2">
<li>Acessar suas informações pessoais</li>
<li>Corrigir dados incorretos</li>
<li>Solicitar a exclusão de seus dados</li>
<li>Retirar seu consentimento a qualquer momento</li>
<li>Solicitar a portabilidade de seus dados</li>
</ul>
</section>
<section>
<h2 className="text-2xl font-bold mb-4 text-brand-purple">6. Contato</h2>
<p>
Para questões sobre esta Política de Privacidade, entre em contato conosco em:{' '}
<a href="mailto:contato@photum.com.br" className="text-brand-purple hover:underline">
contato@photum.com.br
</a>
</p>
</section>
<p className="text-sm text-gray-500 mt-8">
Última atualização: Dezembro de 2025
<div className="mt-12 text-center p-6 bg-white rounded-2xl shadow-lg">
<p className="text-gray-600">
<span className="font-semibold" style={{ color: '#492E61' }}>Última atualização:</span> Janeiro de 2025
</p>
</div>
</div>
<style>{`
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.fade-in {
animation: fadeInUp 0.8s ease-out;
}
`}</style>
</div>
);
};

50
pages/Register.tsx
View file

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

288
pages/TermsOfUse.tsx
View file

@ -1,108 +1,220 @@
import React from 'react';
import React, { useState } from 'react';
interface TermsOfUseProps {
onNavigate: (page: string) => void;
}
interface Section {
id: number;
title: string;
icon: string;
content: React.ReactNode;
}
export const TermsOfUse: React.FC<TermsOfUseProps> = ({ onNavigate }) => {
const [openSection, setOpenSection] = useState<number | null>(null);
const sections: Section[] = [
{
id: 1,
title: 'Aceitação dos Termos',
icon: '<svg className="w-12 h-12" fill="none" stroke="#B9CF33" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>',
content: (
<p>
Ao acessar e usar os serviços da Photum Formaturas, você concorda em cumprir e estar vinculado
a estes Termos de Uso. Se você não concordar com algum destes termos, não utilize nossos serviços.
</p>
)
},
{
id: 2,
title: 'Descrição dos Serviços',
icon: '<svg className="w-12 h-12" fill="none" stroke="#B9CF33" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" /><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" /></svg>',
content: (
<>
<p className="mb-4">A Photum Formaturas oferece:</p>
<ul className="list-none space-y-2">
<li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Serviços de fotografia para formaturas</li>
<li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Álbuns digitais e físicos</li>
<li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Galeria online para visualização e download de fotos</li>
<li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Serviços personalizados de acordo com as necessidades do cliente</li>
</ul>
</>
)
},
{
id: 3,
title: 'Conta de Usuário',
icon: '<svg className="w-12 h-12" fill="none" stroke="#B9CF33" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" /></svg>',
content: (
<>
<p className="mb-4">Para acessar alguns recursos, você precisará criar uma conta. Você concorda em:</p>
<ul className="list-none space-y-2">
<li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Fornecer informações precisas e atualizadas</li>
<li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Manter a segurança de sua senha</li>
<li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Notificar-nos sobre qualquer uso não autorizado de sua conta</li>
<li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Ser responsável por todas as atividades em sua conta</li>
</ul>
</>
)
},
{
id: 4,
title: 'Direitos de Propriedade Intelectual',
icon: '<svg className="w-12 h-12" fill="none" stroke="#492E61" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" strokeWidth={2} /><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 9a3 3 0 00-3-3 3 3 0 00-3 3m0 6a3 3 0 003 3 3 3 0 003-3" /></svg>',
content: (
<p>
Todas as fotografias e conteúdos produzidos pela Photum Formaturas são protegidos por direitos autorais.
Os clientes recebem uma licença para uso pessoal das fotos adquiridas, mas a reprodução comercial
requer autorização prévia.
</p>
)
},
{
id: 5,
title: 'Pagamentos e Reembolsos',
icon: '<svg className="w-12 h-12" fill="none" stroke="#B9CF33" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" /></svg>',
content: (
<>
<p className="mb-4">Nossos termos de pagamento incluem:</p>
<ul className="list-none space-y-2">
<li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Pagamento parcial na reserva do serviço</li>
<li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Saldo remanescente até a data do evento</li>
<li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Reembolsos disponíveis conforme política específica</li>
<li className="flex items-center gap-2"><span className="text-[#B9CF33]">✓</span> Cancelamentos devem ser notificados com antecedência mínima</li>
</ul>
</>
)
},
{
id: 6,
title: 'Responsabilidades e Limitações',
icon: '<svg className="w-12 h-12" fill="none" stroke="#FFA500" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>',
content: (
<p>
A Photum Formaturas se esforça para fornecer serviços de alta qualidade, mas não se responsabiliza
por circunstâncias além de nosso controle, como condições climáticas adversas ou problemas técnicos
no local do evento.
</p>
)
},
{
id: 7,
title: 'Modificações nos Termos',
icon: '<svg className="w-12 h-12" fill="none" stroke="#B9CF33" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" /></svg>',
content: (
<p>
Reservamo-nos o direito de modificar estes Termos de Uso a qualquer momento. Alterações significativas
serão notificadas aos usuários. O uso continuado dos serviços após mudanças constitui aceitação dos
novos termos.
</p>
)
},
{
id: 8,
title: 'Contato',
icon: '<svg className="w-12 h-12" fill="none" stroke="#B9CF33" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" /></svg>',
content: (
<p>
Para dúvidas sobre estes Termos de Uso, entre em contato conosco em:{' '}
<a href="mailto:contato@photum.com.br" className="font-semibold hover:opacity-80 transition-opacity" style={{color: '#B9CF33'}}>
contato@photum.com.br
</a>
</p>
)
}
];
return (
<div className="min-h-screen bg-white py-20 px-8">
<div className="max-w-4xl mx-auto">
<div className="min-h-screen bg-gradient-to-br from-gray-50 to-white py-12 sm:py-20 px-4 sm:px-8">
<div className="max-w-6xl mx-auto">
<button
onClick={() => onNavigate('home')}
className="mb-8 text-brand-purple hover:underline flex items-center gap-2"
className="mb-8 flex items-center gap-2 text-gray-600 hover:text-[#492E61] transition-all duration-300 group"
>
← Voltar para Home
<svg className="w-5 h-5 transform group-hover:-translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
</svg>
Voltar para Home
</button>
<h1 className="text-4xl font-bold mb-8" style={{ color: '#B9CF33' }}>
Termos de Uso
</h1>
<div className="text-center mb-12 fade-in">
<h1 className="text-4xl sm:text-5xl md:text-6xl font-bold mb-4" style={{ color: '#B9CF33' }}>
Termos de Uso
</h1>
<p className="text-gray-600 text-lg">Condições para uso de nossos serviços</p>
</div>
<div className="prose prose-lg max-w-none text-gray-700 space-y-6">
<section>
<h2 className="text-2xl font-bold mb-4 text-brand-purple">1. Aceitação dos Termos</h2>
<p>
Ao acessar e usar os serviços da Photum Formaturas, você concorda em cumprir e estar
vinculado a estes Termos de Uso. Se você não concordar com algum destes termos,
não utilize nossos serviços.
</p>
</section>
<div className="grid gap-4 sm:gap-6">
{sections.map((section, index) => (
<div
key={section.id}
className="bg-white rounded-2xl shadow-lg overflow-hidden transform transition-all duration-500 hover:shadow-2xl"
style={{
animation: `fadeInUp 0.6s ease-out ${index * 0.1}s both`
}}
>
<button
onClick={() => setOpenSection(openSection === section.id ? null : section.id)}
className="w-full px-6 sm:px-8 py-6 flex items-center justify-between text-left bg-gradient-to-r from-white to-gray-50 hover:from-gray-50 hover:to-gray-100 transition-all duration-300"
>
<div className="flex items-center gap-4 flex-1">
<div className="transform transition-transform duration-300 hover:scale-110" dangerouslySetInnerHTML={{ __html: section.icon }} />
<h2 className="text-xl sm:text-2xl font-bold text-gray-800">
{section.title}
</h2>
</div>
<svg
className={`w-6 h-6 transition-transform duration-300 ${
openSection === section.id ? 'rotate-180' : ''
}`}
style={{ color: '#492E61' }}
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
</svg>
</button>
<div
className={`overflow-hidden transition-all duration-500 ${
openSection === section.id ? 'max-h-[1000px] opacity-100' : 'max-h-0 opacity-0'
}`}
>
<div className="px-6 sm:px-8 py-6 bg-gradient-to-br from-gray-50 to-white border-t border-gray-100">
<div className="text-gray-700 leading-relaxed">
{section.content}
</div>
</div>
</div>
</div>
))}
</div>
<section>
<h2 className="text-2xl font-bold mb-4 text-brand-purple">2. Serviços Oferecidos</h2>
<p>
A Photum Formaturas oferece serviços de fotografia profissional, gestão de eventos de formatura,
criação de álbuns personalizados e plataforma digital para gerenciamento de fotos.
</p>
</section>
<section>
<h2 className="text-2xl font-bold mb-4 text-brand-purple">3. Cadastro e Conta</h2>
<ul className="list-disc pl-6 space-y-2">
<li>Você deve fornecer informações precisas e completas ao criar uma conta</li>
<li>Você é responsável por manter a confidencialidade de sua senha</li>
<li>Você deve notificar imediatamente sobre qualquer uso não autorizado de sua conta</li>
<li>Contas são pessoais e intransferíveis</li>
</ul>
</section>
<section>
<h2 className="text-2xl font-bold mb-4 text-brand-purple">4. Direitos Autorais e Uso de Imagens</h2>
<p>
Todas as fotografias produzidas pela Photum Formaturas são protegidas por direitos autorais.
Os clientes recebem licença de uso pessoal e não comercial das imagens adquiridas.
</p>
<ul className="list-disc pl-6 space-y-2 mt-4">
<li>As imagens não podem ser usadas para fins comerciais sem autorização</li>
<li>A Photum Formaturas pode usar as imagens em seu portfólio e materiais promocionais</li>
<li>É proibida a reprodução não autorizada das fotografias</li>
</ul>
</section>
<section>
<h2 className="text-2xl font-bold mb-4 text-brand-purple">5. Pagamentos e Cancelamentos</h2>
<p>
Os valores dos serviços são estabelecidos em contrato. Cancelamentos devem seguir as
políticas específicas acordadas no momento da contratação.
</p>
</section>
<section>
<h2 className="text-2xl font-bold mb-4 text-brand-purple">6. Limitação de Responsabilidade</h2>
<p>
A Photum Formaturas não se responsabiliza por:
</p>
<ul className="list-disc pl-6 space-y-2">
<li>Problemas técnicos causados por terceiros</li>
<li>Perdas indiretas ou consequenciais</li>
<li>Eventos fora de nosso controle (caso fortuito ou força maior)</li>
</ul>
</section>
<section>
<h2 className="text-2xl font-bold mb-4 text-brand-purple">7. Modificações dos Termos</h2>
<p>
Reservamos o direito de modificar estes termos a qualquer momento. As alterações entrarão
em vigor imediatamente após sua publicação no site.
</p>
</section>
<section>
<h2 className="text-2xl font-bold mb-4 text-brand-purple">8. Contato</h2>
<p>
Para questões sobre estes Termos de Uso, entre em contato:{' '}
<a href="mailto:contato@photum.com.br" className="text-brand-purple hover:underline">
contato@photum.com.br
</a>
</p>
</section>
<p className="text-sm text-gray-500 mt-8">
Última atualização: Dezembro de 2025
<div className="mt-12 text-center p-6 bg-white rounded-2xl shadow-lg">
<p className="text-gray-600">
<span className="font-semibold" style={{ color: '#492E61' }}>Última atualização:</span> Janeiro de 2025
</p>
</div>
</div>
<style>{`
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.fade-in {
animation: fadeInUp 0.8s ease-out;
}
`}</style>
</div>
);
};