All solutions

This is my first attempt to use Vue 3 in a FEM challenge. With this project I faced several doubts and needed to use Pinia for the modal opening buttons and I believe I'll need to use it to store the data from the total backed.

At this point I feel I'm struggling with the basics on CSS, or the scope isn't right and i'm not getting there... I need to align the modal's cards headers and for some reason I can't. If there's someone which has a better knowledge on Vue and can checkout my code, I would appreciate any feedback to improve my challenge.

I'm not happy with the result at all. While all the fields can be filled out, the validations are not working as expected. Initially, the form cannot be submitted if the fields are empty, but the error messages don't disappear when they're filled. Additionally, I couldn't implement a validation for the expiration date. I could use a similar approach as the card number validation, but that would mean repeating the previous validation. If someone could take a look at my solution, I would appreciate it.

This challenge was definitly hard work. I still have two issues:

1. When I toggle monthly/yearly the price value changes to undefined;
2. on under 425px screen sizes, the monthly/yearly switch isn't staying inside his limits.

This was a fun challenge to deal with CSS grid and flexbox. At this point the only issue is at the mobile layout. When closing the side navbar, and getting back to a higher screen size, if the page doesn't reload, the navbar keep hidden.

I'm having some issues positioning the buttons, but this is my solution so far.

At this point I'm struggling with the mobile layout and the close action on other answers when one of them is clicked.