Implement user onboarding

[ManhDao0801]

Overview

Closes #97

[WillieCubed]

@ManhDao0801 Can you go ahead and update the PR text using the instructions in the template?

Edit: nevermind, we'll take care of this

[minfeishen2024]

PR loaded on browser, but returned the following error in console:

Warning: Each child in a list should have a unique "key" prop.
Check the top-level render call using <div>. See https://reactjs.org/link/warning-keys for more information.
    at div
    at Home (webpack-internal:///(ssr)/./src/app/page.tsx:20:90)
    at StaticGenerationSearchParamsBailoutProvider (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/static-generation-searchparams-bailout-provider.js:15:11)
    at Lazy
    at InnerLayoutRouter (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:239:11)
    at RedirectErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:71:9)
    at RedirectBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:79:11)
    at NotFoundErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/not-found-boundary.js:54:9)
    at NotFoundBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/not-found-boundary.js:62:11)
    at LoadingBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:313:11)
    at ErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/error-boundary.js:128:11)
    at InnerScrollAndFocusHandler (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:151:9)
    at ScrollAndFocusHandler (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:226:11)
    at RenderFromTemplateContext (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/render-from-template-context.js:15:44)
    at Lazy
    at OuterLayoutRouter (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:322:11)
    at Lazy
    at div
    at div
    at body
    at html
    at RedirectErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:71:9)
    at RedirectBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:79:11)
    at ReactDevOverlay (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:66:9)
    at HotReload (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:296:11)
    at Router (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/app-router.js:155:11)
    at ErrorBoundaryHandler (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/error-boundary.js:99:9)
    at ErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/error-boundary.js:128:11)
    at AppRouter (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/app-router.js:421:13)
    at Lazy
    at Lazy
    at C:\Desktop\Connie-RTC\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:381577
    at C:\Desktop\Connie-RTC\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:381577
    at ServerInsertedHTMLProvider (C:\Desktop\Connie-RTC\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:39:17605)
    
The browser also returned "chunk load error", which disappeared after refresh

[WillieCubed]

@minfeishen2024 It appears that there is a list being rendered that doesn't have key props for its sub-elements. We'll need to find the specific line and update it accordingly.