Home Original page

vinicu - Overview

🏆 TIME DE FIBRA - Plataforma de Incentivo

Banco Fibra + CSN — Time de Fibra 2026

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

🚀 Sobre o Protótipo

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.

✨ O que está incluído:

  • ✅ 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)

📂 Estrutura do Projeto

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

🎯 Como Usar

1. Abrir o Protótipo

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.

2. Acessar o Admin (Opcional)

Acesse a página de administração:

http://localhost:8080/admin.html

Credenciais de acesso:

  • Usuário: admin
  • Senha: fibra2026

3. Navegar pelas Telas

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

4. Interagir com os Elementos

  • 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)

🎨 Design System

Paleta de Cores

/* 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 */

Componentes

  • 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

📊 Funcionalidades por Tela

0. Página Admin (admin.html)

  • 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

1. Meu Painel de Fibra (index.html)

  • 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)

2. Ranking (ranking.html)

  • 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

3. Escola de Fibra (escola.html)

  • 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

4. Vitrine de Prêmios (premios.html)

  • 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

5. Canal Red Flag (red-flag.html)

  • 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

🎮 Dados Mockados

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.

🔧 Tecnologias Utilizadas

  • 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.

📱 Responsividade

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

🚀 Próximos Passos (Implementação Real)

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

Backend

  • 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

Frontend

  • 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

Integrações

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

🎨 Customização

Modificar Cores

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

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

Alterar Dados

Edite o objeto mockData em js/main.js:

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

Adicionar Novas Páginas

  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

📄 Licença

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

📞 Suporte

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.