Este repositório contém uma Prova de Conceito (POC) focada no redesign estrutural e visual da atual plataforma Musixe. O objetivo primário deste projeto foi criar um protótipo hiper-realista para elevar o padrão estético da aplicação, abandonando a abordagem de "site catálogo genérico" para propor uma experiência moderna, premium e imersiva para o estudante de música.
Toda a arquitetura de navegação e a jornada visual do usuário foram reimaginadas dentro de uma Single Page Application (SPA) altamente interativa.
O Musixe atende músicos de todos os níveis (iniciantes a avançados) através de:
- Trilhas de Aprendizado: Cursos categorizados por instrumentos (Guitarra, Baixo, Teclado, Bateria) e áreas de estudo (Produção Musical, Luthieria, Teoria).
- IA Integrada (Sol IA): Uma inteligência artificial especialista em música atua como tutora particular. A IA interage com o aluno durante a aula, recebendo o contexto exato do vídeo, pautas e dúvidas para respostas ultra-personalizadas.
- Ferramentas Práticas (Web Audio API): A plataforma conta com um motor de síntese de áudio nativo rodando diretamente no navegador para fornecer:
- Afinador Cromático: Em tempo real usando o microfone.
- Metrônomo e Sequenciador de Bateria: Totalmente programável para treinos de ritmo.
- Dicionário de Acordes e Campo Harmônico: Interativo e sonorizado com violão sintetizado.
- Ecossistema Gamificado: Sistema de ofensivas de dias estudados e moedas virtuais ("Colcheias") para engajar a rotina do aluno.
A plataforma passou por um rigoroso processo de redesign de ponta a ponta. O objetivo principal foi abandonar a aparência de um "site de cursos padrão" e entregar uma experiência de uso imersiva, focada e extremamente elegante.
-
Dark Mode Nativo: Optamos por uma paleta escura profunda (fundo quase totalmente negro) para reduzir o cansaço visual durante longas horas de estudo e permitir que os vídeos das aulas ganhem total destaque. Cores vibrantes (como o amarelo dourado
#eab308e o verde-azulado#14b8a6) são usadas estritamente como accents (detalhes de atenção) para direcionar o olhar do usuário. -
Glassmorphism (Efeito Vidro): Substituímos os tradicionais blocos e cartões opacos por painéis com leve transparência (
rgba), bordas reflexivas super finas e desfoque de fundo (backdrop-filter: blur). Isso cria uma sensação de profundidade e fluidez, onde os elementos parecem flutuar sobre o plano de fundo. -
Minimalismo Direcionado:
- Remoção de Poluição Visual: Elementos que roubavam a atenção primária foram restruturados. O antigo carrossel expansivo de instrumentos deu lugar a um "Widget de Foco Atual", garantindo que a tela inicial exiba exatamente onde o aluno parou.
- Navegação em Pill: Barras de busca e seletores adotaram o design de "Pílula" (bordas 100% arredondadas), suavizando as interfaces pesadas.
- Tipografia Moderna: O uso consciente de famílias tipográficas sem serifa modernas aumenta a legibilidade em todos os dispositivos, do mobile ao desktop.
Abaixo, capturas de tela demonstrando o resultado da nova identidade visual aplicada na Prova de Conceito:
Dashboard Principal (Home)
Navegação de Trilhas e Catálogos
Experiência de Sala de Aula e Chat da Sol IA
Professores e Modo Claro
O projeto é autossuficiente no Front-end:
- React 18 + Vite: Renderização ultrarrápida, Hot Module Replacement instantâneo e geração de build extremamente enxuta.
- Sem CSS Frameworks: O design system inteiro foi construído do zero utilizando CSS Vanilla para garantir controle absoluto sobre o glassmorphism e as variáveis de tema, sem amarras a bibliotecas de UI engessadas.
- Gerenciamento de Estado Nativo: Utilização robusta da Context API para cache, simulação de banco de dados (
localStorage) e preferências globais.
Projeto desenvolvido com foco na excelência da experiência do estudante musical.