fix(docs): optimize responsiveness in documentation website

[Gagan202005]

📋 Description

This PR addresses issue regarding the responsiveness of the documentation website, specifically in the Products section.

Previously, the UTG component used a rigid <ul> list structure with fixed column widths (auto-cols-[300px]), which caused layout issues on smaller screens.

Changes implemented:

• Refactored UTG Component: Replaced the unordered list (<ul>) with a responsive CSS Grid layout.
• Responsive Breakpoints: - Mobile: 1 column (grid-cols-1)
  • Tablet: 2 columns (md:grid-cols-2)
  • Desktop: 3 columns (lg:grid-cols-3)
• Simplified Structure: Removed unnecessary wrapper divs in the Products component that were interfering with the grid layout.
• Styling: Maintained the existing card styling (shadows, hover effects, colors) while ensuring cards stretch to fill the available height and width.

🔗 Related Issue

Fixes : keploy/keploy#3446

Type of change

• Bug fix (non-breaking change which fixes an issue).
• New feature (non-breaking change which adds functionality).
• Breaking change (fix or feature that would cause existing functionality to not work as expected).
• Documentation update (if none of the other choices apply).

How Has This Been Tested?

1. Ran the documentation site locally (npm start).
2. Navigated to the page containing the Products section.
3. Used Chrome DevTools to resize the window across Mobile (375px), Tablet (768px), and Desktop (1024px+) widths.
4. Verified that:
   • Cards stack vertically on mobile.
   • Cards display in a 2-column grid on tablet.
   • Cards display in a 3-column grid on desktop.
   • Hover effects work correctly.

DEMO

nw.mov

Checklist:

• My code follows the style guidelines of this project.
• I have performed a self-review of my own code.