From 1df9aef1998a5854c70aea3a93ec44aa8de615cd Mon Sep 17 00:00:00 2001
From: Abhimanyu Yadav <122007096+Abhi1992002@users.noreply.github.com>
Date: Thu, 3 Apr 2025 21:25:20 +0530
Subject: [PATCH] fix(marketplace): Fix store card typography (#9739)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- fix #8965

### Changes Made:
- **Title**: Increased line height from 20px to 32px.
- **Creator Name:**
   - Changed font to Geist Sans.
   - Updated font size to 20px and leading to 28px.
- **Description**: Applied Geist Sans font.
- **Stats Line:** Applied Geist Sans font.
   - Font Configuration Fix:

> Previously, we were using font-gist, which is not defined in the
tailwind config file, hence Updated to use font-sans instead.

I have also fixed the height and width of the profile picture in the
creator card in this PR. The issue is linked below:
- #9314

![Screenshot 2025-04-02 at 6 32
10 PM](https://github.com/user-attachments/assets/1c2d9779-0a5e-4269-b3d2-37526a0949d3)

The margin is perfectly set to 24px; only the height and width of the
image need to be changed.

---------

Co-authored-by: Bently <tomnoon9@gmail.com>
---
 .../frontend/src/components/agptui/CreatorInfoCard.tsx    | 7 ++++++-
 .../frontend/src/components/agptui/StoreCard.tsx          | 8 ++++----
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/autogpt_platform/frontend/src/components/agptui/CreatorInfoCard.tsx b/autogpt_platform/frontend/src/components/agptui/CreatorInfoCard.tsx
index db88d4f2f3..9c5b1db739 100644
--- a/autogpt_platform/frontend/src/components/agptui/CreatorInfoCard.tsx
+++ b/autogpt_platform/frontend/src/components/agptui/CreatorInfoCard.tsx
@@ -27,11 +27,16 @@ 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
             size={130}
             className="h-[100px] w-[100px] sm:h-[130px] sm:w-[130px]"
           >
+          <AvatarImage
+            width={130}
+            height={130}
+            src={avatarSrc}
+            alt={`${username}'s avatar`}
+          />
             {username.charAt(0)}
           </AvatarFallback>
         </Avatar>
diff --git a/autogpt_platform/frontend/src/components/agptui/StoreCard.tsx b/autogpt_platform/frontend/src/components/agptui/StoreCard.tsx
index 28c29794aa..48274cb217 100644
--- a/autogpt_platform/frontend/src/components/agptui/StoreCard.tsx
+++ b/autogpt_platform/frontend/src/components/agptui/StoreCard.tsx
@@ -75,22 +75,22 @@ export const StoreCard: React.FC<StoreCardProps> = ({
       {/* Content Section */}
       <div className="w-full px-2 py-4">
         {/* Title and Creator */}
-        <h3 className="mb-0.5 font-poppins text-2xl font-semibold leading-tight text-[#272727] dark:text-neutral-100">
+        <h3 className="mb-0.5 font-poppins text-2xl font-semibold text-[#272727] dark:text-neutral-100">
           {agentName}
         </h3>
         {!hideAvatar && creatorName && (
-          <p className="font-lead mb-2.5 text-base font-normal text-neutral-600 dark:text-neutral-400">
+          <p className="mb-2.5 font-sans text-xl font-normal text-neutral-600 dark:text-neutral-400">
             by {creatorName}
           </p>
         )}
         {/* Description */}
-        <p className="font-geist mb-4 line-clamp-3 text-base font-normal leading-normal text-neutral-600 dark:text-neutral-400">
+        <p className="mb-4 font-sans text-base font-normal leading-normal text-neutral-600 dark:text-neutral-400">
           {description}
         </p>
 
         {/* Stats Row */}
         <div className="flex items-center justify-between">
-          <div className="font-geist text-lg font-semibold text-neutral-800 dark:text-neutral-200">
+          <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">