feat: Improved UI Functionality and Integrate Star Rate System in the Feedback Form

[aslams2020]

Hey @Anishkagupta04 and @varshith257
issue closes #759

I Have Updated and improved the Complete feedback form.

Below Are The Changes I Implemented

1. Changed Complete Alignment and UI of the feedback form to look visually appealing.
2. I Added a dynamic Rating system using emojis (😡, 😒, 😐, 😊,😁) to reflect user sentiment rating 1,2,3,4,5 respectively.
3. Added a "Custom Success Popup" (a popup to notify users upon successful form submission.)
4. Tried my very best to style the form to follow the website theme.
5. Added a "Reset Form Functionality" so that After Submit the Existing data gets reset for next one.
6. tried to added animations wherever Needed.
7. Styled the Current "Submit" Button with much better Hover Effects!

Here is the Video -

rapidoc.feedback.UI.mp4

If the feedback form itself has a creative UI and engaging functionalities, The user will tend to give feedbacks about the website often times.

Please take a look and review it.

Type of PR

• Feature enhancement

Checklist

• I have gone through the contributing guide
• I have updated my branch and synced it with project main branch before making this PR
• I have performed a self-review of my code
• I have tested the changes thoroughly before submitting this pull request.
• I have provided relevant issue numbers, screenshots, and videos after making the changes.
• I have commented my code, particularly in hard-to-understand areas.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
rapidoc	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 7, 2024 6:59am

[github-actions]

Great job, @aslams2020! 🎉 Thank you for submitting your pull request. Your contribution is valuable and we appreciate your efforts to improve our project.We will promptly review your changes and offer feedback. Keep up the excellent work! Kindly remember to check our contributing guidelines

[netlify]

✅ Deploy Preview for rapidoc ready!

Name	Link
🔨 Latest commit	bffdb72
🔍 Latest deploy log	https://app.netlify.com/sites/rapidoc/deploys/668a3ce3c9d7950008acd6da
😎 Deploy Preview	https://deploy-preview-776--rapidoc.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[varshith257]

The appointment for is still misaligned

[aslams2020]

@varshith257, My assigned work was to Improve "Feedback Form".
I think someone already generated PR for that appointment form alignment.

[varshith257]

Will look into it

[varshith257]

@aslams2020 The color scheme of changes should align with the home page color scheme look at it. Update hex codes that to align with home page colors

[aslams2020]

@varshith257 Done!

[varshith257]

@aslams2020 Hexcodes are mismatching take a reference from other sections. The bg-color to be dark green hex used in other sections

[aslams2020]

@varshith257 Done!

[varshith257]

All emojis are same. Instead replace with star rating system better

[varshith257]

If you incorporate them too will award level 3

[aslams2020]

@varshith257 Done! Please take a look.

[github-actions]

🎉 Your pull request has been successfully merged! 🎉 Thank you for your contribution to our project. Your efforts are greatly appreciated. Keep up the fantastic work! 🚀

[varshith257]

Thanks! @aslams2020