Padrão de Landing Pages — Institucionais Koder

Visão Geral

Landings institucionais são páginas sobre a Koder como entidade — sua missão, história, valores, equipe, contato — e não sobre um produto, área ou sector específico. Elas são a "cara" pública da empresa para visitantes que chegam querendo entender quem é a Koder, não o que a Koder vende.

Exemplos canônicos:

Domínio	Diretório	Papel
www.koder.dev	sites/koder/	Landing raiz: mission statement + grid do ecossistema
company.koder.dev	meta/sites/company/	About: timeline, values, team, contact form

Outros domínios que podem ser institucionais dependendo do recorte (decidir caso a caso):

• careers.koder.dev (se criado) — recrutamento
• press.koder.dev (se criado) — kit de imprensa
• brand.koder.dev — não é institucional puro; é a Área "Brand & Presence" da stack e segue areas.kmd

Quando Uma Página é Institucional (vs. Produto, Área, Sector, Catálogo)

Use esta árvore de decisão na ordem:

1. A página vende/descreve um único módulo do monorepo? → Produto, usar products.kmd
2. A página agrupa módulos de um Sector? → Sector, usar sectors.kmd
3. A página agrupa Sectors de uma das 9 Áreas? → Área, usar areas.kmd
4. A página lista todos os produtos filtráveis? → Catálogo, usar catalog.kmd
5. A página fala sobre a Koder como organização (missão, valores, equipe, história, contato) ou é o ponto de entrada raiz do ecossistema? → Institucional, usar este spec

Estrutura do Arquivo

sites/{institutional-slug}/
├── index.html       ← Landing institucional (HTML monolítico)
├── icon.svg         ← Ícone (o logo Koder oficial, não um ícone de produto)
├── og-image.svg     ← Fonte da imagem OG
└── og-image.png     ← Imagem OG rasterizada 1200×630

Landings institucionais vivem em sites/ (não dentro do monorepo platform/ / apps/ / ai/), porque não são módulos — são expressões de marca.

Head — Meta Tags e Setup

Meta Tags Obrigatórias

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{Título institucional — frase com personalidade}</title>
<meta name="description" content="{Pitch em 1-2 frases sobre a Koder ou a sub-entidade}">
<meta name="theme-color" content="#0b1120">

Comprimento máximo do <title>: 60 caracteres. O separador — é opcional em páginas institucionais (um título sem separador, como Koder — Build anything. Own everything., também é válido), mas quando presente conta 3 chars. Browsers truncam a aba por volta de 55–60 chars; Google Search por volta de 55 chars.

Nota sobre meta name="keywords": opcional em landings institucionais (obrigatório apenas em produto). Se usado, evitar listar produtos específicos — preferir termos conceituais da marca ("self-hosted platform", "developer tools", "integrated ecosystem").

Open Graph + Twitter Card

Mesmas regras do products.kmd, com estas diferenças:

• og:title e twitter:title devem refletir o posicionamento institucional, não o pitch de um produto
• og:image é obrigatório (PNG 1200×630), mas o conteúdo da thumb segue as regras específicas desta spec (abaixo)

Favicon

Usar o logo oficial da Koder (sites/koder/icon.svg ou a SVG inline da marca). Nunca um ícone de produto. A landing institucional carrega a identidade da empresa, não de um item do catálogo.

Anti-Flash Script

Mesmo snippet do products.kmd.

Fontes Web — Exceção Permitida

products.kmd proíbe fontes web externas (linha 5: "sem dependências externas (frameworks, CDNs, fontes web)"). Landings institucionais podem usar Google Fonts para reforçar a identidade tipográfica da marca, desde que:

• A fonte seja Inter (tipografia oficial da marca Koder, já usada em sites/koder/ e meta/sites/company/)
• Seja carregada via <link rel="preconnect"> + <link href> do Google Fonts, não hospedada localmente
• Haja fallback declarado no CSS: font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif

Se a fonte não carregar, a experiência deve degradar graciosamente pro stack nativo.

CSS — Design Tokens da Marca Koder

Landings institucionais usam a paleta da marca Koder, não as paletas por-produto do products.kmd. Ordem de precedência:

:root {
  color-scheme: light;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Cores canônicas da marca */
  --brand-cyan: #5BC8F5;
  --brand-orange: #FF6600;
  --grad: linear-gradient(135deg, var(--brand-cyan) 0%, var(--brand-orange) 100%);

  /* Fundo e texto — tons neutros compatíveis com a marca */
  --bg: #ffffff;
  --bg-grad-1: #f0f7ff;   /* tint cyan para o hero */
  --bg-grad-2: #fff4ea;   /* tint orange para o hero */
  --text: #0b1120;
  --text-soft: #475569;
  --text-muted: #94a3b8;
  --border: rgba(11, 17, 32, 0.08);
  --card-bg: rgba(255, 255, 255, 0.7);  /* glassmorphism */
  --nav-bg: rgba(255, 255, 255, 0.75);
  --btn-primary-bg: #0b1120;   /* botão escuro em tema claro */
  --btn-primary-text: #ffffff;
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #05080f;
  --bg-grad-1: #0a1228;
  --bg-grad-2: #1a0a00;
  --text: #f1f5f9;
  --text-soft: #94a3b8;
  --text-muted: #64748b;
  --border: rgba(255, 255, 255, 0.08);
  --card-bg: rgba(15, 23, 42, 0.55);
  --nav-bg: rgba(5, 8, 15, 0.75);
  --btn-primary-bg: #ffffff;
  --btn-primary-text: #0b1120;
}

Regra: o gradient cyan → orange é a assinatura visual da marca. Usar em headlines principais (clippada com -webkit-background-clip: text), ícones de destaque e CTAs secundários. Não usar accent colors por-produto aqui.

Decoração de Background — Blob + Grid Overlay

Landings institucionais têm uma decoração característica que as diferencia visualmente das landings de produto:

.bg-canvas {
  position: fixed; inset: 0; z-index: -2;
  background: linear-gradient(160deg, var(--bg-grad-1) 0%, var(--bg-grad-2) 30%, var(--bg) 100%);
}
.blob {
  position: fixed; border-radius: 50%; filter: blur(100px);
  opacity: 0.55; z-index: -1; pointer-events: none;
}
.blob-1 { background: var(--brand-cyan); top: -150px; left: -120px; }
.blob-2 { background: var(--brand-orange); bottom: -160px; right: -100px; }
.blob-3 { background: #a78bfa; top: 35%; left: 55%; opacity: 0.25; }
.grid-overlay {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
}

Animar os blobs com @keyframes de transform: translate() + scale() é permitido e recomendado (gera o movimento orgânico observado em sites/koder/ e meta/sites/company/).

Seções Permitidas (em ordem flexível)

1. Navbar

• Fixa no topo, backdrop-filter: blur(16px), background: var(--nav-bg)
• Altura livre (64-72px)
• Esquerda: logo SVG do Koder + nome
• Direita:
  • Links internos pras seções (#about, #values, etc.)
  • Theme toggle (sol/lua SVG)
  • Botão primário: geralmente "Enter the Platform" apontando pra https://platform.koder.dev

2. Hero (coluna única)

Diferente do products.kmd, o hero institucional é coluna única, centralizado. Não há produto a ilustrar — há uma mensagem da marca.

Conteúdo:

• Eyebrow/badge: frase curta da marca (ex.: "The age of AI is here", "Koder Technologies")
• H1: declaração institucional curta com parte em gradient cyan→orange (.g { background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; })
• Lead: parágrafo de 2-4 frases com a visão
• CTAs: botão primário (ex.: "Enter the Platform") + botão ghost (ex.: "About Koder")
• Animação de entrada: fadeUp suave (0.8s ease-out)

3. Pillars / Values (opcional, recomendada)

Grid de 3 cards com os pilares da marca. Cada card:

• Ícone num quadrado 36×36 com background: var(--grad) (cyan→orange) e color: white
• Título h3 curto
• Parágrafo de 1-2 frases

4. Ecosystem Grid (opcional — ver regra de posicionamento)

Grid que lista as 9 Áreas do ecossistema como cards clicáveis. Regra obrigatória herdada de areas.kmd: o grid aparece abaixo do hero, em seção separada, nunca lado a lado com o hero.

Cada card de Área mostra:

• Ícone da Área (32-40px, cor accent da Área)
• Nome da Área (bold, na cor accent)
• Descrição de 1 linha (até ~60 caracteres)
• Card inteiro clicável linkando https://{slug}.koder.dev

Aplicar margin-top: 5rem no container do grid pra separação visual clara do hero.

5. Timeline (opcional — típica de páginas tipo company.koder.dev)

Lista vertical de marcos cronológicos da empresa:

• Linha central com dots
• Cada item: ano + título + descrição de 1-2 frases
• Máximo ~6-8 itens pra não poluir

6. Values Grid (opcional — típica de company.koder.dev)

Grid de 3-6 cards listando os valores da empresa (cada card: ícone + título + 1 frase). Visual igual ao Pillars Grid, mas conteúdo diferente.

7. Contact Form (opcional — típica de company.koder.dev)

Dois panes lado a lado:

• Esquerda: informações de contato (endereço, email, redes) com ícones
• Direita: formulário HTML (nome, email, mensagem) com submit handler

Nota: envio do form fica fora do escopo da spec — cada landing decide (pode ser mailto:, pode ser POST pra um endpoint da Koder Platform). O importante é que o form exista e seja estilizado consistentemente.

8. Footer (obrigatório)

Footer dark, multi-coluna, diferente do footer leve das landings de produto:

• background: var(--footer-bg) (próximo do preto, #0b1120 ou mais escuro)
• color: var(--footer-text) (cinza médio)
• Layout: grid-template-columns: 2fr 1fr 1fr 1fr no desktop
• Primeira coluna: logo + 1 parágrafo curto
• Colunas seguintes: listas de links (Platform, Company, Resources, Legal)
• Barra final: copyright centralizado com border-top sutil

Seções Proibidas

Essas seções são exclusivas de landings de produto e não devem aparecer em institucionais:

• ❌ Pricing — preço é conversa de produto, não da marca
• ❌ Comparison Table — comparação com concorrentes é conversa de produto
• ❌ Login button — institucional não tem conta (push do Login é via "Enter the Platform")
• ❌ Hero Variants A/B/C (code block, UI mockup, ilustração técnica) — essas variants são do products.kmd; institucional usa hero centralizado de coluna única
• ❌ Features grid com ícones de feature — features são de produto; institucional usa Pillars/Values que são conceituais

JavaScript — Comportamentos

Mínimo:

• Theme toggle (mesmo padrão do products.kmd)
• Intersection Observer pra .reveal (fade-up on scroll nos values, timeline, ecosystem grid)
• Year no copyright: document.getElementById('year').textContent = new Date().getFullYear();

Opcional:

• Submit handler do contact form (se houver)
• Scroll-spy na navbar (destaque o link ativo conforme rola)

OG Image

Mesmas regras técnicas do products.kmd (1200×630 PNG obrigatório). Conteúdo da thumb:

1. Logo Koder (não ícone de produto)
2. Headline institucional grande, com palavras-chave no gradient cyan→orange
3. Subtítulo curto — 1 frase da marca
4. Blobs decorativos ou grid overlay sutis (assinatura visual da marca)
5. URL discreta no canto

Evitar listar produtos, features ou números — a thumb é sobre identidade, não catálogo.

Responsividade

Regra: toda landing institucional deve funcionar sem problemas em dispositivos móveis. Isso é obrigatório — não opcional.

Breakpoints

• max-width: 900px: navbar encolhe (links secundários ocultados), grids de 3 colunas viram 2 colunas, about-grid vira coluna única
• max-width: 640px: todos os grids em 1 coluna, hero reduz padding, navbar esconde links e mostra hamburger, footer vira coluna única, blobs decorativos com opacity reduzida para não interferir na leitura

Regras obrigatórias

• Nenhum elemento deve causar overflow horizontal — os blobs decorativos (position: fixed, border-radius: 50%) são os maiores causadores; garantir que overflow: hidden esteja no body ou que os blobs tenham dimensões contidas
• main { display: flex; flex-direction: column } — nunca deixar flex-direction: row em mobile (causa hero + ecosystem grid lado a lado)
• Footer multi-coluna (grid-template-columns: 2fr 1fr 1fr 1fr) vira 1fr em mobile
• Botões com área de toque mínima de 44×44px
• Nenhum texto com fonte < 14px em mobile
• Contact form (se presente): campos em width: 100%, sem layouts lado a lado abaixo de 640px

Verificação obrigatória antes de deploy

1. Chrome DevTools → modo responsivo → testar em 375px, 390px e 768px
2. Sem overflow horizontal: document.documentElement.scrollWidth === window.innerWidth
3. Blobs não causam scroll horizontal: inspecionar se algum blob fixo vaza lateralmente
4. main em coluna única: hero e ecosystem grid empilhados verticalmente, nunca lado a lado
5. Footer em coluna única abaixo de 640px
6. Contact form (se presente) legível e preenchível em 375px

Deploy

• Servir em https://{slug}.koder.dev (ex.: www, company)
• DNS A record no ClouDNS apontando pra 181.191.210.127
• Config em /etc/koder-jet/sites.toml na LXC s.k.lin
• HTTPS automático via koder-jet (ACME/Let's Encrypt)

Estado Atual (2026-04-11)

Landing	Diretório	Conforme esta spec?
www.koder.dev	sites/koder/index.html	Majoritariamente sim — estrutura de hero + pillars + ecosystem grid + footer bate com o padrão (serviu de referência base pra este spec)
company.koder.dev	meta/sites/company/index.html	Majoritariamente sim — hero + about + areas-grid + values + timeline + contact + footer dark bate com o padrão (serviu de referência base pra este spec)

Referência Cruzada

• products.kmd — padrão das landings de produto (parceiro principal, muitas regras compartilhadas)
• areas.kmd — padrão das landings de Área (define regras do "Explore the Ecosystem" grid que institucionais podem incluir)
• sectors.kmd — padrão das landings de Sector
• catalog.kmd — padrão da landing de catálogo (platform.koder.dev)
• sites/koder/index.html — referência canônica de institucional raiz
• meta/sites/company/index.html — referência canônica de institucional "about us"