Um guia completo e interativo das regras da National Football League (NFL), desenvolvido com Next.js 15, shadcn/ui e Tailwind CSS.

• Design Clean e Responsivo: Interface moderna com efeitos de blur e gradientes
• Modo Dark/Light: Alternância entre temas com persistência local
• Navegação por Abas: Regras organizadas por categorias (Ataque, Defesa, Times Especiais, etc.)
• Detalhes Expansíveis: Clique nas regras para ver explicações detalhadas
• Performance Otimizada: Built com Next.js 15 e Turbopack

• Node.js 18+
• npm, yarn, pnpm ou bun

1. Clone o repositório

git clone <repository-url>
cd fumble

2. Instale as dependências

npm install

3. Execute o servidor de desenvolvimento

npm run dev

4. Abra http://localhost:3000 no seu navegador

• Next.js 15 - Framework React com App Router
• TypeScript - Tipagem estática
• Tailwind CSS - Estilização utilitária
• shadcn/ui - Componentes de UI de alta qualidade
• Lucide React - Ícones SVG
• next-themes - Gerenciamento de temas

src/
├── app/
│   ├── globals.css
│   ├── layout.tsx
│   └── page.tsx
├── components/
│   ├── ui/
│   │   ├── badge.tsx
│   │   ├── button.tsx
│   │   ├── card.tsx
│   │   ├── dropdown-menu.tsx
│   │   └── tabs.tsx
│   ├── theme-provider.tsx
│   └── theme-toggle.tsx
└── data/
    └── nfl-rules.ts

• Ataque (Offense) - Sistema de downs, passes, formações
• Defesa (Defense) - Tackles, interceptações, blitz
• Times Especiais - Field goals, punts, kickoffs
• Pontuação - Touchdowns, field goals, safeties
• Penalidades - Infrações e suas consequências
• Tempo de Jogo - Estrutura do jogo, timeouts, cronômetro

npm run dev      # Inicia servidor de desenvolvimento
npm run build    # Gera build de produção
npm run start    # Inicia servidor de produção
npm run lint     # Executa linting

• Efeitos de Blur: backdrop-blur-sm para glassmorphism
• Gradientes Suaves: Backgrounds com transparência
• Hover States: Transições suaves nos cards
• Responsividade: Layout adaptável para mobile/desktop
• Tema Sistema: Detecção automática de preferência do OS

O projeto foi desenvolvido com mobile-first design:

• Mobile: Layout em coluna única
• Tablet: Grid 2 colunas para cards de regras
• Desktop: Layout completo com 6 abas horizontais

npx vercel --prod

npm run build
npm run start

1. Fork o projeto
2. Crie sua feature branch (git checkout -b feature/AmazingFeature)
3. Commit suas mudanças (git commit -m 'Add some AmazingFeature')
4. Push para a branch (git push origin feature/AmazingFeature)
5. Abra um Pull Request

Este projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.

Desenvolvido com ❤️ para fãs da NFL