🎨

Estrutura Visual e Frontend – BaberBeBot

Organização dos diretórios de estilos, temas e ícones do sistema BarberBot.

O sistema BaberBeBot conta com uma estrutura visual organizada, responsiva e adaptável, construída com CSS modular e ícones personalizados.

📁 Diretórios Envolvidos

sistema/assets/css/ – Estilos principais e temas
sistema/assets/iconfonts/ – Fontes de ícones (Boxicons, FontAwesome, Bootstrap Icons, etc.)
sistema/assets/js/ – Scripts de comportamento visual

🎨 Estilos e Temas

style.css – Estilo base do painel
style-dark.css, style-transparent.css – Temas alternativos
custom.css – Personalizações específicas para o projeto
recuperar.css, erro.css – Estilos específicos por página

🔠 Fontes e Ícones

boxicons/ – Ícones modernos em SVG, TTF, WOFF
fontawesome-free/ – Compatível com dezenas de ícones populares
bootstrap-icons/ – Ícones compatíveis com o framework Bootstrap
cryptofont, feather, flag-icon-css – Ícones adicionais

⚙️ Responsividade

Uso de media queries para adaptar ao mobile
Classes utilitárias como .d-flex, .text-center, .mt-4
Menus laterais colapsáveis e conteúdo fluído no painel

📦 Boas Práticas Aplicadas

Separação clara de CSS por função (temas, erro, login)
Importação de fontes externas por CDN ou local
Uso de ícones vetoriais para leveza e escalabilidade
Scripts e estilos organizados em subpastas por tipo