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.

🤓 Antes de começar

Para criar o projeto do zero, siga os passos abaixo:

1. Instale as dependências

npm install

2. Inicie o servidor

npm run dev

🔨 Requisitos

Requisito 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

🔨 Desafio extra para quem quer ir além

• Criar modal de confirmação de assinatura

• Melhorar animações e transições

🎨 Design Sugerido

Temos uma sugestão de design no Figma. Entretanto, fique à vontade para montar a aplicação conforme a sua criatividade.

Figma

🔗 Link do design

👉🏽 Sobre esse mini-projeto

O que você irá praticar:

React

• Composição de componentes reutilizáveis

• Manipulação de estado para troca entre planos mensais e anuais

TailwindCSS

• Estilização responsiva e customização de temas

• Aplicação de classes utilitárias para layout e tipografia

Pré-requisitos

• Conhecimento básico de React (componentes, props e estado)

• Noções básicas de TailwindCSS (classes utilitárias e configuração)