update the main layout

skillswap/src/App.jsx

 import Header from '@/components/header';
+import Footer from './components/footer';
+
+import { Outlet } from 'react-router-dom';
 
 export default function App() {
   return (
-    <div>
+    <>
       <Header />
-    </div>
+      <main>
+        <Outlet />
+      </main>
+      <Footer />
+    </>
   );
 }

skillswap/src/components/footer.jsx

+export default function Footer() {
+  return <div>Footer</div>;
+}

skillswap/src/main.jsx

@@ -13,7 +13,7 @@ const router = createBrowserRouter([
   {
     path: '/',
     element: <App />,
-  },
+    children: [
       {
         path: '/login',
         element: <LoginPage />,
@@ -22,6 +22,8 @@ const router = createBrowserRouter([
         path: '/register',
         element: <RegisterPage />,
       },
+    ],
+  },
 ]);
 
 createRoot(document.getElementById('root')).render(