From b36d8c318e1eab5e2ce9e8ffa892e4bd51e79e3c Mon Sep 17 00:00:00 2001
From: Anthony Ettinger <anthony@profullstack.com>
Date: Mon, 19 Oct 2026 12:43:06 +0000
Subject: [PATCH 1/2] Add the pit.world global footer, trim the site footer

Fetch https://pit.world/snippets/footer.html?site=smshub.dev on the server
(1h revalidate, 3s timeout, renders nothing on failure) as the last thing
in <body> for the smshub brand (white-label brands are untouched). Cut the
four-column footer (logo + tagline, Product, Platforms, Providers, the
@profullstack/footer webring bar) to one row: copyright, Pricing, Rent a
number, Docs, API, Privacy, Terms, GitHub. Move the CrawlProof ad unit
from between <main> and the footer to the top of the content, under the
header (standing rule: no ads pressed against footers).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/app/layout.tsx            | 19 ++------
 src/components/ad-unit.tsx    |  2 +-
 src/components/footer.tsx     | 83 +++++++++++------------------------
 src/components/pit-footer.tsx | 21 +++++++++
 4 files changed, 51 insertions(+), 74 deletions(-)
 create mode 100644 src/components/pit-footer.tsx

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 892fde5b..c4aac546 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -7,7 +7,7 @@ import { ToastContainer } from "@/components/toast-container";
 import { ServiceWorkerRegister } from "@/components/sw-register";
 import { Header } from "@/components/header";
 import { Footer } from "@/components/footer";
-import { Footer as PfsFooter } from "@profullstack/footer/react";
+import { PitFooter } from "@/components/pit-footer";
 import { getSiteUrl } from "@/lib/site-url";
 import { priceUsdPerMonth } from "@/lib/plans";
 import { getBrand } from "@/lib/brand-server";
@@ -177,25 +177,14 @@ export default async function RootLayout({
         <BrandProvider brand={brand}>
           <ToastProvider>
             <Header />
-            <main className="flex-1"><ReferralProvider>{children}</ReferralProvider></main>
             <AdUnit />
-            <Footer
-              bottom={
-                <PfsFooter
-                  site="https://smshub.dev/"
-                  links={[
-                    { label: "Privacy", href: "/privacy" },
-                    { label: "Terms", href: "/terms" },
-                    { label: "SMS", href: "/sms" },
-                    { label: "GitHub", href: "https://github.com/profullstack/smshub" },
-                  ]}
-                />
-              }
-            />
+            <main className="flex-1"><ReferralProvider>{children}</ReferralProvider></main>
+            <Footer />
             <ToastContainer />
             <ServiceWorkerRegister />
           </ToastProvider>
         </BrandProvider>
+        <PitFooter />
       </body>
     </html>
   );
diff --git a/src/components/ad-unit.tsx b/src/components/ad-unit.tsx
index ea466611..ca46ea6c 100644
--- a/src/components/ad-unit.tsx
+++ b/src/components/ad-unit.tsx
@@ -8,7 +8,7 @@ import { AD_SLOT, isAdPage, requestAdScan, type AdFormat } from "@/lib/ads";
 const LEADERBOARD_QUERY = "(min-width: 768px)";
 
 /**
- * One CrawlProof unit above the footer on smshub.dev public pages.
+ * One CrawlProof unit at the top of the content on smshub.dev public pages.
  *
  * The div is rendered without `data-slot`, so ad.js's own first pass skips it;
  * the mount effect picks one format from the viewport, sets slot + format and
diff --git a/src/components/footer.tsx b/src/components/footer.tsx
index e626d5d1..6e60720b 100644
--- a/src/components/footer.tsx
+++ b/src/components/footer.tsx
@@ -1,13 +1,21 @@
 "use client";
 
 import Link from "next/link";
-import { PHONENUMBERS_BOT_URL } from "@/components/sister-sim-link";
 import { usePathname } from "next/navigation";
-import { Logo } from "@/components/logo";
 
 const APP_ROUTES = ["/inbox", "/settings", "/campaigns", "/contacts", "/analytics", "/org"];
 
-export function Footer({ bottom }: { bottom?: React.ReactNode }) {
+const LINKS = [
+  { label: "Pricing", href: "/#pricing" },
+  { label: "Rent a number", href: "/phonenumbers" },
+  { label: "Docs", href: "/docs" },
+  { label: "API", href: "/docs/api" },
+  { label: "Privacy", href: "/privacy" },
+  { label: "Terms", href: "/terms" },
+  { label: "GitHub", href: "https://github.com/profullstack/smshub" },
+];
+
+export function Footer() {
   const pathname = usePathname();
 
   // Hide footer on app routes
@@ -15,61 +23,20 @@ export function Footer({ bottom }: { bottom?: React.ReactNode }) {
 
   return (
     <footer className="border-t border-gray-800 bg-gray-950 mt-auto">
-      <div className="max-w-6xl mx-auto px-4 sm:px-6 py-12">
-        <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
-          {/* Brand */}
-          <div className="col-span-2 md:col-span-1">
-            <Logo
-              imageClassName="h-14 w-auto"
-              className="flex items-center gap-3 mb-4"
-            />
-            <p className="text-sm text-gray-400">
-              Multi-platform SMS messaging for developers and businesses.
-            </p>
-          </div>
-
-          {/* Product */}
-          <div>
-            <h3 className="text-sm font-semibold text-gray-200 mb-3">Product</h3>
-            <ul className="space-y-2">
-              <li><Link href="/#features" className="text-sm text-gray-400 hover:text-white transition-colors">Features</Link></li>
-              <li><Link href="/#pricing" className="text-sm text-gray-400 hover:text-white transition-colors">Pricing</Link></li>
-              <li><Link href="/phonenumbers" className="text-sm text-gray-400 hover:text-white transition-colors">Rent a number</Link></li>
-              <li><Link href="/#api" className="text-sm text-gray-400 hover:text-white transition-colors">API</Link></li>
-            </ul>
-          </div>
-
-          {/* Platforms */}
-          <div>
-            <h3 className="text-sm font-semibold text-gray-200 mb-3">Platforms</h3>
-            <ul className="space-y-2">
-              <li><span className="text-sm text-gray-400">🌐 Web App</span></li>
-              <li><span className="text-sm text-gray-400">📱 iOS & Android</span></li>
-              <li><span className="text-sm text-gray-400">🖥 Desktop</span></li>
-              <li><span className="text-sm text-gray-400">📲 PWA</span></li>
-            </ul>
-          </div>
-
-          {/* Providers */}
-          <div>
-            <h3 className="text-sm font-semibold text-gray-200 mb-3">Providers</h3>
-            <ul className="space-y-2">
-              <li><Link href="/docs/twilio" className="text-sm text-blue-400 hover:text-blue-300 transition-colors">Twilio setup</Link></li>
-              <li><Link href="/docs/telnyx" className="text-sm text-blue-400 hover:text-blue-300 transition-colors">Telnyx setup</Link></li>
-              <li><Link href="/docs/api" className="text-sm text-blue-400 hover:text-blue-300 transition-colors">API, CLI &amp; MCP</Link></li>
-              <li><Link href="/phonenumbers" className="text-sm text-blue-400 hover:text-blue-300 transition-colors">SMSHub rented numbers</Link></li>
-              <li>
-                <a href={PHONENUMBERS_BOT_URL} target="_blank" rel="noopener" className="text-sm text-gray-400 hover:text-white transition-colors">
-                  phonenumbers.bot: real SIMs, coming soon
-                </a>
-              </li>
-            </ul>
-          </div>
-        </div>
-
-        {/* Copyright, links and the Profullstack webring: @profullstack/footer, server-rendered in app/layout.tsx */}
-        {bottom && <div className="mt-8">{bottom}</div>}
-      </div>
+      <nav
+        aria-label="Footer"
+        className="max-w-6xl mx-auto px-4 sm:px-6 py-6 flex flex-wrap items-center justify-center gap-x-5 gap-y-2 text-sm text-gray-400"
+      >
+        <span>
+          &copy; {new Date().getFullYear()}{" "}
+          <a href="https://profullstack.com/" className="hover:text-white transition-colors">Profullstack, Inc.</a>
+        </span>
+        {LINKS.map((link) => (
+          <Link key={link.href} href={link.href} className="hover:text-white transition-colors">
+            {link.label}
+          </Link>
+        ))}
+      </nav>
     </footer>
   );
 }
diff --git a/src/components/pit-footer.tsx b/src/components/pit-footer.tsx
new file mode 100644
index 00000000..11a9ca8b
--- /dev/null
+++ b/src/components/pit-footer.tsx
@@ -0,0 +1,21 @@
+/**
+ * The pit.world network footer, fetched on the server and rendered as the last
+ * thing in <body> on smshub.dev. Cached for an hour; any failure (timeout,
+ * non-200, odd body) renders nothing so the page never breaks.
+ */
+const PIT_FOOTER_URL = "https://pit.world/snippets/footer.html?site=smshub.dev";
+
+export async function PitFooter() {
+  try {
+    const res = await fetch(PIT_FOOTER_URL, {
+      next: { revalidate: 3600 },
+      signal: AbortSignal.timeout(3000),
+    });
+    if (!res.ok) return null;
+    const html = await res.text();
+    if (!html.includes("data-pit-footer")) return null;
+    return <div dangerouslySetInnerHTML={{ __html: html }} />;
+  } catch {
+    return null;
+  }
+}

From 13aff4eb6222167a788608def40fec67461704e8 Mon Sep 17 00:00:00 2001
From: Anthony Ettinger <anthony@profullstack.com>
Date: Mon, 19 Oct 2026 13:17:15 +0000
Subject: [PATCH 2/2] Keep @profullstack/footer as the site footer row

The webring row is being rolled out fleet-wide on purpose. The trimmed
links now go through @profullstack/footer (links + copyright + ring) as
the only footer row; the pit.world footer still follows it.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/app/layout.tsx        | 18 +++++++++++++++++-
 src/components/footer.tsx | 38 +++++++-------------------------------
 2 files changed, 24 insertions(+), 32 deletions(-)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index fea9e275..8a38c13d 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -7,6 +7,7 @@ import { ToastContainer } from "@/components/toast-container";
 import { ServiceWorkerRegister } from "@/components/sw-register";
 import { Header } from "@/components/header";
 import { Footer } from "@/components/footer";
+import { Footer as PfsFooter } from "@profullstack/footer/react";
 import { PitFooter } from "@/components/pit-footer";
 import { getSiteUrl } from "@/lib/site-url";
 import { priceUsdPerMonth } from "@/lib/plans";
@@ -178,7 +179,22 @@ export default async function RootLayout({
           <ToastProvider>
             <Header />
             <main className="flex-1"><AdUnit /><ReferralProvider>{children}</ReferralProvider></main>
-            <Footer />
+            <Footer
+              bottom={
+                <PfsFooter
+                  site="https://smshub.dev/"
+                  links={[
+                    { label: "Pricing", href: "/#pricing" },
+                    { label: "Rent a number", href: "/phonenumbers" },
+                    { label: "Docs", href: "/docs" },
+                    { label: "API", href: "/docs/api" },
+                    { label: "Privacy", href: "/privacy" },
+                    { label: "Terms", href: "/terms" },
+                    { label: "GitHub", href: "https://github.com/profullstack/smshub" },
+                  ]}
+                />
+              }
+            />
             <ToastContainer />
             <ServiceWorkerRegister />
           </ToastProvider>
diff --git a/src/components/footer.tsx b/src/components/footer.tsx
index 6e60720b..4ec54ca6 100644
--- a/src/components/footer.tsx
+++ b/src/components/footer.tsx
@@ -1,42 +1,18 @@
 "use client";
 
-import Link from "next/link";
 import { usePathname } from "next/navigation";
 
 const APP_ROUTES = ["/inbox", "/settings", "/campaigns", "/contacts", "/analytics", "/org"];
 
-const LINKS = [
-  { label: "Pricing", href: "/#pricing" },
-  { label: "Rent a number", href: "/phonenumbers" },
-  { label: "Docs", href: "/docs" },
-  { label: "API", href: "/docs/api" },
-  { label: "Privacy", href: "/privacy" },
-  { label: "Terms", href: "/terms" },
-  { label: "GitHub", href: "https://github.com/profullstack/smshub" },
-];
-
-export function Footer() {
+/**
+ * One footer row: links, copyright and the Profullstack ring, from
+ * @profullstack/footer (an async server component rendered in app/layout.tsx
+ * and handed down as `bottom`). Hidden on app routes.
+ */
+export function Footer({ bottom }: { bottom?: React.ReactNode }) {
   const pathname = usePathname();
 
-  // Hide footer on app routes
   if (APP_ROUTES.some((r) => pathname.startsWith(r))) return null;
 
-  return (
-    <footer className="border-t border-gray-800 bg-gray-950 mt-auto">
-      <nav
-        aria-label="Footer"
-        className="max-w-6xl mx-auto px-4 sm:px-6 py-6 flex flex-wrap items-center justify-center gap-x-5 gap-y-2 text-sm text-gray-400"
-      >
-        <span>
-          &copy; {new Date().getFullYear()}{" "}
-          <a href="https://profullstack.com/" className="hover:text-white transition-colors">Profullstack, Inc.</a>
-        </span>
-        {LINKS.map((link) => (
-          <Link key={link.href} href={link.href} className="hover:text-white transition-colors">
-            {link.label}
-          </Link>
-        ))}
-      </nav>
-    </footer>
-  );
+  return <footer className="border-t border-gray-800 bg-gray-950 mt-auto text-gray-400">{bottom}</footer>;
 }