269 lines
14 KiB
TypeScript
269 lines
14 KiB
TypeScript
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 }) => {
|
|
const [openSection, setOpenSection] = useState<number | null>(null);
|
|
|
|
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>
|
|
</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>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
];
|
|
|
|
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>
|
|
|
|
<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>
|
|
);
|
|
};
|