fix(marketplace): Fix store card style (#9769)

- fix #9222 
- fix #9221 
- fix #8966

### Changes made
- Standardized the height of store cards.
- Corrected spacing and responsiveness behavior.
- Removed horizontal margin and max-width from the featured section.
- Fixed the aspect ratio of the agent image in the store card.
- Now, a normal desktop screen displays 3 columns of agents instead of
4.

<img width="1512" alt="Screenshot 2025-04-07 at 7 09 40 AM"
src="https://github.com/user-attachments/assets/50d3b5c9-4e7c-456e-b5f1-7c0093509bd3"
/>

autogpt_platform/frontend/src/components/agptui/StoreCard.tsx

@@ -32,7 +32,7 @@ export const StoreCard: React.FC<StoreCardProps> = ({
 
   return (
     <div
-      className="inline-flex w-full max-w-[434px] cursor-pointer flex-col items-start justify-start gap-2.5 rounded-[26px] bg-white transition-all duration-300 hover:shadow-lg dark:bg-transparent dark:hover:shadow-gray-700"
+      className="flex h-[27rem] w-full max-w-md cursor-pointer flex-col items-start rounded-3xl bg-white transition-all duration-300 hover:shadow-lg dark:bg-transparent dark:hover:shadow-gray-700"
       onClick={handleClick}
       data-testid="store-card"
       role="button"
@@ -44,8 +44,8 @@ export const StoreCard: React.FC<StoreCardProps> = ({
         }
       }}
     >
-      {/* Header Image Section with Avatar */}
-      <div className="relative h-[200px] w-full overflow-hidden rounded-[20px]">
+      {/* First Section: Image with Avatar */}
+      <div className="relative aspect-[2/1.2] w-full overflow-hidden rounded-3xl md:aspect-[2.17/1]">
         {agentImage && (
           <Image
             src={agentImage}
@@ -72,37 +72,46 @@ export const StoreCard: React.FC<StoreCardProps> = ({
         )}
       </div>
 
-      {/* Content Section */}
-      <div className="w-full px-2 py-4">
-        {/* Title and Creator */}
-        <h3 className="mb-0.5 font-poppins text-2xl font-semibold text-[#272727] dark:text-neutral-100">
-          {agentName}
-        </h3>
-        {!hideAvatar && creatorName && (
-          <p className="mb-2.5 font-sans text-xl font-normal text-neutral-600 dark:text-neutral-400">
-            by {creatorName}
-          </p>
-        )}
-        {/* Description */}
-        <p className="mb-4 font-sans text-base font-normal leading-normal text-neutral-600 dark:text-neutral-400">
-          {description}
-        </p>
+      <div className="mt-3 flex w-full flex-1 flex-col px-4">
+        {/* Second Section: Agent Name and Creator Name */}
+        <div className="flex w-full flex-col">
+          <h3 className="line-clamp-2 font-poppins text-2xl font-semibold text-[#272727] dark:text-neutral-100">
+            {agentName}
+          </h3>
+          {!hideAvatar && creatorName && (
+            <p className="mt-3 truncate font-sans text-xl font-normal text-neutral-600 dark:text-neutral-400">
+              by {creatorName}
+            </p>
+          )}
+        </div>
 
-        {/* Stats Row */}
-        <div className="flex items-center justify-between">
-          <div className="font-sans text-lg font-semibold text-neutral-800 dark:text-neutral-200">
-            {runs.toLocaleString()} runs
-          </div>
-          <div className="flex items-center gap-2">
-            <span className="font-geist text-lg font-semibold text-neutral-800 dark:text-neutral-200">
-              {rating.toFixed(1)}
-            </span>
-            <div
-              className="inline-flex items-center"
-              role="img"
-              aria-label={`Rating: ${rating.toFixed(1)} out of 5 stars`}
-            >
-              {StarRatingIcons(rating)}
+        {/* Third Section: Description */}
+        <div className="mt-2.5 flex w-full flex-col">
+          <p className="line-clamp-3 font-sans text-base font-normal leading-normal text-neutral-600 dark:text-neutral-400">
+            {description}
+          </p>
+        </div>
+
+        <div className="flex-grow" />
+        {/* Spacer to push stats to bottom */}
+
+        {/* Fourth Section: Stats Row - aligned to bottom */}
+        <div className="mt-5 w-full">
+          <div className="flex items-center justify-between">
+            <div className="font-sans text-lg font-semibold text-neutral-800 dark:text-neutral-200">
+              {runs.toLocaleString()} runs
+            </div>
+            <div className="flex items-center gap-2">
+              <span className="font-sans text-lg font-semibold text-neutral-800 dark:text-neutral-200">
+                {rating.toFixed(1)}
+              </span>
+              <div
+                className="inline-flex items-center"
+                role="img"
+                aria-label={`Rating: ${rating.toFixed(1)} out of 5 stars`}
+              >
+                {StarRatingIcons(rating)}
+              </div>
             </div>
           </div>
         </div>

autogpt_platform/frontend/src/components/agptui/composite/AgentsSection.tsx

@@ -81,7 +81,7 @@ export const AgentsSection: React.FC<AgentsSectionProps> = ({
               </CarouselContent>
             </Carousel>
 
-            <div className="hidden grid-cols-1 place-items-center gap-6 md:grid md:grid-cols-2 lg:grid-cols-4">
+            <div className="hidden grid-cols-1 place-items-center gap-6 md:grid md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4">
               {displayedAgents.map((agent, index) => (
                 <StoreCard
                   key={index}

autogpt_platform/frontend/src/components/agptui/composite/FeaturedSection.tsx

@@ -46,8 +46,8 @@ export const FeaturedSection: React.FC<FeaturedSectionProps> = ({
   };
 
   return (
-    <section className="mx-auto w-full max-w-7xl px-4 pb-16">
-      <h2 className="mb-8 text-left font-poppins text-[18px] font-[600] leading-9 text-neutral-800 dark:text-neutral-200">
+    <section className="w-full pb-16">
+      <h2 className="mb-8 font-poppins text-2xl font-semibold leading-7 text-neutral-800 dark:text-neutral-200">
         Featured agents
       </h2>