docs: restore homepage header and background gradient

- Re-add custom Header component (derived from theme's Header pattern)
  with CLI-specific features: homepage detection, 'Docs' nav link,
  hide search on splash page, social icons in header
- Restore the purple/blue ambient gradient glow (.main-frame::before)
- Style social icons white in header

Author: sentry-junior[bot]

docs/astro.config.mjs

@@ -60,6 +60,7 @@ export default defineConfig({
       ],
       plugins: [sentryStarlightTheme()],
       components: {
+        Header: "./src/components/Header.astro",
         PageTitle: "./src/components/PageTitle.astro",
       },
       head: [

docs/src/components/Header.astro

@@ -0,0 +1,72 @@
+---
+/**
+ * CLI-specific Header — extends the shared theme's Header pattern
+ * with homepage detection, "Docs" nav link, and social icons.
+ */
+import config from "virtual:starlight/user-config";
+
+import Search from "virtual:starlight/components/Search";
+import SiteTitle from "virtual:starlight/components/SiteTitle";
+import SocialIcons from "virtual:starlight/components/SocialIcons";
+
+const shouldRenderSearch =
+  config.pagefind ||
+  config.components.Search !== "@astrojs/starlight/components/Search.astro";
+
+// Detect homepage (splash page). In Starlight >=0.33, route data lives on
+// Astro.locals.starlightRoute; the old `slug` field is now `id`.
+const isHomepage = Astro.locals.starlightRoute.id === "";
+
+// Get base path for links
+const baseUrl = import.meta.env.BASE_URL;
+const base = baseUrl.endsWith("/") ? baseUrl : baseUrl + "/";
+---
+
+<div class:list={["header sentry-header", { "header-homepage": isHomepage }]}>
+  <div class="title-wrapper sl-flex">
+    <SiteTitle />
+  </div>
+  <div class="sentry-header-actions sl-flex print:hidden">
+    {!isHomepage && shouldRenderSearch && <Search />}
+    {isHomepage && (
+      <a href={`${base}getting-started/`} class="header-nav-link">Docs</a>
+    )}
+    {!isHomepage && <span class="header-nav-link header-nav-active">Docs</span>}
+    <div class="sl-hidden md:sl-flex sentry-header-secondary">
+      <SocialIcons />
+    </div>
+  </div>
+</div>
+
+<style>
+  .header-homepage {
+    max-width: var(--sl-content-width);
+    margin: 0 auto;
+  }
+
+  .header-nav-link {
+    color: #fff !important;
+    text-decoration: none;
+    font-size: 0.875rem;
+    font-weight: 500;
+    padding: 0.4rem 0.75rem;
+    border-radius: 6px;
+    transition: all 0.2s ease;
+    white-space: nowrap;
+    opacity: 0.9;
+  }
+
+  .header-nav-link:hover {
+    opacity: 1;
+    background: rgba(255, 255, 255, 0.1);
+  }
+
+  .header-nav-active {
+    opacity: 1;
+    cursor: default;
+  }
+
+  .header-nav-active:hover {
+    background: none;
+  }
+</style>

docs/src/styles/cli.css

@@ -14,6 +14,42 @@
   --sl-font-mono: "JetBrains Mono", ui-monospace, monospace;
 }
 
+/* Subtle background gradient glow */
+.main-frame::before {
+  content: "";
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 100vh;
+  background:
+    radial-gradient(
+      ellipse 80% 50% at 50% -20%,
+      rgb(var(--sl-color-accent-rgb) / 0.12) 0%,
+      transparent 50%
+    ),
+    radial-gradient(
+      ellipse 60% 40% at 100% 0%,
+      rgba(59, 130, 246, 0.08) 0%,
+      transparent 40%
+    );
+  pointer-events: none;
+  z-index: -1;
+}
+
+/* GitHub icon - white in header */
+.social-icons a,
+.social-icons a svg {
+  color: #fff !important;
+  fill: #fff !important;
+}
+
+.social-icons a:hover,
+.social-icons a:hover svg {
+  color: rgba(255, 255, 255, 0.8) !important;
+  fill: rgba(255, 255, 255, 0.8) !important;
+}
+
 /* Logo sizing */
 .site-title img {
   height: 2.3rem;