fix: take in classnames as used by the outer component

we probbaly shouldn't be doing this?

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

@@ -8,6 +8,7 @@ import {
   CarouselItem,
 } from "@/components/ui/carousel";
 import { useRouter } from "next/navigation";
+import { cn } from "@/lib/utils";
 
 export interface Agent {
   slug: string;
@@ -25,12 +26,14 @@ interface AgentsSectionProps {
   sectionTitle: string;
   agents: Agent[];
   hideAvatars?: boolean;
+  className?: string;
 }
 
 export const AgentsSection: React.FC<AgentsSectionProps> = ({
   sectionTitle,
   agents: allAgents,
   hideAvatars = false,
+  className,
 }) => {
   const router = useRouter();
 
@@ -44,7 +47,7 @@ export const AgentsSection: React.FC<AgentsSectionProps> = ({
   };
 
   return (
-    <div className="flex flex-col items-center justify-center py-4 lg:py-8">
+    <div className={cn("flex flex-col items-center justify-center py-4 lg:py-8", className)}>
       <div className="w-full max-w-[1360px]">
         <div className="font-poppins decoration-skip-ink-none mb-8 text-left text-[18px] font-[600] leading-7 text-[#282828] underline-offset-[from-font] dark:text-neutral-200">
           {sectionTitle}