Fix styling on home page

autogpt_platform/frontend/src/app/[lang]/store/page.tsx

@@ -113,8 +113,7 @@ export default async function Page({
         />
         <Separator />
         <BecomeACreator
-          title="Want to contribute?"
-          heading="We're always looking for more Creators!"
+          title="Become a Creator"
           description="Join our ever-growing community of hackers and tinkerers"
           buttonText="Become a Creator"
         />

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

@@ -26,8 +26,8 @@ export const BecomeACreator: React.FC<BecomeACreatorProps> = ({
       <div className="absolute left-0 top-0 h-px w-full bg-gray-200" />
 
       {/* Title */}
-      <div className="absolute left-4 top-[26px] text-base font-normal leading-7 text-neutral-800 md:left-6 md:text-lg lg:left-8">
-        {title.toLowerCase()}
+      <div className="absolute left-4 top-[26px] text-base font-semibold leading-7 font-['Poppins'] text-neutral-800 md:left-6 md:text-lg lg:left-8">
+        {title}
       </div>
 
       {/* Content Container */}

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

@@ -41,12 +41,10 @@ export const SearchBar: React.FC<SearchBarProps> = ({
   return (
     <form
       onSubmit={handleSubmit}
-      className={width}
       data-testid="store-search-bar"
+      className={`${width} h-12 px-4 py-2 md:h-[4.5rem] md:px-6 md:py-1 ${backgroundColor} flex items-center justify-center gap-2 rounded-full md:gap-5`}
+
     >
-      <div
-        className={`h-12 px-4 py-2 md:h-[4.5rem] md:px-6 md:py-1 ${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
           type="text"
@@ -56,7 +54,6 @@ export const SearchBar: React.FC<SearchBarProps> = ({
           className={`flex-grow border-none bg-transparent ${textColor} font-['Geist'] text-lg font-normal leading-[2.25rem] tracking-tight md:text-xl placeholder:${placeholderColor} focus:outline-none`}
           data-testid="store-search-input"
         />
-      </div>
     </form>
   );
 };

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

@@ -34,7 +34,7 @@ export const HeroSection: React.FC = () => {
         <div className="mb:text-2xl mb-6 text-center font-['Geist'] text-xl font-normal leading-loose text-neutral-700 md:mb-12">
           Bringing you AI agents designed by thinkers from around the world
         </div>
-        <div className="mb-4 sm:mb-5 md:mb-6">
+        <div className="mb-4 sm:mb-5 md:mb-6 flex justify-center">
           <SearchBar />
         </div>
         <div>