201 lines
9.7 KiB
TypeScript
201 lines
9.7 KiB
TypeScript
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-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>
|
|
</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>
|
|
);
|
|
};
|