Vou criar um modal de rolagem horizontal fluido baseado no fluxo mostrado nas imagens. O componente terá navegação por gestos de toque e animações suaves.
Criei um modal de rolagem horizontal fluido que replica o comportamento mostrado nas imagens. O componente possui:
Características principais:
- Navegação por gestos: Deslize para a esquerda/direita para navegar entre as telas
- Animações fluidas: Usando Framer Motion para transições suaves
- Indicadores de progresso: Pontos na parte inferior mostram a posição atual
- Responsivo: Funciona bem em dispositivos móveis e desktop
- Três telas: Feed de produtos, página do produto e checkout
Funcionalidades:
- Tela 1 (Feed): Perfil do usuário e grade de produtos
- Tela 2 (Produto): Detalhes do produto com seleção de tamanho
- Tela 3 (Checkout): Resumo do pedido e finalização da compra
Controles de navegação:
- Gestos de toque: Arraste horizontalmente para navegar
- Botões: Setas para navegação manual
- Indicadores: Pontos que mostram o progresso atual
O modal é totalmente funcional e pode ser facilmente customizado para diferentes produtos e fluxos de compra.
247d ago