Restructure Troubleshooting into a hub with per-area pages (#814)

* Restructure Troubleshooting into a hub with per-area pages

- Add a Troubleshooting hub (/help/troubleshooting) with icon/chip cards and a "Still stuck?" CTA
- Split NetBird Client troubleshooting into an overview + per-OS pages (Linux, Windows, macOS, Android, iOS)
- Split Self-hosted troubleshooting into an overview + per-area pages (installation, IdP, dashboard, certificates, connectivity, database)
- Split "Report bugs and issues" into Community Support and NetBird Support pages
- Add Troubleshooting resource connectivity and a NetBird Cloud pending-approval page
- Add DNS troubleshooting Issue 8 (Windows NRPT rule blocked by a lingering GPO)
- Cross-reference the new pages from networks, DNS, and reverse-proxy docs; update nav

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

* Address review: client terminology, dead props, labels, cross-links

- Use "client" instead of "agent" across the client troubleshooting pages (headings, prose, anchors)
- Remove unused source: props from the Troubleshooting hub tiles
- Relabel the "NetBird Cloud" grouping to "Cloud & identity" (SSO/provisioning also apply to self-hosted)
- Add a Tiles title on the report-bug landing; add reverse-proxy -> resource-connectivity cross-link
- Fix comma splices introduced by the em-dash cleanup in relayed-connections

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

* Add client-side hash redirect for moved self-hosted anchors

Old deep links like /selfhosted/troubleshooting#debugging-turn-connections now
forward to the per-area page, since next.config redirects can't act on the URL fragment.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

* Apply docs-skill review: conventions + reshape area pages

- "open source" (no hyphen), expand NRPT on first use, descriptive alt text + captions on TURN images
- Fix inherited "Netbird" casing in the client glossary
- Reshape the six self-hosted area pages to Symptom -> likely causes (ordered) -> Fix -> Confirm, preserving anchored headings

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

* Fix two typos in client glossary (CodeRabbit)

- "nunning" -> "running" in the glossary
- possessive "it's" -> "its" in the routing-table sentence

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

* docs: fix two broken links in troubleshooting pages

- database: point the "upgrade path" link at /selfhosted/maintenance/upgrade;
  selfhosted-quickstart has no #upgrade anchor so the old link landed at page top
- client: add HashRedirect so old #net-bird-agent-status deep links forward to
  the renamed #net-bird-client-status section on the same page

* docs: address review follow-ups (deep-link redirects + client casing)

- self-hosted troubleshooting: extend the HashRedirect map with the per-issue
  (###-level) anchors from the old single page, so old deep links land on the
  exact sub-section of the new area page rather than just the page top
- client glossary: lowercase "NetBird client" in the peer-a/peer-b entries
  (house convention) and fix "linux" -> "Linux"

* docs: review polish — fix image class + first-use acronym glosses

- connectivity: fix bad CSS class imagewrapper-nig -> imagewrapper on the
  TURN-test screenshot (the typo'd class matched no style and broke zoom)
- gloss acronyms on first use: GPO (DNS Issue 8), IdP/SSO (identity-provider),
  ACME (certificates), CORS (dashboard)

---------

Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
Co-authored-by: Jack Carter <128555021+SunsetDrifter@users.noreply.github.com>

src/components/SupportBanner.jsx

@@ -0,0 +1,78 @@
+/**
+ * Audience banner for the "Report bugs and issues" page. Two tones:
+ * - "community": neutral, for everyone outside the managed Cloud.
+ * - "support": orange/netbird accent, for paying NetBird Cloud customers.
+ *
+ * @param {'community'|'support'} [tone='community']
+ * @param {string} [id] - Optional id so the banner can be a scroll target
+ * @param {string} title
+ * @param {string} [badge] - Small pill (e.g. "Free", "Cloud customers")
+ * @param {string} description
+ * @param {Array<{label: string, href: string}>} [links] - Bullet links to the
+ *   section's channels / anchors.
+ */
+export function SupportBanner({
+  tone = 'community',
+  id,
+  title,
+  badge,
+  description,
+  links = [],
+}) {
+  const isSupport = tone === 'support'
+  const accent = isSupport
+    ? 'border-[#F28C28]'
+    : 'border-zinc-300 dark:border-zinc-600'
+  const badgeClass = isSupport
+    ? 'bg-[#F28C28]/10 text-[#C2410C] ring-[#F28C28]/30 dark:text-[#FFAC1C] dark:ring-[#F28C28]/40'
+    : 'bg-zinc-900/5 text-zinc-600 ring-zinc-900/10 dark:bg-white/5 dark:text-zinc-400 dark:ring-white/10'
+
+  return (
+    <div
+      id={id}
+      className={`not-prose my-6 scroll-mt-24 rounded-2xl border-l-4 ${accent} bg-zinc-50 p-5 ring-1 ring-inset ring-zinc-900/7.5 dark:bg-white/2.5 dark:ring-white/10`}
+    >
+      {(title || badge) && (
+        <div className="flex flex-wrap items-center gap-x-3 gap-y-1">
+          {title && (
+            <p className="text-lg font-semibold text-zinc-900 dark:text-white">
+              {title}
+            </p>
+          )}
+          {badge && (
+            <span
+              className={`rounded-full px-2 py-0.5 text-xs font-medium ring-1 ring-inset ${badgeClass}`}
+            >
+              {badge}
+            </span>
+          )}
+        </div>
+      )}
+      {description && (
+        <p className="mt-1 max-w-3xl text-sm text-zinc-600 dark:text-zinc-400">
+          {description}
+        </p>
+      )}
+      {links.length > 0 && (
+        <ul className="mt-3 space-y-1">
+          {links.map((link) => (
+            <li key={link.href} className="flex items-start gap-x-2 text-sm">
+              <span
+                aria-hidden="true"
+                className={isSupport ? 'text-[#F28C28]' : 'text-zinc-400 dark:text-zinc-500'}
+              >
+                •
+              </span>
+              <a
+                href={link.href}
+                className="text-zinc-700 underline-offset-2 transition hover:text-[#F28C28] hover:underline dark:text-zinc-300 dark:hover:text-[#FFAC1C]"
+              >
+                {link.label}
+              </a>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  )
+}