From 14a244160a6f6208efdb40cb4b892c3c780a8f24 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Mon, 21 Jul 2025 09:18:40 +0000
Subject: [PATCH] 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 | 18 ++++++++++++------
 src/pages/KnightsPuzzlePage.tsx  |  5 ++---
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/components/KnightsPuzzle.tsx b/src/components/KnightsPuzzle.tsx
index 8397d22..76e1050 100644
--- a/src/components/KnightsPuzzle.tsx
+++ b/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">
-          <h1 className="text-2xl font-bold">Knights Exchange Puzzle</h1>
-          <Badge variant="outline">Classic</Badge>
-        </div>
+      {/* Green: Title and Description - Centered */}
+      <div className="space-y-2 text-center">
+        <h1 className="text-2xl font-bold">Knights Exchange Puzzle</h1>
         <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>
   );
 };
diff --git a/src/pages/KnightsPuzzlePage.tsx b/src/pages/KnightsPuzzlePage.tsx
index ed99cd4..01914bc 100644
--- a/src/pages/KnightsPuzzlePage.tsx
+++ b/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>
   );
 };