feat: add prerendering support and improve component imports

- Introduced a new PrerenderHome component for development testing.
- Updated App.js to conditionally render the PrerenderHome based on the route.
- Refactored several components to use ES6 import/export syntax for consistency.
- Enhanced AppContent to manage dynamic theming and added a development-only FAB for prerender testing.
- Minor adjustments to props in PrerenderCategory for clarity.

src/App.js

@@ -1,4 +1,5 @@
 import React, { useState, useEffect, lazy, Suspense } from "react";
+import { createTheme } from "@mui/material/styles";
 import {
   Routes,
   Route,
@@ -14,6 +15,7 @@ import Fab from "@mui/material/Fab";
 import Tooltip from "@mui/material/Tooltip";
 import SmartToyIcon from "@mui/icons-material/SmartToy";
 import PaletteIcon from "@mui/icons-material/Palette";
+import ScienceIcon from "@mui/icons-material/Science";
 
 import { CarouselProvider } from "./contexts/CarouselContext.js";
 import config from "./config.js";
@@ -60,11 +62,13 @@ const ThcTestPage = lazy(() => import(/* webpackChunkName: "thc-test" */ "./page
 // Lazy load payment success page
 const PaymentSuccess = lazy(() => import(/* webpackChunkName: "payment" */ "./components/PaymentSuccess.js"));
 
+// Lazy load prerender component (development testing only)
+const PrerenderHome = lazy(() => import(/* webpackChunkName: "prerender-home" */ "./PrerenderHome.js"));
+
 // Import theme from separate file to reduce main bundle size
 import defaultTheme from "./theme.js";
 // Lazy load theme customizer for development only
 const ThemeCustomizerDialog = lazy(() => import(/* webpackChunkName: "theme-customizer" */ "./components/ThemeCustomizerDialog.js"));
-import { createTheme } from "@mui/material/styles";
 
 const deleteMessages = () => {
   console.log("Deleting messages");
@@ -72,13 +76,16 @@ const deleteMessages = () => {
 };
 
 
-const AppContent = ({ currentTheme, onThemeChange }) => {
+const AppContent = ({ currentTheme, dynamicTheme, onThemeChange }) => {
   // State to manage chat visibility
   const [isChatOpen, setChatOpen] = useState(false);
   const [authVersion, setAuthVersion] = useState(0);
   // @note Theme customizer state for development mode
   const [isThemeCustomizerOpen, setThemeCustomizerOpen] = useState(false);
 
+  // Remove duplicate theme state since it's passed as prop
+  // const [dynamicTheme, setDynamicTheme] = useState(createTheme(defaultTheme));
+
   // Get current location
   const location = useLocation();
   const navigate = useNavigate();
@@ -138,6 +145,35 @@ const AppContent = ({ currentTheme, onThemeChange }) => {
   // Check if we're in development mode
   const isDevelopment = process.env.NODE_ENV === "development";
 
+  // Check if current route is a prerender test route
+  const isPrerenderTestRoute = isDevelopment && location.pathname === "/prerenderTest/home";
+
+  // If it's a prerender test route, render it standalone without app layout
+  if (isPrerenderTestRoute) {
+    return (
+      <LanguageProvider i18n={i18n}>
+        <ThemeProvider theme={dynamicTheme}>
+          <CssBaseline />
+          <Suspense fallback={
+            <Box
+              sx={{
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+                minHeight: "100vh",
+              }}
+            >
+              <CircularProgress color="primary" />
+            </Box>
+          }>
+            <PrerenderHome />
+          </Suspense>
+        </ThemeProvider>
+      </LanguageProvider>
+    );
+  }
+
+  // Regular app layout for all other routes
   return (
     <Box
       sx={{
@@ -208,10 +244,10 @@ const AppContent = ({ currentTheme, onThemeChange }) => {
 
               {/* Admin page */}
               <Route path="/admin" element={<AdminPage/>} />
-              
+
               {/* Admin Users page */}
               <Route path="/admin/users" element={<UsersPage/>} />
-              
+
               {/* Admin Server Logs page */}
               <Route path="/admin/logs" element={<ServerLogsPage/>} />
 
@@ -312,6 +348,25 @@ const AppContent = ({ currentTheme, onThemeChange }) => {
         </Tooltip>
       )}
 
+      {/* Development-only Prerender Test FAB */}
+      {isDevelopment && (
+        <Tooltip title="Test Prerender Home" placement="left">
+          <Fab
+            color="warning"
+            aria-label="prerender test"
+            size="small"
+            sx={{
+              position: "fixed",
+              bottom: 31,
+              right: 75,
+            }}
+            onClick={() => navigate('/prerenderTest/home')}
+          >
+            <ScienceIcon sx={{ fontSize: "1.2rem" }} />
+          </Fab>
+        </Tooltip>
+      )}
+
       {/* Development-only Theme Customizer Dialog */}
       {isDevelopment && isThemeCustomizerOpen && (
         <Suspense fallback={
@@ -361,6 +416,7 @@ const App = () => {
         <CssBaseline />
           <AppContent
             currentTheme={currentTheme}
+            dynamicTheme={dynamicTheme}
             onThemeChange={handleThemeChange}
           />
       </ThemeProvider>