web: ai maps page again

web/src/app/maps/[mapId]/page.tsx

@@ -15,7 +15,7 @@ interface ButtonProps {
 function Button({ name, href }: ButtonProps) {
 	return (
 		<Link href={href}>
-			<button className="mt-4 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg shadow-md transition">
+			<button className="mt-6 px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-xl shadow transition">
 				{name}
 			</button>
 		</Link>
@@ -39,29 +39,44 @@ export default function Map() {
 	if (!map) {
 		return (
 			<Webpage>
-				<div className="p-8 text-center text-gray-500">Loading map data...</div>
+				<div className="p-12 text-center text-gray-500">Loading map data...</div>
 			</Webpage>
 		);
 	}
 
 	return (
 		<Webpage>
-			<div className="max-w-4xl mx-auto p-4">
-				<div className="mb-6">
-					<h1 className="text-3xl font-bold mb-2">{map.DisplayName}</h1>
-					<div className="text-gray-700">
-						<p><strong>MapID:</strong> {mapId}</p>
-						<p><strong>Creator:</strong> {map.Creator}</p>
-						<p><strong>GameID:</strong> {map.GameID}</p>
-						<p><strong>Release Date:</strong> {map.Date}</p>
+			<div className="max-w-4xl mx-auto p-6">
+				<div className="bg-white dark:bg-zinc-900 shadow-xl rounded-2xl p-8 space-y-8">
+					{/* Title */}
+					<h1 className="text-3xl font-bold text-center">{map.DisplayName}</h1>
+
+					{/* Image */}
+					<div className="w-full overflow-hidden rounded-xl border border-zinc-300 dark:border-zinc-700 shadow-md">
+						<MapImage id={map.ID} />
+					</div>
+
+					{/* Info grid */}
+					<div className="grid grid-cols-1 sm:grid-cols-3 gap-4 text-center text-zinc-700 dark:text-zinc-300">
+						<div>
+							<p className="text-sm font-medium text-zinc-500">Creator</p>
+							<p className="text-lg">{map.Creator}</p>
+						</div>
+						<div>
+							<p className="text-sm font-medium text-zinc-500">Game ID</p>
+							<p className="text-lg">{map.GameID}</p>
+						</div>
+						<div>
+							<p className="text-sm font-medium text-zinc-500">Release Date</p>
+							<p className="text-lg">{map.Date}</p>
+						</div>
+					</div>
+
+					{/* Button */}
+					<div className="text-center">
+						<Button name="Submit A Mapfix For This Map" href={`/maps/${mapId}/fix`} />
 					</div>
 				</div>
-
-				<div className="rounded-xl overflow-hidden shadow-lg border mb-6">
-					<MapImage id={map.ID} />
-				</div>
-
-				<Button name="Submit A Mapfix For This Map" href={`/maps/${mapId}/fix`} />
 			</div>
 		</Webpage>
 	);