// guardCity, Landing page única. Mission-control SaaS, paleta DirectLuz blue, copy civil. function GuardCityLanding() { const scrollerRef = React.useRef(null); const driverRef = React.useRef(null); const [progress, setProgress] = React.useState(0); const [time, setTime] = React.useState(() => new Date()); React.useEffect(() => { const id = setInterval(() => setTime(new Date()), 1000); return () => clearInterval(id); }, []); React.useEffect(() => { const scroller = scrollerRef.current; const driver = driverRef.current; if (!scroller || !driver) return; let lastTop = -1; const compute = () => { const st = scroller.scrollTop; if (st === lastTop) return; lastTop = st; const pinH = driver.offsetHeight - scroller.clientHeight; const p = pinH > 0 ? Math.max(0, Math.min(1, st / pinH)) : 0; setProgress(p); }; compute(); const id2 = setInterval(compute, 32); scroller.addEventListener('scroll', compute, { passive: true }); return () => { clearInterval(id2); scroller.removeEventListener('scroll', compute); }; }, []); const pad = n => String(n).padStart(2, '0'); const ts = `${pad(time.getUTCHours())}:${pad(time.getUTCMinutes())}:${pad(time.getUTCSeconds())} UTC`; // Compress the actual animation into the first ~80% of scroll, leaving the // last ~20% as a hold on the final logo state before exiting the pinned hero. const animProgress = Math.min(1, progress / 0.80); const heroFade = Math.max(0, 1 - animProgress * 1.5); const revealFade = Math.max(0, Math.min(1, (animProgress - 0.88) / 0.12)); // Final crisp logo PNG fades in over the blade-assembled icon at the very end const fullLogoFade = Math.max(0, Math.min(1, (animProgress - 0.90) / 0.08)); return (
{/* PINNED HERO, city to real logo blades assembling */}
{/* Top nav */}
guardCity
PLATAFORMA · v3.4.1
{/* Corner brackets */} {[ { top: 70, left: 24, rot: 0 }, { top: 70, right: 24, rot: 90 }, { bottom: 60, left: 24, rot: 270 }, { bottom: 60, right: 24, rot: 180 }, ].map((c, i) => (
))} {/* Subtle grid overlay */}
{/* CITY SCENE, skyline to blades do logo */}
{/* HERO COPY, fades out as you scroll */}
PLATAFORMA · CIDADE INTELIGENTE

A cidade,
operada como plataforma .

Vídeo, inteligência artificial, operações e iluminação pública. Quatro módulos conectados em uma única infraestrutura para gestão urbana moderna.

{/* FINAL REVEAL, blades become the icon + wordmark to the right + tagline */}
{/* Logo lockup: blade-icon (rendered in CityScene) + wordmark-only PNG. */} {/* The blades land at scene center; we place an empty placeholder there and the wordmark immediately to the right, so visually it reads as [icon] [guardCity]. */}
{/* Wordmark only: PNG cropped to hide the (old) icon on its left. PNG = 2253×410, icon ends at ~386 (17%). We hide left 17% via overflow. Fades out as the full crisp logo PNG fades in. */}
guardCity
{/* Final clean state: full logo PNG (icon + wordmark) fades in on top at the very end, replacing the blade-assembled version with the perfect crisp lockup. */} guardCity
A cidade operada como plataforma
↓ CONTINUE PARA EXPLORAR OS MÓDULOS
{/* Bottom HUD, scroll progress */}
{[ 'SKYLINE', 'POSTES', 'LUMINÁRIAS', 'CÂMERAS', 'REDE', 'NÚCLEO', ][Math.min(5, Math.floor(progress * 6))]} · ATIVO
{String(Math.round(progress * 100)).padStart(2, '0')}% · LIVE
{/* PLATAFORMA, Stack section */}
SEÇÃO 01 · PLATAFORMA

A arquitetura.

4 MÓDULOS
1 PLATAFORMA
0 LOCK-IN
{[ { i: '01', t: 'CAPTAR', d: 'Câmeras IP, sensores de iluminação, dispositivos de campo, mobile. Qualquer ativo é normalizado e ingerido em pipeline padronizado.', m: 'RTSP · ONVIF · LoRaWAN · NB-IoT' }, { i: '02', t: 'PROCESSAR', d: 'IA de visão computacional e analytics rodam em edge ou núcleo. Reconhecimento, ALPR, detecção de eventos, falhas de luminárias, busca semântica.', m: '12 modelos · 99,4% precisão' }, { i: '03', t: 'COORDENAR', d: 'Despacho, patrulhamento, ordens de serviço, equipes de campo. Orquestração da resposta operacional em tempo real.', m: 'OMS · CAD · GIS' }, { i: '04', t: 'AUDITAR', d: 'Cadeia de custódia, governança LGPD, exportação probatória, indicadores de SLA. Rastreabilidade do sensor ao processo.', m: 'LGPD · ISO 27001 · SOC 2' }, ].map((row) => (
{row.i}

{row.t}

{row.d}

{row.m}
 ))}
{/* MÓDULOS */}
SEÇÃO 02 · MÓDULOS

O ecossistema.

02 / 02 ATIVOS
{[ { key: 'faceguard', name: 'FaceGuard', role: 'IA · Reconhecimento Facial', href: 'https://faceguard.me', logo: 'assets/faceguard-white.png', badge: 'PROCESSAMENTO EM TEMPO REAL', pitch: 'Reconhecimento facial em tempo real com cadeia de custódia, governança LGPD e integração nativa ao VMS. Identificação de pessoas de interesse, controle de acesso e alertas operacionais auditáveis ponta a ponta.', bullets: ['Match em menos de 200ms', 'Cadeia de custódia LGPD', 'API REST e Webhooks'], }, { key: 'directluz', name: 'DirectLuz', role: 'Iluminação Pública', href: 'https://directluz.com.br', logo: 'assets/directluz-white.png', badge: '+150K POSTES GERIDOS', pitch: 'Telegestão completa de iluminação pública: cadastro de postes e luminárias, ordens de serviço, equipes de campo e indicadores de SLA. A malha de iluminação vira ativo digital, auditável e mensurável.', bullets: ['Telegestão de luminárias', 'OS e equipes de campo', 'SLA e indicadores'], }, ].map((m, i) => { const accent = m.key === 'directluz' ? '#4169e8' : '#10b981'; return ( ); })}
{/* CTA */}
SEÇÃO 03 · CONVERSAR

Ative sua cidade,
comando em 90 dias.

Demo guiada com nosso time de soluções. Atendemos secretarias, prefeituras e órgãos públicos em todo o território nacional.

AGENDAR DEMONSTRAÇÃO →
); } window.GuardCityLanding = GuardCityLanding;