Add direct interactive routes

Implement direct routes for interactives (e.g., `/school-connect/binary-number-game`).

src/App.tsx

@@ -14,6 +14,7 @@ import AdvancedAlgorithms from "./pages/theme-pages/AdvancedAlgorithms";
 import DataStructures from "./pages/theme-pages/DataStructures";
 import Games from "./pages/theme-pages/Games";
 import CardsMath from "./pages/theme-pages/CardsMath";
+import BinaryNumberGamePage from "./pages/BinaryNumberGamePage";
 import NotFound from "./pages/NotFound";
 
 const queryClient = new QueryClient();
@@ -39,6 +40,9 @@ const App = () => (
           <Route path="/themes/games" element={<Games />} />
           <Route path="/themes/cards-math" element={<CardsMath />} />
           
+          {/* Direct interactive routes */}
+          <Route path="/binary-number-game" element={<BinaryNumberGamePage />} />
+          
           {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
           <Route path="*" element={<NotFound />} />
         </Routes>

src/pages/BinaryNumberGamePage.tsx

@@ -0,0 +1,29 @@
+import BinaryNumberGame from '@/components/BinaryNumberGame';
+import Navigation from '@/components/Navigation';
+import { Link } from 'react-router-dom';
+
+const BinaryNumberGamePage = () => {
+  return (
+    <div className="min-h-screen bg-background">
+      <Navigation />
+      <div className="container mx-auto px-4 py-8">
+        <div className="space-y-6">
+          <div className="flex items-center gap-4">
+            <Link 
+              to="/themes/school-connect"
+              className="text-primary hover:text-primary/80 font-medium"
+            >
+              ← Back to School Connect
+            </Link>
+            <h1 className="text-2xl font-bold text-foreground">Binary Number Representation</h1>
+          </div>
+          <div className="bg-background border rounded-lg p-6">
+            <BinaryNumberGame />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default BinaryNumberGamePage;