1103 lines
50 KiB
TypeScript
1103 lines
50 KiB
TypeScript
import { useEffect, useRef, useState } from 'react';
|
|
import { sendLeadToMautic, sendLeadViaMailto, trackConversion, trackFacebookPixel } from '../config/mautic';
|
|
import { gsap } from 'gsap';
|
|
import {
|
|
Phone,
|
|
Server,
|
|
Shield,
|
|
Wifi,
|
|
Camera,
|
|
Lock,
|
|
Zap,
|
|
CheckCircle2,
|
|
ArrowRight,
|
|
Building2,
|
|
Users,
|
|
Wallet,
|
|
TrendingDown,
|
|
Headphones,
|
|
FileCheck,
|
|
Clock,
|
|
ChevronRight,
|
|
HardDrive,
|
|
Network,
|
|
BatteryCharging
|
|
} from 'lucide-react';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Label } from '@/components/ui/label';
|
|
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from '@/components/ui/dialog';
|
|
|
|
interface FormData {
|
|
nome: string;
|
|
condominio: string;
|
|
unidades: string;
|
|
cidade: string;
|
|
whatsapp: string;
|
|
email: string;
|
|
portariaRemota: string;
|
|
possuiCpd: string;
|
|
}
|
|
|
|
const Condominios = () => {
|
|
const [isDialogOpen, setIsDialogOpen] = useState(false);
|
|
const [formData, setFormData] = useState<FormData>({
|
|
nome: '',
|
|
condominio: '',
|
|
unidades: '',
|
|
cidade: '',
|
|
whatsapp: '',
|
|
email: '',
|
|
portariaRemota: '',
|
|
possuiCpd: ''
|
|
});
|
|
|
|
const heroRef = useRef<HTMLDivElement>(null);
|
|
const problemaRef = useRef<HTMLDivElement>(null);
|
|
const solucaoRef = useRef<HTMLDivElement>(null);
|
|
const voipRef = useRef<HTMLDivElement>(null);
|
|
const cpdRef = useRef<HTMLDivElement>(null);
|
|
const economiaRef = useRef<HTMLDivElement>(null);
|
|
const diferencialRef = useRef<HTMLDivElement>(null);
|
|
const comoFuncionaRef = useRef<HTMLDivElement>(null);
|
|
const casosUsoRef = useRef<HTMLDivElement>(null);
|
|
const ctaRef = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
const ctx = gsap.context(() => {
|
|
// Hero animation
|
|
const heroElements = heroRef.current?.querySelectorAll('.hero-animate');
|
|
if (heroElements && heroElements.length > 0) {
|
|
gsap.fromTo(
|
|
heroElements,
|
|
{ y: 40, opacity: 0 },
|
|
{
|
|
y: 0,
|
|
opacity: 1,
|
|
duration: 0.8,
|
|
stagger: 0.15,
|
|
ease: 'expo.out',
|
|
}
|
|
);
|
|
}
|
|
|
|
// Section animations
|
|
const sections = [
|
|
problemaRef,
|
|
solucaoRef,
|
|
voipRef,
|
|
cpdRef,
|
|
economiaRef,
|
|
diferencialRef,
|
|
comoFuncionaRef,
|
|
casosUsoRef,
|
|
ctaRef,
|
|
];
|
|
|
|
sections.forEach((ref) => {
|
|
if (ref.current) {
|
|
const sectionElements = ref.current.querySelectorAll('.section-animate');
|
|
if (sectionElements.length > 0) {
|
|
gsap.fromTo(
|
|
sectionElements,
|
|
{ y: 50, opacity: 0 },
|
|
{
|
|
y: 0,
|
|
opacity: 1,
|
|
duration: 0.7,
|
|
stagger: 0.1,
|
|
ease: 'expo.out',
|
|
scrollTrigger: {
|
|
trigger: ref.current,
|
|
start: 'top 80%',
|
|
toggleActions: 'play none none reverse',
|
|
},
|
|
}
|
|
);
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
return () => ctx.revert();
|
|
}, []);
|
|
|
|
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const { name, value } = e.target;
|
|
setFormData(prev => ({ ...prev, [name]: value }));
|
|
};
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
|
|
// Google Ads conversion tracking
|
|
trackConversion();
|
|
|
|
// Facebook Pixel - Lead
|
|
trackFacebookPixel('Lead', {
|
|
content_name: 'Formulario Condominio',
|
|
content_category: 'lead_condominio',
|
|
});
|
|
|
|
// Enviar ao Mautic (Form ID 2) - sincrono via iframe
|
|
const mauticSuccess = sendLeadToMautic('condominio', {
|
|
nome: formData.nome,
|
|
condominio: formData.condominio,
|
|
unidades: formData.unidades,
|
|
cidade: formData.cidade,
|
|
whatsapp: formData.whatsapp,
|
|
email: formData.email,
|
|
portaria_remota: formData.portariaRemota,
|
|
possui_cpd: formData.possuiCpd,
|
|
});
|
|
|
|
if (!mauticSuccess) {
|
|
sendLeadViaMailto({
|
|
nome: formData.nome,
|
|
condominio: formData.condominio,
|
|
email: formData.email,
|
|
});
|
|
}
|
|
|
|
setIsDialogOpen(true);
|
|
};
|
|
|
|
const scrollToForm = () => {
|
|
ctaRef.current?.scrollIntoView({ behavior: 'smooth' });
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-[#0e0e0e]">
|
|
{/* SEO Meta Tags - Injected via useEffect */}
|
|
<title>Tecnologia para Condomínios | VOIP e Infraestrutura | Avanzato</title>
|
|
<meta name="description" content="Reduza custos e tenha independência com VOIP e infraestrutura para condomínios. Diagnóstico gratuito com a Avanzato." />
|
|
<meta name="keywords" content="tecnologia para condomínios, voip para condomínio, infraestrutura de TI condomínio, cpd condomínio, rede para condomínio, portaria remota tecnologia" />
|
|
<link rel="canonical" href="/tecnologia-para-condominios" />
|
|
|
|
{/* HERO */}
|
|
<section
|
|
ref={heroRef}
|
|
className="relative min-h-screen flex items-center justify-center overflow-hidden pt-20"
|
|
>
|
|
{/* Background */}
|
|
<div className="absolute inset-0 bg-gradient-to-br from-[#0e0e0e] via-[#141414] to-[#0e0e0e]" />
|
|
<div className="absolute top-0 right-0 w-[600px] h-[600px] bg-[#cbf400]/5 rounded-full blur-[120px] -translate-y-1/2 translate-x-1/4" />
|
|
<div className="absolute bottom-0 left-0 w-[500px] h-[500px] bg-[#cbf400]/3 rounded-full blur-[100px] translate-y-1/2 -translate-x-1/4" />
|
|
|
|
<div className="container-custom relative z-10 py-20">
|
|
<div className="max-w-4xl mx-auto text-center">
|
|
<div className="hero-animate 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">Soluções para Condomínios</span>
|
|
</div>
|
|
|
|
<h1 className="hero-animate text-4xl md:text-5xl lg:text-6xl font-black text-white mb-6 leading-tight">
|
|
Tecnologia para Condomínios que{' '}
|
|
<span className="text-gradient">Não Podem Parar</span>
|
|
</h1>
|
|
|
|
<p className="hero-animate text-xl md:text-2xl text-gray-300 mb-4 font-medium">
|
|
Infraestrutura própria, redução de custos e independência de fornecedores.
|
|
</p>
|
|
|
|
<p className="hero-animate text-gray-400 text-lg mb-10 max-w-2xl mx-auto">
|
|
Tenha controle total da tecnologia do seu condomínio: comunicação, segurança e operação funcionando 24 horas por dia.
|
|
</p>
|
|
|
|
<div className="hero-animate flex flex-col sm:flex-row gap-4 justify-center">
|
|
<Button
|
|
onClick={scrollToForm}
|
|
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"
|
|
>
|
|
Solicitar Diagnóstico Gratuito
|
|
<ArrowRight className="ml-2 w-5 h-5" />
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Stats */}
|
|
<div className="hero-animate grid grid-cols-2 md:grid-cols-4 gap-6 mt-16">
|
|
{[
|
|
{ valor: '500+', label: 'Condomínios atendidos' },
|
|
{ valor: '+23', label: 'Anos de experiência' },
|
|
{ valor: '40%', label: 'Economia média' },
|
|
{ valor: '24/7', label: 'Monitoramento' },
|
|
].map((stat, i) => (
|
|
<div key={i} className="text-center">
|
|
<div className="text-3xl md:text-4xl font-black text-[#cbf400] mb-1">{stat.valor}</div>
|
|
<div className="text-gray-500 text-sm">{stat.label}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Scroll indicator */}
|
|
<div className="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce">
|
|
<div className="w-6 h-10 border-2 border-white/20 rounded-full flex justify-center pt-2">
|
|
<div className="w-1.5 h-1.5 bg-[#cbf400] rounded-full" />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* PROBLEMA */}
|
|
<section ref={problemaRef} className="section-padding bg-[#0e0e0e] relative">
|
|
<div className="container-custom">
|
|
<div className="max-w-4xl mx-auto">
|
|
<div className="section-animate text-center mb-12">
|
|
<span className="inline-block px-4 py-2 rounded-full bg-red-500/10 text-red-400 text-sm font-semibold mb-4 border border-red-500/20">
|
|
O Problema
|
|
</span>
|
|
<h2 className="text-3xl md:text-4xl lg:text-5xl font-black text-white mb-6">
|
|
Seu condomínio está{' '}
|
|
<span className="text-red-400">dependente demais</span> de fornecedores?
|
|
</h2>
|
|
</div>
|
|
|
|
<div className="section-animate grid md:grid-cols-2 gap-6 mb-12">
|
|
{[
|
|
{
|
|
icon: <Users className="w-6 h-6 text-red-400" />,
|
|
text: 'Troca de empresa de portaria = troca de toda infraestrutura'
|
|
},
|
|
{
|
|
icon: <Wallet className="w-6 h-6 text-red-400" />,
|
|
text: 'Alto custo com interfone e telefonia tradicional'
|
|
},
|
|
{
|
|
icon: <Lock className="w-6 h-6 text-red-400" />,
|
|
text: 'Falta de controle sobre sistemas críticos'
|
|
},
|
|
{
|
|
icon: <Server className="w-6 h-6 text-red-400" />,
|
|
text: 'Equipamentos desorganizados ou sem padrão'
|
|
},
|
|
{
|
|
icon: <Zap className="w-6 h-6 text-red-400" />,
|
|
text: 'Risco de parada total por falhas simples'
|
|
},
|
|
{
|
|
icon: <Clock className="w-6 h-6 text-red-400" />,
|
|
text: 'Dependência de horário comercial para suporte'
|
|
},
|
|
].map((item, i) => (
|
|
<div
|
|
key={i}
|
|
className="flex items-start gap-4 p-5 bg-[#1a1a1a] rounded-xl border border-white/5"
|
|
>
|
|
<div className="flex-shrink-0 w-12 h-12 rounded-lg bg-red-500/10 flex items-center justify-center">
|
|
{item.icon}
|
|
</div>
|
|
<p className="text-gray-300">{item.text}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="section-animate text-center p-8 bg-gradient-to-r from-red-500/10 to-orange-500/10 rounded-2xl border border-red-500/20">
|
|
<p className="text-xl md:text-2xl font-bold text-white">
|
|
A portaria pode mudar. A tecnologia do condomínio{' '}
|
|
<span className="text-[#cbf400]">não deveria.</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* SOLUÇÃO */}
|
|
<section ref={solucaoRef} className="section-padding bg-[#141414] relative">
|
|
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[400px] bg-[#cbf400]/5 rounded-full blur-[150px]" />
|
|
|
|
<div className="container-custom relative z-10">
|
|
<div className="text-center max-w-3xl mx-auto mb-16">
|
|
<div className="section-animate inline-block px-4 py-2 rounded-full bg-[#cbf400]/10 text-[#cbf400] text-sm font-semibold mb-4 border border-[#cbf400]/20">
|
|
A Solução
|
|
</div>
|
|
<h2 className="section-animate text-3xl md:text-4xl lg:text-5xl font-black text-white mb-6">
|
|
Infraestrutura <span className="text-gradient">própria e inteligente</span> para condomínios
|
|
</h2>
|
|
<p className="section-animate text-gray-400 text-lg">
|
|
A Avanzato entrega uma solução completa baseada em dois pilares:
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-2 gap-8">
|
|
{/* Pilar 1: VOIP */}
|
|
<div className="section-animate bg-[#1a1a1a] rounded-2xl p-8 border border-[#cbf400]/20 hover:border-[#cbf400]/40 transition-all duration-300">
|
|
<div className="w-16 h-16 rounded-xl bg-[#cbf400]/10 flex items-center justify-center mb-6">
|
|
<Phone className="w-8 h-8 text-[#cbf400]" />
|
|
</div>
|
|
<h3 className="text-2xl font-bold text-white mb-4">
|
|
Pilar 1: Comunicação com VOIP
|
|
</h3>
|
|
<ul className="space-y-3">
|
|
{[
|
|
'Ramais internos inteligentes',
|
|
'Integração com portaria remota',
|
|
'Sem dependência de linhas telefônicas',
|
|
'Redução de custos operacionais',
|
|
].map((item, i) => (
|
|
<li key={i} className="flex items-center gap-3 text-gray-300">
|
|
<CheckCircle2 className="w-5 h-5 text-[#cbf400] flex-shrink-0" />
|
|
{item}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
{/* Pilar 2: CPD */}
|
|
<div className="section-animate bg-[#1a1a1a] rounded-2xl p-8 border border-[#cbf400]/20 hover:border-[#cbf400]/40 transition-all duration-300">
|
|
<div className="w-16 h-16 rounded-xl bg-[#cbf400]/10 flex items-center justify-center mb-6">
|
|
<Server className="w-8 h-8 text-[#cbf400]" />
|
|
</div>
|
|
<h3 className="text-2xl font-bold text-white mb-4">
|
|
Pilar 2: Gestão de CPD e Infraestrutura
|
|
</h3>
|
|
<ul className="space-y-3">
|
|
{[
|
|
'Organização e padronização do ambiente',
|
|
'Monitoramento 24x7',
|
|
'Segurança e continuidade operacional',
|
|
'Redução de riscos',
|
|
].map((item, i) => (
|
|
<li key={i} className="flex items-center gap-3 text-gray-300">
|
|
<CheckCircle2 className="w-5 h-5 text-[#cbf400] flex-shrink-0" />
|
|
{item}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* VOIP PARA CONDOMÍNIOS */}
|
|
<section ref={voipRef} className="section-padding bg-[#0e0e0e] relative">
|
|
<div className="container-custom">
|
|
<div className="grid lg:grid-cols-2 gap-12 items-center">
|
|
<div>
|
|
<div className="section-animate inline-block px-4 py-2 rounded-full bg-[#cbf400]/10 text-[#cbf400] text-sm font-semibold mb-4 border border-[#cbf400]/20">
|
|
Comunicação Moderna
|
|
</div>
|
|
<h2 className="section-animate text-3xl md:text-4xl lg:text-5xl font-black text-white mb-6">
|
|
Sistema de comunicação{' '}
|
|
<span className="text-gradient">moderno e econômico</span>
|
|
</h2>
|
|
<p className="section-animate text-gray-400 text-lg mb-8">
|
|
Substitua sistemas antigos de interfone por uma solução moderna baseada em rede.
|
|
</p>
|
|
|
|
<div className="section-animate space-y-4 mb-8">
|
|
<h4 className="text-white font-semibold mb-4">Benefícios:</h4>
|
|
{[
|
|
'Comunicação entre portaria e moradores via ramais',
|
|
'Integração com portões e áreas comuns',
|
|
'Uso da rede existente',
|
|
'Escalabilidade sem grandes obras',
|
|
].map((item, i) => (
|
|
<div key={i} className="flex items-center gap-3">
|
|
<div className="w-6 h-6 rounded-full bg-[#cbf400]/20 flex items-center justify-center">
|
|
<ChevronRight className="w-4 h-4 text-[#cbf400]" />
|
|
</div>
|
|
<span className="text-gray-300">{item}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Oferta Especial */}
|
|
<div className="section-animate bg-gradient-to-r from-[#cbf400]/20 to-[#cbf400]/5 rounded-xl p-6 border border-[#cbf400]/30">
|
|
<div className="flex items-center gap-3 mb-4">
|
|
<span className="text-2xl">🎁</span>
|
|
<h4 className="text-[#cbf400] font-bold text-lg">Oferta Especial</h4>
|
|
</div>
|
|
<p className="text-white font-medium mb-3">
|
|
Condomínios com mais de 100 unidades:
|
|
</p>
|
|
<p className="text-gray-300 text-sm mb-4">
|
|
Ramais de áreas comuns <span className="text-[#cbf400] font-bold">GRATUITOS</span>:
|
|
</p>
|
|
<div className="grid grid-cols-2 gap-2">
|
|
{['Portaria', 'Portões', 'Piscina', 'Áreas técnicas'].map((area, i) => (
|
|
<div key={i} className="flex items-center gap-2 text-gray-400 text-sm">
|
|
<CheckCircle2 className="w-4 h-4 text-[#cbf400]" />
|
|
{area}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="section-animate relative">
|
|
<div className="absolute inset-0 bg-[#cbf400]/10 rounded-3xl blur-3xl" />
|
|
<div className="relative bg-[#1a1a1a] rounded-3xl p-8 border border-white/10">
|
|
<div className="flex items-center justify-center mb-8">
|
|
<div className="w-32 h-32 rounded-full bg-[#cbf400]/10 flex items-center justify-center">
|
|
<Phone className="w-16 h-16 text-[#cbf400]" />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
<div className="flex items-center justify-between p-4 bg-[#0e0e0e] rounded-xl">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-10 h-10 rounded-full bg-[#cbf400]/20 flex items-center justify-center">
|
|
<Building2 className="w-5 h-5 text-[#cbf400]" />
|
|
</div>
|
|
<span className="text-white">Portaria</span>
|
|
</div>
|
|
<span className="text-[#cbf400] font-mono">Ramal 100</span>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between p-4 bg-[#0e0e0e] rounded-xl">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-10 h-10 rounded-full bg-blue-500/20 flex items-center justify-center">
|
|
<Users className="w-5 h-5 text-blue-400" />
|
|
</div>
|
|
<span className="text-white">Apartamento 101</span>
|
|
</div>
|
|
<span className="text-blue-400 font-mono">Ramal 101</span>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between p-4 bg-[#0e0e0e] rounded-xl">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-10 h-10 rounded-full bg-purple-500/20 flex items-center justify-center">
|
|
<Wifi className="w-5 h-5 text-purple-400" />
|
|
</div>
|
|
<span className="text-white">Área Comum</span>
|
|
</div>
|
|
<span className="text-purple-400 font-mono">Ramal 200</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-6 p-4 bg-[#cbf400]/10 rounded-xl border border-[#cbf400]/20">
|
|
<p className="text-center text-[#cbf400] text-sm font-medium">
|
|
💡 Economia de até 60% na telefonia
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* CPD E INFRAESTRUTURA */}
|
|
<section ref={cpdRef} className="section-padding bg-[#141414] relative">
|
|
<div className="absolute top-1/2 left-0 w-[500px] h-[500px] bg-[#cbf400]/5 rounded-full blur-[150px] -translate-y-1/2 -translate-x-1/2" />
|
|
|
|
<div className="container-custom relative z-10">
|
|
<div className="text-center max-w-3xl mx-auto mb-16">
|
|
<div className="section-animate inline-block px-4 py-2 rounded-full bg-[#cbf400]/10 text-[#cbf400] text-sm font-semibold mb-4 border border-[#cbf400]/20">
|
|
Infraestrutura Profissional
|
|
</div>
|
|
<h2 className="section-animate text-3xl md:text-4xl lg:text-5xl font-black text-white mb-6">
|
|
Tecnologia com <span className="text-gradient">padrão corporativo</span> dentro do condomínio
|
|
</h2>
|
|
<p className="section-animate text-gray-400 text-lg">
|
|
Condomínios de alto padrão precisam de tecnologia à altura.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
{/* Infraestrutura */}
|
|
<div className="section-animate bg-[#1a1a1a] rounded-2xl p-6 border border-white/5 hover:border-[#cbf400]/30 transition-all duration-300">
|
|
<div className="w-12 h-12 rounded-xl bg-[#cbf400]/10 flex items-center justify-center mb-4">
|
|
<Server className="w-6 h-6 text-[#cbf400]" />
|
|
</div>
|
|
<h4 className="text-white font-bold mb-4">🔧 Infraestrutura</h4>
|
|
<ul className="space-y-2 text-gray-400 text-sm">
|
|
<li>• Rack organizado</li>
|
|
<li>• Switches gerenciáveis</li>
|
|
<li>• Firewall (pfSense)</li>
|
|
<li>• Segmentação de rede (VLANs)</li>
|
|
</ul>
|
|
</div>
|
|
|
|
{/* Conectividade */}
|
|
<div className="section-animate bg-[#1a1a1a] rounded-2xl p-6 border border-white/5 hover:border-[#cbf400]/30 transition-all duration-300">
|
|
<div className="w-12 h-12 rounded-xl bg-blue-500/10 flex items-center justify-center mb-4">
|
|
<Wifi className="w-6 h-6 text-blue-400" />
|
|
</div>
|
|
<h4 className="text-white font-bold mb-4">🌐 Conectividade</h4>
|
|
<ul className="space-y-2 text-gray-400 text-sm">
|
|
<li>• Múltiplos links de internet</li>
|
|
<li>• Failover automático</li>
|
|
<li>• Balanceamento de carga</li>
|
|
<li>• VPN segura</li>
|
|
</ul>
|
|
</div>
|
|
|
|
{/* CFTV */}
|
|
<div className="section-animate bg-[#1a1a1a] rounded-2xl p-6 border border-white/5 hover:border-[#cbf400]/30 transition-all duration-300">
|
|
<div className="w-12 h-12 rounded-xl bg-purple-500/10 flex items-center justify-center mb-4">
|
|
<Camera className="w-6 h-6 text-purple-400" />
|
|
</div>
|
|
<h4 className="text-white font-bold mb-4">🎥 CFTV</h4>
|
|
<ul className="space-y-2 text-gray-400 text-sm">
|
|
<li>• Armazenamento de imagens</li>
|
|
<li>• Alta performance</li>
|
|
<li>• Acesso remoto seguro</li>
|
|
<li>• Backup automático</li>
|
|
</ul>
|
|
</div>
|
|
|
|
{/* Segurança */}
|
|
<div className="section-animate bg-[#1a1a1a] rounded-2xl p-6 border border-white/5 hover:border-[#cbf400]/30 transition-all duration-300">
|
|
<div className="w-12 h-12 rounded-xl bg-red-500/10 flex items-center justify-center mb-4">
|
|
<Lock className="w-6 h-6 text-red-400" />
|
|
</div>
|
|
<h4 className="text-white font-bold mb-4">🔐 Segurança</h4>
|
|
<ul className="space-y-2 text-gray-400 text-sm">
|
|
<li>• Controle de acesso integrado</li>
|
|
<li>• Proteção de rede</li>
|
|
<li>• Logs e auditoria</li>
|
|
<li>• Monitoramento 24/7</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Continuidade */}
|
|
<div className="section-animate mt-8 bg-gradient-to-r from-[#1a1a1a] to-[#141414] rounded-2xl p-8 border border-[#cbf400]/20">
|
|
<div className="flex flex-col md:flex-row items-center gap-6">
|
|
<div className="w-16 h-16 rounded-xl bg-[#cbf400]/10 flex items-center justify-center flex-shrink-0">
|
|
<BatteryCharging className="w-8 h-8 text-[#cbf400]" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<h4 className="text-white font-bold text-xl mb-2">⚡ Continuidade Operacional</h4>
|
|
<div className="grid md:grid-cols-3 gap-4 text-gray-400 text-sm">
|
|
<div className="flex items-center gap-2">
|
|
<CheckCircle2 className="w-4 h-4 text-[#cbf400]" />
|
|
Nobreaks (UPS)
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<CheckCircle2 className="w-4 h-4 text-[#cbf400]" />
|
|
Integração com gerador
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<CheckCircle2 className="w-4 h-4 text-[#cbf400]" />
|
|
Alta disponibilidade
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="section-animate mt-12 text-center p-8 bg-gradient-to-r from-[#cbf400]/10 to-transparent rounded-2xl border border-[#cbf400]/20">
|
|
<p className="text-xl md:text-2xl font-bold text-white">
|
|
Seu condomínio pode ter milhões em patrimônio, mas a tecnologia{' '}
|
|
<span className="text-[#cbf400]">precisa acompanhar esse nível.</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ECONOMIA */}
|
|
<section ref={economiaRef} className="section-padding bg-[#0e0e0e] relative">
|
|
<div className="container-custom">
|
|
<div className="grid lg:grid-cols-2 gap-12 items-center">
|
|
<div className="section-animate order-2 lg:order-1">
|
|
<div className="relative">
|
|
<div className="absolute inset-0 bg-[#cbf400]/10 rounded-3xl blur-3xl" />
|
|
<div className="relative bg-[#1a1a1a] rounded-3xl p-8 border border-white/10">
|
|
<div className="text-center mb-8">
|
|
<TrendingDown className="w-20 h-20 text-[#cbf400] mx-auto mb-4" />
|
|
<h3 className="text-3xl font-black text-white">Economia Real</h3>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
{[
|
|
{ label: 'Linhas telefônicas', economia: '-60%' },
|
|
{ label: 'Cabeamento tradicional', economia: '-50%' },
|
|
{ label: 'Reinstalações', economia: '-80%' },
|
|
{ label: 'Manutenção corretiva', economia: '-70%' },
|
|
].map((item, i) => (
|
|
<div key={i} className="flex items-center justify-between p-4 bg-[#0e0e0e] rounded-xl">
|
|
<span className="text-gray-300">{item.label}</span>
|
|
<span className="text-[#cbf400] font-bold text-xl">{item.economia}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="mt-6 p-4 bg-[#cbf400]/10 rounded-xl border border-[#cbf400]/20 text-center">
|
|
<p className="text-[#cbf400] font-bold text-lg">ROI em até 18 meses</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Caso Real */}
|
|
<div className="section-animate mt-8 relative">
|
|
<div className="absolute inset-0 bg-gradient-to-r from-[#cbf400]/20 to-green-500/10 rounded-3xl blur-xl" />
|
|
<div className="relative bg-gradient-to-br from-[#1a1a1a] to-[#0e0e0e] rounded-3xl p-8 border border-[#cbf400]/30">
|
|
<div className="flex items-center gap-3 mb-6">
|
|
<span className="text-3xl">🏆</span>
|
|
<div>
|
|
<h4 className="text-[#cbf400] font-bold text-lg">Caso Real</h4>
|
|
<p className="text-gray-500 text-sm">Condomínio em São Paulo</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-2 gap-6">
|
|
{/* Cabeamento Tradicional */}
|
|
<div className="p-5 bg-red-500/10 rounded-xl border border-red-500/20">
|
|
<p className="text-red-400 text-sm font-medium mb-2">Cabeamento tradicional</p>
|
|
<p className="text-4xl font-black text-red-400">R$ 90.000</p>
|
|
<p className="text-gray-500 text-sm mt-2">Investimento inicial</p>
|
|
</div>
|
|
|
|
{/* VOIP Avanzato */}
|
|
<div className="p-5 bg-[#cbf400]/10 rounded-xl border border-[#cbf400]/30">
|
|
<p className="text-[#cbf400] text-sm font-medium mb-2">Implantação VOIP</p>
|
|
<p className="text-4xl font-black text-[#cbf400]">R$ 9.000</p>
|
|
<p className="text-gray-500 text-sm mt-2">+ R$ 3.000/mês</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-6 p-4 bg-[#cbf400]/20 rounded-xl text-center">
|
|
<p className="text-white font-bold text-xl">
|
|
Economia de <span className="text-[#cbf400]">90%</span> no investimento inicial
|
|
</p>
|
|
<p className="text-gray-400 text-sm mt-1">
|
|
Mesma funcionalidade, sem obras, sem quebra-quebra
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="order-1 lg:order-2">
|
|
<div className="section-animate inline-block px-4 py-2 rounded-full bg-[#cbf400]/10 text-[#cbf400] text-sm font-semibold mb-4 border border-[#cbf400]/20">
|
|
Retorno sobre Investimento
|
|
</div>
|
|
<h2 className="section-animate text-3xl md:text-4xl lg:text-5xl font-black text-white mb-6">
|
|
Redução <span className="text-gradient">real de custos</span> ao longo do tempo
|
|
</h2>
|
|
<p className="section-animate text-gray-400 text-lg mb-8">
|
|
Com a solução Avanzato, o condomínio economiza em diversas áreas:
|
|
</p>
|
|
|
|
<div className="section-animate space-y-4 mb-8">
|
|
{[
|
|
'Linhas telefônicas tradicionais',
|
|
'Cabeamento e infraestrutura obsoleta',
|
|
'Reinstalações a cada troca de prestador',
|
|
'Manutenção corretiva emergencial',
|
|
'Dependência de fornecedores externos',
|
|
].map((item, i) => (
|
|
<div key={i} className="flex items-center gap-3">
|
|
<div className="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center">
|
|
<TrendingDown className="w-4 h-4 text-red-400" />
|
|
</div>
|
|
<span className="text-gray-300">{item}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="section-animate bg-gradient-to-r from-[#cbf400]/20 to-[#cbf400]/5 rounded-xl p-6 border border-[#cbf400]/30">
|
|
<div className="flex items-center gap-3">
|
|
<Wallet className="w-8 h-8 text-[#cbf400]" />
|
|
<div>
|
|
<p className="text-white font-bold text-lg">Investimento único</p>
|
|
<p className="text-gray-400">com economia contínua</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* DIFERENCIAL AVANZATO */}
|
|
<section ref={diferencialRef} className="section-padding bg-[#141414] relative">
|
|
<div className="absolute top-0 right-0 w-[500px] h-[500px] bg-[#cbf400]/5 rounded-full blur-[150px]" />
|
|
|
|
<div className="container-custom relative z-10">
|
|
<div className="text-center max-w-3xl mx-auto mb-16">
|
|
<div className="section-animate inline-block px-4 py-2 rounded-full bg-[#cbf400]/10 text-[#cbf400] text-sm font-semibold mb-4 border border-[#cbf400]/20">
|
|
Por que a Avanzato?
|
|
</div>
|
|
<h2 className="section-animate text-3xl md:text-4xl lg:text-5xl font-black text-white mb-6">
|
|
Mais do que tecnologia:{' '}
|
|
<span className="text-gradient">continuidade operacional</span>
|
|
</h2>
|
|
<p className="section-animate text-gray-400 text-lg">
|
|
A Avanzato não vende equipamentos. Nós garantimos que o seu condomínio funcione sempre.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{[
|
|
{
|
|
icon: <Building2 className="w-6 h-6 text-[#cbf400]" />,
|
|
title: 'Visão corporativa',
|
|
desc: 'Aplicada a condomínios de todos os portes'
|
|
},
|
|
{
|
|
icon: <HardDrive className="w-6 h-6 text-[#cbf400]" />,
|
|
title: 'Ambientes críticos',
|
|
desc: 'Experiência com infraestrutura de missão crítica'
|
|
},
|
|
{
|
|
icon: <Clock className="w-6 h-6 text-[#cbf400]" />,
|
|
title: 'Monitoramento contínuo',
|
|
desc: '24x7 com alertas em tempo real'
|
|
},
|
|
{
|
|
icon: <FileCheck className="w-6 h-6 text-[#cbf400]" />,
|
|
title: 'Documentação completa',
|
|
desc: 'Todo o ambiente mapeado e documentado'
|
|
},
|
|
{
|
|
icon: <Headphones className="w-6 h-6 text-[#cbf400]" />,
|
|
title: 'Suporte especializado',
|
|
desc: 'Equipe técnica qualificada e disponível'
|
|
},
|
|
{
|
|
icon: <Shield className="w-6 h-6 text-[#cbf400]" />,
|
|
title: 'Garantia de serviço',
|
|
desc: 'SLA definido e cumprido rigorosamente'
|
|
},
|
|
].map((item, i) => (
|
|
<div
|
|
key={i}
|
|
className="section-animate bg-[#1a1a1a] rounded-2xl p-6 border border-white/5 hover:border-[#cbf400]/30 transition-all duration-300 group"
|
|
>
|
|
<div className="w-14 h-14 rounded-xl bg-[#cbf400]/10 flex items-center justify-center mb-4 group-hover:bg-[#cbf400]/20 transition-colors">
|
|
{item.icon}
|
|
</div>
|
|
<h4 className="text-white font-bold text-lg mb-2">{item.title}</h4>
|
|
<p className="text-gray-400 text-sm">{item.desc}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* COMO FUNCIONA */}
|
|
<section ref={comoFuncionaRef} className="section-padding bg-[#0e0e0e] relative">
|
|
<div className="container-custom">
|
|
<div className="text-center max-w-3xl mx-auto mb-16">
|
|
<div className="section-animate inline-block px-4 py-2 rounded-full bg-[#cbf400]/10 text-[#cbf400] text-sm font-semibold mb-4 border border-[#cbf400]/20">
|
|
Processo
|
|
</div>
|
|
<h2 className="section-animate text-3xl md:text-4xl lg:text-5xl font-black text-white mb-6">
|
|
Implantação <span className="text-gradient">simples e estruturada</span>
|
|
</h2>
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-4 gap-6">
|
|
{[
|
|
{
|
|
step: '01',
|
|
icon: <Network className="w-8 h-8 text-[#cbf400]" />,
|
|
title: 'Diagnóstico',
|
|
desc: 'Análise completa do ambiente atual e necessidades'
|
|
},
|
|
{
|
|
step: '02',
|
|
icon: <FileCheck className="w-8 h-8 text-[#cbf400]" />,
|
|
title: 'Projeto',
|
|
desc: 'Solução personalizada com cronograma detalhado'
|
|
},
|
|
{
|
|
step: '03',
|
|
icon: <Server className="w-8 h-8 text-[#cbf400]" />,
|
|
title: 'Implantação',
|
|
desc: 'Execução profissional com mínimo de interrupção'
|
|
},
|
|
{
|
|
step: '04',
|
|
icon: <Headphones className="w-8 h-8 text-[#cbf400]" />,
|
|
title: 'Suporte',
|
|
desc: 'Monitoramento contínuo e atendimento especializado'
|
|
},
|
|
].map((item, i) => (
|
|
<div key={i} className="section-animate relative">
|
|
{i < 3 && (
|
|
<div className="hidden md:block absolute top-16 left-full w-full h-0.5 bg-gradient-to-r from-[#cbf400]/50 to-transparent" />
|
|
)}
|
|
<div className="bg-[#1a1a1a] rounded-2xl p-6 border border-white/5 hover:border-[#cbf400]/30 transition-all duration-300 text-center">
|
|
<div className="text-5xl font-black text-[#cbf400]/20 mb-4">{item.step}</div>
|
|
<div className="w-16 h-16 rounded-xl bg-[#cbf400]/10 flex items-center justify-center mx-auto mb-4">
|
|
{item.icon}
|
|
</div>
|
|
<h4 className="text-white font-bold text-lg mb-2">{item.title}</h4>
|
|
<p className="text-gray-400 text-sm">{item.desc}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* CASOS DE USO */}
|
|
<section ref={casosUsoRef} className="section-padding bg-[#141414] relative">
|
|
<div className="container-custom">
|
|
<div className="text-center max-w-3xl mx-auto mb-16">
|
|
<div className="section-animate inline-block px-4 py-2 rounded-full bg-[#cbf400]/10 text-[#cbf400] text-sm font-semibold mb-4 border border-[#cbf400]/20">
|
|
Aplicações
|
|
</div>
|
|
<h2 className="section-animate text-3xl md:text-4xl lg:text-5xl font-black text-white mb-6">
|
|
Onde nossa solução <span className="text-gradient">se aplica</span>
|
|
</h2>
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{[
|
|
{
|
|
icon: <Building2 className="w-6 h-6 text-[#cbf400]" />,
|
|
title: 'Condomínios novos',
|
|
desc: 'Implantação desde o projeto, com tecnologia de ponta'
|
|
},
|
|
{
|
|
icon: <Zap className="w-6 h-6 text-[#cbf400]" />,
|
|
title: 'Modernização',
|
|
desc: 'Atualização de sistemas antigos e obsoletos'
|
|
},
|
|
{
|
|
icon: <Users className="w-6 h-6 text-[#cbf400]" />,
|
|
title: 'Troca de portaria',
|
|
desc: 'Mudança de empresa sem perder investimento'
|
|
},
|
|
{
|
|
icon: <AlertTriangle className="w-6 h-6 text-[#cbf400]" />,
|
|
title: 'Falhas recorrentes',
|
|
desc: 'Ambientes com problemas constantes de tecnologia'
|
|
},
|
|
{
|
|
icon: <Star className="w-6 h-6 text-[#cbf400]" />,
|
|
title: 'Alto padrão',
|
|
desc: 'Condomínios que exigem tecnologia de excelência'
|
|
},
|
|
{
|
|
icon: <TrendingDown className="w-6 h-6 text-[#cbf400]" />,
|
|
title: 'Redução de custos',
|
|
desc: 'Condomínios buscando economia sem perder qualidade'
|
|
},
|
|
].map((item, i) => (
|
|
<div
|
|
key={i}
|
|
className="section-animate bg-[#1a1a1a] rounded-2xl p-6 border border-white/5 hover:border-[#cbf400]/30 transition-all duration-300"
|
|
>
|
|
<div className="w-12 h-12 rounded-xl bg-[#cbf400]/10 flex items-center justify-center mb-4">
|
|
{item.icon}
|
|
</div>
|
|
<h4 className="text-white font-bold text-lg mb-2">{item.title}</h4>
|
|
<p className="text-gray-400 text-sm">{item.desc}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* CTA + FORMULÁRIO */}
|
|
<section ref={ctaRef} className="section-padding bg-[#0e0e0e] relative">
|
|
<div className="absolute inset-0 bg-gradient-to-b from-[#141414] to-[#0e0e0e]" />
|
|
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[600px] bg-[#cbf400]/5 rounded-full blur-[150px]" />
|
|
|
|
<div className="container-custom relative z-10">
|
|
<div className="max-w-4xl mx-auto">
|
|
<div className="text-center mb-12">
|
|
<div className="section-animate inline-block px-4 py-2 rounded-full bg-[#cbf400]/10 text-[#cbf400] text-sm font-semibold mb-4 border border-[#cbf400]/20">
|
|
Comece Agora
|
|
</div>
|
|
<h2 className="section-animate text-3xl md:text-4xl lg:text-5xl font-black text-white mb-6">
|
|
Descubra o <span className="text-gradient">potencial tecnológico</span> do seu condomínio
|
|
</h2>
|
|
<p className="section-animate text-gray-400 text-lg">
|
|
Solicite um diagnóstico gratuito e veja como reduzir custos e aumentar a segurança.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="section-animate bg-[#1a1a1a] rounded-3xl p-8 md:p-12 border border-white/10">
|
|
<form onSubmit={handleSubmit} className="space-y-6">
|
|
<div className="grid md:grid-cols-2 gap-6">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="nome" className="text-white">Nome completo *</Label>
|
|
<Input
|
|
id="nome"
|
|
name="nome"
|
|
value={formData.nome}
|
|
onChange={handleInputChange}
|
|
placeholder="Seu nome"
|
|
required
|
|
className="bg-[#0e0e0e] border-white/10 text-white placeholder:text-gray-500 focus:border-[#cbf400]"
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="condominio" className="text-white">Nome do Condomínio *</Label>
|
|
<Input
|
|
id="condominio"
|
|
name="condominio"
|
|
value={formData.condominio}
|
|
onChange={handleInputChange}
|
|
placeholder="Nome do condomínio"
|
|
required
|
|
className="bg-[#0e0e0e] border-white/10 text-white placeholder:text-gray-500 focus:border-[#cbf400]"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-2 gap-6">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="unidades" className="text-white">Número de unidades *</Label>
|
|
<Input
|
|
id="unidades"
|
|
name="unidades"
|
|
value={formData.unidades}
|
|
onChange={handleInputChange}
|
|
placeholder="Ex: 120"
|
|
required
|
|
className="bg-[#0e0e0e] border-white/10 text-white placeholder:text-gray-500 focus:border-[#cbf400]"
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="cidade" className="text-white">Cidade *</Label>
|
|
<Input
|
|
id="cidade"
|
|
name="cidade"
|
|
value={formData.cidade}
|
|
onChange={handleInputChange}
|
|
placeholder="Sua cidade"
|
|
required
|
|
className="bg-[#0e0e0e] border-white/10 text-white placeholder:text-gray-500 focus:border-[#cbf400]"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-2 gap-6">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="whatsapp" className="text-white">WhatsApp *</Label>
|
|
<Input
|
|
id="whatsapp"
|
|
name="whatsapp"
|
|
value={formData.whatsapp}
|
|
onChange={handleInputChange}
|
|
placeholder="(11) 99999-9999"
|
|
required
|
|
className="bg-[#0e0e0e] border-white/10 text-white placeholder:text-gray-500 focus:border-[#cbf400]"
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="email" className="text-white">E-mail *</Label>
|
|
<Input
|
|
id="email"
|
|
name="email"
|
|
type="email"
|
|
value={formData.email}
|
|
onChange={handleInputChange}
|
|
placeholder="seu@email.com"
|
|
required
|
|
className="bg-[#0e0e0e] border-white/10 text-white placeholder:text-gray-500 focus:border-[#cbf400]"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-2 gap-6">
|
|
<div className="space-y-3">
|
|
<Label className="text-white">Usa portaria remota?</Label>
|
|
<RadioGroup
|
|
value={formData.portariaRemota}
|
|
onValueChange={(value) => setFormData(prev => ({ ...prev, portariaRemota: value }))}
|
|
className="flex gap-4"
|
|
>
|
|
<div className="flex items-center space-x-2">
|
|
<RadioGroupItem value="sim" id="portaria-sim" className="border-white/20 text-[#cbf400]" />
|
|
<Label htmlFor="portaria-sim" className="text-gray-300">Sim</Label>
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<RadioGroupItem value="nao" id="portaria-nao" className="border-white/20 text-[#cbf400]" />
|
|
<Label htmlFor="portaria-nao" className="text-gray-300">Não</Label>
|
|
</div>
|
|
</RadioGroup>
|
|
</div>
|
|
<div className="space-y-3">
|
|
<Label className="text-white">Possui sala técnica/CPD?</Label>
|
|
<RadioGroup
|
|
value={formData.possuiCpd}
|
|
onValueChange={(value) => setFormData(prev => ({ ...prev, possuiCpd: value }))}
|
|
className="flex gap-4"
|
|
>
|
|
<div className="flex items-center space-x-2">
|
|
<RadioGroupItem value="sim" id="cpd-sim" className="border-white/20 text-[#cbf400]" />
|
|
<Label htmlFor="cpd-sim" className="text-gray-300">Sim</Label>
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<RadioGroupItem value="nao" id="cpd-nao" className="border-white/20 text-[#cbf400]" />
|
|
<Label htmlFor="cpd-nao" className="text-gray-300">Não</Label>
|
|
</div>
|
|
</RadioGroup>
|
|
</div>
|
|
</div>
|
|
|
|
<Button
|
|
type="submit"
|
|
className="w-full bg-[#cbf400] text-[#0e0e0e] hover:bg-[#b8e000] py-6 text-lg font-bold rounded-xl transition-all duration-300 hover:scale-[1.02]"
|
|
>
|
|
Quero meu diagnóstico gratuito
|
|
<ArrowRight className="ml-2 w-5 h-5" />
|
|
</Button>
|
|
|
|
<p className="text-center text-gray-500 text-sm">
|
|
Seus dados estão seguros. Não enviamos spam.
|
|
</p>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Dialog de confirmação */}
|
|
<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
|
|
<DialogContent className="bg-[#1a1a1a] border-white/10 text-white">
|
|
<DialogHeader>
|
|
<DialogTitle className="text-2xl font-bold text-center">
|
|
<span className="text-[#cbf400]">✓</span> Solicitação enviada!
|
|
</DialogTitle>
|
|
</DialogHeader>
|
|
<div className="text-center py-4">
|
|
<p className="text-gray-300 mb-4">
|
|
Obrigado pelo interesse! Nossa equipe entrará em contato em até 24 horas úteis.
|
|
</p>
|
|
<Button
|
|
onClick={() => setIsDialogOpen(false)}
|
|
className="bg-[#cbf400] text-[#0e0e0e] hover:bg-[#b8e000]"
|
|
>
|
|
Entendi
|
|
</Button>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
{/* SEO Content - Hidden but indexable */}
|
|
<section className="sr-only">
|
|
<h1>Tecnologia para Condomínios | VOIP e Infraestrutura | Avanzato</h1>
|
|
<p>Reduza custos e tenha independência com VOIP e infraestrutura para condomínios. Diagnóstico gratuito com a Avanzato.</p>
|
|
<p>Palavras-chave: tecnologia para condomínios, voip para condomínio, infraestrutura de TI condomínio, cpd condomínio, rede para condomínio, portaria remota tecnologia</p>
|
|
|
|
<article>
|
|
<h2>Quanto custa depender da portaria remota?</h2>
|
|
<p>Muitos condomínios não percebem o custo oculto da dependência tecnológica de empresas de portaria remota. A cada troca de prestador, todo o investimento em equipamentos e infraestrutura pode ser perdido.</p>
|
|
<p>Com a solução Avanzato, o condomínio mantém o controle da própria tecnologia, independente de qual empresa preste o serviço de portaria.</p>
|
|
</article>
|
|
</section>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// Ícones adicionais
|
|
const AlertTriangle = ({ className }: { className?: string }) => (
|
|
<svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<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>
|
|
);
|
|
|
|
const Star = ({ className }: { className?: string }) => (
|
|
<svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
|
|
</svg>
|
|
);
|
|
|
|
export default Condominios;
|