Add Knights Exchange Puzzle

Make the Knights Exchange Puzzle a standalone interactive and add it to the puzzles theme.

src/App.tsx

@@ -28,6 +28,7 @@ import GameOfSimPage from "./pages/GameOfSimPage";
 import TernarySearchTrickPage from "./pages/TernarySearchTrickPage";
 import TernarySearchTrickGreenScreen from "./pages/TernarySearchTrickGreenScreen";
 import NorthcottsGamePage from "./pages/NorthcottsGamePage";
+import KnightsPuzzlePage from "./pages/KnightsPuzzlePage";
 import Foundations from "./pages/theme-pages/discrete-math/Foundations";
 import Proofs from "./pages/theme-pages/discrete-math/Proofs";
 import Counting from "./pages/theme-pages/discrete-math/Counting";
@@ -82,6 +83,7 @@ const App = () => (
           <Route path="/ternary-search-trick" element={<TernarySearchTrickPage />} />
           <Route path="/ternary-search-trick/:mode" element={<TernarySearchTrickGreenScreen />} />
           <Route path="/northcotts-game" element={<NorthcottsGamePage />} />
+          <Route path="/knights-puzzle" element={<KnightsPuzzlePage />} />
           
           {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
           <Route path="*" element={<NotFound />} />

src/pages/KnightsPuzzlePage.tsx

@@ -0,0 +1,12 @@
+import Layout from "@/components/Layout";
+import KnightsPuzzle from "@/components/KnightsPuzzle";
+
+const KnightsPuzzlePage = () => {
+  return (
+    <Layout>
+      <KnightsPuzzle showSocialShare={true} />
+    </Layout>
+  );
+};
+
+export default KnightsPuzzlePage;

src/pages/theme-pages/Puzzles.tsx

@@ -1,8 +1,23 @@
 import Layout from "@/components/Layout";
-import KnightsPuzzle from "@/components/KnightsPuzzle";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import InteractiveCard from "@/components/InteractiveCard";
+import { useNavigate } from "react-router-dom";
 
 const Puzzles = () => {
+  const navigate = useNavigate();
+  
+  const puzzles = [
+    {
+      id: "knights-puzzle",
+      title: "Knights Exchange Puzzle",
+      description: "Can the black and white knights swap places using legal chess moves? A classic puzzle on a 3×3 board.",
+      path: "/knights-puzzle",
+      tags: ["Chess", "Logic", "Classic"],
+      difficulty: "Intermediate" as const,
+      duration: "5-15 min",
+      participants: "1 player"
+    }
+  ];
+
   return (
     <Layout>
       <div className="py-12 px-4">
@@ -14,8 +29,19 @@ const Puzzles = () => {
             </p>
           </div>
           
-          <div className="space-y-8">
-            <KnightsPuzzle showSocialShare={true} />
+          <div className="grid lg:grid-cols-3 md:grid-cols-2 gap-6">
+            {puzzles.map((puzzle) => (
+              <InteractiveCard
+                key={puzzle.id}
+                title={puzzle.title}
+                description={puzzle.description}
+                tags={puzzle.tags}
+                difficulty={puzzle.difficulty}
+                duration={puzzle.duration}
+                participants={puzzle.participants}
+                onClick={() => navigate(puzzle.path)}
+              />
+            ))}
           </div>
         </div>
       </div>