🧠 Brainwave.io - UI Engineering Case Study

Esta é uma Landing Page de alta conversão desenvolvida para demonstrar competências avançadas em UI Engineering. O projeto foca em performance, estética premium e uma experiência de usuário (UX) fluida, utilizando as ferramentas mais modernas do ecossistema React.

🚀 Destaques Técnicos

1. Arquitetura de Componentes & UI

• Sticky Navbar com Glassmorphism: Implementação de cabeçalho fixo utilizando backdrop-blur-md para manter a navegação acessível sem poluir o visual.
• Sistema de Design System: Uso de Tipografia Fluida com a função clamp do CSS para garantir que os textos se adaptem perfeitamente a qualquer tamanho de tela.
• Identidade Visual Premium: Integração da fonte Gilroy e paleta de cores balanceada para transmitir autoridade e modernidade.

2. UX & Animações

• Menu Mobile Inteligente: Menu lateral animado com AnimatePresence do Framer Motion, resolvendo problemas de "race condition" entre o fechamento do menu e o scroll suave.
• Smooth Scroll Customizado: Navegação suave por âncoras com tratamento de scroll-margin-top para compensar a altura da Navbar fixa.
• Layout Masonry (Alvenaria): Seção de portfólio construída com colunas flexíveis independentes para criar um visual dinâmico e assimétrico.

3. Detalhes de Polimento

• Abstract Decorators: Uso estratégico de ornamentos em SVG e CSS (grades de pontos e formas geométricas) posicionados de forma absoluta para criar profundidade visual.
• Interactive Cards: Efeitos de levitação e zoom em hover aplicados aos cards de serviço e estudos de caso para aumentar o engajamento.

🛠️ Tecnologias Utilizadas

• Vite: Ferramenta de build ultra-rápida.
• React 18: Biblioteca para construção de interfaces.
• TypeScript: Tipagem estática para maior segurança e escalabilidade.
• Tailwind CSS v4: Otimização de estilos via utilitários diretamente no CSS.
• Framer Motion: Orquestração de animações complexas e transições.
• Lucide React: Biblioteca de ícones leves e consistentes.

📦 Como rodar o projeto

1. Clone o repositório:

   git clone [https://github.com/ValcineiJr/Brainwave.io.git](https://github.com/ValcineiJr/Brainwave.io.git)

2. Instale as dependências:

   npm install

3. Inicie o servidor de desenvolvimento:

   npm run dev

🧑‍💻 Autor

Desenvolvido por Valcinei, estudante de TI e aspirante a Engenheiro Front-End & UI. Focado em transformar problemas complexos em interfaces elegantes e funcionais.