{{# Pagina de servico. O elemento que carrega a ideia e o resultado de busca do hero: a marca sobe ate a 1a posicao. O verde da marca aparece so no que ja e primeiro lugar. Paginas com o campo "design_v2" ativado ganham os modificadores svc--seo e svc--v2 (mescla visual com o preview Google-style e demais componentes do novo design) sem afetar as demais paginas de servico, que continuam com o visual legado. "svc--seo" e mantido por compatibilidade (todo o CSS do novo design foi escrito sob esse seletor); "svc--v2" e o nome generico, agnostico de slug, para os novos componentes (browser mock, gallery mock etc.). #}}

{{# ---------------------------------------------------------- hero #}}

{{ cta_label ?? 'Fale com um especialista' | entities }} {{ if hero_link_label }} {{ hero_link_label | entities }} {{ /if }}

{{# Os concorrentes ficam sem numero e sem nome: eles trocam de posicao quando a marca sobe, e a informacao que importa e a posicao da marca. #}}

{{ value | entities }}
01 {{ serp_brand ?? 'Hoogli' | entities }}

posição orgânica · {{ serp_query ?? 'sua palavra-chave' | entities }}

{{ if browser_mock_host }} {{ /if }} {{ browser_mock_url | entities }} {{ if browser_mock_host }} Online {{ /if }} {{ if browser_mock_app }} Login {{ /if }}

Uptime SLA

Sincronizando…

Servidores

CPU 0%

RAM 0%

Disco 0%

Backups …

Agendando… snapshot diário

E-mail

Senha

Entrar

Usuários 0

Pedidos 0

Receita 0

Gerando relatório…

{{ /if }} {{# Mock "galeria": card branco com grid de placeholders de foto, mesma linguagem visual (cantos arredondados, sombra, rótulo mono pequeno). #}} {{ if gallery_mock }}

{{ /if }} {{# Mock "métricas": card com indicadores de campanha paga (CPC, CTR, ROAS) + linha de tendência subindo. Mesma linguagem visual dos demais mocks (cantos arredondados, sombra, rótulo mono). #}} {{ if metrics_mock }}

{{ label | entities }} {{ value | entities }} {{ if delta }}{{ delta | entities }}{{ /if }}

{{ /if }} {{# Mock tráfego pago: canais → filtro IA → dashboard com partículas, chart e KPIs. Loop ~10s, mouse tilt, reduced-motion. #}} {{ if funnel_mock }}

Google Ads

Meta Ads

Otim. IA

{{ funnel_mock_label ?? 'Performance da campanha' | entities }} Ao vivo

Cliques

+0%

Conversões

+0%

ROI

+0%

{{ /if }} {{# Mock identidade visual: monograma que se desenha, etapas sendo aprovadas uma a uma e o selo carimbando no fim. #}} {{# Mock identidade: studio (naming→sketch→cores→selo) ou processo INPI. #}} {{ if logo_mock }}

{{ label | entities }}

{{ /if }} {{# Mock CRM: lead atravessa colunas → fecha venda → R$ sobe. #}} {{ if board_mock }}

{{ board_mock_label ?? 'Pipeline de vendas' | entities }} R$0

{{ /if }} {{# Mock post social: capa real, double-tap like e contadores. #}} {{ if feed_mock }}

{{ feed_mock_handle ?? '@suamarca' | entities }} Patrocinado

{{ feed_mock_handle ?? '@suamarca' | entities }} {{ feed_mock_caption | entities }}

0 {{ label | entities }}

{{ /if }} {{# Mock player de áudio: onda em scaleY e progresso em scaleX — nada de animar largura/altura. #}} {{# Mock podcast: o microfone capta, a onda é gravada, a edição marca os cortes, o episódio publica e a audiência sobe. Mesma mecânica de fases por classe dos demais mocks. #}} {{ if audio_mock }}

00:00

{{ if audio_mock_platforms }} {{ audio_mock_platforms }} {{ /audio_mock_platforms }} {{ else }} {{ /if }} 0 {{ audio_mock_reach_label ?? 'ouvintes' | entities }}

{{ /if }} {{# Mock app de mobilidade: rota que se desenha e ponto percorrendo carro segue path via getPointAtLength. #}} {{ if app_mock }}

…

{{ /if }} {{# Mock EAD: player de aula + lista de módulos (parece LMS real). #}} {{ if course_mock }}

{{ course_mock_title ?? 'Seu curso' | entities }} —

0:00 0:00

{{ label | entities }} {{ duration ?? '10:00' | entities }}

{{ /if }} {{# Mock "construção de site": o wireframe vira layout, os componentes assentam, o estilo entra, a versão mobile aparece, o site publica e as métricas de performance sobem. A timeline é orquestrada por classes de fase no elemento raiz (JS), e cada fase só dispara transições de transform/opacity — nada de reflow no meio do loop. #}} {{ if build_mock }}

{{# a mesma página em mobile — entra deslizando na fase responsiva #}} {{# painel de performance — sobe quando o site publica #}}

{{ /if }} {{# Mock "produção audiovisual": grava, os clipes entram na timeline, a cor é tratada, renderiza e sai em 4K. Mesma mecânica de fases por classe usada no mock de criação de site. #}} {{ if reel_mock }}

00:00:00 {{ reel_mock_label ?? 'Em produção' | entities }}

Áudio

Render 0%

{{# ----------------------------------------------------- vantagens #}} {{ if advantages }}

{{ if count == 1 }} {{ elseif count == 2 }} {{ elseif count == 3 }} {{ elseif count == 4 }} {{ elseif count == 5 }} {{ else }} {{ /if }}

{{ /if }} {{# --------------------------------------------------------- video #}} {{ if video_id }}

{{ /if }} {{# ------------------------------------------------- zona clara #}}

{{# ------------------------------------------- metodologia #}} {{ if method_heading || method_checks || method_image || method_stat_value }}

{{ value | entities }}

{{ method_stat_value | entities }} {{ if method_stat_label }}{{ method_stat_label | entities }}{{ /if }} {{ if method_stat_sub }}
{{ method_stat_sub | entities }}{{ /if }}

{{ reasons_heading ?? 'Por que escolher a Hoogli' | entities }}{{ if reasons_heading_accent }} {{ reasons_heading_accent | entities }}{{ /if }}

{{ if journey_image }} ${{ journey_image_alt ?? journey_heading ?? '' | entities }}$ {{ else }} {{ /if }}

{{ testi_heading ?? 'O que clientes dizem' | entities }}{{ if testi_heading_accent }} {{ testi_heading_accent | entities }}{{ /if }}

Capterra {{ testi_capterra ?? '4.8/5 (102 reviews)' | entities }}

Google {{ testi_google ?? '4.8/5 (102 reviews)' | entities }}

{{ if quote_link_url }} {{ quote_link_label ?? 'Ver todas' | entities }} → {{ /if }}

{{ /if }} {{# --------------------------------------- outros serviços #}} {{ if related_services }} {{ /if }} {{# --------------------------------------- fale conosco (CTA final, fundida) #}}

{{ cta_heading ?? expert_heading ?? 'Vamos conversar sobre o crescimento do seu negócio?' | entities }}

{{ cta_lead ?? expert_lead ?? 'Diagnóstico gratuito e sem compromisso. Fale agora com um especialista ou deixe seus dados no formulário abaixo — nós entramos em contato.' | entities | nl2br }}

{{ if expert_phone }} Precisa de ajuda? Fale com um expert {{ expert_phone | entities }} {{ /if }}

{{ cta_final_label ?? cta_label ?? expert_cta_label ?? 'Solicite uma proposta' | entities }}

{{# ---------------------------------------------------------- guia #}} {{# O guia e o texto de ranqueamento. Ele sai INTEIRO no HTML do servidor, sempre — o recolhimento e so visual (clamp de altura em CSS, aplicado por JS depois do carregamento). Nada de buscar o texto por fetch no clique: e isso que faria o Google nao ver o conteudo. Sem JS, ou em qualquer cliente que nao execute script, o guia aparece aberto. O botao so existe quando o JS roda. #}} {{ if content }}

{{ hero_title ?? title | entities }}

{{ advantages_heading | entities }}

{{ heading ?? value | entities }}

{{ method_heading | entities }}{{ if method_heading_accent }} {{ method_heading_accent | entities }}{{ /if }}

{{ deliverables_heading ?? 'O que entregamos' | entities }}

{{ heading | entities }}

{{ pillars_heading ?? 'Como trabalhamos' | entities }}

{{ heading | entities }}

{{ reasons_heading ?? 'Por que escolher a Hoogli' | entities }}{{ if reasons_heading_accent }} {{ reasons_heading_accent | entities }}{{ /if }}

{{ heading | entities }}

{{ journey_heading ?? 'Da busca à compra' | entities }}

{{ heading | entities }}

{{ stats_heading ?? 'Resultados em números' | entities }}

{{ testi_heading ?? 'O que clientes dizem' | entities }}{{ if testi_heading_accent }} {{ testi_heading_accent | entities }}{{ /if }}

{{ faq_heading ?? 'O que costumam perguntar' | entities }}

{{ cta_heading ?? expert_heading ?? 'Vamos conversar sobre o crescimento do seu negócio?' | entities }}

{{ hero_title ?? title | entities }}

{{ advantages_heading | entities }}

{{ heading ?? value | entities }}

{{ method_heading | entities }}{{ if method_heading_accent }} {{ method_heading_accent | entities }}{{ /if }}

{{ deliverables_heading ?? 'O que entregamos' | entities }}

{{ heading | entities }}

{{ pillars_heading ?? 'Como trabalhamos' | entities }}

{{ heading | entities }}

{{ reasons_heading ?? 'Por que escolher a Hoogli' | entities }}{{ if reasons_heading_accent }} {{ reasons_heading_accent | entities }}{{ /if }}

{{ heading | entities }}

{{ journey_heading ?? 'Da busca à compra' | entities }}

{{ heading | entities }}

{{ stats_heading ?? 'Resultados em números' | entities }}

{{ faq_heading ?? 'O que costumam perguntar' | entities }}

Continue crescendo com a Hoogli

{{ cta_heading ?? expert_heading ?? 'Vamos conversar sobre o crescimento do seu negócio?' | entities }}