Feat/page routing

package.json

@@ -15,6 +15,7 @@
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "react-icons": "^5.5.0",
+    "react-router-dom": "^7.9.4",
     "tailwind-variants": "^3.1.1",
     "tailwindcss": "^4.1.14"
   },

src/App.jsx

@@ -1,11 +1,21 @@
-import './App.css';
+import { Outlet, useLocation } from 'react-router-dom';
+import Navbar from './components/Navbar';
+import Footer from './components/Footer';
 
 function App() {
+  const location = useLocation();
+  const { pathname } = location;
+  const hideNav = ['/login', '/signup', '/onboarding'].includes(pathname);
+  const showHomeNav = ['/'].includes(pathname);
+  const hideFooter = ['/login', '/signup', '/onboarding'].includes(pathname);
+
   return (
-    <div className="min-h-screen bg-emerald-100 flex items-center justify-center">
-      <h1 className="text-4xl font-bold text-lime-500">
-        Mint Chips - Tailwind works! 🎉
-      </h1>
+    <div>
+      {!hideNav && (showHomeNav ? <Navbar /> : <Navbar />)}
+      <main>
+        <Outlet />
+      </main>
+      {!hideFooter && <Footer />}
     </div>
   );
 }

src/components/Footer.jsx

@@ -0,0 +1,9 @@
+function Footer() {
+  return (
+    <div>
+      <footer>Footer</footer>
+    </div>
+  );
+}
+
+export default Footer;

src/components/Navbar.jsx

@@ -0,0 +1,9 @@
+function Navbar() {
+  return (
+    <div>
+      <nav>Nav bar</nav>
+    </div>
+  );
+}
+
+export default Navbar;

src/main.jsx

@@ -1,10 +1,38 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import './index.css';
-import App from './App.jsx';
+import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+import Home from './pages/Home';
+import Onboarding from './pages/Onboarding';
+import Achievements from './pages/Achievements';
+import Community from './pages/Community';
+import Dashboard from './pages/Dashboard';
+import Error from './pages/Error';
+import Login from './pages/Login';
+import Signup from './pages/Signup';
+import App from './App';
 
+const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <App />,
+    children: [
+      { index: true, element: <Home /> },
+      { path: 'dashboard', element: <Dashboard /> },
+      { path: 'community', element: <Community /> },
+      { path: 'signup', element: <Signup /> },
+      { path: 'login', element: <Login /> },
+      { path: 'onboarding', element: <Onboarding /> },
+      { path: 'achievements', element: <Achievements /> },
+    ],
+  },
+  {
+    path: '*',
+    element: <Error />,
+  },
+]);
 createRoot(document.getElementById('root')).render(
   <StrictMode>
-    <App />
+    <RouterProvider router={router} />
   </StrictMode>
 );

src/pages/Achievements.jsx

@@ -0,0 +1,9 @@
+function Achievements() {
+  return (
+    <div className="min-h-screen bg-emerald-100 flex items-center justify-center">
+      <h1 className="text-4xl font-bold text-lime-500">Achievements! 🎉</h1>
+    </div>
+  );
+}
+
+export default Achievements;

src/pages/Community.jsx

@@ -0,0 +1,9 @@
+function Community() {
+  return (
+    <div className="min-h-screen bg-emerald-100 flex items-center justify-center">
+      <h1 className="text-4xl font-bold text-lime-500">Community Page! 🎉</h1>
+    </div>
+  );
+}
+
+export default Community;

src/pages/Dashboard.jsx

@@ -0,0 +1,9 @@
+function Dashboard() {
+  return (
+    <div className="min-h-screen bg-emerald-100 flex items-center justify-center">
+      <h1 className="text-4xl font-bold text-lime-500">Dashboard Page! 🎉</h1>
+    </div>
+  );
+}
+
+export default Dashboard;

src/pages/Error.jsx

@@ -0,0 +1,11 @@
+import { Link } from 'react-router-dom';
+function Error() {
+  return (
+    <div className="min-h-screen bg-emerald-100 flex items-center justify-center">
+      <h1 className="text-4xl font-bold text-lime-500">Error Page! 🎉</h1>
+      <Link to={'/'}> Return to Home Page</Link>
+    </div>
+  );
+}
+
+export default Error;

src/pages/Home.jsx

@@ -0,0 +1,29 @@
+import { Link } from 'react-router-dom';
+
+function Home() {
+  return (
+    <div className="min-h-screen bg-emerald-100 flex items-center justify-center">
+      <h1 className="text-4xl font-bold text-lime-500">Home Page! 🎉</h1>
+      <Link to="/achievements" className="m-4">
+        Achievements{' '}
+      </Link>
+      <Link to="/community" className="m-4">
+        Community{' '}
+      </Link>
+      <Link to="/dashboard" className="m-4">
+        Dashboard{' '}
+      </Link>
+      <Link to="login" className="m-4">
+        Login{' '}
+      </Link>
+      <Link to="/onboarding" className="m-4">
+        Onboarding{' '}
+      </Link>
+      <Link to="/signup" className="m-4">
+        Sign up{' '}
+      </Link>
+    </div>
+  );
+}
+
+export default Home;

src/pages/Login.jsx

@@ -0,0 +1,9 @@
+function Login() {
+  return (
+    <div className="min-h-screen bg-emerald-100 flex items-center justify-center">
+      <h1 className="text-4xl font-bold text-lime-500">Login Page! 🎉</h1>
+    </div>
+  );
+}
+
+export default Login;

src/pages/Onboarding.jsx

@@ -0,0 +1,9 @@
+function Onboarding() {
+  return (
+    <div className="min-h-screen bg-emerald-100 flex items-center justify-center">
+      <h1 className="text-4xl font-bold text-lime-500">Onboarding Page! 🎉</h1>
+    </div>
+  );
+}
+
+export default Onboarding;

src/pages/Signup.jsx

@@ -0,0 +1,9 @@
+function Signup() {
+  return (
+    <div className="min-h-screen bg-emerald-100 flex items-center justify-center">
+      <h1 className="text-4xl font-bold text-lime-500">Sign up Page! 🎉</h1>
+    </div>
+  );
+}
+
+export default Signup;