feat(nav): implement tab-based navigation system

src/App.tsx

@@ -1,28 +1,67 @@
-import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
-import { Login } from "./pages/login";
-import { StudentDashboard } from "./pages/StudentDashboard";
+import {
+  createBrowserRouter,
+  Navigate,
+  RouterProvider,
+} from "react-router-dom";
+import { Login } from "./pages/auth/Login";
+import { Home } from "./pages/student/Home";
+import { Practice } from "./pages/student/Practice";
+import { Rewards } from "./pages/student/Rewards";
+import { Profile } from "./pages/student/Profile";
+import { Progress } from "./pages/student/Progress";
 import { ProtectedRoute } from "./components/ProtectedRoute";
+import { StudentLayout } from "./pages/student/StudentLayout";
 
 function App() {
-  return (
-    <BrowserRouter>
-      <Routes>
-        <Route path="/login" element={<Login />} />
+  const router = createBrowserRouter([
+    {
+      path: "/login",
+      element: <Login />,
+    },
+    {
+      path: "/student",
+      element: <ProtectedRoute />,
+      children: [
+        {
+          element: <StudentLayout />,
+          children: [
+            {
+              path: "home",
+              element: <Home />,
+            },
+            {
+              path: "practice",
+              element: <Practice />,
+            },
+            {
+              path: "progress",
+              element: <Progress />,
+            },
+            {
+              path: "rewards",
+              element: <Rewards />,
+            },
+            {
+              path: "profile",
+              element: <Profile />,
+            },
+            // more student subroutes here
+          ],
+        },
+        // Add more subroutes here as needed
+      ],
+    },
+    {
+      path: "/",
+      element: <Navigate to="/student" replace />,
+    },
+    {
+      path: "*",
+      element: <Navigate to="/student" replace />,
+    },
+  ]);
 
-        {/* Protected Routes */}
-        <Route path="/student" element={<ProtectedRoute />}>
-          <Route index element={<StudentDashboard />} />
-          {/* Add more subroutes here as needed */}
-        </Route>
-
-        {/* Redirect root to student */}
-        <Route path="/" element={<Navigate to="/student" replace />} />
-
-        {/* Catch all - redirect to student */}
-        <Route path="*" element={<Navigate to="/student" replace />} />
-      </Routes>
-    </BrowserRouter>
-  );
+  return <RouterProvider router={router} />;
 }
 
 export default App;

src/index.css

@@ -1,4 +1,7 @@
 @import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
 
 /* ================================
    Satoshi Font Family
@@ -159,3 +162,122 @@
     font-style: italic;
   }
 }
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

src/pages/StudentDashboard.tsx

@@ -1,62 +0,0 @@
-import { useNavigate } from "react-router-dom";
-import { useAuthStore } from "../stores/authStore";
-
-export const StudentDashboard = () => {
-  const user = useAuthStore((state) => state.user);
-  const logout = useAuthStore((state) => state.logout);
-  const navigate = useNavigate();
-
-  const handleLogout = () => {
-    logout();
-    navigate("/login");
-  };
-
-  return (
-    <div className="min-h-screen bg-gray-50">
-      <nav className="bg-white shadow-sm">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="flex justify-between items-center h-16">
-            <h1 className="text-xl font-semibold text-gray-800">
-              Student Portal
-            </h1>
-            <div className="flex items-center gap-4">
-              {user?.avatar_url && (
-                <img
-                  src={user.avatar_url}
-                  alt={user.name}
-                  className="w-8 h-8 rounded-full"
-                />
-              )}
-              <span className="text-sm text-gray-600">
-                Welcome, {user?.name}!
-              </span>
-              <button
-                onClick={handleLogout}
-                className="bg-red-600 text-white px-4 py-2 rounded-lg hover:bg-red-700 transition text-sm font-medium"
-              >
-                Logout
-              </button>
-            </div>
-          </div>
-        </div>
-      </nav>
-
-      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-        <div className="bg-white rounded-lg shadow p-6">
-          <h2 className="text-2xl font-bold text-gray-800 mb-4">Dashboard</h2>
-          <div className="space-y-2 text-gray-600">
-            <p>Email: {user?.email}</p>
-            <p>Role: {user?.role}</p>
-            <p>Status: {user?.status}</p>
-            <p>
-              Member since:{" "}
-              {user?.joined_at
-                ? new Date(user.joined_at).toLocaleDateString()
-                : "N/A"}
-            </p>
-          </div>
-        </div>
-      </main>
-    </div>
-  );
-};

src/pages/auth/Login.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from "react";
 import type { FormEvent } from "react";
 import { useNavigate, useLocation } from "react-router-dom";
-import { useAuthStore } from "../stores/authStore";
+import { useAuthStore } from "../../stores/authStore";
 
 interface LocationState {
   from?: {

src/pages/student/Home.tsx

@@ -0,0 +1,29 @@
+import { useNavigate } from "react-router-dom";
+import { useAuthStore } from "../../stores/authStore";
+
+export const Home = () => {
+  const user = useAuthStore((state) => state.user);
+  // const logout = useAuthStore((state) => state.logout);
+  // const navigate = useNavigate();
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <div className="bg-white rounded-lg shadow p-6">
+          <h2 className="text-2xl font-bold text-gray-800 mb-4">Dashboard</h2>
+          <div className="space-y-2 text-gray-600">
+            <p>Email: {user?.email}</p>
+            <p>Role: {user?.role}</p>
+            <p>Status: {user?.status}</p>
+            <p>
+              Member since:{" "}
+              {user?.joined_at
+                ? new Date(user.joined_at).toLocaleDateString()
+                : "N/A"}
+            </p>
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+};

src/pages/student/Practice.tsx

@@ -0,0 +1,26 @@
+import { useAuthStore } from "../../stores/authStore";
+
+export const Practice = () => {
+  const user = useAuthStore((state) => state.user);
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <div className="bg-white rounded-lg shadow p-6">
+          <h2 className="text-2xl font-bold text-gray-800 mb-4">Practice</h2>
+          <div className="space-y-2 text-gray-600">
+            <p>Email: {user?.email}</p>
+            <p>Role: {user?.role}</p>
+            <p>Status: {user?.status}</p>
+            <p>
+              Member since:{" "}
+              {user?.joined_at
+                ? new Date(user.joined_at).toLocaleDateString()
+                : "N/A"}
+            </p>
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+};

src/pages/student/Profile.tsx

@@ -0,0 +1,26 @@
+import { useAuthStore } from "../../stores/authStore";
+
+export const Profile = () => {
+  const user = useAuthStore((state) => state.user);
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <div className="bg-white rounded-lg shadow p-6">
+          <h2 className="text-2xl font-bold text-gray-800 mb-4">Profile</h2>
+          <div className="space-y-2 text-gray-600">
+            <p>Email: {user?.email}</p>
+            <p>Role: {user?.role}</p>
+            <p>Status: {user?.status}</p>
+            <p>
+              Member since:{" "}
+              {user?.joined_at
+                ? new Date(user.joined_at).toLocaleDateString()
+                : "N/A"}
+            </p>
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+};

src/pages/student/Progress.tsx

@@ -0,0 +1,26 @@
+import { useAuthStore } from "../../stores/authStore";
+
+export const Progress = () => {
+  const user = useAuthStore((state) => state.user);
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <div className="bg-white rounded-lg shadow p-6">
+          <h2 className="text-2xl font-bold text-gray-800 mb-4">Progress</h2>
+          <div className="space-y-2 text-gray-600">
+            <p>Email: {user?.email}</p>
+            <p>Role: {user?.role}</p>
+            <p>Status: {user?.status}</p>
+            <p>
+              Member since:{" "}
+              {user?.joined_at
+                ? new Date(user.joined_at).toLocaleDateString()
+                : "N/A"}
+            </p>
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+};

src/pages/student/Rewards.tsx

@@ -0,0 +1,26 @@
+import { useAuthStore } from "../../stores/authStore";
+
+export const Rewards = () => {
+  const user = useAuthStore((state) => state.user);
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <div className="bg-white rounded-lg shadow p-6">
+          <h2 className="text-2xl font-bold text-gray-800 mb-4">Rewards</h2>
+          <div className="space-y-2 text-gray-600">
+            <p>Email: {user?.email}</p>
+            <p>Role: {user?.role}</p>
+            <p>Status: {user?.status}</p>
+            <p>
+              Member since:{" "}
+              {user?.joined_at
+                ? new Date(user.joined_at).toLocaleDateString()
+                : "N/A"}
+            </p>
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+};

src/pages/student/StudentLayout.tsx

@@ -0,0 +1,96 @@
+import { Outlet, NavLink, useNavigate } from "react-router-dom";
+import { Home, BookOpen, TrendingUp, Award, User, Menu } from "lucide-react";
+import { useAuthStore } from "../../stores/authStore";
+
+export function StudentLayout() {
+  // const user = useAuthStore((state) => state.user);
+  const logout = useAuthStore((state) => state.logout);
+  const navigate = useNavigate();
+
+  const handleLogout = () => {
+    logout();
+    navigate("/login");
+  };
+
+  const navItems = [
+    { to: "/student/home", icon: Home, label: "Home" },
+    { to: "/student/practice", icon: BookOpen, label: "Practice" },
+    { to: "/student/progress", icon: TrendingUp, label: "Progress" },
+    { to: "/student/rewards", icon: Award, label: "Rewards" },
+    { to: "/student/profile", icon: User, label: "Profile" },
+  ];
+
+  return (
+    <div className="flex flex-col min-h-screen bg-gray-50">
+      {/* Top Header */}
+      <header className="bg-white shadow-sm sticky top-0 z-10">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex justify-between items-center h-22">
+            <div className="flex items-center gap-3">
+              <img
+                src="../../src/assets/ed_logo.png"
+                alt="EdBridge logo"
+                className="h-10 w-auto object-contain"
+                draggable={false}
+              />
+            </div>
+            <button
+              onClick={handleLogout}
+              className="flex items-center gap-2 text-slate-600 hover:text-slate-700 transition px-3 py-2 rounded-lg hover:bg-red-50"
+            >
+              <Menu size={22} />
+              <span className="text-sm font-medium hidden sm:inline">
+                Logout
+              </span>
+            </button>
+          </div>
+        </div>
+      </header>
+
+      {/* Main Content */}
+      <main className="flex-1 pb-20 overflow-y-auto">
+        <Outlet />
+      </main>
+
+      {/* Bottom Tab Navigation */}
+      <nav className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 shadow-lg z-20">
+        <div className="max-w-7xl mx-auto px-2">
+          <div className="flex justify-around items-center">
+            {navItems.map((item) => (
+              <NavLink
+                key={item.to}
+                to={item.to}
+                className={({ isActive }) =>
+                  `flex flex-col items-center justify-center py-3 px-4 flex-1 transition-all duration-200 ${
+                    isActive
+                      ? "text-indigo-600"
+                      : "text-gray-500 hover:text-gray-700"
+                  }`
+                }
+              >
+                {({ isActive }) => (
+                  <>
+                    <item.icon
+                      size={24}
+                      className={`mb-1 transition-transform ${
+                        isActive ? "scale-110" : ""
+                      }`}
+                      strokeWidth={isActive ? 2.5 : 2}
+                    />
+                    <span
+                      className={`text-xs font-medium ${
+                        isActive ? "font-semibold" : ""
+                      }`}
+                    >
+                      {item.label}
+                    </span>
+                  </>
+                )}
+              </NavLink>
+            ))}
+          </div>
+        </div>
+      </nav>
+    </div>
+  );
+}