There were two main goals for this project. 1) To create the webpage designed by a student from the UX boot camp, and 2) to learn Styled Components in React. This website was designed by Hanna Jonsson in the Technigo UX design boot camp. I built it using Styled Components. The webpage is responsive, and mostly follows the design. Although, there are some differences in features given time constraints.
I built this website over the course of 3 1/2 days. We did the design handover on Tuesday morning, and the project was completed Friday night. I started by reviewing the design and beginning to plan each component and its corresponding styled component. When I began coding, I started by establishing components with some of the supplied content, and some placeholder content. I created files to store the verbiage and other data for sections that would have repeating cards. For example, the "Benefits" section has three identical cards with different content. I put the content for each card into an array of objects in its own file so that I could map through the data in the component and reduce the written code. I then imported the font as a Global Style and the colors as a theme that could be passed by props to any component. Once I had the basic structure completed and the content included, I began styling. I started with mobile and finished with tablet and desktop. There were a few new features that I had to research and learn for this project, including: the form "popping up" on top of the plans; a horizontal carousel of images; fixing the solid hexagon behind the lotus logos; and the scroll feature for each of the Call to Action buttons.
The main challenge was not having a good understanding of how long it would take me to learn and implement new features so that I could plan appropriately.
If I had more time, I would fix - the hero image background so that it matched the design better; update the video section to be multiple videos in a carousel with the designed hover affects; update the form input styling; improve the responsiveness for the reviews and plans sections so that they switched from vertical on mobile screens to horizontal on larger screens; update the sign-up form so that it matched the tablet and desktop designs; and fix the alignment of the CTA button on the larger screen sizes.