Skip to content

wireframe-home.md

Latest commit

 

History

History
297 lines (195 loc) · 4.06 KB

wireframe-home.md

File metadata and controls

297 lines (195 loc) · 4.06 KB
Raw

CT Infiniti Marreta

Homepage — Wireframe Técnico

1. Informações Gerais

Viewport base (desktop)

  • Largura: 1440px
  • Container central: 1200px
  • Grid: 12 colunas
  • Gutter: 24px
  • Margin lateral: auto
  • Spacing scale: múltiplos de 8px

Breakpoints sugeridos

  • Desktop: ≥ 1280px
  • Tablet: 768px – 1279px
  • Mobile: ≤ 767px

2. Estrutura da Página (Ordem Vertical)

  1. Header (fixed)
  2. Hero Section
  3. Sobre o CT
  4. Modalidades
  5. Horários
  6. Professores
  7. Planos
  8. CTA Final
  9. Footer

3. Seção por Seção

3.1 Header

Altura: 88px
Position: fixed
Background: transparente → sólido ao scroll

Grid

  • Logo → col 1–2
  • Menu → col 4–10
  • CTA → col 11–12

Elementos

  • Logo tipográfica

  • Menu horizontal:

    • Início
    • Sobre
    • Modalidades
    • Horários
    • Planos
    • Professores
    • Contato

  • Botão primário:

    • "Agende sua aula experimental"

3.2 Hero Section

Altura: 90vh
Background: imagem ambiente treino + overlay escuro (70%)
Alinhamento: centralizado verticalmente

Layout

  • H1 → col 3–10
  • Subtítulo → col 4–9
  • Botões → col 5–8

Elementos

H1:
CT INFINITI MARRETA
Centro de Treinamento de Artes Marciais

Subtítulo:
Disciplina. Técnica. Evolução constante.

Botões:

  • Primário (vermelho)
  • Secundário (outline)

3.3 Sobre o CT

Padding vertical: 120px
Layout: 2 colunas

Grid

  • Título → col 2–6
  • Texto → col 7–11

Estrutura

Coluna esquerda:

  • Headline forte
  • Linha decorativa horizontal (60px)

Coluna direita:

  • Texto institucional
  • Botão secundário

3.4 Modalidades

Padding vertical: 140px
Título centralizado → col 4–9

Cards (4 colunas)

  • col 2–4
  • col 5–7
  • col 8–10
  • col 11–13

Card Structure

  • Ícone topo
  • Título
  • Descrição curta
  • Hover: leve elevação + borda destaque

Responsivo

  • Desktop: 4 colunas
  • Tablet: 2 colunas
  • Mobile: 1 coluna

3.5 Horários

Background: cinza escuro
Padding vertical: 140px

Layout

  • Título centralizado
  • Tabela → col 2–11

Estrutura da Tabela

  • Header com dias da semana

Linhas:

  • Manhã

  • Tarde

  • Noite

  • Altura da linha: 64px

  • Separação com bordas suaves

Botão central abaixo da tabela.

3.6 Professores

Padding vertical: 140px

Layout

3 cards horizontais:

  • col 2–4
  • col 6–8
  • col 10–12

Card Structure

  • Imagem topo (ratio 4:5)
  • Nome
  • Especialidade
  • Descrição curta

Hover:

  • Overlay escuro
  • Botão "Ver perfil"

3.7 Planos

Background: preto
Padding vertical: 140px

Layout

3 colunas:

  • col 3–5
  • col 6–8 (featured)
  • col 9–11

Card Structure

  • Nome do plano
  • Preço
  • Lista de benefícios
  • Botão

Card central:

  • 5–8% maior
  • Destaque visual

3.8 CTA Final

Background: preto sólido
Padding vertical: 120px

Layout

  • Título centralizado
  • Botão grande abaixo

Texto:
"Está pronto para evoluir?"

3.9 Footer

Background: preto grafite
Padding: 60px vertical

Layout

4 colunas:

  1. Logo
  2. Contato
  3. Links rápidos
  4. Redes sociais

Linha inferior

  • Copyright
  • Política de privacidade

4. Diretrizes Visuais

Cores

  • Primária: Vermelho escuro
  • Secundária: Dourado
  • Base: Preto grafite
  • Texto: Branco / cinza claro

Tipografia

  • Headings: Fonte condensada forte
  • Body: Sans-serif moderna
  • Uppercase nos títulos principais

Espaçamento

  • Seções: 120px – 140px vertical
  • Elementos internos: 16px / 24px / 32px

5. Hierarquia de Conversão

  1. Hero CTA
  2. Modalidades
  3. Planos
  4. CTA Final

Fluxo pensado para:

  • Gerar autoridade
  • Explicar estrutura
  • Mostrar diferenciais
  • Converter para aula experimental