Enhanced CSS Styling for Help Center Section 🎨✨

[Pranjal6955]

Linked Issue:

Issue Fixs : #600

Description

This PR improves the styling of the Help Center section to enhance its visual appeal, readability, and responsiveness. The updated design ensures a cleaner layout, better typography, and smoother interactions, resulting in an overall better user experience.

Changes Made:

✅ Adjusted spacing, padding, and margins for a more structured and cohesive layout.
✅ Improved typography (font size, weight, and color) to boost readability and clarity.
✅ Added hover effects and smooth transitions for interactive elements, enhancing interactivity.
✅ Enhanced mobile responsiveness, ensuring a seamless experience across all devices.
✅ Maintained design consistency with the overall theme, preserving the look and feel of the site.

Screenshots :

📸 Before:

📸 After:

Screencast from 19-02-25 09:13:20 PM IST.webm

Tested On:

✅ Desktop
✅ Mobile

[Pranjal6955]

@marcgc21 @jvJUCA Sir can you please review this code

[jvJUCA]

Could you update the help card so that it opens on click anywhere, not just on the arrow? That would improve the user experience. Thanks!

[sonarqubecloud]

Quality Gate failed

Failed conditions
B Reliability Rating on New Code (required ≥ A)

See analysis details on SonarQube Cloud

Catch issues before they fail your Quality Gate with our IDE extension SonarQube for IDE

[Pranjal6955]

@jvJUCA I have updated the file as you requested.

[sahitya-chandra]

@Pranjal6955 In RUXAILAB, we are using Vuetify as the component library and it also provides utility classes for styling so you should avoid using hard CSS as it makes code redundant and hard to read and maintain. You should utilize this feature of vuetify in this PR and reduce the code.
No one is using this much amount of CSS these days.

@jvJUCA sir you can correct me if I am wrong...