restructure frontend and add network settings

frontend/src/appRouter.tsx

@@ -0,0 +1,35 @@
+// src/AppRouter.tsx
+import { Navigate, Route, Routes } from 'react-router-dom';
+import App from './App'; // your layout component (has <Outlet />)
+import Bridges from './pages/Bridges';
+import Home from './pages/Home';
+import { PATHS } from './routes';
+
+export default function AppRouter() {
+  return (
+    <Routes>
+      {/* App is the top-level layout; Outlet renders the active child route */}
+      <Route path={PATHS.ROOT} element={<App />}>
+        {/* When the user hits '/', redirect to '/home' */}
+        <Route index element={<Navigate to={PATHS.HOME} replace />} />
+
+        {/* Child routes - these render inside App's <Outlet /> */}
+        <Route path={PATHS.HOME.slice(1)} element={<Home />} />
+        <Route path={PATHS.NETWORK.slice(1)} element={<Bridges />} />
+
+        {/* Fallback (renders inside layout too) */}
+        <Route path="*" element={<NotFound />} />
+      </Route>
+    </Routes>
+  );
+}
+
+/** simple 404 rendered inside the layout */
+function NotFound() {
+  return (
+    <div style={{ padding: 16 }}>
+      <h2>404 – Not Found</h2>
+      <p>The requested page does not exist.</p>
+    </div>
+  );
+}