fix: bug homepage Improper button layout (#2088)

Co-authored-by: Akshat Nema <[email protected]>%0ACo-authored-by: akshatnema <[email protected]>

components/Hero.js

@@ -1,6 +1,5 @@
 import Button from './buttons/Button'
 import ArrowRight from './icons/ArrowRight'
-import OpenInStudioButton from './buttons/OpenInStudioButton'
 import Features from '../components/features'
 import DemoAnimation from './DemoAnimation'
 import AnnouncementHero from '../components/campaigns/AnnoucementHero'
@@ -32,13 +31,13 @@ export default function Hero({ className = '' }) {
             {t('main.body_pretext')}{" "}
             <strong>{t('main.body_boldtext')}</strong>{t('main.body_posttext')}
           </Heading>
-          <div className='flex flex-row items-center justify-center'>
-            <Button className="block md:inline-block" text={t('main.docs_btn')} href="/docs" icon={<ArrowRight className="-mb-1 h-5 w-5" />}
+          <div className='flex flex-col md:flex-row gap-2 items-center justify-center'>
+            <Button className="block w-full md:w-auto" text={t('main.docs_btn')} href="/docs" icon={<ArrowRight className="-mb-1 h-5 w-5" />}
               data-testid="Hero-Button" />
             {/* Wrap SearchButton with AlgoliaSearch component */}
             <AlgoliaSearch>
               <SearchButton
-                className="sm:flex items-center text-left space-x-3 px-4 py-3 ml-2 bg-white border-secondary-500 border text-secondary-500 hover:text-white shadow-md bg-secondary-100 hover:bg-secondary-500 transition-all duration-500 ease-in-out rounded-md"
+                className="flex items-center text-left w-full md:w-auto space-x-3 px-4 py-3 border-secondary-500 border text-secondary-500 hover:text-white shadow-md bg-secondary-100 hover:bg-secondary-500 transition-all duration-500 ease-in-out rounded-md"
               >
                 {({ actionKey }) => (
                   <>