220 lines
11 KiB
TypeScript
220 lines
11 KiB
TypeScript
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-gradient-to-br from-gray-50 to-white py-12 sm:py-20 px-4 sm:px-8">
|
|
<div className="max-w-6xl mx-auto">
|
|
<button
|
|
onClick={() => onNavigate('home')}
|
|
className="mb-8 flex items-center gap-2 text-gray-600 hover:text-[#492E61] transition-all duration-300 group"
|
|
>
|
|
<svg className="w-5 h-5 transform group-hover:-translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
|
|
</svg>
|
|
Voltar para Home
|
|
</button>
|
|
|
|
<div className="text-center mb-12 fade-in">
|
|
<h1 className="text-4xl sm:text-5xl md:text-6xl font-bold mb-4" style={{ color: '#B9CF33' }}>
|
|
Termos de Uso
|
|
</h1>
|
|
<p className="text-gray-600 text-lg">Condições para uso de nossos serviços</p>
|
|
</div>
|
|
|
|
<div className="grid gap-4 sm:gap-6">
|
|
{sections.map((section, index) => (
|
|
<div
|
|
key={section.id}
|
|
className="bg-white rounded-2xl shadow-lg overflow-hidden transform transition-all duration-500 hover:shadow-2xl"
|
|
style={{
|
|
animation: `fadeInUp 0.6s ease-out ${index * 0.1}s both`
|
|
}}
|
|
>
|
|
<button
|
|
onClick={() => setOpenSection(openSection === section.id ? null : section.id)}
|
|
className="w-full px-6 sm:px-8 py-6 flex items-center justify-between text-left bg-gradient-to-r from-white to-gray-50 hover:from-gray-50 hover:to-gray-100 transition-all duration-300"
|
|
>
|
|
<div className="flex items-center gap-4 flex-1">
|
|
<div className="transform transition-transform duration-300 hover:scale-110" dangerouslySetInnerHTML={{ __html: section.icon }} />
|
|
<h2 className="text-xl sm:text-2xl font-bold text-gray-800">
|
|
{section.title}
|
|
</h2>
|
|
</div>
|
|
<svg
|
|
className={`w-6 h-6 transition-transform duration-300 ${
|
|
openSection === section.id ? 'rotate-180' : ''
|
|
}`}
|
|
style={{ color: '#492E61' }}
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
|
</svg>
|
|
</button>
|
|
|
|
<div
|
|
className={`overflow-hidden transition-all duration-500 ${
|
|
openSection === section.id ? 'max-h-[1000px] opacity-100' : 'max-h-0 opacity-0'
|
|
}`}
|
|
>
|
|
<div className="px-6 sm:px-8 py-6 bg-gradient-to-br from-gray-50 to-white border-t border-gray-100">
|
|
<div className="text-gray-700 leading-relaxed">
|
|
{section.content}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="mt-12 text-center p-6 bg-white rounded-2xl shadow-lg">
|
|
<p className="text-gray-600">
|
|
<span className="font-semibold" style={{ color: '#492E61' }}>Última atualização:</span> Janeiro de 2025
|
|
</p>
|
|
</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>
|
|
);
|
|
};
|