UiDex

Stack de desenvolvimento

O site é totalmente responsivo, com foco em performance, animações suaves e design centrado no usuário, pensado para converter visitantes em potenciais clientes, através de seções bem definidas como Hero, Sobre nós, Serviços, Depoimentos e Contato.

🎯 Propósito

O projeto foi desenvolvido com os seguintes objetivos:

• Demonstrar domínio sobre o ecossistema React e Next.js;

• Aplicar componentização reutilizável com foco em performance e clareza;

• Simular a estrutura de uma agência de serviços digitais;

• Servir como referência prática no meu portfólio profissional.

🛠️ Tecnologias e Ferramentas Utilizadas

• Next.js 15 (App Router): Framework React usado para estruturar a aplicação com suporte nativo a renderização híbrida (SSR e SSG), otimização de performance e rotas baseadas em arquivos.

• React: Biblioteca JavaScript para construção de interfaces declarativas e reativas, utilizada como base para toda a lógica de componentes.

• TypeScript: Superset do JavaScript que adiciona tipagem estática, trazendo mais segurança, previsibilidade e melhor experiência durante o desenvolvimento.

• Tailwind CSS: Framework de utilitários CSS que permite escrever estilos diretamente na marcação de forma rápida, responsiva e consistente com o design system.

• Chroma/UI: Coleção de componentes acessíveis e estilizados com Tailwind, ideal para construir interfaces modernas com foco em usabilidade.

• Framer Motion: Biblioteca de animações para React utilizada para transições suaves e interações visuais elegantes ao rolar a página.

• Vercel: Plataforma de deploy ideal para aplicações Next.js, oferecendo CI/CD, cache inteligente, CDN global e preview automático de Pull Requests.

• Custom Hooks e Componentes: Foram criados diversos componentes reutilizáveis (como Parallax e ScrollAnimation) e hooks para encapsular lógica e garantir coesão entre as seções.

🧩 Funcionalidades Implementadas

• Layout 100% responsivo com breakpoints otimizados

• Componentes reutilizáveis e desacoplados

• Animações de entrada com IntersectionObserver (via componente ScrollAnimation)

• Efeito de Parallax visual no topo da página

• Seções ancoradas com navegação via hash (/#section)

• Design moderno e minimalista baseado em tokens de design do Tailwind

• Acessibilidade com aria-labels e foco em contraste de cores

• Deploy com Vercel