170 lines
8.3 KiB
TypeScript
170 lines
8.3 KiB
TypeScript
import SEO from '../../components/SEO';
|
|
import { useEffect, useRef } from 'react';
|
|
import { gsap } from 'gsap';
|
|
import { ScrollTrigger } from 'gsap/ScrollTrigger';
|
|
import { Shield, Check, ArrowRight, Lock, Eye, FileCheck, Fingerprint, Globe, AlertTriangle } from 'lucide-react';
|
|
|
|
gsap.registerPlugin(ScrollTrigger);
|
|
|
|
const beneficios = [
|
|
'Proteção contra ransomware',
|
|
'Compliance LGPD',
|
|
'Monitoramento 24/7',
|
|
];
|
|
|
|
const servicos = [
|
|
{ titulo: 'Firewall gerenciado', descricao: 'Proteção perimetral contínua.', icon: Lock },
|
|
{ titulo: 'Monitoramento de ameaças', descricao: 'Detecção proativa 24/7.', icon: Eye },
|
|
{ titulo: 'Auditoria', descricao: 'Avaliação completa de segurança.', icon: FileCheck },
|
|
{ titulo: 'Gestão de acesso', descricao: 'Controle de identidade.', icon: Fingerprint },
|
|
{ titulo: 'VPN', descricao: 'Acesso remoto criptografado.', icon: Globe },
|
|
];
|
|
|
|
const normas = ['LGPD', 'ISO 27001', 'PCI DSS', 'SOC 2', 'NIST', 'COBIT'];
|
|
|
|
const Seguranca = () => {
|
|
const heroRef = useRef<HTMLDivElement>(null);
|
|
const beneficiosRef = useRef<HTMLDivElement>(null);
|
|
const servicosRef = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
const ctx = gsap.context(() => {
|
|
const heroItems = heroRef.current?.querySelectorAll('.animate-item');
|
|
if (heroItems?.length) {
|
|
gsap.fromTo(heroItems, { y: 50, opacity: 0 }, { y: 0, opacity: 1, duration: 0.8, stagger: 0.1, ease: 'expo.out' });
|
|
}
|
|
|
|
const beneficioItems = beneficiosRef.current?.querySelectorAll('.beneficio-item');
|
|
if (beneficioItems?.length) {
|
|
gsap.fromTo(beneficioItems, { x: -30, opacity: 0 }, { x: 0, opacity: 1, duration: 0.5, stagger: 0.05, ease: 'expo.out', scrollTrigger: { trigger: beneficiosRef.current, start: 'top 80%' } });
|
|
}
|
|
|
|
const servicoCards = servicosRef.current?.querySelectorAll('.servico-card');
|
|
if (servicoCards?.length) {
|
|
gsap.fromTo(servicoCards, { y: 50, opacity: 0 }, { y: 0, opacity: 1, duration: 0.6, stagger: 0.1, ease: 'back.out(1.7)', scrollTrigger: { trigger: servicosRef.current, start: 'top 80%' } });
|
|
}
|
|
});
|
|
|
|
return () => ctx.revert();
|
|
}, []);
|
|
|
|
return (
|
|
<div className="bg-[#0e0e0e] min-h-screen">
|
|
<SEO
|
|
title="Seguranca da Informacao"
|
|
description="Protecao completa para sua empresa: firewall, antivirus, backup, LGPD. Seguranca de rede e dados com suporte 24/7."
|
|
/>
|
|
{/* Hero */}
|
|
<section ref={heroRef} className="pt-32 pb-20 relative overflow-hidden">
|
|
<div className="absolute top-0 right-0 w-[600px] h-[600px] bg-[#cbf400]/5 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2" />
|
|
<div className="container-custom relative z-10">
|
|
<div className="grid lg:grid-cols-2 gap-12 items-center">
|
|
<div>
|
|
<div className="animate-item flex items-center gap-2 mb-6">
|
|
<Shield className="w-5 h-5 text-[#cbf400]" />
|
|
<span className="text-[#cbf400] font-semibold">Serviços</span>
|
|
<span className="text-gray-500">/</span>
|
|
<span className="text-white">Segurança</span>
|
|
</div>
|
|
<h1 className="animate-item text-4xl md:text-5xl lg:text-6xl font-black text-white mb-6">Segurança da <span className="text-gradient">Informação</span></h1>
|
|
<p className="animate-item text-xl text-gray-400 mb-8 leading-relaxed">Proteja seus dados contra ameaças cibernéticas.</p>
|
|
<div className="animate-item flex flex-wrap gap-4">
|
|
<a href="https://api.whatsapp.com/send?phone=551148101704&text=Olá!%20Gostaria%20de%20auditoria%20de%20segurança" target="_blank" rel="noopener noreferrer" className="btn-primary inline-flex items-center gap-2">Solicitar auditoria<ArrowRight className="w-5 h-5" /></a>
|
|
<a href="#servicos" className="btn-secondary">Conhecer serviços</a>
|
|
</div>
|
|
</div>
|
|
<div className="animate-item relative">
|
|
<div className="absolute -inset-4 bg-gradient-to-r from-[#cbf400]/20 to-transparent rounded-2xl blur-2xl" />
|
|
<img src="/service-security.png" alt="Segurança" className="relative w-full h-auto animate-float" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Alerta */}
|
|
<section className="py-12 bg-[#cbf400]/10 border-y border-[#cbf400]/20">
|
|
<div className="container-custom">
|
|
<div className="flex items-center gap-4">
|
|
<AlertTriangle className="w-8 h-8 text-[#cbf400] flex-shrink-0" />
|
|
<div>
|
|
<h3 className="text-white font-bold text-lg">Você sabia?</h3>
|
|
<p className="text-gray-400">43% dos ataques visam PMEs. Não espere para se proteger.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Benefícios */}
|
|
<section ref={beneficiosRef} className="py-20 bg-[#1a1a1a]">
|
|
<div className="container-custom">
|
|
<div className="grid lg:grid-cols-2 gap-12">
|
|
<div>
|
|
<h2 className="text-3xl md:text-4xl font-black text-white mb-6">Por que investir em <span className="text-gradient">segurança</span>?</h2>
|
|
<div className="space-y-4">
|
|
{beneficios.map((b, i) => (
|
|
<div key={i} className="beneficio-item flex items-center gap-3">
|
|
<div className="w-6 h-6 rounded-full bg-[#cbf400]/10 flex items-center justify-center flex-shrink-0"><Check className="w-4 h-4 text-[#cbf400]" /></div>
|
|
<span className="text-gray-300">{b}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className="bg-[#0e0e0e] rounded-2xl p-6 border border-white/5">
|
|
<div className="text-4xl font-black text-[#cbf400] mb-2">R$ 5,4M</div>
|
|
<p className="text-gray-400">Custo médio de violação de dados</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Serviços */}
|
|
<section id="servicos" ref={servicosRef} className="py-20 bg-[#0e0e0e]">
|
|
<div className="container-custom">
|
|
<div className="text-center mb-16">
|
|
<h2 className="text-3xl md:text-4xl font-black text-white mb-4">Nossos Serviços</h2>
|
|
</div>
|
|
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{servicos.map((s, i) => (
|
|
<div key={i} className="servico-card bg-[#1a1a1a] rounded-2xl p-6 border border-white/5 hover:border-[#cbf400]/30 transition-colors">
|
|
<div className="w-14 h-14 rounded-xl bg-[#cbf400]/10 flex items-center justify-center mb-4 text-[#cbf400]"><s.icon className="w-8 h-8" /></div>
|
|
<h4 className="text-lg font-bold text-white mb-2">{s.titulo}</h4>
|
|
<p className="text-gray-400 text-sm">{s.descricao}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Compliance */}
|
|
<section className="py-20 bg-[#1a1a1a]">
|
|
<div className="container-custom">
|
|
<div className="text-center mb-12">
|
|
<h2 className="text-3xl font-black text-white mb-4">Conformidade</h2>
|
|
</div>
|
|
<div className="flex flex-wrap justify-center gap-4">
|
|
{normas.map((n, i) => (
|
|
<div key={i} className="px-6 py-3 bg-[#0e0e0e] rounded-xl border border-[#cbf400]/20 text-[#cbf400] font-semibold">{n}</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* CTA */}
|
|
<section className="py-20 bg-[#0e0e0e]">
|
|
<div className="container-custom">
|
|
<div className="bg-gradient-to-r from-[#cbf400]/10 to-transparent rounded-2xl p-12 text-center border border-[#cbf400]/20">
|
|
<h2 className="text-3xl md:text-4xl font-black text-white mb-4">Não espere um ataque</h2>
|
|
<p className="text-gray-400 mb-8 max-w-2xl mx-auto">Solicite uma auditoria de segurança gratuita.</p>
|
|
<div className="flex flex-wrap justify-center gap-4">
|
|
<a href="https://api.whatsapp.com/send?phone=551148101704&text=Olá!%20Gostaria%20de%20auditoria%20gratuita" target="_blank" rel="noopener noreferrer" className="btn-primary inline-flex items-center gap-2">Auditoria gratuita<ArrowRight className="w-5 h-5" /></a>
|
|
<a href="/#contato" className="btn-secondary">Falar com especialista</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Seguranca;
|