181 lines
7.7 KiB
TypeScript
181 lines
7.7 KiB
TypeScript
import { useEffect, useRef } from 'react';
|
|
import { gsap } from 'gsap';
|
|
import { ScrollTrigger } from 'gsap/ScrollTrigger';
|
|
import { Building2, Phone, Server, ArrowRight, CheckCircle2, Shield, Wifi } from 'lucide-react';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Link } from 'react-router-dom';
|
|
|
|
gsap.registerPlugin(ScrollTrigger);
|
|
|
|
const CondominiosCTA = () => {
|
|
const sectionRef = useRef<HTMLDivElement>(null);
|
|
const contentRef = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
const ctx = gsap.context(() => {
|
|
const elements = contentRef.current?.querySelectorAll('.animate-item');
|
|
if (elements && elements.length > 0) {
|
|
gsap.fromTo(
|
|
elements,
|
|
{ y: 50, opacity: 0 },
|
|
{
|
|
y: 0,
|
|
opacity: 1,
|
|
duration: 0.7,
|
|
stagger: 0.1,
|
|
ease: 'expo.out',
|
|
scrollTrigger: {
|
|
trigger: sectionRef.current,
|
|
start: 'top 80%',
|
|
toggleActions: 'play none none reverse',
|
|
},
|
|
}
|
|
);
|
|
}
|
|
}, sectionRef);
|
|
|
|
return () => ctx.revert();
|
|
}, []);
|
|
|
|
const beneficios = [
|
|
'Redução de até 90% no investimento inicial',
|
|
'Independência de empresas de portaria',
|
|
'Ramais gratuitos para áreas comuns',
|
|
'Monitoramento 24/7',
|
|
];
|
|
|
|
return (
|
|
<section
|
|
ref={sectionRef}
|
|
className="section-padding bg-[#141414] relative overflow-hidden"
|
|
>
|
|
{/* Background decorations */}
|
|
<div className="absolute top-0 right-0 w-[500px] h-[500px] bg-[#cbf400]/5 rounded-full blur-[120px] -translate-y-1/2 translate-x-1/4" />
|
|
<div className="absolute bottom-0 left-0 w-[400px] h-[400px] bg-[#cbf400]/3 rounded-full blur-[100px] translate-y-1/2 -translate-x-1/4" />
|
|
|
|
<div className="container-custom relative z-10">
|
|
<div
|
|
ref={contentRef}
|
|
className="bg-gradient-to-br from-[#1a1a1a] to-[#0e0e0e] rounded-3xl p-8 md:p-12 lg:p-16 border border-[#cbf400]/20 relative overflow-hidden"
|
|
>
|
|
{/* Badge */}
|
|
<div className="animate-item inline-flex items-center gap-2 px-4 py-2 rounded-full bg-[#cbf400]/10 border border-[#cbf400]/20 mb-6">
|
|
<Building2 className="w-4 h-4 text-[#cbf400]" />
|
|
<span className="text-[#cbf400] text-sm font-medium">Nova Solução</span>
|
|
</div>
|
|
|
|
<div className="grid lg:grid-cols-2 gap-12 items-center">
|
|
{/* Content */}
|
|
<div>
|
|
<h2 className="animate-item text-3xl md:text-4xl lg:text-5xl font-black text-white mb-6 leading-tight">
|
|
Tecnologia para{' '}
|
|
<span className="text-gradient">Condomínios</span>
|
|
</h2>
|
|
|
|
<p className="animate-item text-gray-400 text-lg mb-8">
|
|
Infraestrutura própria, VOIP moderno e redução de custos.
|
|
Seu condomínio com tecnologia que não para.
|
|
</p>
|
|
|
|
{/* Benefícios */}
|
|
<div className="animate-item space-y-3 mb-8">
|
|
{beneficios.map((item, i) => (
|
|
<div key={i} className="flex items-center gap-3">
|
|
<CheckCircle2 className="w-5 h-5 text-[#cbf400] flex-shrink-0" />
|
|
<span className="text-gray-300">{item}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* CTA Buttons */}
|
|
<div className="animate-item flex flex-col sm:flex-row gap-4">
|
|
<Link to="/tecnologia-para-condominios">
|
|
<Button className="bg-[#cbf400] text-[#0e0e0e] hover:bg-[#b8e000] px-8 py-6 text-lg font-bold rounded-xl transition-all duration-300 hover:scale-105 w-full sm:w-auto">
|
|
Conhecer Solução
|
|
<ArrowRight className="ml-2 w-5 h-5" />
|
|
</Button>
|
|
</Link>
|
|
<Link to="/contato">
|
|
<Button
|
|
variant="outline"
|
|
className="border-white/20 text-white hover:bg-white/10 px-8 py-6 text-lg font-medium rounded-xl transition-all duration-300 w-full sm:w-auto"
|
|
>
|
|
Falar com Especialista
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Visual */}
|
|
<div className="animate-item relative">
|
|
<div className="absolute inset-0 bg-[#cbf400]/10 rounded-3xl blur-3xl" />
|
|
<div className="relative bg-[#0e0e0e] rounded-3xl p-8 border border-white/10">
|
|
{/* Cards de serviço */}
|
|
<div className="space-y-4">
|
|
<div className="flex items-center gap-4 p-4 bg-[#1a1a1a] rounded-xl border border-[#cbf400]/20">
|
|
<div className="w-12 h-12 rounded-xl bg-[#cbf400]/10 flex items-center justify-center">
|
|
<Phone className="w-6 h-6 text-[#cbf400]" />
|
|
</div>
|
|
<div>
|
|
<h3 className="text-white font-bold">VOIP para Condomínios</h3>
|
|
<p className="text-gray-500 text-sm">Comunicação moderna e econômica</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-4 p-4 bg-[#1a1a1a] rounded-xl border border-white/10">
|
|
<div className="w-12 h-12 rounded-xl bg-blue-500/10 flex items-center justify-center">
|
|
<Server className="w-6 h-6 text-blue-400" />
|
|
</div>
|
|
<div>
|
|
<h3 className="text-white font-bold">Gestão de CPD</h3>
|
|
<p className="text-gray-500 text-sm">Infraestrutura profissional</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-4 p-4 bg-[#1a1a1a] rounded-xl border border-white/10">
|
|
<div className="w-12 h-12 rounded-xl bg-purple-500/10 flex items-center justify-center">
|
|
<Wifi className="w-6 h-6 text-purple-400" />
|
|
</div>
|
|
<div>
|
|
<h3 className="text-white font-bold">Rede e Conectividade</h3>
|
|
<p className="text-gray-500 text-sm">Alta disponibilidade</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-4 p-4 bg-[#1a1a1a] rounded-xl border border-white/10">
|
|
<div className="w-12 h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
|
|
<Shield className="w-6 h-6 text-red-400" />
|
|
</div>
|
|
<div>
|
|
<h3 className="text-white font-bold">Segurança</h3>
|
|
<p className="text-gray-500 text-sm">Monitoramento 24/7</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Stats */}
|
|
<div className="grid grid-cols-3 gap-4 mt-6 pt-6 border-t border-white/10">
|
|
<div className="text-center">
|
|
<div className="text-2xl font-black text-[#cbf400]">90%</div>
|
|
<div className="text-gray-500 text-xs">Economia</div>
|
|
</div>
|
|
<div className="text-center">
|
|
<div className="text-2xl font-black text-[#cbf400]">24/7</div>
|
|
<div className="text-gray-500 text-xs">Operação</div>
|
|
</div>
|
|
<div className="text-center">
|
|
<div className="text-2xl font-black text-[#cbf400]">500+</div>
|
|
<div className="text-gray-500 text-xs">Clientes</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default CondominiosCTA;
|