fix(frontend): Featured agents cards layout+sizing (#9482)

### Changes 🏗️

right now the featured agents cards dont have a set width/height, so
they change depending on the content, and the description is duplicated.
also, the "by {creator username}" was removed. currently it looks like
this:


![chrome_SBwRrkEN28](https://github.com/user-attachments/assets/1bff2206-ec80-46ee-8b84-e510de04b869)

with my changes, i set a fixed width and height so they dont change, the
description now only shows on hover and is truncated to 11 lines, and i
added back the "by {creator username}"


![chrome_qujRVF4LsX](https://github.com/user-attachments/assets/927629db-1bdd-426c-8d6d-d39a67152389)

---------

Co-authored-by: Andy Hooker <58448663+andrewhooker2@users.noreply.github.com>

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

@@ -27,33 +27,35 @@ export const FeaturedAgentCard: React.FC<FeaturedStoreCardProps> = ({
       data-testid="featured-store-card"
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
-      className={backgroundColor}
+      className={`flex h-full flex-col ${backgroundColor}`}
     >
       <CardHeader>
-        <CardTitle>{agent.agent_name}</CardTitle>
-        <CardDescription>{agent.description}</CardDescription>
+        <CardTitle className="line-clamp-2 text-base sm:text-xl">
+          {agent.agent_name}
+        </CardTitle>
+        <CardDescription className="text-sm">
+          By {agent.creator}
+        </CardDescription>
       </CardHeader>
-      <CardContent>
-        <div className="relative h-[397px] w-full overflow-hidden rounded-xl">
+      <CardContent className="flex-1 p-4">
+        <div className="relative aspect-[4/3] w-full overflow-hidden rounded-xl">
+          <Image
+            src={agent.agent_image || "/AUTOgpt_Logo_dark.png"}
+            alt={`${agent.agent_name} preview`}
+            fill
+            sizes="100%"
+            className={`object-cover transition-opacity duration-200 ${
+              isHovered ? "opacity-0" : "opacity-100"
+            }`}
+          />
           <div
-            className={`transition-opacity duration-200 ${isHovered ? "opacity-0" : "opacity-100"}`}
-          >
-            <Image
-              src={agent.agent_image || "/AUTOgpt_Logo_dark.png"}
-              alt={`${agent.agent_name} preview`}
-              fill
-              sizes="100%"
-              className="rounded-xl object-cover"
-            />
-          </div>
-          <div
-            className={`absolute inset-0 overflow-y-auto transition-opacity duration-200 ${
+            className={`absolute inset-0 overflow-y-auto p-4 transition-opacity duration-200 ${
               isHovered ? "opacity-100" : "opacity-0"
-            } rounded-xl dark:bg-neutral-700`}
+            }`}
           >
-            <p className="text-base text-neutral-800 dark:text-neutral-200">
+            <CardDescription className="line-clamp-[6] text-xs sm:line-clamp-[8] sm:text-sm">
               {agent.description}
-            </p>
+            </CardDescription>
           </div>
         </div>
       </CardContent>
@@ -63,13 +65,7 @@ export const FeaturedAgentCard: React.FC<FeaturedStoreCardProps> = ({
         </div>
         <div className="flex items-center gap-1.5">
           <p>{agent.rating.toFixed(1) ?? "0.0"}</p>
-          <div
-            className="inline-flex items-center justify-start gap-px"
-            role="img"
-            aria-label={`Rating: ${agent.rating.toFixed(1)} out of 5 stars`}
-          >
-            {StarRatingIcons(agent.rating)}
-          </div>
+          {StarRatingIcons(agent.rating)}
         </div>
       </CardFooter>
     </Card>

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

@@ -46,45 +46,41 @@ export const FeaturedSection: React.FC<FeaturedSectionProps> = ({
   };
 
   return (
-    <div className="flex w-full flex-col items-center justify-center">
-      <div className="w-[99vw]">
-        <h2 className="mx-auto mb-8 max-w-[1360px] px-4 font-poppins text-2xl font-semibold leading-7 text-neutral-800 dark:text-neutral-200">
-          Featured agents
-        </h2>
+    <section className="mx-auto w-full max-w-7xl px-4 pb-16">
+      <h2 className="mb-8 font-poppins text-2xl font-semibold leading-7 text-neutral-800 dark:text-neutral-200">
+        Featured agents
+      </h2>
 
-        <div className="w-[99vw] pb-[60px]">
-          <Carousel
-            className="mx-auto pb-10"
-            opts={{
-              align: "center",
-              containScroll: "trimSnaps",
-            }}
-          >
-            <CarouselContent className="ml-[calc(50vw-690px)]">
-              {featuredAgents.map((agent, index) => (
-                <CarouselItem
-                  key={index}
-                  className="max-w-[460px] flex-[0_0_auto]"
-                >
-                  <Link
-                    href={`/marketplace/agent/${encodeURIComponent(agent.creator)}/${encodeURIComponent(agent.slug)}`}
-                  >
-                    <FeaturedAgentCard
-                      agent={agent}
-                      backgroundColor={getBackgroundColor(index)}
-                    />
-                  </Link>
-                </CarouselItem>
-              ))}
-            </CarouselContent>
-            <div className="relative mx-auto w-full max-w-[1360px] pl-4">
-              <CarouselIndicator />
-              <CarouselPrevious afterClick={handlePrevSlide} />
-              <CarouselNext afterClick={handleNextSlide} />
-            </div>
-          </Carousel>
+      <Carousel
+        opts={{
+          align: "center",
+          containScroll: "trimSnaps",
+        }}
+      >
+        <CarouselContent>
+          {featuredAgents.map((agent, index) => (
+            <CarouselItem
+              key={index}
+              className="h-[480px] md:basis-1/2 lg:basis-1/3"
+            >
+              <Link
+                href={`/marketplace/agent/${encodeURIComponent(agent.creator)}/${encodeURIComponent(agent.slug)}`}
+                className="block h-full"
+              >
+                <FeaturedAgentCard
+                  agent={agent}
+                  backgroundColor={getBackgroundColor(index)}
+                />
+              </Link>
+            </CarouselItem>
+          ))}
+        </CarouselContent>
+        <div className="relative mt-4">
+          <CarouselIndicator />
+          <CarouselPrevious afterClick={handlePrevSlide} />
+          <CarouselNext afterClick={handleNextSlide} />
         </div>
-      </div>
-    </div>
+      </Carousel>
+    </section>
   );
 };