Padrão de Landing Pages — Institucionais Koder

Visão Geral

Landings *nstitucionais*são páginas sobre a Koder como entidade — sua missão, história, valores, equipe, contato — e *ã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:

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

*omprimento 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.

*ota 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 *osicionamento 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 *ogo 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 *odem*usar Google Fonts para reforçar a identidade tipográfica da marca, desde que:

• A fonte seja *nter*(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 *aleta 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;

  
  --brand-cyan: #5BC8F5;
  --brand-orange: #FF6600;
  --grad: linear-gradient(135deg, var(--brand-cyan) 0%, var(--brand-orange) 100%);

  
  --bg: #ffffff;
  --bg-grad-1: #f0f7ff;   
  --bg-grad-2: #fff4ea;   
  --text: #0b1120;
  --text-soft: #475569;
  --text-muted: #94a3b8;
  --border: rgba(11, 17, 32, 0.08);
  --card-bg: rgba(255, 255, 255, 0.7);  
  --nav-bg: rgba(255, 255, 255, 0.75);
  --btn-primary-bg: #0b1120;   
  --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;
}

*egra:*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 é *oluna ú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. *egra obrigatória herdada de areas.kmd:*o grid aparece *baixo*do hero, em seção separada, *unca*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

*ota:*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 *ark* 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 *xclusivas de landings de produto*e não devem aparecer em institucionais:

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

JavaScript — Comportamentos

Mínimo:

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

Opcional:

• *ubmit handler*do contact form (se houver)
• *croll-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. *ogo Koder*(não ícone de produto)
2. *eadline institucional*grande, com palavras-chave no gradient cyan→orange
3. *ubtítulo curto*— 1 frase da marca
4. *lobs decorativos*ou grid overlay sutis (assinatura visual da marca)
5. *RL*discreta no canto

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

Responsividade

*egra:*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 *verflow 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 multicoluna (`gridtemplate-columns: 2fr 1fr 1fr 1fr) vira 1fr` em mobile
• Botões com área de toque mínima de *4×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. *hrome DevTools → modo responsivo*→ testar em 375px, 390px e 768px
2. *em overflow horizontal* document.documentElement.scrollWidth === window.innerWidth
3. *lobs 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. *ooter*em coluna única abaixo de 640px
6. *ontact 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 (20260411)

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"