You have to create an umbrella customizer for an umbrella seller. The seller offers these umbrellas in multiple colors and the corporate brands are their main customers. These brands want the seller to print their logo on the umbrella. The seller wants you to create a tool that'll help their customers create an instant preview of the customized umbrella on the website by adding the logo.

The customizer tool will let the brand upload its logo and will create a preview by adding the logo to the bottom of the umbrella. The umbrella is available in multiple colors and a user can change the color using color swatch buttons. On selecting the color of the umbrella, the theme of the whole customization tool changes, and the umbrella in new color loads. You can find all these details of the customizer tool in the demo photos and video below. You have to recreate the design and functionality as shown in the demo.

In the demo image, there are 8 colors, however, you just need to create this interface for 3 colors Pink, Blue, and Yellow. You will find all images and icons used in this project here: https://drive.google.com/drive/folders/1tUatmHWY7c8TV-SsErtM-Htmj2PUS4pl

<aside> ⚠️ Please don't use any library or frontend frameworks like React to perform the task. Once you have completed the task, please submit the link of the code repository or zip. If you have hosted this project somewhere, please share that link too for quick testing.

</aside>

<aside> ✅ Our team will review the code to see if the code passes different test cases and will analyze the code for its quality, logic, scalability, code comments, variable naming, complexity, and user interface design.

</aside>

Demo video

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/fb594f74-dcb1-48a2-aca0-82f83bb42fa8/Umbrella_2.mp4

Demo image - before adding logo

Demo image - after adding logo

Logo position