From 248cd53dec0e2889de353740f19c368920e0818c Mon Sep 17 00:00:00 2001
From: abhi1992002 <abhimanyu1992002@gmail.com>
Date: Fri, 4 Apr 2025 10:57:00 +0530
Subject: [PATCH] Improve spacing and typography in marketplace components

---
 .../src/app/marketplace/agent/[creator]/[slug]/page.tsx  | 5 +++--
 autogpt_platform/frontend/src/app/marketplace/page.tsx   | 6 +++---
 .../frontend/src/components/agptui/BecomeACreator.tsx    | 2 +-
 .../frontend/src/components/agptui/CreatorInfoCard.tsx   | 9 ++++++---
 .../src/components/agptui/composite/AgentsSection.tsx    | 4 ++--
 .../src/components/agptui/composite/FeaturedCreators.tsx | 2 +-
 .../src/components/agptui/composite/FeaturedSection.tsx  | 2 +-
 autogpt_platform/frontend/src/components/ui/avatar.tsx   | 8 +++++---
 8 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/autogpt_platform/frontend/src/app/marketplace/agent/[creator]/[slug]/page.tsx b/autogpt_platform/frontend/src/app/marketplace/agent/[creator]/[slug]/page.tsx
index cd6b444396..8e6ab45c40 100644
--- a/autogpt_platform/frontend/src/app/marketplace/agent/[creator]/[slug]/page.tsx
+++ b/autogpt_platform/frontend/src/app/marketplace/agent/[creator]/[slug]/page.tsx
@@ -81,16 +81,17 @@ export default async function Page({
             }
           />
         </div>
-        <Separator className="mb-[25px] mt-6" />
+        <Separator className="mb-[25px] mt-7" />
         <AgentsSection
           agents={otherAgents.agents}
           sectionTitle={`Other agents by ${agent.creator}`}
         />
-        <Separator className="mb-[25px] mt-6" />
+        <Separator className="mb-[25px] mt-[60px]" />
         <AgentsSection
           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"
diff --git a/autogpt_platform/frontend/src/app/marketplace/page.tsx b/autogpt_platform/frontend/src/app/marketplace/page.tsx
index ad0c315b28..1bf1c04d78 100644
--- a/autogpt_platform/frontend/src/app/marketplace/page.tsx
+++ b/autogpt_platform/frontend/src/app/marketplace/page.tsx
@@ -153,16 +153,16 @@ export default async function Page({}: {}) {
       <main className="px-4">
         <HeroSection />
         <FeaturedSection featuredAgents={featuredAgents.agents} />
-        <Separator className="mb-[25px]" />
+        <Separator className="mb-[25px] mt-[100px]" />
         <AgentsSection
           sectionTitle="Top Agents"
           agents={topAgents.agents as Agent[]}
         />
-        <Separator className="mb-[25px]" />
+        <Separator className="mb-[25px] mt-[60px]" />
         <FeaturedCreators
           featuredCreators={featuredCreators.creators as FeaturedCreator[]}
         />
-        <Separator className="mb-[25px]" />
+        <Separator className="mb-[25px] mt-[60px]" />
         <BecomeACreator
           title="Become a Creator"
           description="Join our ever-growing community of hackers and tinkerers"
diff --git a/autogpt_platform/frontend/src/components/agptui/BecomeACreator.tsx b/autogpt_platform/frontend/src/components/agptui/BecomeACreator.tsx
index c21cacd4b8..2331d7c936 100644
--- a/autogpt_platform/frontend/src/components/agptui/BecomeACreator.tsx
+++ b/autogpt_platform/frontend/src/components/agptui/BecomeACreator.tsx
@@ -22,7 +22,7 @@ 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]">
       {/* Title */}
-      <h2 className="underline-from-font decoration-skip-ink-none mb-[77px] text-left font-poppins text-[18px] font-semibold leading-[28px] text-neutral-800 dark:text-neutral-200">
+      <h2 className="mb-[77px] text-left font-poppins text-[18px] font-semibold leading-[28px] text-neutral-800 dark:text-neutral-200">
         {title}
       </h2>
 
diff --git a/autogpt_platform/frontend/src/components/agptui/CreatorInfoCard.tsx b/autogpt_platform/frontend/src/components/agptui/CreatorInfoCard.tsx
index ad8e614158..db88d4f2f3 100644
--- a/autogpt_platform/frontend/src/components/agptui/CreatorInfoCard.tsx
+++ b/autogpt_platform/frontend/src/components/agptui/CreatorInfoCard.tsx
@@ -28,7 +28,10 @@ export const CreatorInfoCard: React.FC<CreatorInfoCardProps> = ({
       <div className="flex w-full flex-col items-start justify-start gap-3.5 sm:h-[218px]">
         <Avatar className="h-[100px] w-[100px] sm:h-[130px] sm:w-[130px]">
           <AvatarImage 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>
@@ -77,7 +80,7 @@ export const CreatorInfoCard: React.FC<CreatorInfoCardProps> = ({
                 Average rating
               </div>
               <div className="inline-flex items-center gap-2">
-                <div className="font-geist text-[18px] font-semibold leading-[28px] text-neutral-800 dark:text-neutral-200">
+                <div className="font-sans text-[18px] font-semibold leading-[28px] text-neutral-800 dark:text-neutral-200">
                   {averageRating.toFixed(1)}
                 </div>
                 <div
@@ -93,7 +96,7 @@ export const CreatorInfoCard: React.FC<CreatorInfoCardProps> = ({
               <div className="w-full font-neue text-base font-medium leading-normal text-neutral-800 dark:text-neutral-200">
                 Number of runs
               </div>
-              <div className="font-geist text-[18px] font-semibold leading-[28px] text-neutral-800 dark:text-neutral-200">
+              <div className="font-sans text-[18px] font-semibold leading-[28px] text-neutral-800 dark:text-neutral-200">
                 {new Intl.NumberFormat().format(totalRuns)} runs
               </div>
             </div>
diff --git a/autogpt_platform/frontend/src/components/agptui/composite/AgentsSection.tsx b/autogpt_platform/frontend/src/components/agptui/composite/AgentsSection.tsx
index e3a9c7885b..20ac5b5bcc 100644
--- a/autogpt_platform/frontend/src/components/agptui/composite/AgentsSection.tsx
+++ b/autogpt_platform/frontend/src/components/agptui/composite/AgentsSection.tsx
@@ -45,9 +45,9 @@ export const AgentsSection: React.FC<AgentsSectionProps> = ({
   };
 
   return (
-    <div className="mb-4 flex flex-col items-center justify-center lg:mb-[60px]">
+    <div className="flex flex-col items-center justify-center">
       <div className="w-full max-w-[1360px]">
-        <div className="decoration-skip-ink-none mb-8 text-left font-poppins text-[18px] font-[600] leading-7 text-[#282828] underline-offset-[from-font] dark:text-neutral-200">
+        <div className="mb-8 text-left font-poppins text-[18px] font-[600] leading-7 text-[#282828] dark:text-neutral-200">
           {sectionTitle}
         </div>
         {!displayedAgents || displayedAgents.length === 0 ? (
diff --git a/autogpt_platform/frontend/src/components/agptui/composite/FeaturedCreators.tsx b/autogpt_platform/frontend/src/components/agptui/composite/FeaturedCreators.tsx
index 4c32843aed..cca8495650 100644
--- a/autogpt_platform/frontend/src/components/agptui/composite/FeaturedCreators.tsx
+++ b/autogpt_platform/frontend/src/components/agptui/composite/FeaturedCreators.tsx
@@ -31,7 +31,7 @@ export const FeaturedCreators: React.FC<FeaturedCreatorsProps> = ({
   const displayedCreators = featuredCreators.slice(0, 4);
 
   return (
-    <div className="flex w-full flex-col items-center justify-center pb-16">
+    <div className="flex w-full flex-col items-center justify-center">
       <div className="w-full max-w-[1360px]">
         <h2 className="mb-8 font-poppins text-2xl font-semibold leading-7 text-neutral-800 dark:text-neutral-200">
           {title}
diff --git a/autogpt_platform/frontend/src/components/agptui/composite/FeaturedSection.tsx b/autogpt_platform/frontend/src/components/agptui/composite/FeaturedSection.tsx
index 3cf0646fbc..758730f873 100644
--- a/autogpt_platform/frontend/src/components/agptui/composite/FeaturedSection.tsx
+++ b/autogpt_platform/frontend/src/components/agptui/composite/FeaturedSection.tsx
@@ -46,7 +46,7 @@ export const FeaturedSection: React.FC<FeaturedSectionProps> = ({
   };
 
   return (
-    <section className="mx-auto w-full max-w-7xl px-4 pb-16">
+    <section className="mx-auto w-full max-w-7xl px-4">
       <h2 className="mb-8 font-poppins text-2xl font-semibold leading-7 text-neutral-800 dark:text-neutral-200">
         Featured agents
       </h2>
diff --git a/autogpt_platform/frontend/src/components/ui/avatar.tsx b/autogpt_platform/frontend/src/components/ui/avatar.tsx
index ca2a26e095..681068b73b 100644
--- a/autogpt_platform/frontend/src/components/ui/avatar.tsx
+++ b/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"]}