244 lines
14 KiB
TypeScript
244 lines
14 KiB
TypeScript
import SEO from '../../components/SEO';
|
|
import { useEffect, useRef } from 'react';
|
|
import { gsap } from 'gsap';
|
|
import { ScrollTrigger } from 'gsap/ScrollTrigger';
|
|
import { Server, Check, ArrowRight, TrendingUp, Zap, Globe, Clock } from 'lucide-react';
|
|
|
|
gsap.registerPlugin(ScrollTrigger);
|
|
|
|
const beneficios = [
|
|
{ titulo: 'Monitoramento contínuo', descricao: 'Vigilância 24/7 de todos os sistemas.' },
|
|
{ titulo: 'Segurança proativa', descricao: 'Proteção contra ameaças antes que afetem seu negócio.' },
|
|
{ titulo: 'Otimização de performance', descricao: 'Sistemas sempre rápidos e eficientes.' },
|
|
{ titulo: 'Backup automatizado', descricao: 'Seus dados sempre protegidos e recuperáveis.' },
|
|
{ titulo: 'Suporte especializado', descricao: 'Equipe técnica disponível quando precisar.' },
|
|
{ titulo: 'Relatórios mensais', descricao: 'Transparência total sobre a saúde da sua TI.' },
|
|
];
|
|
|
|
const diferenciais = [
|
|
'Gestão completa de TI',
|
|
'Atualizações automáticas',
|
|
'Planejamento de capacidade',
|
|
'Gestão de licenças',
|
|
];
|
|
|
|
const planos = [
|
|
{
|
|
nome: 'Essencial',
|
|
preco: 'R$ 2.490',
|
|
periodo: '/mês',
|
|
descricao: 'Ideal para pequenas empresas',
|
|
recursos: ['Até 15 usuários', 'Monitoramento 8x5', 'Suporte remoto', 'Backup diário', 'Relatório mensal', 'Antivírus corporativo'],
|
|
destaque: false,
|
|
},
|
|
{
|
|
nome: 'Business',
|
|
preco: 'R$ 4.990',
|
|
periodo: '/mês',
|
|
descricao: 'Para empresas em crescimento',
|
|
recursos: ['Até 50 usuários', 'Monitoramento 24/7', 'Suporte remoto + presencial', 'Backup contínuo', 'Relatório semanal', 'Gestão de patches', 'Firewall gerenciado'],
|
|
destaque: true,
|
|
},
|
|
{
|
|
nome: 'Enterprise',
|
|
preco: 'Sob consulta',
|
|
periodo: '',
|
|
descricao: 'Solução personalizada',
|
|
recursos: ['Usuários ilimitados', 'Monitoramento 24/7', 'Suporte prioritário', 'Backup em tempo real', 'Relatórios customizados', 'Gerente de conta dedicado', 'SLA 99.9%', 'DRaaS incluído'],
|
|
destaque: false,
|
|
},
|
|
];
|
|
|
|
const TiGerenciada = () => {
|
|
const heroRef = useRef<HTMLDivElement>(null);
|
|
const beneficiosRef = useRef<HTMLDivElement>(null);
|
|
const diferenciaisRef = useRef<HTMLDivElement>(null);
|
|
const planosRef = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
const ctx = gsap.context(() => {
|
|
const heroItems = heroRef.current?.querySelectorAll('.animate-item');
|
|
if (heroItems?.length) {
|
|
gsap.fromTo(heroItems, { y: 60, opacity: 0 }, { y: 0, opacity: 1, duration: 0.8, stagger: 0.12, ease: 'expo.out' });
|
|
}
|
|
|
|
const beneficioCards = beneficiosRef.current?.querySelectorAll('.beneficio-card');
|
|
if (beneficioCards?.length) {
|
|
gsap.fromTo(beneficioCards, { y: 50, opacity: 0 }, { y: 0, opacity: 1, duration: 0.6, stagger: 0.1, ease: 'back.out(1.7)', scrollTrigger: { trigger: beneficiosRef.current, start: 'top 80%' } });
|
|
}
|
|
|
|
const diferencialItems = diferenciaisRef.current?.querySelectorAll('.diferencial-item');
|
|
if (diferencialItems?.length) {
|
|
gsap.fromTo(diferencialItems, { x: -30, opacity: 0 }, { x: 0, opacity: 1, duration: 0.5, stagger: 0.06, ease: 'expo.out', scrollTrigger: { trigger: diferenciaisRef.current, start: 'top 80%' } });
|
|
}
|
|
|
|
const planoCards = planosRef.current?.querySelectorAll('.plano-card');
|
|
if (planoCards?.length) {
|
|
gsap.fromTo(planoCards, { y: 60, opacity: 0 }, { y: 0, opacity: 1, duration: 0.7, stagger: 0.15, ease: 'back.out(1.7)', scrollTrigger: { trigger: planosRef.current, start: 'top 80%' } });
|
|
}
|
|
});
|
|
|
|
return () => ctx.revert();
|
|
}, []);
|
|
|
|
return (
|
|
<div className="bg-[#0e0e0e] min-h-screen">
|
|
<SEO
|
|
title="TI Gerenciada para Empresas"
|
|
description="TI Gerenciada completa para empresas em Guarulhos e Sao Paulo. Suporte 24/7, monitoramento em tempo real e equipe especializada."
|
|
/>
|
|
{/* Hero */}
|
|
<section ref={heroRef} className="pt-32 pb-20 relative overflow-hidden">
|
|
<div className="absolute top-0 right-0 w-[800px] h-[800px] bg-[#cbf400]/5 rounded-full blur-3xl -translate-y-1/2 translate-x-1/3" />
|
|
<div className="container-custom relative z-10">
|
|
<div className="grid lg:grid-cols-2 gap-16 items-center">
|
|
<div>
|
|
<div className="animate-item flex items-center gap-2 mb-6">
|
|
<Server className="w-5 h-5 text-[#cbf400]" />
|
|
<span className="text-[#cbf400] font-semibold text-sm uppercase tracking-wider">Serviços</span>
|
|
<span className="text-gray-600">/</span>
|
|
<span className="text-gray-400">TI Gerenciada</span>
|
|
</div>
|
|
<h1 className="animate-item text-4xl md:text-5xl lg:text-6xl font-black text-white mb-6 leading-tight">
|
|
TI Gerenciada <br /><span className="text-gradient">24 horas por dia</span>
|
|
</h1>
|
|
<p className="animate-item text-xl text-gray-400 mb-8 leading-relaxed max-w-xl">
|
|
Monitoramento 24/7 de toda sua infraestrutura. Foco no seu negócio enquanto cuidamos da sua tecnologia com excelência.
|
|
</p>
|
|
<div className="animate-item flex flex-wrap gap-4 mb-10">
|
|
<a href="https://api.whatsapp.com/send?phone=551148101704&text=Olá!%20Gostaria%20de%20saber%20mais%20sobre%20TI%20Gerenciada" target="_blank" rel="noopener noreferrer" className="btn-primary inline-flex items-center gap-2">
|
|
Solicitar proposta<ArrowRight className="w-5 h-5" />
|
|
</a>
|
|
<a href="#planos" className="btn-secondary">Ver planos</a>
|
|
</div>
|
|
<div className="animate-item grid grid-cols-2 gap-4">
|
|
{['Monitoramento proativo', 'Gestão de infraestrutura', 'Backup automatizado', 'Relatórios mensais'].map((item, i) => (
|
|
<div key={i} className="flex items-center gap-3 text-gray-300">
|
|
<div className="w-10 h-10 rounded-lg bg-[#cbf400]/10 flex items-center justify-center text-[#cbf400]"><Check className="w-5 h-5" /></div>
|
|
<span className="text-sm">{item}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className="animate-item relative">
|
|
<div className="absolute -inset-8 bg-gradient-to-r from-[#cbf400]/20 via-[#cbf400]/10 to-transparent rounded-3xl blur-3xl" />
|
|
<img src="/service-ti.png" alt="TI Gerenciada" className="relative w-full h-auto animate-float drop-shadow-2xl" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Stats */}
|
|
<section className="py-16 bg-[#1a1a1a] border-y border-white/5">
|
|
<div className="container-custom">
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
|
|
{[{ valor: '+500', label: 'clientes atendidos', icon: Globe }, { valor: '24/7', label: 'monitoramento', icon: Clock }, { valor: '15min', label: 'tempo de resposta', icon: Zap }, { valor: '40%', label: 'economia média', icon: TrendingUp }].map((stat, i) => (
|
|
<div key={i} className="text-center">
|
|
<div className="w-14 h-14 rounded-xl bg-[#cbf400]/10 flex items-center justify-center mx-auto mb-4 text-[#cbf400]"><stat.icon className="w-6 h-6" /></div>
|
|
<div className="text-3xl md:text-4xl font-black text-white mb-1">{stat.valor}</div>
|
|
<div className="text-gray-500 text-sm">{stat.label}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Benefícios */}
|
|
<section ref={beneficiosRef} className="py-24 relative overflow-hidden">
|
|
<div className="absolute top-1/2 left-0 w-[400px] h-[400px] bg-[#cbf400]/5 rounded-full blur-3xl -translate-y-1/2 -translate-x-1/2" />
|
|
<div className="container-custom relative z-10">
|
|
<div className="text-center max-w-2xl mx-auto mb-16">
|
|
<span className="inline-block px-4 py-2 rounded-full bg-[#cbf400]/10 text-[#cbf400] text-sm font-semibold mb-4 border border-[#cbf400]/20">Benefícios</span>
|
|
<h2 className="text-3xl md:text-4xl lg:text-5xl font-black text-white mb-4">Por que ter <span className="text-gradient">TI Gerenciada</span>?</h2>
|
|
</div>
|
|
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{beneficios.map((b, i) => (
|
|
<div key={i} className="beneficio-card bg-[#1a1a1a] rounded-2xl p-8 border border-white/5 hover:border-[#cbf400]/30 transition-all">
|
|
<h3 className="text-xl font-bold text-white mb-3">{b.titulo}</h3>
|
|
<p className="text-gray-400">{b.descricao}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Diferenciais */}
|
|
<section ref={diferenciaisRef} className="py-24 bg-[#1a1a1a]">
|
|
<div className="container-custom">
|
|
<div className="grid lg:grid-cols-2 gap-16 items-center">
|
|
<div className="relative">
|
|
<div className="absolute -inset-4 bg-gradient-to-br from-[#cbf400]/20 to-transparent rounded-3xl blur-2xl" />
|
|
<img src="/about-image.jpg" alt="Equipe" className="relative w-full h-auto rounded-2xl border border-white/5" />
|
|
</div>
|
|
<div>
|
|
<span className="inline-block px-4 py-2 rounded-full bg-[#cbf400]/10 text-[#cbf400] text-sm font-semibold mb-4 border border-[#cbf400]/20">Nossos Diferenciais</span>
|
|
<h2 className="text-3xl md:text-4xl font-black text-white mb-6">O que você <span className="text-gradient">recebe</span> conosco</h2>
|
|
<div className="space-y-4">
|
|
{diferenciais.map((item, i) => (
|
|
<div key={i} className="diferencial-item flex items-center gap-4">
|
|
<div className="w-8 h-8 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">{item}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Planos */}
|
|
<section id="planos" ref={planosRef} className="py-24 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/3" />
|
|
<div className="container-custom relative z-10">
|
|
<div className="text-center max-w-2xl mx-auto mb-16">
|
|
<span className="inline-block px-4 py-2 rounded-full bg-[#cbf400]/10 text-[#cbf400] text-sm font-semibold mb-4 border border-[#cbf400]/20">Planos</span>
|
|
<h2 className="text-3xl md:text-4xl lg:text-5xl font-black text-white mb-4">Escolha o plano <span className="text-gradient">ideal</span></h2>
|
|
</div>
|
|
<div className="grid md:grid-cols-3 gap-8">
|
|
{planos.map((plano, i) => (
|
|
<div key={i} className={`plano-card relative rounded-2xl p-8 ${plano.destaque ? 'bg-gradient-to-b from-[#cbf400]/20 to-[#cbf400]/5 border-2 border-[#cbf400]/50' : 'bg-[#1a1a1a] border border-white/5'} transition-all hover:-translate-y-2`}>
|
|
{plano.destaque && <div className="absolute -top-4 left-1/2 -translate-x-1/2 px-4 py-1 bg-[#cbf400] text-[#0e0e0e] text-sm font-bold rounded-full">Mais Popular</div>}
|
|
<div className="mb-6">
|
|
<h3 className="text-2xl font-bold text-white mb-2">{plano.nome}</h3>
|
|
<p className="text-gray-400 text-sm">{plano.descricao}</p>
|
|
</div>
|
|
<div className="mb-8">
|
|
<span className={`text-4xl font-black ${plano.destaque ? 'text-[#cbf400]' : 'text-white'}`}>{plano.preco}</span>
|
|
{plano.periodo && <span className="text-gray-500">{plano.periodo}</span>}
|
|
</div>
|
|
<ul className="space-y-4 mb-8">
|
|
{plano.recursos.map((r, j) => (
|
|
<li key={j} className="flex items-center gap-3 text-gray-300">
|
|
<div className="w-5 h-5 rounded-full bg-[#cbf400]/10 flex items-center justify-center flex-shrink-0"><Check className="w-3 h-3 text-[#cbf400]" /></div>
|
|
<span className="text-sm">{r}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
<a href={`https://api.whatsapp.com/send?phone=551148101704&text=Olá!%20Tenho%20interesse%20no%20plano%20${encodeURIComponent(plano.nome)}`} target="_blank" rel="noopener noreferrer" className={`block w-full py-4 rounded-xl font-bold text-center transition-all ${plano.destaque ? 'bg-[#cbf400] text-[#0e0e0e] hover:bg-[#d4ff1a]' : 'bg-white/5 text-white hover:bg-white/10 border border-white/10'}`}>
|
|
{plano.preco === 'Sob consulta' ? 'Falar com consultor' : 'Contratar agora'}
|
|
</a>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* CTA */}
|
|
<section className="py-24 bg-[#1a1a1a]">
|
|
<div className="container-custom">
|
|
<div className="max-w-4xl mx-auto text-center">
|
|
<h2 className="text-3xl md:text-4xl lg:text-5xl font-black text-white mb-6">Pronto para transformar sua <span className="text-gradient">TI</span>?</h2>
|
|
<p className="text-gray-400 text-lg mb-10">Entre em contato e descubra como a Avanzato pode ajudar sua empresa.</p>
|
|
<div className="flex flex-wrap justify-center gap-4">
|
|
<a href="https://api.whatsapp.com/send?phone=551148101704&text=Olá!%20Gostaria%20de%20uma%20proposta" target="_blank" rel="noopener noreferrer" className="btn-primary inline-flex items-center gap-2 text-lg px-8 py-4">Solicitar proposta<ArrowRight className="w-5 h-5" /></a>
|
|
<a href="tel:+551148101704" className="btn-secondary text-lg px-8 py-4">Ligar agora</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default TiGerenciada;
|