docs: Add Margelo "Let's talk" widget (#3768)

Author: mrousavy

docs/src/app/(content)/api/[[...slug]]/page.tsx

@@ -7,6 +7,7 @@ import {
 } from 'fumadocs-ui/layouts/docs/page'
 import type { Metadata } from 'next'
 import { notFound } from 'next/navigation'
+import { LetsTalkWidget } from '@/components/lets-talk-widget'
 import { PlatformPills } from '@/components/platform/pills'
 import { getApiCodeTypeLinks } from '@/lib/api-code-links'
 import { createApiRelativeLink } from '@/lib/api-relative-link'
@@ -94,7 +95,11 @@ export default async function Page(props: PageProps<'/api/[[...slug]]'>) {
   const currentTypeName = page.slugs[2]
 
   return (
-    <DocsPage toc={toc} full={page.data.full}>
+    <DocsPage
+      toc={toc}
+      full={page.data.full}
+      tableOfContent={{ footer: <LetsTalkWidget /> }}
+    >
       <DocsTitle className="m-0 text-4xl md:text-5xl tracking-tight break-words [overflow-wrap:anywhere]">
         {page.data.title}
       </DocsTitle>

docs/src/app/(content)/docs/[[...slug]]/page.tsx

@@ -7,6 +7,7 @@ import {
 import { createRelativeLink } from 'fumadocs-ui/mdx'
 import type { Metadata } from 'next'
 import { notFound } from 'next/navigation'
+import { LetsTalkWidget } from '@/components/lets-talk-widget'
 import { LLMCopyButton, ViewOptions } from '@/components/page-actions'
 import { PlatformPills } from '@/components/platform/pills'
 import { readPlatformsFromPageData } from '@/lib/platforms'
@@ -29,7 +30,11 @@ export default async function Page(props: PageProps<'/docs/[[...slug]]'>) {
   const githubUrl = getGithubContentUrl('docs', page.path)
 
   return (
-    <DocsPage toc={page.data.toc} full={page.data.full}>
+    <DocsPage
+      toc={page.data.toc}
+      full={page.data.full}
+      tableOfContent={{ footer: <LetsTalkWidget /> }}
+    >
       <DocsTitle>{page.data.title}</DocsTitle>
       <PlatformPills platforms={platforms} />
       <DocsDescription className="mb-2">

docs/src/components/lets-talk-widget.tsx

@@ -0,0 +1,23 @@
+import { ArrowRight } from 'lucide-react'
+
+export function LetsTalkWidget() {
+  return (
+    <aside className="mt-6 rounded-lg border bg-fd-card p-4 text-sm">
+      <p className="font-semibold text-fd-foreground">
+        Building something ambitious?
+      </p>
+      <p className="mt-1 text-fd-muted-foreground">
+        We help teams ship world-class React Native apps.
+      </p>
+      <a
+        href="https://margelo.com"
+        target="_blank"
+        rel="noreferrer noopener"
+        className="mt-4 inline-flex w-full items-center justify-center gap-2 rounded-md bg-fd-primary px-3 py-2 font-medium text-fd-primary-foreground transition-colors hover:bg-fd-primary/80"
+      >
+        Let's talk
+        <ArrowRight className="size-4" />
+      </a>
+    </aside>
+  )
+}