UI Enhancement: Fix layout and redesign Components section

[Dev1822]

Closes #662

Description

This PR fixes the layout bugs and redesigns the Components section to properly implement a responsive grid and premium glassmorphic aesthetics.

Specifically, this PR accomplishes the following:

• Hero Section Overlap: Removed the buggy custom CSS classes (.cp-root, .cp-hero) that were causing a white rectangular block to overlap with the navigation bar, replacing them with standard Tailwind layout classes for a clean, padded view.
• Typography Overlap: Fixed the clipping and text stacking issues on the main "Glassmorphic Components" heading by applying proper line-height (leading-[1.1]) and padding (pb-2).
• Responsive Grid: Refactored the inefficient single-column component list into a fully responsive CSS Grid (grid-cols-1 on mobile, scaling up to grid-cols-4 on ultrawide displays).
• True Glassmorphism Cards: Upgraded the component cards to feature true glassmorphism, utilizing backdrop-blur-md, subtle translucent backgrounds (bg-white/5), thin borders (border-white/10), and interactive hover states with soft purple glows.

Notes for Reviewers

• The buggy cp-* CSS classes have been entirely replaced with Tailwind utilities within GlassyUIComponentsPage.tsx to maintain a robust layout.
• Hover over the component cards to see the new interactive glow effects on the cards and the icons.

Signed commits

• Yes, I signed my commits.

[vercel]

@Dev1822 is attempting to deploy a commit to the jaishree2310's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

🎉 Thank you @Dev1822 for your contribution! Your pull request has been submitted successfully. A maintainer will review it as soon as possible. We appreciate your support in making this project better