/* Neo Vertex — Landing institucional (PT-BR) */ const { useState, useEffect, useRef, useMemo } = React; /* ────────────── REAL LOGO ────────────── User's actual logo: gold N + ascending arrow. We use the cropped icon PNG and let the wordmark be set in Inter for tightness with the rest of the type system. */ function LogoMark({ size = 38 }) { return ( Neo Vertex ); } function Logo({ withWord = true }) { return ( {withWord && eo Vertex} ); } /* ────────────── REVEAL HOOK ────────────── */ function useReveal() { useEffect(() => { const els = document.querySelectorAll('.reveal'); const io = new IntersectionObserver((entries) => { entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } }); }, { rootMargin: '0px 0px -10% 0px', threshold: 0.05 }); els.forEach(el => io.observe(el)); return () => io.disconnect(); }, []); } /* ────────────── PEAK LINES BG ────────────── */ function PeakLines() { // Topographic-style stacked curves — the "peak" metaphor, subtly. const lines = Array.from({ length: 14 }); return ( ); } /* ────────────── NAV ────────────── */ function Nav() { return (
); } /* ────────────── HERO ────────────── */ function Hero() { return (
NEO VERTEX │ SOFTWARE & CONSULTORIA EM TECNOLOGIA │ ATENDIMENTO GLOBAL

Sistemas sob medida
para empresas que não
aceitam o genérico.

Software, automação e consultoria em tecnologia. Mais de 150 projetos entregues para empresas e profissionais em todo o mundo — atendimento na sua língua.

Falar com a equipe Ver como trabalhamos
); } /* ────────────── HERO TERMINAL ────────────── */ const PROJECTS = [ { title: 'clínica odontológica', items: ['Agenda', 'Financeiro', 'Odontograma', 'Atendimento com secretária IA', 'Marcação de consulta automática', 'Recebimento de mensalidades de orto'], done: 'No ar — clínica rodando 100% pelo sistema', }, { title: 'supermercado', items: ['Frente de caixa (PDV)', 'Controle de estoque em tempo real', 'Pedido automático ao fornecedor', 'Etiquetas de preço e validade', 'Programa de fidelidade do cliente'], done: 'No ar — caixa, estoque e compras conversando', }, { title: 'pet shop', items: ['Cadastro de tutor e pet', 'Agenda de banho e tosa', 'Lembrete de vacina por WhatsApp', 'Loja de ração com entrega', 'Plano mensal de banho recorrente'], done: 'No ar — pet shop com agenda cheia todo dia', }, { title: 'clínica médica', items: ['Prontuário eletrônico', 'Agenda multi-profissional', 'Convênios e particulares', 'Receita digital com assinatura', 'Teleconsulta integrada'], done: 'No ar — médicos focando no paciente, não na papelada', }, { title: 'escritório de advocacia', items: ['Controle de processos', 'Prazos e audiências no calendário', 'Honorários e contratos', 'Portal do cliente para acompanhar', 'Recebimento por Pix e boleto'], done: 'No ar — nenhum prazo passa batido', }, { title: 'empreiteira', items: ['Orçamento de obra detalhado', 'Cronograma da obra com fotos', 'Controle de materiais e equipe', 'Medição e nota fiscal', 'Cliente acompanha pelo celular'], done: 'No ar — obra na palma da mão do cliente', }, { title: 'casa de ração', items: ['Catálogo com preço por kg', 'Pedido pelo WhatsApp', 'Entrega no bairro com rota', 'Clube de assinatura mensal', 'Estoque que avisa quando acaba'], done: 'No ar — pedido entra sem ninguém parar a loja', }, { title: 'agência de marketing', items: ['Briefing online do cliente', 'Painel de campanhas e métricas', 'Aprovação de arte com 1 clique', 'Relatório automático todo mês', 'Cobrança recorrente sem fricção'], done: 'No ar — agência entregando, não cobrando aprovação', }, ]; function HeroTerminal() { const [projectIdx, setProjectIdx] = useState(0); const [lineIdx, setLineIdx] = useState(0); // which line we're currently typing/showing const [charIdx, setCharIdx] = useState(0); // chars typed of the current line const [phase, setPhase] = useState('typing'); // 'typing' | 'pause-line' | 'pause-end' const project = PROJECTS[projectIdx]; const lines = useMemo(() => ([ { p: '$', c: `novo projeto: ${project.title}`, t: 'cmd' }, ...project.items.map(item => ({ p: '↳', c: item, t: 'check' })), { p: '✓', c: project.done, t: 'ok' }, ]), [projectIdx]); useEffect(() => { let id; if (phase === 'typing') { const current = lines[lineIdx]; if (!current) return; if (charIdx < current.c.length) { // type next char — vary speed slightly to feel human const delay = current.t === 'cmd' ? 28 : current.t === 'ok' ? 22 : 18; id = setTimeout(() => setCharIdx(c => c + 1), delay + Math.random() * 40); } else { // line finished — small pause before next line id = setTimeout(() => setPhase('pause-line'), current.t === 'cmd' ? 320 : 180); } } else if (phase === 'pause-line') { // advance to next line, or end project if (lineIdx + 1 < lines.length) { setLineIdx(i => i + 1); setCharIdx(0); setPhase('typing'); } else { // finished all lines — pause then jump to next project id = setTimeout(() => setPhase('pause-end'), 1400); } } else if (phase === 'pause-end') { // reset to next project setProjectIdx(p => (p + 1) % PROJECTS.length); setLineIdx(0); setCharIdx(0); setPhase('typing'); } return () => clearTimeout(id); }, [phase, charIdx, lineIdx, lines]); // Render: all lines up to lineIdx fully visible, current line typed up to charIdx const visible = lines.slice(0, lineIdx + 1).map((l, i) => ({ ...l, text: i < lineIdx ? l.c : l.c.slice(0, charIdx), typing: i === lineIdx && phase === 'typing', })); return (
~/neo-vertex/projects/{project.title.replace(/\s+/g, '-')}.log
{visible.map((l, i) => (
{l.t === 'check' ? '✓' : l.p} {l.text} {l.typing && }
))}
); } /* ────────────── MARQUEE ────────────── */ function Marquee() { const logos = [ { name: 'Skintech Switzerland', src: 'cases/logo-skintech.png' }, { name: 'Espaço Família', src: 'cases/logo-espaco-familia.png' }, { name: 'Aquarise', src: 'cases/logo-aquarise.png' }, { name: 'Luazul Community', src: 'cases/logo-luazul.png' }, ]; const dup = [...logos, ...logos, ...logos]; return (
{dup.map((l, i) => (
{l.name}
))}
); } /* ────────────── SERVICES (Sticky Stack) ────────────── */ const SERVICES = [ { num: '01', tag: 'green', icon: 'cube', title: 'Sistemas sob medida', body: 'CRM, estoque, financeiro e integrações com APIs do governo.', features: [ 'CRM com pipeline e funil de vendas', 'Estoque, pedidos e nota fiscal integrados', 'Integração com SEFAZ, Receita, bancos e APIs', 'Painel financeiro com contas, fluxo de caixa e DRE', ], }, { num: '02', tag: 'cyan', icon: 'chat', title: 'Central de atendimento unificada', body: 'WhatsApp, Instagram e Facebook num inbox só.', features: [ 'Inbox unificado: WhatsApp, Instagram, Facebook, e-mail', 'Distribuição automática entre atendentes', 'Histórico completo por contato', 'Métricas de tempo de resposta e SLA', ], }, { num: '03', tag: 'purple', icon: 'bolt', title: 'Automação inteligente', body: 'Fluxos para alto volume. WhatsApp e KPIs em tempo real.', features: [ 'Chatbots no WhatsApp com lógica de negócio', 'Captação automática de leads + CRM', 'Dashboards de KPIs em tempo real', 'Automação de cobrança, lembretes e follow-up', ], }, { num: '04', tag: 'pink', icon: 'layers', title: 'Sistemas verticais', body: 'Soluções prontas pra advocacia, saúde, beleza e fitness.', features: [ 'Advocacia: processos, prazos, honorários', 'Saúde: prontuário, agenda, faturamento', 'Beleza e fitness: agenda, planos, ficha do cliente', 'Shopping: ocupação, financeiro, condomínio', ], }, { num: '05', tag: 'yellow', icon: 'compass', title: 'Consultoria em tecnologia', body: 'Diagnóstico do que sua empresa precisa e como implementar.', features: [ 'Diagnóstico técnico do seu cenário atual', 'Roadmap com prioridade, prazo e orçamento', 'Escolha de stack, fornecedores e contratos', 'Acompanhamento da implementação', ], }, ]; const ICONS = { cube: , chat: , bolt: , layers: , compass: , calendar: , cpu: , globe: , }; const PALETTE = { green: { fg: 'var(--green)', bg: 'rgba(80,250,123,0.10)', br: 'rgba(80,250,123,0.22)', hex: '#50fa7b' }, cyan: { fg: 'var(--cyan)', bg: 'rgba(139,233,253,0.10)', br: 'rgba(139,233,253,0.22)', hex: '#8be9fd' }, purple: { fg: 'var(--purple)', bg: 'rgba(189,147,249,0.10)', br: 'rgba(189,147,249,0.22)', hex: '#bd93f9' }, pink: { fg: 'var(--pink)', bg: 'rgba(255,121,198,0.10)', br: 'rgba(255,121,198,0.22)', hex: '#ff79c6' }, yellow: { fg: 'var(--yellow)', bg: 'rgba(241,250,140,0.10)', br: 'rgba(241,250,140,0.22)', hex: '#f1fa8c' }, }; function ServiceCard({ svc, idx, total }) { const p = PALETTE[svc.tag]; return (

{svc.title}

{svc.body}

); } function Services() { return (
O QUE A NEO VERTEX FAZ POR VOCÊ
{SERVICES.map((s, i) => )}
); } function AutoVideo({ src, accentRgb, label }) { const ref = useRef(null); useEffect(() => { const v = ref.current; if (!v) return; v.muted = true; v.volume = 0; v.defaultMuted = true; v.setAttribute('muted', ''); v.setAttribute('playsinline', ''); v.setAttribute('webkit-playsinline', ''); const tryPlay = () => { const p = v.play(); if (p && p.catch) p.catch(() => {}); }; tryPlay(); const io = new IntersectionObserver(entries => { entries.forEach(e => { if (e.isIntersecting) tryPlay(); }); }, { threshold: 0.05 }); io.observe(v); const onUserGesture = () => { tryPlay(); document.removeEventListener('touchstart', onUserGesture); document.removeEventListener('click', onUserGesture); }; document.addEventListener('touchstart', onUserGesture, { once: true, passive: true }); document.addEventListener('click', onUserGesture, { once: true }); return () => { io.disconnect(); document.removeEventListener('touchstart', onUserGesture); document.removeEventListener('click', onUserGesture); }; }, []); return (