Add Knights Exchange Puzzle

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

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>