docs(migrate-to-spicedb): add Migrate to SpiceDB section

app/globals.css

@@ -164,6 +164,10 @@ html.dark-mode {
   justify-content: flex-start !important;
   text-align: left !important;
 }
+/* Nextra's inner content wrapper adds its own `py-2.5`. */
+.nextra-banner > div:has(> .docs-announce) {
+  padding: 0 !important;
+}
 .docs-announce {
   display: flex;
   flex-wrap: wrap;
@@ -193,6 +197,20 @@ html.dark-mode {
   color: hsl(28 100% 72%); /* sand-300 */
   flex-shrink: 0;
 }
+/* The glyphs come from a fallback font with differing advance widths, so fix
+   the box width or the message jitters sideways while the cursor animates. */
+.docs-announce .da-spinner {
+  width: 1em;
+  text-align: center;
+  font-size: 1.5em;
+  /* Share the text's line box (0.8125rem × 1.4) so the cursor tracks the
+     first line when the message wraps. */
+  line-height: calc(0.8125rem * 1.4);
+  align-self: flex-start;
+  /* The fallback glyph draws low in its box; center its ink on the text. */
+  position: relative;
+  top: -0.15em;
+}
 /* terminal cursor — the cli-spinners "hamburger" (☱☲☴). Static by default,
    animates only during the load burst or on hover (`.spin` toggled by the JS). */
 .docs-announce .da-spinner::before {

app/spicedb/_meta.ts

@@ -6,6 +6,7 @@ export default {
   integrations: "Integrations",
   tutorials: "Tutorials",
   "best-practices": "Best Practices",
+  "migrate-to-spicedb": "Migrate to SpiceDB",
   api: "API Reference",
   links: "Links",
 };

app/spicedb/getting-started/discovering-spicedb/page.mdx

@@ -4,7 +4,7 @@ description: "Overview of SpiceDB, the open-source Google Zanzibar-inspired data
 ---
 
 import { Cards } from "nextra/components";
-import { faQuestion, faHand, faDollarSign } from "@fortawesome/free-solid-svg-icons";
+import { faQuestion, faHand, faBook, faTruckMoving } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 # SpiceDB Documentation
@@ -26,10 +26,16 @@ Welcome to the official documentation for the SpiceDB ecosystem.
   />
   <Cards.Card
     arrow
-    icon={<FontAwesomeIcon icon={faDollarSign} />}
-    title="Paid products? That's the AuthZed docs"
+    icon={<FontAwesomeIcon icon={faBook} />}
+    title="AuthZed product docs"
     href="../../authzed/guides/picking-a-product"
   />
+  <Cards.Card
+    arrow
+    icon={<FontAwesomeIcon icon={faTruckMoving} />}
+    title="Migrating to SpiceDB"
+    href="/spicedb/migrate-to-spicedb/overview"
+  />
 </Cards>
 
 ## What is SpiceDB?

app/spicedb/migrate-to-spicedb/_meta.ts

@@ -0,0 +1,4 @@
+export default {
+  overview: "Overview",
+  "migrate-from": "Migrate From",
+};

app/spicedb/migrate-to-spicedb/migrate-from/_meta.ts

@@ -0,0 +1,4 @@
+export default {
+  openfga: "OpenFGA/Okta FGA",
+  oso: "Oso",
+};