fix: simplify Button component structure in SearcherBar for cleaner code

Author: ErwanDecoster

src/modules/SearcherBar.tsx

@@ -23,10 +23,7 @@ export function SearcherBar({ className }: { className?: string }) {
         </Button>
       </div>
 
-      <Button
-        variant="outline"
-        className="mx-auto mt-4 flex w-auto sm:hidden"
-      >
+      <Button variant="outline" className="mx-auto mt-4 flex w-auto sm:hidden">
         My activity
       </Button>
     </div>

src/routes/index.tsx

@@ -12,10 +12,10 @@ export const Route = createFileRoute('/')({
 
 function Index() {
   return (
-    <div className="mt-8 flex flex-col gap-20">
-      <div className="radial-bg before:bg-grey-800 border-secondary relative z-0 mx-auto h-80 w-full max-w-[1408px] overflow-hidden rounded-2xl border pt-20">
+    <div className="mt-8 flex flex-col gap-10 sm:gap-20">
+      <div className="radial-bg sm:before:bg-grey-800 border-secondary relative z-0 mx-auto w-full max-w-[1408px] overflow-hidden rounded-2xl pt-10 sm:h-80 sm:border sm:px-12 sm:pt-20">
         <SearcherBar />
-        <div className="absolute inset-0 -z-10 blur-2xl sm:blur-[100px] lg:blur-[150px]">
+        <div className="absolute inset-0 -z-10 hidden blur-2xl sm:block sm:blur-[100px] lg:blur-[150px]">
           <div className="absolute top-3/4 right-0 aspect-[23/30] w-1/2 rounded-full bg-orange-400/40" />
           <div className="absolute top-0 right-0 hidden aspect-square h-full translate-x-1/2 -translate-y-1/2 rounded-full bg-yellow-100/50 md:block" />
         </div>