feat: added the card layout to glossary page

[aarabii]

What has changed?

Redesign the Glossary page with a modern and card based UI with responsiveness

This PR Resolves #2771 (keploy/keploy)

Type of change

• Using modern card-based components for each glossary item
• Enhancing responsiveness and interactivity
• Improving readability and layout aesthetics
• Keep the top A–Z navigation for filtering
• Add a scroll-to-anchor feature for each letter or active state highlight
• Optional: Animate underline or highlight on active letter
• Card Requriments:
  - [x] Title (term name)
  - [x] Optional short description or tooltip
  - [x] Responsive layout (1-column on mobile, 2–4 on wider screens)
  - [x] Hover/active states
  - [x] Dark mode support (if applicable)

How Has This Been Tested?

npm run build

npm run serve

some other screenshorts

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my code
• Components render correctly across breakpoints (mobile → desktop)
• Dark mode works correctly (if supported by the app)
• All glossary terms render without missing content
• Accessibility is considered (readable fonts, color contrast, etc.)
• No console errors or warnings

Note

• All the descriptions for the glossary are AI generated
• I have separated the Card components and glossary entries into separate files for better code readability and accessibility

[github-actions]

Thank you and congratulations 🎉 for opening your very first pull request in keploy

[nehagup]

This is lovely! Thank you 🧡🔥

[aarabii]

Thank you @nehagup glad keploy team liked my pr

[amaan-bhati]

Hey @aarabii Thanks for your contributions, If you learned something and you are happy with the contributions and opportunities provided by Keploy, feel free to talk about it at: https://github.com/orgs/keploy/discussions