feat: apply figma responsive home design

src/App.tsx

@@ -1,3 +1,4 @@
+import { lazy, Suspense } from "react";
 import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";
 import { I18nProvider } from "./i18n";
 import { PublicLayout } from "./layouts/PublicLayout";
@@ -7,12 +8,17 @@ import { CategoryPage } from "./pages/CategoryPage";
 import { SearchPage } from "./pages/SearchPage";
 import { FavoritesPage } from "./pages/FavoritesPage";
 import { ResourceDetail } from "./pages/ResourceDetail";
-import { WalletPage } from "./pages/WalletPage";
 import { AboutPage } from "./pages/AboutPage";
 import { adminUiPrefix } from "./adminPaths";
 import { AdminRouteTree } from "./adminRouteTree";
 import { AdminRouterModeProvider } from "./adminRouterMode";
 
+const WalletPage = lazy(() =>
+  import("./pages/WalletPage").then((module) => ({
+    default: module.WalletPage,
+  })),
+);
+
 const adminEnabled = import.meta.env.VITE_DISABLE_ADMIN !== "true";
 
 export default function App() {
@@ -28,7 +34,14 @@ export default function App() {
               <Route path="/search" element={<SearchPage />} />
               <Route path="/favorites" element={<FavoritesPage />} />
               <Route path="/resource/:id" element={<ResourceDetail />} />
-              <Route path="/wallet" element={<WalletPage />} />
+              <Route
+                path="/wallet"
+                element={
+                  <Suspense fallback={null}>
+                    <WalletPage />
+                  </Suspense>
+                }
+              />
               <Route path="/about" element={<AboutPage />} />
             </Route>