From c4675d509571426ff0406d6d1db0e4674cdadfd3 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Fri, 5 Dec 2025 06:59:18 +0000
Subject: [PATCH 1/2] feat: Add PlaygroundLink component and integrate into
 docs

Co-authored-by: pranay.prakash <pranay.prakash@vercel.com>
---
 docs/app/docs/[[...slug]]/page.tsx            |  2 ++
 docs/components/geistdocs/playground-link.tsx | 15 +++++++++++++++
 2 files changed, 17 insertions(+)
 create mode 100644 docs/components/geistdocs/playground-link.tsx

diff --git a/docs/app/docs/[[...slug]]/page.tsx b/docs/app/docs/[[...slug]]/page.tsx
index 6da6efc31..7fa878495 100644
--- a/docs/app/docs/[[...slug]]/page.tsx
+++ b/docs/app/docs/[[...slug]]/page.tsx
@@ -15,6 +15,7 @@ import {
 } from '@/components/geistdocs/docs-page';
 import { EditSource } from '@/components/geistdocs/edit-source';
 import { Feedback } from '@/components/geistdocs/feedback';
+import { PlaygroundLink } from '@/components/geistdocs/playground-link';
 import { getMDXComponents } from '@/components/geistdocs/mdx-components';
 import { OpenInChat } from '@/components/geistdocs/open-in-chat';
 import { ScrollTop } from '@/components/geistdocs/scroll-top';
@@ -44,6 +45,7 @@ const Page = async (props: PageProps<'/docs/[[...slug]]'>) => {
         component: (
           <TableOfContents>
             <EditSource path={page.path} />
+            <PlaygroundLink />
             <ScrollTop />
             <Feedback />
             <CopyPage text={markdown} />
diff --git a/docs/components/geistdocs/playground-link.tsx b/docs/components/geistdocs/playground-link.tsx
new file mode 100644
index 000000000..fe96e7e87
--- /dev/null
+++ b/docs/components/geistdocs/playground-link.tsx
@@ -0,0 +1,15 @@
+import { SquareTerminal } from 'lucide-react';
+
+export const PlaygroundLink = () => {
+  return (
+    <a
+      className="flex items-center gap-1.5 text-muted-foreground text-sm transition-colors hover:text-foreground"
+      href="https://workflow-swc-playground.vercel.app/"
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      <SquareTerminal className="size-3.5" />
+      <span>Compiler Playground</span>
+    </a>
+  );
+};

From 23252b33e55b67d42789e7da69adf2779b87da73 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Fri, 5 Dec 2025 20:59:21 +0000
Subject: [PATCH 2/2] Refactor: Move PlaygroundLink to Footer component

Co-authored-by: pranay.prakash <pranay.prakash@vercel.com>
---
 docs/app/docs/[[...slug]]/page.tsx            |  2 -
 docs/app/layout.tsx                           |  2 +
 docs/components/geistdocs/footer.tsx          | 81 +++++++++++++++++++
 docs/components/geistdocs/playground-link.tsx | 15 ----
 4 files changed, 83 insertions(+), 17 deletions(-)
 create mode 100644 docs/components/geistdocs/footer.tsx
 delete mode 100644 docs/components/geistdocs/playground-link.tsx

diff --git a/docs/app/docs/[[...slug]]/page.tsx b/docs/app/docs/[[...slug]]/page.tsx
index 7fa878495..6da6efc31 100644
--- a/docs/app/docs/[[...slug]]/page.tsx
+++ b/docs/app/docs/[[...slug]]/page.tsx
@@ -15,7 +15,6 @@ import {
 } from '@/components/geistdocs/docs-page';
 import { EditSource } from '@/components/geistdocs/edit-source';
 import { Feedback } from '@/components/geistdocs/feedback';
-import { PlaygroundLink } from '@/components/geistdocs/playground-link';
 import { getMDXComponents } from '@/components/geistdocs/mdx-components';
 import { OpenInChat } from '@/components/geistdocs/open-in-chat';
 import { ScrollTop } from '@/components/geistdocs/scroll-top';
@@ -45,7 +44,6 @@ const Page = async (props: PageProps<'/docs/[[...slug]]'>) => {
         component: (
           <TableOfContents>
             <EditSource path={page.path} />
-            <PlaygroundLink />
             <ScrollTop />
             <Feedback />
             <CopyPage text={markdown} />
diff --git a/docs/app/layout.tsx b/docs/app/layout.tsx
index 2881e7f48..b2e4f9bf7 100644
--- a/docs/app/layout.tsx
+++ b/docs/app/layout.tsx
@@ -1,4 +1,5 @@
 import './global.css';
+import { Footer } from '@/components/geistdocs/footer';
 import { Navbar } from '@/components/geistdocs/navbar';
 import { GeistdocsProvider } from '@/components/geistdocs/provider';
 import { mono, sans } from '@/lib/geistdocs/fonts';
@@ -54,6 +55,7 @@ const Layout = ({ children }: LayoutProps<'/'>) => (
           <Logo />
         </Navbar>
         {children}
+        <Footer />
       </GeistdocsProvider>
     </body>
   </html>
diff --git a/docs/components/geistdocs/footer.tsx b/docs/components/geistdocs/footer.tsx
new file mode 100644
index 000000000..09ac0369d
--- /dev/null
+++ b/docs/components/geistdocs/footer.tsx
@@ -0,0 +1,81 @@
+import { SiGithub } from '@icons-pack/react-simple-icons';
+import { SquareTerminal } from 'lucide-react';
+
+const footerLinks = {
+  resources: {
+    title: 'Resources',
+    links: [
+      { label: 'Documentation', href: '/docs' },
+      {
+        label: 'Examples',
+        href: 'https://github.com/vercel/workflow-examples',
+      },
+    ],
+  },
+  tools: {
+    title: 'Tools',
+    links: [
+      {
+        label: 'Compiler Playground',
+        href: 'https://workflow-swc-playground.vercel.app/',
+        icon: SquareTerminal,
+      },
+    ],
+  },
+  community: {
+    title: 'Community',
+    links: [
+      {
+        label: 'GitHub',
+        href: 'https://github.com/vercel/workflow',
+        icon: SiGithub,
+      },
+    ],
+  },
+};
+
+export const Footer = () => {
+  return (
+    <footer className="border-t border-border bg-background">
+      <div className="mx-auto max-w-7xl px-6 py-12 lg:px-8">
+        <div className="grid grid-cols-2 gap-8 md:grid-cols-3">
+          {Object.values(footerLinks).map((section) => (
+            <div key={section.title}>
+              <h3 className="text-sm font-semibold text-foreground">
+                {section.title}
+              </h3>
+              <ul className="mt-4 space-y-3">
+                {section.links.map((link) => (
+                  <li key={link.label}>
+                    <a
+                      className="flex items-center gap-2 text-sm text-muted-foreground transition-colors hover:text-foreground"
+                      href={link.href}
+                      rel={
+                        link.href.startsWith('http')
+                          ? 'noopener noreferrer'
+                          : undefined
+                      }
+                      target={
+                        link.href.startsWith('http') ? '_blank' : undefined
+                      }
+                    >
+                      {'icon' in link && link.icon && (
+                        <link.icon className="size-4" />
+                      )}
+                      {link.label}
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+        <div className="mt-12 border-t border-border pt-8">
+          <p className="text-center text-sm text-muted-foreground">
+            &copy; {new Date().getFullYear()} Vercel, Inc. All rights reserved.
+          </p>
+        </div>
+      </div>
+    </footer>
+  );
+};
diff --git a/docs/components/geistdocs/playground-link.tsx b/docs/components/geistdocs/playground-link.tsx
deleted file mode 100644
index fe96e7e87..000000000
--- a/docs/components/geistdocs/playground-link.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { SquareTerminal } from 'lucide-react';
-
-export const PlaygroundLink = () => {
-  return (
-    <a
-      className="flex items-center gap-1.5 text-muted-foreground text-sm transition-colors hover:text-foreground"
-      href="https://workflow-swc-playground.vercel.app/"
-      rel="noopener noreferrer"
-      target="_blank"
-    >
-      <SquareTerminal className="size-3.5" />
-      <span>Compiler Playground</span>
-    </a>
-  );
-};