feat: redesign homepage layout and fix invite links

- Homepage: Grid-Layout mit 3 Karten (Spiel erstellen, KI, Freunde/Beitreten)
  statt vertikalem Stack mit Dividers
- CreateGame: kompakteres Styling, auf Deutsch, in Primary-Card integriert
- Einladungslink: APP_URL statt hardcoded ches.su in GamePage und CopyLink
- JoinGame: URL-Parsing für beliebige Domains (nicht nur ches.su)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

client/src/app/page.tsx

@@ -6,51 +6,74 @@ import PublicGames from "@/components/home/PublicGames/PublicGames";
 import Link from "next/link";
 import { useSession } from "@/context/session";
 
-
 export default function Home() {
   const { user } = useSession();
+  const isLoggedIn = user?.id && typeof user.id === "number";
 
   return (
-    <div className="flex w-full flex-wrap items-start justify-center gap-8 px-4 py-10 lg:gap-16">
-      <PublicGames />
+    <div className="flex flex-col gap-8 w-full max-w-5xl px-4 py-8">
 
-      <div className="flex flex-col items-center gap-4">
+      {/* Hauptaktionen */}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
 
-        {/* Against AI */}
-        <div className="flex flex-col items-center">
-          <h2 className="mb-4 text-xl font-bold leading-tight">Gegen KI spielen</h2>
-          <Link href="/ai" className="btn btn-primary w-full max-w-xs">
-            ♟ Gegen Stockfish spielen
-          </Link>
-        </div>
-
-        <div className="divider divider-vertical">oder</div>
-
-        {/* Friends */}
-        {user?.id && typeof user.id === "number" && (
-          <>
-            <div className="flex flex-col items-center">
-              <h2 className="mb-4 text-xl font-bold leading-tight">Freunde</h2>
-              <Link href="/friends" className="btn btn-outline w-full max-w-xs">
-                👥 Freunde verwalten
-              </Link>
+        <div className="card bg-base-200 border-2 border-primary shadow-lg">
+          <div className="card-body gap-3">
+            <h2 className="card-title text-primary">♟ Spiel erstellen</h2>
+            <p className="text-sm opacity-70">Erstelle eine Partie und teile den Einladungslink mit Freunden</p>
+            <div className="mt-2">
+              <CreateGame />
             </div>
-            <div className="divider divider-vertical">oder</div>
-          </>
-        )}
-
-        <div className="flex flex-col items-center">
-          <h2 className="mb-4 text-xl font-bold leading-tight">Per Einladung beitreten</h2>
-          <JoinGame />
+          </div>
         </div>
 
-        <div className="divider divider-vertical">oder</div>
-
-        <div className="flex flex-col items-center">
-          <h2 className="mb-4 text-xl font-bold leading-tight">Spiel erstellen</h2>
-          <CreateGame />
+        <div className="card bg-base-200 shadow-lg">
+          <div className="card-body gap-3">
+            <h2 className="card-title">🤖 Gegen KI spielen</h2>
+            <p className="text-sm opacity-70">Fordere Stockfish auf verschiedenen Stufen heraus — von Anfänger bis Meister</p>
+            <div className="mt-auto pt-4">
+              <Link href="/ai" className="btn btn-secondary w-full">Jetzt spielen</Link>
+            </div>
+          </div>
         </div>
+
+        <div className="card bg-base-200 shadow-lg">
+          <div className="card-body gap-3">
+            {isLoggedIn ? (
+              <>
+                <h2 className="card-title">👥 Freunde</h2>
+                <p className="text-sm opacity-70">Freunde hinzufügen, verwalten und zu einer Partie einladen</p>
+                <div className="mt-auto pt-4">
+                  <Link href="/friends" className="btn btn-outline w-full">Freunde verwalten</Link>
+                </div>
+              </>
+            ) : (
+              <>
+                <h2 className="card-title">🔗 Einladung annehmen</h2>
+                <p className="text-sm opacity-70 mb-2">Einladungslink oder Code eingeben um beizutreten</p>
+                <JoinGame />
+              </>
+            )}
+          </div>
+        </div>
+
       </div>
+
+      {/* Öffentliche Spiele + Beitreten */}
+      <div className={`grid gap-6 grid-cols-1 ${isLoggedIn ? "lg:grid-cols-3" : ""}`}>
+        <div className={isLoggedIn ? "lg:col-span-2" : ""}>
+          <PublicGames />
+        </div>
+        {isLoggedIn && (
+          <div className="card bg-base-200 shadow h-fit">
+            <div className="card-body">
+              <h2 className="card-title text-lg">🔗 Einladung annehmen</h2>
+              <p className="text-sm opacity-70 mb-2">Link oder Code eingeben</p>
+              <JoinGame />
+            </div>
+          </div>
+        )}
+      </div>
+
     </div>
   );
 }