Refactor Knights Puzzle layout

Remove header, footer, and "Classic" tag. Center the title and add a share section. Ensure unique URI.

src/components/KnightsPuzzle.tsx

@@ -4,6 +4,7 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/com
 import { Badge } from "@/components/ui/badge";
 import { RefreshCw, RotateCcw, ExternalLink } from "lucide-react";
 import { toast } from "sonner";
+import SocialShare from "@/components/SocialShare";
 
 type Piece = 'white' | 'black' | null;
 type Position = { row: number; col: number };
@@ -172,12 +173,9 @@ const KnightsPuzzle = ({ showSocialShare = false }: KnightsPuzzleProps) => {
 
   return (
     <div className="max-w-4xl mx-auto p-6 space-y-6">
-      {/* Green: Title and Description */}
-      <div className="space-y-2">
-        <div className="flex items-center gap-2">
+      {/* Green: Title and Description - Centered */}
+      <div className="space-y-2 text-center">
         <h1 className="text-2xl font-bold">Knights Exchange Puzzle</h1>
-          <Badge variant="outline">Classic</Badge>
-        </div>
         <p className="text-muted-foreground">
           Can the black and white knights swap places using legal chess moves? Move knights by clicking on them, then clicking on a valid destination.
         </p>
@@ -310,6 +308,14 @@ const KnightsPuzzle = ({ showSocialShare = false }: KnightsPuzzleProps) => {
           </a>
         </p>
       </div>
+
+      {/* Social Share Section */}
+      {showSocialShare && (
+        <SocialShare 
+          title="Knights Exchange Puzzle"
+          description="Can the black and white knights swap places using legal chess moves? Try this classic puzzle!"
+        />
+      )}
     </div>
   );
 };

src/pages/KnightsPuzzlePage.tsx

@@ -1,11 +1,10 @@
-import Layout from "@/components/Layout";
 import KnightsPuzzle from "@/components/KnightsPuzzle";
 
 const KnightsPuzzlePage = () => {
   return (
-    <Layout>
+    <div className="min-h-screen bg-background">
       <KnightsPuzzle showSocialShare={true} />
-    </Layout>
+    </div>
   );
 };