fix(marketplace): Fixing margins between headers, divider and content (#9757)

- fix #9003 
- fix - #8969 
- fix #8970 

Adding correct margins in between headers, divider and content.

### Changes made

- Remove any vertical padding or margin from the section.
- Add top and bottom margins to the separator, so the spacing between
sections is handled only by the separator.
- Also, add a size prop in AvatarFallback because its size is currently
broken. It’s not able to extract the size properly from the className.

autogpt_platform/frontend/src/app/marketplace/agent/[creator]/[slug]/page.tsx

@@ -81,16 +81,19 @@ export default async function Page({
             }
           />
         </div>
-        <Separator className="mb-[25px] mt-6" />
+        <Separator className="mb-[25px] mt-[60px]" />
         <AgentsSection
+          margin="32px"
           agents={otherAgents.agents}
           sectionTitle={`Other agents by ${agent.creator}`}
         />
-        <Separator className="mb-[25px] mt-6" />
+        <Separator className="mb-[25px] mt-[60px]" />
         <AgentsSection
+          margin="32px"
           agents={similarAgents.agents}
           sectionTitle="Similar agents"
         />
+        <Separator className="mb-[25px] mt-[60px]" />
         <BecomeACreator
           title="Become a Creator"
           description="Join our ever-growing community of hackers and tinkerers"

autogpt_platform/frontend/src/app/marketplace/page.tsx

@@ -153,16 +153,17 @@ export default async function Page({}: {}) {
       <main className="px-4">
         <HeroSection />
         <FeaturedSection featuredAgents={featuredAgents.agents} />
-        <Separator />
+        {/* 100px margin because our featured sections button are placed 40px below the container */}
+        <Separator className="mb-[25px] mt-[100px]" />
         <AgentsSection
           sectionTitle="Top Agents"
           agents={topAgents.agents as Agent[]}
         />
-        <Separator />
+        <Separator className="mb-[25px] mt-[60px]" />
         <FeaturedCreators
           featuredCreators={featuredCreators.creators as FeaturedCreator[]}
         />
-        <Separator />
+        <Separator className="mb-[25px] mt-[60px]" />
         <BecomeACreator
           title="Become a Creator"
           description="Join our ever-growing community of hackers and tinkerers"

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

@@ -21,17 +21,14 @@ export const BecomeACreator: React.FC<BecomeACreatorProps> = ({
 
   return (
     <div className="relative mx-auto h-auto min-h-[300px] w-full max-w-[1360px] md:min-h-[400px] lg:h-[459px]">
-      {/* Top border */}
-      <div className="left-0 top-0 h-px w-full bg-gray-200 dark:bg-gray-700" />
-
       {/* Title */}
-      <h2 className="mb-8 text-left font-poppins text-[18px] font-[600] leading-9 text-neutral-800 dark:text-neutral-200">
+      <h2 className="mb-[77px] font-poppins text-[18px] font-semibold leading-[28px] text-neutral-800 dark:text-neutral-200">
         {title}
       </h2>
 
       {/* Content Container */}
-      <div className="m-auto w-full max-w-[900px] px-4 py-16 text-center md:px-6 lg:px-0">
-        <h2 className="underline-from-font decoration-skip-ink-none mb-6 text-center font-poppins text-[48px] font-semibold leading-[54px] tracking-[-0.012em] text-neutral-950 dark:text-neutral-50 md:mb-8 lg:mb-12">
+      <div className="mx-auto w-full max-w-[900px] px-4 text-center md:px-6 lg:px-0">
+        <h2 className="mb-6 text-center font-poppins text-[48px] font-semibold leading-[54px] tracking-[-0.012em] text-neutral-950 dark:text-neutral-50 md:mb-8 lg:mb-12">
           Build AI agents and share
           <br />
           <span className="text-violet-600 dark:text-violet-400">

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

@@ -33,7 +33,10 @@ export const CreatorInfoCard: React.FC<CreatorInfoCardProps> = ({
             src={avatarSrc}
             alt={`${username}'s avatar`}
           />
-          <AvatarFallback className="h-[100px] w-[100px] sm:h-[130px] sm:w-[130px]">
+          <AvatarFallback
+            size={130}
+            className="h-[100px] w-[100px] sm:h-[130px] sm:w-[130px]"
+          >
             {username.charAt(0)}
           </AvatarFallback>
         </Avatar>

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

@@ -25,12 +25,14 @@ interface AgentsSectionProps {
   sectionTitle: string;
   agents: Agent[];
   hideAvatars?: boolean;
+  margin?: string;
 }
 
 export const AgentsSection: React.FC<AgentsSectionProps> = ({
   sectionTitle,
   agents: allAgents,
   hideAvatars = false,
+  margin = "37px",
 }) => {
   const router = useRouter();
 
@@ -44,9 +46,11 @@ export const AgentsSection: React.FC<AgentsSectionProps> = ({
   };
 
   return (
-    <div className="flex flex-col items-center justify-center pb-4 lg:pb-8">
+    <div className="flex flex-col items-center justify-center">
       <div className="w-full max-w-[1360px]">
-        <div className="mb-8 font-poppins text-[18px] font-[600] leading-9 text-neutral-800 dark:text-neutral-200">
+        <div
+          className={`mb-[${margin}] font-poppins text-[18px] font-[600] leading-7 text-[#282828] dark:text-neutral-200`}
+        >
           {sectionTitle}
         </div>
         {!displayedAgents || displayedAgents.length === 0 ? (

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

@@ -31,9 +31,9 @@ export const FeaturedCreators: React.FC<FeaturedCreatorsProps> = ({
   const displayedCreators = featuredCreators.slice(0, 4);
 
   return (
-    <div className="flex w-full flex-col items-center justify-center py-16">
+    <div className="flex w-full flex-col items-center justify-center">
       <div className="w-full max-w-[1360px]">
-        <h2 className="mb-8 text-left font-poppins text-[18px] font-[600] leading-9 text-neutral-800 dark:text-neutral-200">
+        <h2 className="mb-[37px] font-poppins text-2xl font-semibold leading-7 text-neutral-800 dark:text-neutral-200">
           {title}
         </h2>
 

autogpt_platform/frontend/src/components/ui/avatar.tsx

@@ -58,8 +58,10 @@ const getAvatarSize = (className: string | undefined): number => {
 
 const AvatarFallback = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Fallback>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
->(({ className, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback> & {
+    size?: number;
+  }
+>(({ className, size, ...props }, ref) => (
   <AvatarPrimitive.Fallback
     ref={ref}
     className={cn(
@@ -69,7 +71,7 @@ const AvatarFallback = React.forwardRef<
     {...props}
   >
     <BoringAvatar
-      size={getAvatarSize(className)}
+      size={size || getAvatarSize(className)}
       name={props.children?.toString() || "User"}
       variant="marble"
       colors={["#92A1C6", "#146A7C", "#F0AB3D", "#C271B4", "#C20D90"]}