Este projeto apresenta diferentes planos de assinatura para os usuários, destacando os benefícios de cada um. Ele permite alternar entre os valores de pagamento mensal e anual, garantindo flexibilidade na escolha. Desenvolvido com React e estilizado com TailwindCSS, o design é responsivo e adaptável a diferentes dispositivos, proporcionando uma experiência fluida e intuitiva.
Para criar o projeto do zero, siga os passos abaixo:
- Instale as dependências
npm install- Inicie o servidor
npm run devRequisito 1:
- Crie cards para exibição de três planos de assinatura (Grátis, PRO e Empresas)
Requisito 2:
- É necessário ter alternância entre pagamento mensal e anual (com desconto de 20%)
Requisito 3:
- Faça alguns botões de ação: Um "Continuar" para o plano gratuito e outro "Comece Agora" para planos pagos
Requisito 4:
- É necessário que o design seja responsivo
-
Criar modal de confirmação de assinatura
-
Melhorar animações e transições
Temos uma sugestão de design no Figma. Entretanto, fique à vontade para montar a aplicação conforme a sua criatividade.
-
Composição de componentes reutilizáveis
-
Manipulação de estado para troca entre planos mensais e anuais
-
Estilização responsiva e customização de temas
-
Aplicação de classes utilitárias para layout e tipografia
-
Conhecimento básico de React (componentes, props e estado)
-
Noções básicas de TailwindCSS (classes utilitárias e configuração)