Update page to make it responsive

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

@@ -32,9 +32,9 @@ export const SearchBar: React.FC<SearchBarProps> = ({
   };
 
   return (
-    <form onSubmit={handleSubmit} className="w-screen lg:w-[56.25rem]">
+    <form onSubmit={handleSubmit} className="w-9/10 lg:w-[56.25rem]">
       <div
-        className={`py-2md:px-6 h-12 px-4 md:h-[4.5rem] md:py-[0.625rem] ${backgroundColor} flex items-center gap-2 rounded-full md:gap-5`}
+        className={`h-12 px-4 py-2 md:h-[4.5rem] md:px-6 md:py-[0.625rem] ${backgroundColor} flex items-center gap-2 rounded-full md:gap-5`}
       >
         <MagnifyingGlassIcon className={`h-5 w-5 md:h-7 md:w-7 ${iconColor}`} />
         <input

autogpt_platform/frontend/src/components/agptui/marketplace/home/FeaturedSection.tsx

@@ -21,11 +21,12 @@ export const FeaturedSection: React.FC<FeaturedSectionProps> = ({
 }) => {
   return (
     <div className="flex flex-col items-center justify-center px-4 py-8">
-      <div className="px-16">
+      <div className="w-full px-4 lg:px-16">
         <h2 className="mb-6 font-neue text-2xl font-bold leading-tight tracking-tight text-[#282828] sm:mb-8 sm:text-3xl">
           Featured agents
         </h2>
-        <div className="flex flex-col items-center justify-center gap-6 sm:flex-row">
+
+        <div className="flex flex-col items-center justify-center gap-6 sm:flex-row sm:flex-wrap">
           {featuredAgents.slice(0, 2).map((agent, index) => (
             <FeaturedStoreCard
               key={index}

autogpt_platform/frontend/src/components/agptui/marketplace/home/HeroSection.tsx

@@ -12,7 +12,7 @@ export const HeroSection: React.FC<HeroSectionProps> = ({
   onFilterChange,
 }) => {
   return (
-    <div className="my-8 flex flex-col items-center justify-center px-4 sm:my-12 sm:px-6 md:my-16 lg:my-24 lg:px-8 xl:my-16">
+    <div className="mb-2 mt-8 flex flex-col items-center justify-center px-4 sm:mb-4 sm:mt-12 sm:px-6 md:mb-6 md:mt-16 lg:my-24 lg:px-8 xl:my-16">
       <div className="w-full max-w-3xl lg:max-w-4xl xl:max-w-5xl">
         <h1 className="mb-2 text-center font-neue text-3xl font-medium leading-tight tracking-wide text-[#272727] sm:mb-3 sm:text-4xl md:mb-4 md:text-5xl">
           Discover our community made AI Agents

autogpt_platform/frontend/src/components/agptui/marketplace/home/Page.stories.tsx

@@ -35,6 +35,8 @@ const mockNavLinks = [
 const mockFeaturedAgents = [
   {
     agentName: "Super SEO Optimizer",
+    agentImage:
+      "https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
     creatorName: "AI Labs",
     description:
       "Boost your website's search engine rankings with our advanced AI-powered SEO optimization tool.",
@@ -43,6 +45,8 @@ const mockFeaturedAgents = [
   },
   {
     agentName: "Content Wizard",
+    agentImage:
+      "https://upload.wikimedia.org/wikipedia/commons/c/c5/Big_buck_bunny_poster_big.jpg",
     creatorName: "WriteRight Inc.",
     description:
       "Generate high-quality, engaging content for your blog, social media, or marketing campaigns.",
@@ -54,6 +58,9 @@ const mockFeaturedAgents = [
 const mockTopAgents = [
   {
     agentName: "Data Analyzer Pro",
+    agentImage:
+      "https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
+    avatarSrc: "https://example.com/avatar1.jpg",
     description:
       "Powerful tool for analyzing large datasets and generating insights.",
     runs: 50000,
@@ -61,6 +68,9 @@ const mockTopAgents = [
   },
   {
     agentName: "Image Recognition Master",
+    agentImage:
+      "https://upload.wikimedia.org/wikipedia/commons/c/c5/Big_buck_bunny_poster_big.jpg",
+    avatarSrc: "https://example.com/avatar2.jpg",
     description:
       "Accurately identify and classify objects in images using state-of-the-art machine learning algorithms.",
     runs: 60000,
@@ -68,6 +78,9 @@ const mockTopAgents = [
   },
   {
     agentName: "Natural Language Processor",
+    agentImage:
+      "https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
+    avatarSrc: "https://example.com/avatar3.jpg",
     description:
       "Analyze and understand human language with advanced NLP techniques.",
     runs: 80000,
@@ -75,6 +88,9 @@ const mockTopAgents = [
   },
   {
     agentName: "Sentiment Analyzer",
+    agentImage:
+      "https://upload.wikimedia.org/wikipedia/commons/c/c5/Big_buck_bunny_poster_big.jpg",
+    avatarSrc: "https://example.com/avatar4.jpg",
     description:
       "Determine the emotional tone of text data for customer feedback analysis.",
     runs: 45000,
@@ -82,6 +98,9 @@ const mockTopAgents = [
   },
   {
     agentName: "Chatbot Builder",
+    agentImage:
+      "https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
+    avatarSrc: "https://example.com/avatar5.jpg",
     description:
       "Create intelligent chatbots for customer service and engagement.",
     runs: 55000,
@@ -89,6 +108,9 @@ const mockTopAgents = [
   },
   {
     agentName: "Predictive Analytics Tool",
+    agentImage:
+      "https://upload.wikimedia.org/wikipedia/commons/c/c5/Big_buck_bunny_poster_big.jpg",
+    avatarSrc: "https://example.com/avatar6.jpg",
     description:
       "Forecast future trends and outcomes based on historical data.",
     runs: 40000,
@@ -96,6 +118,9 @@ const mockTopAgents = [
   },
   {
     agentName: "Text-to-Speech Converter",
+    agentImage:
+      "https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
+    avatarSrc: "https://example.com/avatar7.jpg",
     description:
       "Convert written text into natural-sounding speech in multiple languages.",
     runs: 35000,
@@ -103,6 +128,9 @@ const mockTopAgents = [
   },
   {
     agentName: "Code Generator AI",
+    agentImage:
+      "https://upload.wikimedia.org/wikipedia/commons/c/c5/Big_buck_bunny_poster_big.jpg",
+    avatarSrc: "https://example.com/avatar8.jpg",
     description:
       "Automatically generate code snippets and boilerplate for various programming languages.",
     runs: 70000,
@@ -110,6 +138,9 @@ const mockTopAgents = [
   },
   {
     agentName: "Virtual Assistant Creator",
+    agentImage:
+      "https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
+    avatarSrc: "https://example.com/avatar9.jpg",
     description:
       "Build customized virtual assistants for various business needs and personal use.",
     runs: 65000,
@@ -120,36 +151,48 @@ const mockTopAgents = [
 const mockFeaturedCreators = [
   {
     creatorName: "AI Labs",
+    creatorImage:
+      "https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
     bio: "Pioneering AI solutions for everyday problems",
     agentsUploaded: 25,
     avatarSrc: "https://example.com/ailabs-avatar.jpg",
   },
   {
     creatorName: "WriteRight Inc.",
+    creatorImage:
+      "https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
     bio: "Empowering content creators with AI-driven tools",
     agentsUploaded: 18,
     avatarSrc: "https://example.com/writeright-avatar.jpg",
   },
   {
     creatorName: "DataMasters",
+    creatorImage:
+      "https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
     bio: "Transforming data into actionable insights",
     agentsUploaded: 30,
     avatarSrc: "https://example.com/datamasters-avatar.jpg",
   },
   {
     creatorName: "AInovators",
+    creatorImage:
+      "https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
     bio: "Pushing the boundaries of artificial intelligence",
     agentsUploaded: 22,
     avatarSrc: "https://example.com/ainovators-avatar.jpg",
   },
   {
     creatorName: "CodeCrafters",
+    creatorImage:
+      "https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
     bio: "Building intelligent coding assistants for developers",
     agentsUploaded: 28,
     avatarSrc: "https://example.com/codecrafters-avatar.jpg",
   },
   {
     creatorName: "EcoTech Solutions",
+    creatorImage:
+      "https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
     bio: "Developing AI-powered tools for environmental sustainability",
     agentsUploaded: 20,
     avatarSrc: "https://example.com/ecotech-avatar.jpg",

autogpt_platform/frontend/src/components/agptui/marketplace/home/Page.tsx

@@ -12,6 +12,7 @@ interface PageProps {
   activeLink: string;
   featuredAgents: {
     agentName: string;
+    agentImage: string;
     creatorName: string;
     description: string;
     runs: number;
@@ -19,12 +20,15 @@ interface PageProps {
   }[];
   topAgents: {
     agentName: string;
+    agentImage: string;
+    avatarSrc: string;
     description: string;
     runs: number;
     rating: number;
   }[];
   featuredCreators: {
     creatorName: string;
+    creatorImage: string;
     bio: string;
     agentsUploaded: number;
     avatarSrc: string;
@@ -65,14 +69,14 @@ export const Page: React.FC<PageProps> = ({
   };
 
   return (
-    <div className="mx-auto flex w-screen max-w-[1360px] flex-col items-center">
-      <Navbar
+    <div className="mx-auto w-screen max-w-[1360px]">
+      {/* <Navbar
         userName={userName}
         links={navLinks}
         activeLink={activeLink}
         onProfileClick={handleProfileClick}
-      />
-      <main className="mt-8 flex max-w-[1360px] flex-col items-center pb-32">
+      /> */}
+      <main className="px-4">
         <HeroSection
           onSearch={handleSearch}
           onFilterChange={handleFilterChange}

autogpt_platform/frontend/src/components/agptui/marketplace/home/TopAgentsSection.tsx

@@ -52,7 +52,7 @@ export const TopAgentsSection: React.FC<TopAgentsSectionProps> = ({
             ))}
           </CarouselContent>
         </Carousel>
-        <div className="hidden w-full grid-cols-1 gap-3 md:grid md:grid-cols-2 lg:grid-cols-3">
+        <div className="hidden grid-cols-1 place-items-center gap-3 md:grid md:grid-cols-2 lg:grid-cols-3">
           {topAgents.map((agent, index) => (
             <StoreCard
               key={index}