Merge pull request #88 from MikaStiebitz/claude/shop-difficulty-google-logo-fixes-0jv4ca

Fix invisible Shop/Difficulty buttons, drop hero pill, rework site icons

Author: MikaStiebitz

README.md

@@ -8,7 +8,7 @@
 
 <div align="center">
   <a href="https://gitmastery.me">
-    <img src="./public/gitBranch.svg" alt="GitMastery Logo" width="140" height="140" />
+    <img src="./public/logo.svg" alt="GitMastery Logo" width="140" height="140" />
   </a>
 
   <h3 align="center">An interactive Git learning platform that makes mastering Git fun</h3>

public/apple-touch-icon.png

@@ -41,8 +41,8 @@ export const metadata: Metadata = {
         images: [
             {
                 url: "/home-screen.png",
-                width: 1200,
-                height: 630,
+                width: 1849,
+                height: 960,
                 alt: "GitMastery - Learn Git Through Play",
             },
         ],
@@ -55,10 +55,16 @@ export const metadata: Metadata = {
         description: "Learn Git commands and concepts through fun, interactive challenges",
         images: ["/home-screen.png"],
     },
+    // Google renders favicons on a white search-results background, so every icon
+    // below is an opaque tile rather than a bare transparent glyph. Only one SVG is
+    // declared: two competing `image/svg+xml` links made the picked icon ambiguous.
     icons: [
-        { rel: "icon", url: "/gitBranch-favicon.svg", type: "image/svg+xml" },
-        { rel: "icon", url: "/gitBranch.svg", type: "image/svg+xml", sizes: "any" },
-        { rel: "apple-touch-icon", url: "/gitBranch-favicon.svg" },
+        { rel: "icon", url: "/favicon.ico", sizes: "16x16 32x32 48x48", type: "image/x-icon" },
+        { rel: "icon", url: "/logo.svg", type: "image/svg+xml", sizes: "any" },
+        { rel: "icon", url: "/icon-192.png", type: "image/png", sizes: "192x192" },
+        { rel: "icon", url: "/icon-512.png", type: "image/png", sizes: "512x512" },
+        // iOS ignores SVG here, so this has to stay a raster asset.
+        { rel: "apple-touch-icon", url: "/apple-touch-icon.png", sizes: "180x180" },
     ],
 };
 
@@ -87,13 +93,21 @@ export default function RootLayout({ children }: Readonly<{ children: React.Reac
                             name: "GitMastery - Learn Git Through Play",
                             description: "An interactive Git learning platform with hands-on practice",
                             url: getPageUrl(),
+                            image: getPageUrl("/icon-512.png"),
                             applicationCategory: "EducationalApplication",
                             operatingSystem: "Web",
                             inLanguage: "en",
                             publisher: {
                                 "@type": "Organization",
                                 name: "GitMastery",
                                 url: getPageUrl(),
+                                // Required for Google to associate a logo with the site.
+                                logo: {
+                                    "@type": "ImageObject",
+                                    url: getPageUrl("/icon-512.png"),
+                                    width: 512,
+                                    height: 512,
+                                },
                             },
                             offers: {
                                 "@type": "Offer",