Aplicativos de Atrair Leads

This commit is contained in:
2026-06-03 22:07:59 -03:00
parent e5c18bb6fc
commit fdfb4606f0
16 changed files with 371 additions and 235 deletions
+158 -147
View File
@@ -1,4 +1,4 @@
import { useEffect, useState } from 'react';
import { useEffect, useState, lazy, Suspense } from 'react';
import { BrowserRouter as Router, Routes, Route, useLocation } from 'react-router-dom';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
@@ -8,78 +8,80 @@ import WhatsAppWidget from './components/WhatsAppWidget';
import CookieConsent from './components/CookieConsent';
import HomologationBanner from './components/HomologationBanner';
// Páginas
// Página inicial carrega direto (mais acessada)
import Home from './pages/Home';
import Sobre from './pages/Sobre';
import Blog from './pages/Blog';
import BlogPost from './pages/BlogPost';
import Cases from './pages/Cases';
import Contato from './pages/Contato';
import Privacidade from './pages/Privacidade';
import Termos from './pages/Termos';
import NotFound from './pages/NotFound';
// Todas as outras páginas com lazy loading para reduzir bundle inicial
const Sobre = lazy(() => import('./pages/Sobre'));
const Blog = lazy(() => import('./pages/Blog'));
const BlogPost = lazy(() => import('./pages/BlogPost'));
const Cases = lazy(() => import('./pages/Cases'));
const Contato = lazy(() => import('./pages/Contato'));
const Privacidade = lazy(() => import('./pages/Privacidade'));
const Termos = lazy(() => import('./pages/Termos'));
// Páginas de Serviços
import TiGerenciada from './pages/services/TiGerenciada';
import CloudComputing from './pages/services/CloudComputing';
import Seguranca from './pages/services/Seguranca';
import Suporte from './pages/services/Suporte';
import Redes from './pages/services/Redes';
import Pabx from './pages/services/Pabx';
import Backup from './pages/services/Backup';
import Servidores from './pages/services/Servidores';
import Consultoria from './pages/services/Consultoria';
import Noc from './pages/services/Noc';
const TiGerenciada = lazy(() => import('./pages/services/TiGerenciada'));
const CloudComputing = lazy(() => import('./pages/services/CloudComputing'));
const Seguranca = lazy(() => import('./pages/services/Seguranca'));
const Suporte = lazy(() => import('./pages/services/Suporte'));
const Redes = lazy(() => import('./pages/services/Redes'));
const Pabx = lazy(() => import('./pages/services/Pabx'));
const Backup = lazy(() => import('./pages/services/Backup'));
const Servidores = lazy(() => import('./pages/services/Servidores'));
const Consultoria = lazy(() => import('./pages/services/Consultoria'));
const Noc = lazy(() => import('./pages/services/Noc'));
// Páginas de Tecnologias (SEO)
import Tecnologias from './pages/Tecnologias';
import WindowsServer from './pages/tech/WindowsServer';
import Linux from './pages/tech/Linux';
import PfSense from './pages/tech/PfSense';
import Proxmox from './pages/tech/Proxmox';
import Vmware from './pages/tech/Vmware';
import Sharepoint from './pages/tech/Sharepoint';
import Cisco from './pages/tech/Cisco';
const Tecnologias = lazy(() => import('./pages/Tecnologias'));
const WindowsServer = lazy(() => import('./pages/tech/WindowsServer'));
const Linux = lazy(() => import('./pages/tech/Linux'));
const PfSense = lazy(() => import('./pages/tech/PfSense'));
const Proxmox = lazy(() => import('./pages/tech/Proxmox'));
const Vmware = lazy(() => import('./pages/tech/Vmware'));
const Sharepoint = lazy(() => import('./pages/tech/Sharepoint'));
const Cisco = lazy(() => import('./pages/tech/Cisco'));
// Avaliador de Maturidade Tecnológica
import Avaliador from './pages/Avaliador';
import Condominios from './pages/Condominios';
const Avaliador = lazy(() => import('./pages/Avaliador'));
const Condominios = lazy(() => import('./pages/Condominios'));
// Landing Pages por Nicho
import Contabilidade from './pages/nichos/Contabilidade';
import Advocacia from './pages/nichos/Advocacia';
import Monitoramento from './pages/nichos/Monitoramento';
import FirewallPfSense from './pages/nichos/FirewallPfSense';
import BackupCorporativo from './pages/nichos/BackupCorporativo';
import VoipEmpresarial from './pages/nichos/VoipEmpresarial';
const Contabilidade = lazy(() => import('./pages/nichos/Contabilidade'));
const Advocacia = lazy(() => import('./pages/nichos/Advocacia'));
const Monitoramento = lazy(() => import('./pages/nichos/Monitoramento'));
const FirewallPfSense = lazy(() => import('./pages/nichos/FirewallPfSense'));
const BackupCorporativo = lazy(() => import('./pages/nichos/BackupCorporativo'));
const VoipEmpresarial = lazy(() => import('./pages/nichos/VoipEmpresarial'));
// SEO Local - Onde Atuamos
import OndeAtuamos from './pages/OndeAtuamos';
import LocalGuarulhos from './pages/local-guarulhos';
import LocalMogi from './pages/local-mogi-das-cruzes';
import LocalIpiranga from './pages/local-ipiranga';
import LocalVilaFormosa from './pages/local-vila-formosa';
import LocalCerqueiraCesar from './pages/local-cerqueira-cesar';
import LocalSantana from './pages/local-santana';
import LocalBras from './pages/local-bras';
import LocalRibeiraoPreto from './pages/local-ribeirao-preto';
const OndeAtuamos = lazy(() => import('./pages/OndeAtuamos'));
const LocalGuarulhos = lazy(() => import('./pages/local-guarulhos'));
const LocalMogi = lazy(() => import('./pages/local-mogi-das-cruzes'));
const LocalIpiranga = lazy(() => import('./pages/local-ipiranga'));
const LocalVilaFormosa = lazy(() => import('./pages/local-vila-formosa'));
const LocalCerqueiraCesar = lazy(() => import('./pages/local-cerqueira-cesar'));
const LocalSantana = lazy(() => import('./pages/local-santana'));
const LocalBras = lazy(() => import('./pages/local-bras'));
const LocalRibeiraoPreto = lazy(() => import('./pages/local-ribeirao-preto'));
// Nichos adicionais
import NichoIndustria from './pages/nicho-industria';
import NichoPortaria from './pages/nicho-portaria-remota';
import NichoClinicas from './pages/nicho-clinicas';
import NichoImobiliarias from './pages/nicho-imobiliarias';
import NichoRecrutamento from './pages/nicho-recrutamento-selecao';
const NichoIndustria = lazy(() => import('./pages/nicho-industria'));
const NichoPortaria = lazy(() => import('./pages/nicho-portaria-remota'));
const NichoClinicas = lazy(() => import('./pages/nicho-clinicas'));
const NichoImobiliarias = lazy(() => import('./pages/nicho-imobiliarias'));
const NichoRecrutamento = lazy(() => import('./pages/nicho-recrutamento-selecao'));
// Avanzato Tools
import Ferramentas from './pages/ferramentas';
import SpfChecker from './pages/ferramentas/SpfChecker';
import DkimChecker from './pages/ferramentas/DkimChecker';
import DmarcChecker from './pages/ferramentas/DmarcChecker';
import MxLookup from './pages/ferramentas/MxLookup';
import SslChecker from './pages/ferramentas/SslChecker';
import EmailSecurityScore from './pages/ferramentas/EmailSecurityScore';
import Microsoft365Analyzer from './pages/ferramentas/Microsoft365Analyzer';
const Ferramentas = lazy(() => import('./pages/ferramentas'));
const SpfChecker = lazy(() => import('./pages/ferramentas/SpfChecker'));
const DkimChecker = lazy(() => import('./pages/ferramentas/DkimChecker'));
const DmarcChecker = lazy(() => import('./pages/ferramentas/DmarcChecker'));
const MxLookup = lazy(() => import('./pages/ferramentas/MxLookup'));
const SslChecker = lazy(() => import('./pages/ferramentas/SslChecker'));
const EmailSecurityScore = lazy(() => import('./pages/ferramentas/EmailSecurityScore'));
const Microsoft365Analyzer = lazy(() => import('./pages/ferramentas/Microsoft365Analyzer'));
import './App.css';
@@ -88,20 +90,20 @@ gsap.registerPlugin(ScrollTrigger);
// Componente para scroll ao topo ao mudar de página
function ScrollToTop() {
const { pathname } = useLocation();
useEffect(() => {
window.scrollTo(0, 0);
// Refresh ScrollTrigger ao mudar de página
ScrollTrigger.refresh();
}, [pathname]);
return null;
}
// Componente de Progress Bar
function ProgressBar() {
const [scrollProgress, setScrollProgress] = useState(0);
useEffect(() => {
const handleScroll = () => {
const scrollTop = window.scrollY;
@@ -113,7 +115,7 @@ function ProgressBar() {
window.addEventListener('scroll', handleScroll, { passive: true });
return () => window.removeEventListener('scroll', handleScroll);
}, []);
return (
<div
className="progress-bar"
@@ -122,6 +124,13 @@ function ProgressBar() {
);
}
// Loading simples para lazy load
const PageLoader = () => (
<div className="min-h-screen bg-[#0e0e0e] flex items-center justify-center">
<div className="w-8 h-8 border-2 border-[#cbf400] border-t-transparent rounded-full animate-spin" />
</div>
);
function App() {
return (
<Router>
@@ -129,98 +138,100 @@ function App() {
<div className="relative bg-[#0e0e0e] min-h-screen">
<ProgressBar />
<Navigation />
<main>
<Routes>
{/* Página Inicial */}
<Route path="/" element={<Home />} />
{/* Sobre */}
<Route path="/sobre" element={<Sobre />} />
{/* Serviços */}
<Route path="/servicos/ti-gerenciada" element={<TiGerenciada />} />
<Route path="/servicos/cloud-computing" element={<CloudComputing />} />
<Route path="/servicos/seguranca" element={<Seguranca />} />
<Route path="/servicos/suporte" element={<Suporte />} />
<Route path="/servicos/redes" element={<Redes />} />
<Route path="/servicos/pabx" element={<Pabx />} />
<Route path="/servicos/backup" element={<Backup />} />
<Route path="/servicos/servidores" element={<Servidores />} />
<Route path="/servicos/consultoria" element={<Consultoria />} />
<Route path="/servicos/noc" element={<Noc />} />
{/* Blog */}
<Route path="/blog" element={<Blog />} />
<Route path="/blog/:slug" element={<BlogPost />} />
{/* Cases */}
<Route path="/cases" element={<Cases />} />
{/* Tecnologias (SEO) */}
<Route path="/tecnologias" element={<Tecnologias />} />
<Route path="/suporte-windows-server" element={<WindowsServer />} />
<Route path="/suporte-linux-empresas" element={<Linux />} />
<Route path="/suporte-pfsense" element={<PfSense />} />
<Route path="/suporte-proxmox" element={<Proxmox />} />
<Route path="/suporte-vmware" element={<Vmware />} />
<Route path="/suporte-sharepoint" element={<Sharepoint />} />
<Route path="/suporte-redes-cisco" element={<Cisco />} />
{/* Avaliador de Maturidade */}
<Route path="/avaliacao" element={<Avaliador />} />
{/* Tecnologia para Condomínios */}
<Route path="/tecnologia-para-condominios" element={<Condominios />} />
{/* Landing Pages por Nicho */}
<Route path="/ti-para-contabilidades" element={<Contabilidade />} />
<Route path="/ti-para-advocacias" element={<Advocacia />} />
<Route path="/monitoramento-empresarial" element={<Monitoramento />} />
<Route path="/firewall-pfsense-empresarial" element={<FirewallPfSense />} />
<Route path="/backup-corporativo" element={<BackupCorporativo />} />
<Route path="/voip-empresarial" element={<VoipEmpresarial />} />
<Suspense fallback={<PageLoader />}>
<Routes>
{/* Página Inicial - carrega direto */}
<Route path="/" element={<Home />} />
{/* SEO Local - Onde Atuamos */}
<Route path="/onde-atuamos" element={<OndeAtuamos />} />
<Route path="/suporte-ti-guarulhos" element={<LocalGuarulhos />} />
<Route path="/suporte-ti-mogi-das-cruzes" element={<LocalMogi />} />
<Route path="/suporte-ti-ipiranga" element={<LocalIpiranga />} />
<Route path="/suporte-ti-vila-formosa" element={<LocalVilaFormosa />} />
<Route path="/suporte-ti-cerqueira-cesar" element={<LocalCerqueiraCesar />} />
<Route path="/suporte-ti-santana" element={<LocalSantana />} />
<Route path="/suporte-ti-bras" element={<LocalBras />} />
<Route path="/suporte-ti-ribeirao-preto" element={<LocalRibeiraoPreto />} />
{/* Sobre */}
<Route path="/sobre" element={<Sobre />} />
{/* Nichos adicionais */}
<Route path="/suporte-ti-industria" element={<NichoIndustria />} />
<Route path="/suporte-ti-portaria-remota" element={<NichoPortaria />} />
<Route path="/suporte-ti-clinicas" element={<NichoClinicas />} />
<Route path="/suporte-ti-imobiliarias" element={<NichoImobiliarias />} />
<Route path="/suporte-ti-recrutamento-selecao" element={<NichoRecrutamento />} />
{/* Serviços */}
<Route path="/servicos/ti-gerenciada" element={<TiGerenciada />} />
<Route path="/servicos/cloud-computing" element={<CloudComputing />} />
<Route path="/servicos/seguranca" element={<Seguranca />} />
<Route path="/servicos/suporte" element={<Suporte />} />
<Route path="/servicos/redes" element={<Redes />} />
<Route path="/servicos/pabx" element={<Pabx />} />
<Route path="/servicos/backup" element={<Backup />} />
<Route path="/servicos/servidores" element={<Servidores />} />
<Route path="/servicos/consultoria" element={<Consultoria />} />
<Route path="/servicos/noc" element={<Noc />} />
{/* Contato */}
<Route path="/contato" element={<Contato />} />
{/* Páginas Legais */}
<Route path="/privacidade" element={<Privacidade />} />
<Route path="/termos" element={<Termos />} />
{/* 404 */}
{/* Avanzato Tools */}
<Route path="/ferramentas" element={<Ferramentas />} />
<Route path="/ferramentas/spf-checker" element={<SpfChecker />} />
<Route path="/ferramentas/dkim-checker" element={<DkimChecker />} />
<Route path="/ferramentas/dmarc-checker" element={<DmarcChecker />} />
<Route path="/ferramentas/mx-lookup" element={<MxLookup />} />
<Route path="/ferramentas/ssl-checker" element={<SslChecker />} />
<Route path="/ferramentas/email-security-score" element={<EmailSecurityScore />} />
<Route path="/ferramentas/microsoft-365-analyzer" element={<Microsoft365Analyzer />} />
{/* Blog */}
<Route path="/blog" element={<Blog />} />
<Route path="/blog/:slug" element={<BlogPost />} />
<Route path="*" element={<NotFound />} />
</Routes>
{/* Cases */}
<Route path="/cases" element={<Cases />} />
{/* Tecnologias (SEO) */}
<Route path="/tecnologias" element={<Tecnologias />} />
<Route path="/suporte-windows-server" element={<WindowsServer />} />
<Route path="/suporte-linux-empresas" element={<Linux />} />
<Route path="/suporte-pfsense" element={<PfSense />} />
<Route path="/suporte-proxmox" element={<Proxmox />} />
<Route path="/suporte-vmware" element={<Vmware />} />
<Route path="/suporte-sharepoint" element={<Sharepoint />} />
<Route path="/suporte-redes-cisco" element={<Cisco />} />
{/* Avaliador de Maturidade */}
<Route path="/avaliacao" element={<Avaliador />} />
{/* Tecnologia para Condomínios */}
<Route path="/tecnologia-para-condominios" element={<Condominios />} />
{/* Landing Pages por Nicho */}
<Route path="/ti-para-contabilidades" element={<Contabilidade />} />
<Route path="/ti-para-advocacias" element={<Advocacia />} />
<Route path="/monitoramento-empresarial" element={<Monitoramento />} />
<Route path="/firewall-pfsense-empresarial" element={<FirewallPfSense />} />
<Route path="/backup-corporativo" element={<BackupCorporativo />} />
<Route path="/voip-empresarial" element={<VoipEmpresarial />} />
{/* SEO Local - Onde Atuamos */}
<Route path="/onde-atuamos" element={<OndeAtuamos />} />
<Route path="/suporte-ti-guarulhos" element={<LocalGuarulhos />} />
<Route path="/suporte-ti-mogi-das-cruzes" element={<LocalMogi />} />
<Route path="/suporte-ti-ipiranga" element={<LocalIpiranga />} />
<Route path="/suporte-ti-vila-formosa" element={<LocalVilaFormosa />} />
<Route path="/suporte-ti-cerqueira-cesar" element={<LocalCerqueiraCesar />} />
<Route path="/suporte-ti-santana" element={<LocalSantana />} />
<Route path="/suporte-ti-bras" element={<LocalBras />} />
<Route path="/suporte-ti-ribeirao-preto" element={<LocalRibeiraoPreto />} />
{/* Nichos adicionais */}
<Route path="/suporte-ti-industria" element={<NichoIndustria />} />
<Route path="/suporte-ti-portaria-remota" element={<NichoPortaria />} />
<Route path="/suporte-ti-clinicas" element={<NichoClinicas />} />
<Route path="/suporte-ti-imobiliarias" element={<NichoImobiliarias />} />
<Route path="/suporte-ti-recrutamento-selecao" element={<NichoRecrutamento />} />
{/* Contato */}
<Route path="/contato" element={<Contato />} />
{/* Páginas Legais */}
<Route path="/privacidade" element={<Privacidade />} />
<Route path="/termos" element={<Termos />} />
{/* Avanzato Tools */}
<Route path="/ferramentas" element={<Ferramentas />} />
<Route path="/ferramentas/spf-checker" element={<SpfChecker />} />
<Route path="/ferramentas/dkim-checker" element={<DkimChecker />} />
<Route path="/ferramentas/dmarc-checker" element={<DmarcChecker />} />
<Route path="/ferramentas/mx-lookup" element={<MxLookup />} />
<Route path="/ferramentas/ssl-checker" element={<SslChecker />} />
<Route path="/ferramentas/email-security-score" element={<EmailSecurityScore />} />
<Route path="/ferramentas/microsoft-365-analyzer" element={<Microsoft365Analyzer />} />
{/* 404 */}
<Route path="*" element={<NotFound />} />
</Routes>
</Suspense>
</main>
<Footer />
<WhatsAppWidget />
<CookieConsent />
+15 -9
View File
@@ -143,11 +143,17 @@ const About = () => {
{/* Image */}
<div ref={imageRef} className="relative">
<div className="relative rounded-2xl overflow-hidden shadow-2xl border border-white/5">
<img
src="/about-image.jpg"
alt="Equipe Avanzato"
className="w-full h-auto object-cover"
/>
<picture>
<source srcSet="/about-image.webp" type="image/webp" />
<img
src="/about-image.jpg"
alt="Equipe Avanzato"
loading="lazy"
width="500"
height="685"
className="w-full h-auto object-cover"
/>
</picture>
{/* Glassmorphism overlay card */}
<div className="absolute bottom-6 left-6 right-6 glass rounded-xl p-6 border border-[#cbf400]/20">
@@ -222,28 +228,28 @@ const About = () => {
>
<div className="text-center">
<Counter end={500} suffix="+" />
<div className="flex items-center justify-center gap-2 mt-2 text-gray-500">
<div className="flex items-center justify-center gap-2 mt-2 text-gray-400">
<Users className="w-4 h-4" />
<span className="text-sm">Clientes atendidos</span>
</div>
</div>
<div className="text-center">
<Counter end={99} suffix=".9%" />
<div className="flex items-center justify-center gap-2 mt-2 text-gray-500">
<div className="flex items-center justify-center gap-2 mt-2 text-gray-400">
<Clock className="w-4 h-4" />
<span className="text-sm">Uptime garantido</span>
</div>
</div>
<div className="text-center">
<Counter end={23} suffix="+" />
<div className="flex items-center justify-center gap-2 mt-2 text-gray-500">
<div className="flex items-center justify-center gap-2 mt-2 text-gray-400">
<Award className="w-4 h-4" />
<span className="text-sm">Anos de experiência</span>
</div>
</div>
<div className="text-center">
<Counter end={24} suffix="/7" />
<div className="flex items-center justify-center gap-2 mt-2 text-gray-500">
<div className="flex items-center justify-center gap-2 mt-2 text-gray-400">
<Users className="w-4 h-4" />
<span className="text-sm">Suporte técnico</span>
</div>
+4 -4
View File
@@ -117,7 +117,7 @@ const CondominiosCTA = () => {
<Phone className="w-6 h-6 text-[#cbf400]" />
</div>
<div>
<h4 className="text-white font-bold">VOIP para Condomínios</h4>
<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>
@@ -127,7 +127,7 @@ const CondominiosCTA = () => {
<Server className="w-6 h-6 text-blue-400" />
</div>
<div>
<h4 className="text-white font-bold">Gestão de CPD</h4>
<h3 className="text-white font-bold">Gestão de CPD</h3>
<p className="text-gray-500 text-sm">Infraestrutura profissional</p>
</div>
</div>
@@ -137,7 +137,7 @@ const CondominiosCTA = () => {
<Wifi className="w-6 h-6 text-purple-400" />
</div>
<div>
<h4 className="text-white font-bold">Rede e Conectividade</h4>
<h3 className="text-white font-bold">Rede e Conectividade</h3>
<p className="text-gray-500 text-sm">Alta disponibilidade</p>
</div>
</div>
@@ -147,7 +147,7 @@ const CondominiosCTA = () => {
<Shield className="w-6 h-6 text-red-400" />
</div>
<div>
<h4 className="text-white font-bold">Segurança</h4>
<h3 className="text-white font-bold">Segurança</h3>
<p className="text-gray-500 text-sm">Monitoramento 24/7</p>
</div>
</div>
+12 -6
View File
@@ -247,13 +247,19 @@ const Hero = () => {
{/* Glow effect */}
<div className="absolute -inset-4 bg-gradient-to-r from-[#cbf400]/20 to-[#cbf400]/10 rounded-2xl blur-2xl opacity-50" />
{/* Dashboard image */}
{/* Dashboard image com WebP + fetchpriority alta */}
<div className="relative rounded-2xl overflow-hidden shadow-2xl border border-[#cbf400]/20">
<img
src="/hero-dashboard.jpg"
alt="Dashboard Avanzato"
className="w-full h-auto"
/>
<picture>
<source srcSet="/hero-dashboard.webp" type="image/webp" />
<img
src="/hero-dashboard.jpg"
alt="Dashboard Avanzato"
fetchPriority="high"
width="800"
height="500"
className="w-full h-auto"
/>
</picture>
{/* Glossy overlay */}
<div
+1 -1
View File
@@ -46,7 +46,7 @@ const Navigation = () => {
<div className="container-custom">
<div className="flex items-center justify-between h-20">
{/* Logo - importado de config/site.ts */}
<Link to={LOGO.href} className="flex items-center">
<Link to={LOGO.href} className="flex items-center" aria-label="Avanzato Tecnologia - Pagina inicial">
{renderLogo()}
</Link>
+15 -6
View File
@@ -121,6 +121,9 @@ const ServiceCard = ({ service }: { service: Service }) => {
setMousePos({ x, y });
};
// Gerar caminho WebP com fallback PNG/JPG
const webpImage = service.image.replace(/\.(png|jpg|jpeg)$/, '.webp');
return (
<div
ref={cardRef}
@@ -138,13 +141,19 @@ const ServiceCard = ({ service }: { service: Service }) => {
setMousePos({ x: 0, y: 0 });
}}
>
{/* Image container */}
{/* Image container com WebP + lazy loading */}
<div className="relative h-48 bg-gradient-to-br from-[#2a2a2a] to-[#1a1a1a] overflow-hidden">
<img
src={service.image}
alt={service.title}
className="w-full h-full object-contain p-6 transition-transform duration-500 group-hover:scale-110"
/>
<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">