# Inspiração de design — Gencyo (ThemeForest)

Fonte: [Gencyo – Digital Marketing Agency PHP Template](https://themeforest.net/item/gencyo-digital-marketing-agency-php-template/63427488)  
Demo direto (sem Cloudflare do preview Envato): https://php.kodesolution.com/2026/gencyo-php/  
Capturas locais: `docs/design/gencyo-refs/`

Uso: referência visual/estrutural para páginas de **serviços** da Hoogli (`/seo` e futuras). **Não copiar paleta dark+laranja** — Hoogli já tem luz + azul `#3490f3` + verde `#6ed587`. Roubar **padrões**, não skin.

---

## 1. Identidade visual do template

| Token | Gencyo (medido) | Traduzir pra Hoogli |
|-------|-----------------|---------------------|
| Fundo | `#0d0d0d` / `#151515` | Manter claro (`#fff` / `#f8f9fa`) |
| Texto | branco / `#7a7a7a` | `#202124` / `#5f6368` |
| Acento | laranja `#ff6b1e` | azul `#3490f3` + verde marca |
| Fonte | Beatrice Trial (display) | Poppins (já no site) |
| Raio | 10–50px (pills + cards) | 12–20px (já alinhado ao preview Google) |
| Botão CTA | pill laranja, seta em círculo | pill azul/verde com seta |

**Assinatura Gencyo:** dark premium + 3D gloss + underline desenhado no hero + um único acento quente.

**Assinatura Hoogli (manter):** SERP animado no hero de SEO + clean Google-product UI. Gencyo inspira hierarquia e layout de service pages, não o mood dark.

---

## 2. Anatomia da home (padrões reutilizáveis)

### Hero
- Headline **enorme** (Gencyo chega a ~100px) com contraste de peso (linha light + linha bold).
- Underline ornamental no trecho-chave.
- CTA pill + seta circular acoplada.
- Visual 3D / foto / foto framing — Hoogli: SERP mock / dashboard já faz esse papel.

### Seção “about / split”
- Coluna imagem com máscara não-retangular (ondas / arcs).
- Coluna texto: H2 grande + lead + **card checklist** (checks em círculo acento) + **stat grande** (ex.: `16%`) colado a mini-foto.
- Glow radial suave atrás do bloco (em dark; em light = gradiente azul→branco já usado no `/seo`).

### Services na home / grid
Cards `service-block-one`:
1. Dot acento (canto)
2. Número grande fantasma (`01`…`06`) baixo contraste
3. Ícone line-art na cor de acento
4. Título bold
5. Lead curto (~1–2 linhas)
6. Padding generoso, grid 3 col

### Outros blocos (home)
- Process / steps numerados
- Testimonials
- FAQ accordion
- Team
- Blog strip
- CTA final + footer denso

---

## 3. Página listagem de serviços (`page-services.php`)

### Estrutura
```
[page-title hero ~450px]
  H1 centrado “Services”
  breadcrumb Home > Services
  foto office + overlay dark→laranja

[service-section]
  grid 3×2 de service-block-one
```

### O que vale roubar
- **Page title** como faixa dedicada (não só H1 solto) — breadcrumb + título + foto atmosférica.
- Cards com **número fantasma + ícone + título + 1 linha** — escaneável.
- Transição pra próxima seção com faixa visual forte (Gencyo usa gradiente low-poly laranja; Hoogli pode usar mint/`#e1eae0` ou CTA band escura já no `/seo`).

### O que NÃO roubar
- Dark full-bleed em listagem (quebra consistência do site Hoogli).
- Overlay laranja quente no hero foto.

---

## 4. Página detalhe de serviço (`page-service-details.php`) — ouro pra `/seo`

### Wireframe
```
[page-title] Service Details + breadcrumb

[services-details]  layout 1/3 + 2/3
  LEFT sidebar
    - lista outros serviços (active = texto acento + seta em círculo)
    - CTA box “Contact with us…” (telefone + ícone)
    - botão “Download Pdf”
  RIGHT main
    - foto larga rounded
    - H3 Service Overview + copy
    - H3 Service Center + bullets / features
    - FAQ accordion
```

### Padrões fortes
1. **Sidebar de navegação entre serviços** — usuário troca de serviço sem voltar à listagem. Ativo = cor de acento + seta filled.
2. **CTA sticky-feeling na sidebar** — bloco sólido acento com phone/expert. Conversão sempre visível enquanto scrolla conteúdo.
3. **Ordem de conteúdo:** Overview → features/center → FAQ. Curto → detalhe → objeções.
4. **Foto humana** no topo do conteúdo (contraste emocional vs UI abstrata).
5. **FAQ** no próprio detalhe (não só na home).

### Mapeamento pra template Hoogli (`services/detail`)

| Gencyo | Hoogli atual / próximo passo |
|--------|------------------------------|
| page-title foto | Hero com chip + H1 + SERP (já existe) — ok manter; opcional breadcrumb |
| sidebar serviços | Ainda não — candidata forte se houver várias pages `blueprint: service` |
| CTA orange sidebar | CTA band escura final (já no `svc--seo`) + botão flutuante site |
| Service Overview | `pillars` / `advantages` |
| Service Center | `reasons` / `journey` |
| FAQ | `faq` (já existe) |
| Download PDF | só se tiver asset real |

---

## 5. Componentes / micro-UI pra copiar o *feeling*

### Botões
- Primário: pill, padding assimétrico (`14px 60px 14px 30px`) + **seta em círculo** no fim.
- Nav CTA curto: “Let’s Talk” / Hoogli: “Falar com especialista”.
- Search = círculo acento (só se fizer sentido no header real).

### Cards
- Fundo 1 step acima do paper (Gencyo: dark card em dark page → Hoogli: branco em `#f8f9fa`).
- Hover: lift leve + sombra (já no `.svc--seo`).
- Número fantasma = textura, não informação crítica (acessibilidade: não depender só do número).

### Tipografia
- H1 hero: clamp agressivo, tracking negativo, peso 700–800.
- H2 seção: ~40–50px, peso 500–700, **quebra em 2 linhas** proposital.
- Body: cinza médio, lh ~1.6–1.7.
- Highlight inline no H2 com cor de acento (ex.: “Focused **on Real Results**”).

### Motion
- Scroll reveals / parallax leves no template.
- Hoogli: respeitar `prefers-reduced-motion`; SERP já é a animação-assinatura.

---

## 6. Checklist de inspiração (páginas de serviço Hoogli)

Usar como guia ao evoluir `services/detail` + listagem futura:

- [ ] Hero com um **visual-produto** dominante (SERP / mock / foto) — não só texto
- [ ] Chip / eyebrow curto acima do H1
- [ ] CTA pill + secondary jump
- [ ] Mini KPIs ou trust strip sob CTAs
- [ ] Grid de vantagens estilo feat-card (ícone/número + título)
- [ ] Split metodologia com checklist + mock métricas
- [ ] Steps / jornada com conector gradiente
- [ ] Stats em strip com divisores
- [ ] Quote em card
- [ ] FAQ accordion com estado ativo em cor de acento
- [ ] CTA final em banda de alto contraste
- [ ] (Futuro) Sidebar “outros serviços” quando existir catálogo
- [ ] (Futuro) Page-title / breadcrumb na listagem `/servicos`

---

## 7. O que *não* fazer (anti-padrões deste template)

- Dark mode global só porque Gencyo é dark — site Hoogli é light.
- Acento laranja `#ff6b1e` — conflita com brand green/blue.
- Lorem / copy genérica de agency template.
- Cards com 6 serviços idênticos em estrutura sem métrica real (Gencyo usa placeholder; Hoogli deve mostrar resultado).
- Sidebar CTA com telefone fake.
- Revolutions / mega-menu pesado do pack — não precisa pro Statamic.

---

## 8. Referências de captura

| Arquivo | Conteúdo |
|---------|----------|
| `gencyo-refs/01-home-vp.png` | Hero home |
| `gencyo-refs/home-y1600.png` | Split about + checklist |
| `gencyo-refs/05-page-services-vp.png` | Listagem services hero |
| `gencyo-refs/services-y800.png` | Grid cards 04–06 |
| `gencyo-refs/06-page-service-details-vp.png` | Detalhe: sidebar + foto |
| `gencyo-refs/svc-detail-y800.png` | Detalhe: CTA sidebar + overview |
| `gencyo-refs/signals-home.json` | Tokens medidos (cores, fontes, botões) |

Demo service details: https://php.kodesolution.com/2026/gencyo-php/page-service-details.php  
Demo services list: https://php.kodesolution.com/2026/gencyo-php/page-services.php

---

## 9. Resumo caveman

Gencyo = **dark agency premium**, laranja, cards numerados, detalhe = **sidebar + conteúdo + FAQ**.  
Hoogli = **light performance Google**, azul/verde, SERP hero.  
Roubar: estrutura de detalhe, anatomia de card, CTA sempre visível, hierarquia tipográfica.  
Não roubar: skin dark/laranja.