fix(marketplace): Fix small UI bugs (#9800)

Resolving the bugs listed below
- #9796 
- #9797 
- #9798 
- #8998 
- #9799 

### Changes I have made 
- Removed border and set border-radius to `24px` in FeaturedCard
- Removed `white` background from breadcrumbs
- Changed distance between featured section arrow from `28px` to `12px`
- Added `1.5rem` spacing and changed color to `gray-200` on the
creator’s page separator
- Removed focus ring from the Search Library input
- And some small UI changes on marketplace

### Screenshots

<img width="658" alt="Screenshot 2025-04-10 at 3 26 56 PM"
src="https://github.com/user-attachments/assets/22bef6f0-19b9-42a6-8227-fedca33141ba"
/>

<img width="505" alt="Screenshot 2025-04-10 at 3 27 07 PM"
src="https://github.com/user-attachments/assets/2a5409a1-94c6-4d15-a35d-e4ed9b075055"
/>

<img width="1373" alt="Screenshot 2025-04-10 at 3 28 39 PM"
src="https://github.com/user-attachments/assets/046ea726-2a98-4000-abc8-9139fffe80dc"
/>

<img width="368" alt="Screenshot 2025-04-10 at 3 29 07 PM"
src="https://github.com/user-attachments/assets/4e0510ad-f535-4760-a703-651766ff522b"
/>

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

@@ -8,6 +8,7 @@ import { BreadCrumbs } from "@/components/agptui/BreadCrumbs";
 import { Metadata } from "next";
 import { CreatorInfoCard } from "@/components/agptui/CreatorInfoCard";
 import { CreatorLinks } from "@/components/agptui/CreatorLinks";
+import { Separator } from "@/components/ui/separator";
 
 export async function generateMetadata({
   params,
@@ -78,7 +79,7 @@ export default async function Page({
             </div>
           </div>
           <div className="mt-8 sm:mt-12 md:mt-16 lg:pb-[58px]">
-            <hr className="w-full bg-neutral-700" />
+            <Separator className="mb-6 bg-gray-200" />
             <AgentsSection
               agents={creatorAgents.agents}
               hideAvatars={true}

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

@@ -154,7 +154,7 @@ export default async function Page({}: {}) {
         <HeroSection />
         <FeaturedSection featuredAgents={featuredAgents.agents} />
         {/* 100px margin because our featured sections button are placed 40px below the container */}
-        <Separator className="mb-[25px] mt-[100px]" />
+        <Separator className="mb-6 mt-24" />
         <AgentsSection
           sectionTitle="Top Agents"
           agents={topAgents.agents as Agent[]}

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

@@ -22,7 +22,7 @@ export const BreadCrumbs: React.FC<BreadCrumbsProps> = ({ items }) => {
       <button className="flex h-12 w-12 items-center justify-center rounded-full border border-neutral-200 transition-colors hover:bg-neutral-50 dark:border-neutral-700 dark:hover:bg-neutral-800">
         <IconRightArrow className="h-5 w-5 text-neutral-900 dark:text-neutral-100" />
       </button> */}
-      <div className="flex h-auto flex-wrap items-center justify-start gap-4 rounded-[5rem] bg-white dark:bg-transparent">
+      <div className="flex h-auto flex-wrap items-center justify-start gap-4 rounded-[5rem] dark:bg-transparent">
         {items.map((item, index) => (
           <React.Fragment key={index}>
             <Link href={item.link}>

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

@@ -27,7 +27,7 @@ export const FeaturedAgentCard: React.FC<FeaturedStoreCardProps> = ({
       data-testid="featured-store-card"
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
-      className={`flex h-full flex-col ${backgroundColor}`}
+      className={`flex h-full flex-col ${backgroundColor} rounded-[1.5rem] border-none`}
     >
       <CardHeader>
         <CardTitle className="line-clamp-2 text-base sm:text-xl">

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

@@ -49,7 +49,7 @@ export const AgentsSection: React.FC<AgentsSectionProps> = ({
     <div className="flex flex-col items-center justify-center">
       <div className="w-full max-w-[1360px]">
         <div
-          className={`mb-[${margin}] font-poppins text-[18px] font-[600] leading-7 text-[#282828] dark:text-neutral-200`}
+          className={`mb-[${margin}] font-poppins text-lg font-semibold text-[#282828] dark:text-neutral-200`}
         >
           {sectionTitle}
         </div>

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

@@ -33,7 +33,7 @@ export const FeaturedCreators: React.FC<FeaturedCreatorsProps> = ({
   return (
     <div className="flex w-full flex-col items-center justify-center">
       <div className="w-full max-w-[1360px]">
-        <h2 className="mb-[37px] font-poppins text-2xl font-semibold leading-7 text-neutral-800 dark:text-neutral-200">
+        <h2 className="mb-9 font-poppins text-lg font-semibold text-neutral-800 dark:text-neutral-200">
           {title}
         </h2>
 

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

@@ -46,7 +46,7 @@ export const FeaturedSection: React.FC<FeaturedSectionProps> = ({
   };
 
   return (
-    <section className="w-full pb-16">
+    <section className="w-full">
       <h2 className="mb-8 font-poppins text-2xl font-semibold leading-7 text-neutral-800 dark:text-neutral-200">
         Featured agents
       </h2>

autogpt_platform/frontend/src/components/library/library-search-bar.tsx

@@ -49,7 +49,7 @@ export default function LibrarySearchBar(): React.ReactNode {
         onFocus={() => setIsFocused(true)}
         onBlur={() => !inputRef.current?.value && setIsFocused(false)}
         onChange={handleSearchInput}
-        className="flex-1 border-none font-sans text-[16px] font-normal leading-7 shadow-none focus:shadow-none"
+        className="flex-1 border-none font-sans text-[16px] font-normal leading-7 shadow-none focus:shadow-none focus:ring-0"
         type="text"
         placeholder="Search agents"
       />

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

@@ -213,7 +213,7 @@ const CarouselPrevious = React.forwardRef<
         className={cn(
           "absolute h-[52px] w-[52px] rounded-full",
           orientation === "horizontal"
-            ? "right-24 top-0"
+            ? "right-20 top-0"
             : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
           className,
         )}