Banco Fibra + CSN — Time de Fibra 2026

A força industrial da CSN encontra a inteligência financeira do Banco Fibra.

Este é um protótipo navegável da plataforma de incentivo TIME DE FIBRA, desenvolvido para visualizar a experiência do usuário e validar o conceito antes do desenvolvimento full-stack.

• ✅ Design moderno dark mode com paleta AZUL e BRANCO profissional
• ✅ 6 telas navegáveis completamente funcionais
• ✅ Página Admin com sistema de login (usuário: admin | senha: fibra2026)
• ✅ Dados mockados para demonstração realista
• ✅ Animações e interações (hover effects, transições, barras de progresso)
• ✅ Responsivo (funciona em desktop, tablet e mobile)

vinicu/
├── admin.html          # Página de Login Admin (usuário: admin | senha: fibra2026)
├── index.html          # Painel Principal "Meu Painel de Fibra"
├── ranking.html        # Ranking TIME DE FIBRA
├── escola.html         # Escola de Fibra (EAD Gamificado)
├── premios.html        # Vitrine de Premiação
├── red-flag.html       # Canal Red Flag
├── css/
│   └── styles.css      # Design System completo (Azul e Branco)
├── js/
│   └── main.js         # Lógica e interatividade
└── README.md           # Este arquivo

Basta abrir o arquivo index.html no seu navegador:

# No diretório do projeto
cd /home/user/vinicu
open index.html  # macOS
start index.html # Windows
xdg-open index.html # Linux

Ou arraste o arquivo index.html para o navegador.

Acesse a página de administração:

http://localhost:8080/admin.html

Credenciais de acesso:

• Usuário: admin
• Senha: fibra2026

Use o menu de navegação no topo para explorar:

• 🏠 Painel - Dashboard principal com progresso de metas
• 🏆 Ranking - Top 10 nacional com pódio dos campeões
• 🎓 Escola - Cursos EAD gamificados com certificação
• 🎁 Prêmios - Catálogo de recompensas resgatáveis
• 🚨 Red Flag - Formulário para sinalizar clientes em risco

• Hover nos cards para ver animações
• Clique nos botões para ver alerts demonstrativos
• Barras de progresso animam ao carregar a página
• Formulários são funcionais (enviam dados mockados)

/* Backgrounds */
--bg-primary: #0a1628    /* Fundo principal azul escuro */
--bg-card: #152944       /* Cards e componentes */

/* Azul - Paleta principal */
--azul-primary: #2563eb  /* Azul principal */
--azul-light: #3b82f6    /* Azul claro */
--azul-dark: #1e40af     /* Azul escuro */

/* Branco e Cinzas */
--branco: #ffffff        /* Branco puro */
--cinza-light: #f3f4f6   /* Cinza claro */
--cinza: #9ca3af         /* Cinza médio */

/* Destaque */
--destaque: #60a5fa      /* Azul claro para destaque */

/* Alerta */
--alert-red: #ef4444     /* Red flags */

• Cards - Componentes principais com hover effect
• Badges - Indicadores de pontos, posições e status
• Progress Bars - Barras animadas de progresso
• Botões - Primary (azul), Destaque (azul claro), Secondary, Alert
• Ranking Items - Lista com destaque para Top 3
• Formulários - Inputs estilizados com foco azul

• Tela de login moderna e segura
• Validação de credenciais (Demo)
• Mensagens de erro e sucesso
• Redirecionamento automático após login
• Credenciais:
  • Usuário: admin
  • Senha: fibra2026

• Boas-vindas personalizada
• Estatísticas principais (posição, volume BNPL, clientes, treinamentos)
• Progresso de metas com barras animadas
• Top 5 do ranking nacional
• Feed de novidades e campanha ativa
• Ações rápidas (links para outras seções)

• Pódio visual com Top 3 (ouro, prata, bronze)
• Filtros por categoria (Nacional, Regional, Segmento)
• Top 10 completo com destaque para usuário
• Card "Meta para o Top 5" com dicas personalizadas

• 4 módulos de treinamento (BNPL, DRE, Red Flags, Negociação)
• Sistema de progresso com badges
• Certificado digital "Vendedor Inteligente"
• Benefícios do aprendizado
• Depoimentos dos Top Performers

• Saldo de pontos do usuário
• Filtros por categoria
• Prêmios em destaque do trimestre (Q4)
• Catálogo completo com 8 prêmios
• Guia "Como Resgatar"
• Histórico de resgates

• Formulário completo de sinalização
• Estatísticas de alertas enviados
• Guia de Red Flags com exemplos
• Fluxo de resposta (D+0, D+1, D+2)
• Histórico de sinalizações com status

O protótipo usa dados fictícios para demonstração:

• Usuário: Carlos Silva (CS), 7º lugar, 12.450 pts
• Top 10 Ranking: 10 vendedores com pontuações de 9.500 a 28.500 pts
• 4 Cursos: 2 completos, 2 em andamento
• 8 Prêmios: iPhone, TV, Notebook, Viagens, etc.
• 3 Red Flags: 2 validados, 1 em análise

Todos os dados estão no arquivo js/main.js e podem ser facilmente modificados.

• HTML5 - Estrutura semântica
• CSS3 - Design system com variáveis CSS, Grid, Flexbox, animações
• JavaScript Vanilla - Lógica, renderização dinâmica, interatividade
• Google Fonts - Tipografia Inter (400, 600, 700, 900)

Sem dependências externas! O protótipo funciona 100% offline.

O design se adapta a diferentes tamanhos de tela:

• Desktop: Layout completo com grids 2-4 colunas
• Tablet: Grids ajustados, navegação otimizada
• Mobile: Layout em coluna única, menu adaptativo

Breakpoint principal: 768px

Este protótipo serve como base para o desenvolvimento full-stack:

• API REST (Node.js/Express ou Python/FastAPI)
• Banco de dados (PostgreSQL)
• Autenticação (JWT)
• Upload de planilhas (Drive/AWS S3)
• Sistema de pontuação automatizado
• Envio de emails/notificações

• Migrar para React/Next.js
• State management (Redux/Context)
• Integração com APIs
• Dashboards com gráficos (Chart.js/Recharts)
• Upload de documentos
• Sistema de notificações real-time

• Sistema CSN (dados de vendas)
• Banco Fibra (validação BNPL)
• LMS para cursos EAD
• Gateway de prêmios/logística
• Analytics (Google Analytics, Mixpanel)

Edite as variáveis CSS em css/styles.css:

:root {
  --azul-primary: #2563eb;
  --azul-light: #3b82f6;
  --branco: #ffffff;
  --destaque: #60a5fa;
}

Edite o objeto mockData em js/main.js:

const mockData = {
  user: {
    name: "Seu Nome",
    points: 15000,
    // ...
  },
  // ...
}

1. Crie um novo arquivo HTML
2. Copie a estrutura de header/footer
3. Adicione ao menu de navegação
4. Implemente lógica em main.js

Este protótipo foi desenvolvido para o projeto Banco Fibra + CSN - Time de Fibra 2026.

Para dúvidas ou sugestões sobre o protótipo:

• Revisar a documentação do projeto original
• Analisar os comentários no código (css/styles.css e js/main.js)
• Testar em diferentes navegadores (Chrome, Firefox, Safari, Edge)

Desenvolvido com 🚀 para o TIME DE FIBRA 2026

Vender com inteligência é vender com poder.