Masterclass Valorant Pro

Landing page para uma campanha de captação de leads de uma masterclass de Valorant.

Funcionalidades

• Background em Vídeo: A página utiliza um vídeo temático do Valorant em loop como plano de fundo, criando uma experiência imersiva e dinâmica.
• Layout Responsivo: O design se adapta perfeitamente a diferentes tamanhos de tela, garantindo uma ótima experiência de uso tanto em desktops quanto em celulares.
• Formulário de Inscrição: Contém um formulário estilizado e integrado ao design para que os usuários possam se inscrever na masterclass.
• Componentes Reutilizáveis: Button e Input com variantes e estados de loading.
• Acessibilidade: ARIA labels, semântica HTML e focus states.

Tecnologias

• React 19
• TypeScript
• Vite
• Tailwind CSS
• ESLint + Prettier

Estrutura do Projeto

src/
├── assets/           # Imagens e vídeo
├── components/
│   ├── ui/          # Componentes reutilizáveis (Button, Input)
│   └── sections/    # Seções da página (Hero, Form, Footer)
├── constants/       # Links de redes sociais
├── types/           # TypeScript interfaces
├── App.tsx
├── main.tsx
└── index.css

Instalação

git clone https://github.com/caiolucasbittencourt/masterclass-valorant-pro
cd masterclass-valorant-pro
npm install
npm run dev

Scripts

Comando	Descrição
npm run dev	Inicia servidor de desenvolvimento
npm run build	Gera build de produção
npm run preview	Preview do build de produção
npm run lint	Verifica erros de lint
npm run lint:fix	Corrige erros de lint
npm run format	Formata código com Prettier
npm run format:check	Verifica formatação