fix(frontend): better UI for Onboarding (#2477)

# Description

Please include a summary of the changes and the related issue. Please
also include relevant motivation and context.

## Checklist before requesting a review

Please delete options that are not relevant.

- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my code
- [ ] I have commented hard-to-understand areas
- [ ] I have ideally added tests that prove my fix is effective or that
my feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged

## Screenshots (if appropriate):

frontend/app/search/page.module.scss

@@ -82,10 +82,26 @@
   top: 0;
   left: 0;
 
+  .main_message_wrapper {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+
+    .main_message {
+      display: flex;
+      flex-direction: column;
+
+      .bolder {
+        font-weight: bold;
+      }
+    }
+  }
+
   .first_brain_button {
     position: absolute;
     right: Spacings.$spacing07;
-    top: Spacings.$spacing04;
+    top: Spacings.$spacing03;
     display: flex;
     gap: Spacings.$spacing05;
   }

frontend/app/search/page.tsx

@@ -82,27 +82,37 @@ const Search = (): JSX.Element => {
         <AddBrainModal />
         <OnboardingModal />
       </div>
-      {!isBrainCreationModalOpened &&
+      {(!isBrainCreationModalOpened &&
         !userIdentityData?.onboarded &&
-        !!isUserDataFetched && (
+        !!isUserDataFetched) || (
-          <div className={styles.onboarding_overlay}>
+        <div className={styles.onboarding_overlay}>
-            <div className={styles.first_brain_button}>
+          <div className={styles.main_message_wrapper}>
-              <MessageInfoBox type="tutorial">
+            <MessageInfoBox type="tutorial">
+              <div className={styles.main_message}>
+                <span>Welcome {userIdentityData?.username}!</span>
                 <span>
-                  Press the following button to create your first brain
+                  We will guide you through your quivr adventure and the
+                  creation of your first brain.
                 </span>
-              </MessageInfoBox>
+                <span className={styles.bolder}>
-              <QuivrButton
+                  First, Press the Create Brain button on the top right corner
-                iconName="brain"
+                  to create your first brain.
-                label="Create Brain"
+                </span>
-                color="primary"
+              </div>
-                onClick={() => {
+            </MessageInfoBox>
-                  setIsBrainCreationModalOpened(true);
-                }}
-              />
-            </div>
           </div>
-        )}
+          <div className={styles.first_brain_button}>
+            <QuivrButton
+              iconName="brain"
+              label="Create Brain"
+              color="primary"
+              onClick={() => {
+                setIsBrainCreationModalOpened(true);
+              }}
+            />
+          </div>
+        </div>
+      )}
     </>
   );
 };