Results Summary Component Solution using Next JS & Tailwind CSS

Hi @arpit8392, congrats on your solution; here are some comments that might help you to improve it:

Accessibility and semantics

• Here is your heading map:

Results Summary Component
3 Your Result
2 Great
1 Summary

Think about headings as a table of content of your site, they need to have a hierarchy. Here you can read more about heading structure.

• There are some recurring categories in the summary section, is it a div the best semantic element for this?
• Are the category icons adding something to your content? In case not, consider treating them as decorative images, removing their alt attribute.

Others

• I recommend you set up prettier alongside your eslint config to get your code more readable and with the same structure. i.e.: you have some files using tabs and some others, probably config files, using spaces.
• I'm wondering if you have all your react components in the app due to the challenge size, it would be good to see a different folder structure, no matter the challenge size, thinking in scalable projects.
• Using colour variables linked to colour names, like red or yellow may take you to unnecessary refactors if the colour changes; instead, try to use variables scoped to features or categories using tokens.

I hope you find it useful. I'm happy to take another look at your solution if you make some other changes.

Nice work man...but i think u forgot to add a background gradient to the bubble in the result box and also the background color of the body in the original design is white and u have to just use a box shadow at the bottom and right side of the main design....otherwise u did a great job👍