fix(market): Market featured agent card

[andrewhooker2]

Background

Resolves: #9313

The marketplace featured agent's section has a bug where if you hover over a featured agent's card we are getting an incorrect background color applied to the description.

Changes 🏗️

1. Refactored FeaturedStoreCard to FeaturedAgentCard:

   • Condensed props and leverage StoreAgent type from api
   • Removed onClick handler from props as this is not json serializable and is not inline with NextJS best practices
   • Used built in Card Components from ShadCN to minimize custom styling.
   • Optimize images with implementation of the Image component from NextJS

2. Enhanced FeaturedCardSection components:

   • Removing extensive prop passing and leverage the agent itself with the StoreAgent type.
   • Implemented Link from NextJS to better handler routing and remove the useRouter implementation
   • Removed unnecessary handleCardClick method.

Checklist 📋

For code changes:

• I have clearly listed my changes in the PR description
• I have made a test plan
• I have tested my changes according to the test plan:

Test Plan

• Goto the landing page of the application or /marketplace
• Scroll to the featured agents section
• Move mouse over each of the cards and observe the image disappearing and text being shown
• Observe the background color of the text that replaced the image matches that of the card

[CLAassistant]

All committers have signed the CLA.

[supabase]

This pull request has been ignored for the connected project bgwpwdsxblryihinutbx because there are no changes detected in supabase directory. You can change this behaviour in Project Integrations Settings ↗︎.

---

Preview Branches by Supabase.
Learn more about Supabase Branching ↗︎.

[github-actions]

This PR targets the master branch but does not come from dev or a hotfix/* branch.

Automatically setting the base branch to dev.

[qodo-merge-pro]

Qodo Merge was enabled for this repository. To continue using it, please link your Git account with your Qodo account here.

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

🎫 Ticket compliance analysis ✅ 9313 - PR Code Verified Compliant requirements: Fix hover state background color on agent card to match rest of card color Requires further human verification: Match design from Figma - Need to verify final colors match Figma design

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪

🧪 PR contains tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Dark Mode Colors The dark mode background color is hardcoded to neutral-700. This should be validated against the design system and Figma specs to ensure consistency. } rounded-xl dark:bg-neutral-700`}

[deepsource-io]

Here's the code health analysis summary for commits 00c312d..98b51e1. View details on DeepSource ↗.

Analysis Summary

Analyzer	Status	Summary	Link
JavaScript	✅ Success	❗ 3 occurences introduced 🎯 6 occurences resolved	View Check ↗
Python	✅ Success		View Check ↗

---

💡 If you’re a repository administrator, you can configure the quality gates from the settings.

[netlify]

✅ Deploy Preview for auto-gpt-docs canceled.

Name	Link
🔨 Latest commit	98b51e1
🔍 Latest deploy log	https://app.netlify.com/sites/auto-gpt-docs/deploys/67aa72fb25fee4000979d0f9

[netlify]

✅ Deploy Preview for auto-gpt-docs-dev canceled.

Name	Link
🔨 Latest commit	98b51e1
🔍 Latest deploy log	https://app.netlify.com/sites/auto-gpt-docs-dev/deploys/67aa72fb925ecc0008e835c5