308 lines
11 KiB
TypeScript
308 lines
11 KiB
TypeScript
import { useEffect, useRef, useState } from 'react';
|
|
import { gsap } from 'gsap';
|
|
import { ScrollTrigger } from 'gsap/ScrollTrigger';
|
|
import { ArrowRight, Server, Cloud, Shield, Headphones, Network, Phone, HardDrive, Cpu, ClipboardCheck, Monitor } from 'lucide-react';
|
|
|
|
gsap.registerPlugin(ScrollTrigger);
|
|
|
|
interface Service {
|
|
id: number;
|
|
title: string;
|
|
description: string;
|
|
image: string;
|
|
icon: React.ReactNode;
|
|
features: string[];
|
|
link: string;
|
|
}
|
|
|
|
const services: Service[] = [
|
|
{
|
|
id: 1,
|
|
title: 'TI Gerenciada',
|
|
description: 'Monitoramento 24/7 de toda sua infraestrutura. Foco no seu negócio enquanto cuidamos da sua tecnologia.',
|
|
image: '/service-ti.png',
|
|
icon: <Server className="w-6 h-6" />,
|
|
features: ['Monitoramento proativo', 'Gestão de infraestrutura', 'Backup automatizado', 'Relatórios mensais'],
|
|
link: '/servicos/ti-gerenciada',
|
|
},
|
|
{
|
|
id: 2,
|
|
title: 'Cloud Computing',
|
|
description: 'Migração e gestão de ambientes em nuvem. Escalabilidade e segurança para seu crescimento.',
|
|
image: '/service-cloud.png',
|
|
icon: <Cloud className="w-6 h-6" />,
|
|
features: ['Migração para nuvem', 'AWS/Azure/GCP', 'Otimização de custos', 'Arquitetura serverless'],
|
|
link: '/servicos/cloud-computing',
|
|
},
|
|
{
|
|
id: 3,
|
|
title: 'Segurança',
|
|
description: 'Proteção contra ameaças digitais. Segurança de ponta a ponta para seus dados e sistemas.',
|
|
image: '/service-security.png',
|
|
icon: <Shield className="w-6 h-6" />,
|
|
features: ['Firewall gerenciado', 'Antivírus corporativo', 'VPN segura', 'Auditoria de segurança'],
|
|
link: '/servicos/seguranca',
|
|
},
|
|
{
|
|
id: 4,
|
|
title: 'Suporte Técnico',
|
|
description: 'Atendimento ágil para seus colaboradores. Resolução rápida de problemas técnicos.',
|
|
image: '/service-support.png',
|
|
icon: <Headphones className="w-6 h-6" />,
|
|
features: ['Help desk 24/7', 'Suporte remoto', 'Atendimento presencial', 'Base de conhecimento'],
|
|
link: '/servicos/suporte',
|
|
},
|
|
{
|
|
id: 5,
|
|
title: 'Infraestrutura de Redes',
|
|
description: 'Redes corporativas seguras, rápidas e escaláveis. Cabeamento e configuração profissional.',
|
|
image: '/service-ti.png',
|
|
icon: <Network className="w-6 h-6" />,
|
|
features: ['Cabeamento estruturado', 'Wi-Fi corporativo', 'VLANs', 'Switches gerenciáveis'],
|
|
link: '/servicos/redes',
|
|
},
|
|
{
|
|
id: 6,
|
|
title: 'PABX em Nuvem',
|
|
description: 'Telefonia IP moderna e econômica. Reduza custos e modernize sua comunicação.',
|
|
image: '/service-support.png',
|
|
icon: <Phone className="w-6 h-6" />,
|
|
features: ['Ramais remotos', 'URA', 'Gravação de chamadas', 'Integração CRM'],
|
|
link: '/servicos/pabx',
|
|
},
|
|
{
|
|
id: 7,
|
|
title: 'Backup Corporativo',
|
|
description: 'Proteção total contra perda de dados. Backup em nuvem e recuperação de desastres.',
|
|
image: '/service-cloud.png',
|
|
icon: <HardDrive className="w-6 h-6" />,
|
|
features: ['Backup automático', 'Proteção ransomware', 'Recuperação rápida', 'DRaaS'],
|
|
link: '/servicos/backup',
|
|
},
|
|
{
|
|
id: 8,
|
|
title: 'Servidores',
|
|
description: 'Implantação e virtualização de servidores. Alta performance e disponibilidade.',
|
|
image: '/service-ti.png',
|
|
icon: <Cpu className="w-6 h-6" />,
|
|
features: ['Virtualização', 'Servidor de arquivos', 'Alta disponibilidade', 'Redução de custos'],
|
|
link: '/servicos/servidores',
|
|
},
|
|
{
|
|
id: 9,
|
|
title: 'Consultoria em TI',
|
|
description: 'Planejamento estratégico tecnológico. Diagnóstico e roadmap para sua empresa.',
|
|
image: '/about-image.jpg',
|
|
icon: <ClipboardCheck className="w-6 h-6" />,
|
|
features: ['Diagnóstico', 'Planejamento', 'Auditoria', 'Roadmap estratégico'],
|
|
link: '/servicos/consultoria',
|
|
},
|
|
{
|
|
id: 10,
|
|
title: 'Monitoramento e NOC',
|
|
description: 'Visibilidade total da sua infraestrutura. Monitoramento 24/7 com alertas em tempo real.',
|
|
image: '/service-ti.png',
|
|
icon: <Monitor className="w-6 h-6" />,
|
|
features: ['Monitoramento 24/7', 'Alertas em tempo real', 'Painéis personalizados', 'Prevenção de falhas'],
|
|
link: '/servicos/noc',
|
|
},
|
|
];
|
|
|
|
const ServiceCard = ({ service }: { service: Service }) => {
|
|
const cardRef = useRef<HTMLDivElement>(null);
|
|
const [mousePos, setMousePos] = useState({ x: 0, y: 0 });
|
|
const [isHovered, setIsHovered] = useState(false);
|
|
|
|
const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
|
|
if (!cardRef.current) return;
|
|
const rect = cardRef.current.getBoundingClientRect();
|
|
const x = (e.clientX - rect.left - rect.width / 2) / 20;
|
|
const y = (e.clientY - rect.top - rect.height / 2) / 20;
|
|
setMousePos({ x, y });
|
|
};
|
|
|
|
// Gerar caminho WebP com fallback PNG/JPG
|
|
const webpImage = service.image.replace(/\.(png|jpg|jpeg)$/, '.webp');
|
|
|
|
return (
|
|
<div
|
|
ref={cardRef}
|
|
className="service-card-border group relative bg-[#1a1a1a] rounded-2xl overflow-hidden shadow-lg cursor-pointer border border-white/5"
|
|
style={{
|
|
transform: isHovered
|
|
? `perspective(1000px) rotateX(${-mousePos.y}deg) rotateY(${mousePos.x}deg) translateZ(20px)`
|
|
: 'perspective(1000px) rotateX(0) rotateY(0) translateZ(0)',
|
|
transition: 'transform 0.3s ease-out',
|
|
}}
|
|
onMouseMove={handleMouseMove}
|
|
onMouseEnter={() => setIsHovered(true)}
|
|
onMouseLeave={() => {
|
|
setIsHovered(false);
|
|
setMousePos({ x: 0, y: 0 });
|
|
}}
|
|
>
|
|
{/* Image container com WebP + lazy loading */}
|
|
<div className="relative h-48 bg-gradient-to-br from-[#2a2a2a] to-[#1a1a1a] overflow-hidden">
|
|
<picture>
|
|
<source srcSet={webpImage} type="image/webp" />
|
|
<img
|
|
src={service.image}
|
|
alt={service.title}
|
|
loading="lazy"
|
|
width="300"
|
|
height="300"
|
|
className="w-full h-full object-contain p-6 transition-transform duration-500 group-hover:scale-110"
|
|
/>
|
|
</picture>
|
|
|
|
{/* Icon badge */}
|
|
<div className="absolute top-4 left-4 w-12 h-12 rounded-xl bg-[#0e0e0e] shadow-lg flex items-center justify-center text-[#cbf400] border border-[#cbf400]/20">
|
|
{service.icon}
|
|
</div>
|
|
|
|
{/* Gradient overlay on hover */}
|
|
<div className="absolute inset-0 bg-gradient-to-t from-[#cbf400]/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="p-5">
|
|
<h3 className="text-lg font-bold text-white mb-2 group-hover:text-[#cbf400] transition-colors">
|
|
{service.title}
|
|
</h3>
|
|
<p className="text-gray-400 text-sm mb-4 line-clamp-2">
|
|
{service.description}
|
|
</p>
|
|
|
|
{/* Features list */}
|
|
<ul className="space-y-1.5 mb-4">
|
|
{service.features.slice(0, 3).map((feature, i) => (
|
|
<li key={i} className="flex items-center gap-2 text-xs text-gray-300">
|
|
<span className="w-1.5 h-1.5 rounded-full bg-[#cbf400]" />
|
|
{feature}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
|
|
{/* CTA */}
|
|
<a
|
|
href={service.link}
|
|
className="inline-flex items-center gap-2 text-[#cbf400] font-semibold text-sm group/link"
|
|
>
|
|
Saiba mais
|
|
<ArrowRight className="w-4 h-4 transition-transform group-hover/link:translate-x-1" />
|
|
</a>
|
|
</div>
|
|
|
|
{/* Glow border effect */}
|
|
<div className="absolute inset-0 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none">
|
|
<div className="absolute inset-0 rounded-2xl bg-gradient-to-r from-[#cbf400]/20 via-[#cbf400]/10 to-[#cbf400]/20 blur-sm" />
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const Services = () => {
|
|
const sectionRef = useRef<HTMLDivElement>(null);
|
|
const titleRef = useRef<HTMLDivElement>(null);
|
|
const cardsRef = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
const ctx = gsap.context(() => {
|
|
gsap.fromTo(
|
|
titleRef.current,
|
|
{ y: 50, opacity: 0 },
|
|
{
|
|
y: 0,
|
|
opacity: 1,
|
|
duration: 0.8,
|
|
ease: 'expo.out',
|
|
scrollTrigger: {
|
|
trigger: titleRef.current,
|
|
start: 'top 80%',
|
|
toggleActions: 'play none none reverse',
|
|
},
|
|
}
|
|
);
|
|
|
|
const cards = cardsRef.current?.querySelectorAll('.service-card-border');
|
|
if (cards) {
|
|
gsap.fromTo(
|
|
cards,
|
|
{ y: 100, opacity: 0 },
|
|
{
|
|
y: 0,
|
|
opacity: 1,
|
|
duration: 0.8,
|
|
stagger: 0.08,
|
|
ease: 'expo.out',
|
|
scrollTrigger: {
|
|
trigger: cardsRef.current,
|
|
start: 'top 80%',
|
|
toggleActions: 'play none none reverse',
|
|
},
|
|
}
|
|
);
|
|
}
|
|
}, sectionRef);
|
|
|
|
return () => ctx.revert();
|
|
}, []);
|
|
|
|
return (
|
|
<section
|
|
id="services"
|
|
ref={sectionRef}
|
|
className="section-padding bg-[#0e0e0e] relative overflow-hidden"
|
|
>
|
|
{/* Background decoration */}
|
|
<div className="absolute top-0 right-0 w-96 h-96 bg-[#cbf400]/5 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2" />
|
|
<div className="absolute bottom-0 left-0 w-96 h-96 bg-[#cbf400]/5 rounded-full blur-3xl translate-y-1/2 -translate-x-1/2" />
|
|
|
|
<div className="container-custom relative z-10">
|
|
{/* Section header */}
|
|
<div ref={titleRef} 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">
|
|
Nossas Soluções
|
|
</span>
|
|
<h2 className="text-3xl md:text-4xl lg:text-5xl font-black text-white mb-4">
|
|
Serviços completos em{' '}
|
|
<span className="text-gradient">Tecnologia</span>
|
|
</h2>
|
|
<p className="text-gray-400 text-lg">
|
|
Oferecemos soluções integradas para transformar a infraestrutura de TI da sua empresa
|
|
em um diferencial competitivo.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Services grid */}
|
|
<div
|
|
ref={cardsRef}
|
|
className="grid md:grid-cols-2 lg:grid-cols-5 gap-5"
|
|
>
|
|
{services.map((service) => (
|
|
<ServiceCard key={service.id} service={service} />
|
|
))}
|
|
</div>
|
|
|
|
{/* Bottom CTA */}
|
|
<div className="text-center mt-12">
|
|
<p className="text-gray-400 mb-4">
|
|
Precisa de uma solução personalizada?
|
|
</p>
|
|
<a
|
|
href="https://api.whatsapp.com/send?phone=551148101704&text=Olá!%20Gostaria%20de%20uma%20solução%20personalizada"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="btn-primary inline-flex items-center gap-2"
|
|
>
|
|
Fale com um consultor
|
|
<ArrowRight className="w-5 h-5" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default Services;
|