refactor(App): update Box component to use 'main' role for improved semantics

- Changed Box component in App.js and PrerenderAppContent.js to use 'main' as the component role, enhancing accessibility and semantic structure of the application.

src/App.js

@@ -228,7 +228,7 @@ const AppContent = ({ currentTheme, dynamicTheme, onThemeChange }) => {
       <TitleUpdater />
       <ScrollToTop />
       <Header active categoryId={categoryId} key={authVersion} />
-      <Box sx={{ flexGrow: 1 }}>
+      <Box component="main" sx={{ flexGrow: 1 }}>
         <Suspense fallback={
           // Use prerender fallback if available, otherwise show loading spinner
           typeof window !== "undefined" && window.__PRERENDER_FALLBACK__ ? (

src/PrerenderAppContent.js

@@ -44,7 +44,7 @@ const PrerenderAppContent = (socket) => (
         <CategoryList categoryId={209} activeCategoryId={null} socket={socket}/>
       </AppBar>
  
-      <Box sx={{ flexGrow: 1 }}>
+      <Box component="main" sx={{ flexGrow: 1 }}>
           <CarouselProvider>
             <Routes>
               <Route path="/" element={<MainPageLayout />} />