Quasar Shadcn Dashboard

Um elegante dashboard baseado no Quasar Framework com design inspirado no estilo Shadcn, desenvolvido com a assistência da IA Claude da Anthropic.

📚 Visão Geral

Este projeto combina a potência e flexibilidade do Quasar Framework com a estética moderna e minimalista do Shadcn UI, resultando em um dashboard elegante e funcional. O design é caracterizado por:

• Paleta de cores suaves e neutras
• Tipografia clara e hierárquica
• Bordas sutis e cantos arredondados
• Sombras leves e efeitos de interação refinados
• Layout responsivo e adaptável

✨ Funcionalidades

• Layout Principal: Menu lateral, cabeçalho e sistema de navegação
• Dashboard Analítico: Gráficos e cards estatísticos
• Gerenciamento de Tarefas: Lista de tarefas com filtros e ações
• Biblioteca de Mídia: Visualização de conteúdo multimedia
• Páginas de Autenticação: Login e cadastro de usuários
• Formulários: Diversos componentes de formulário estilizados
• Configurações de Usuário: Gerenciamento de preferências

🛠️ Tecnologias Utilizadas

• Vue.js 3 - Framework JavaScript progressivo
• Quasar Framework v2 - Framework Vue.js para desenvolvimento multiplataforma
• Vue ApexCharts - Biblioteca de gráficos
• SCSS - Pré-processador CSS para estilos avançados

⚙️ Instalação

# Instalar o Quasar CLI globalmente
npm install -g @quasar/cli

# Clonar o repositório
git clone /~https://github.com/seu-usuario/quasar-shadcn-dashboard.git
cd quasar-shadcn-dashboard

# Instalar dependências
npm install

# Iniciar o servidor de desenvolvimento
quasar dev

🎨 Personalização do Tema

O dashboard utiliza variáveis SCSS para facilitar a personalização:

// Arquivo src/css/quasar.variables.scss
$primary: #64748b;
$secondary: #475569;
$accent: #1e293b;

// Cores funcionais
$positive: #10b981;
$negative: #ef4444;
$info: #3b82f6;
$warning: #f59e0b;

// Bordas, sombras e outros elementos
$border-radius: 6px;

📝 Créditos

Este projeto foi construído com a assistência de Claude, uma IA desenvolvida pela Anthropic. Claude ajudou a:

• Gerar componentes Vue.js com estilo Shadcn
• Implementar layouts responsivos
• Criar visualizações de dados interativas
• Estilizar elementos de interface com SCSS
• Desenvolver páginas de autenticação

📹 Tutorial em Vídeo

Para um guia detalhado sobre como este projeto foi iniciado e desenvolvido, assista ao nosso tutorial no YouTube:

📄 Licença

Este projeto está licenciado sob a MIT License.

---

Desenvolvido com 💙 usando Quasar Framework e Claude AI