From b9621ede1ab22c2fe28a076978c7b0b1a2f83eff Mon Sep 17 00:00:00 2001
From: Ryan Salazar <ryan.salazar@relevantmediaproperties.com>
Date: Tue, 16 Jun 2026 00:46:48 +0000
Subject: [PATCH] footer: surface RMP lockup next to RMP mention
 (light/dark-aware RmpMark)

---
 src/components/Footer.tsx  |  10 ++-
 src/components/RmpMark.tsx | 129 +++++++++++++++++++++++++++++++++++++
 2 files changed, 136 insertions(+), 3 deletions(-)
 create mode 100644 src/components/RmpMark.tsx

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 692a06f..0d3e9d5 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import Link from "next/link";
 import AppImage from "@/components/ui/AppImage";
 import AnimatedLogo from "@/components/AnimatedLogo";
+import RmpMark from "@/components/RmpMark";
 import {
   LinkedInIcon,
   InstagramIcon,
@@ -137,14 +138,17 @@ export default function Footer() {
           <div className="flex items-center gap-4 text-xs font-body text-[#475569]">
             <Link href="/privacy" className="hover:text-[#1D4ED8] transition-colors">Privacy Policy</Link>
             <Link href="/terms" className="hover:text-[#1D4ED8] transition-colors">Terms of Service</Link>
-            <span>
-              © 2026 <a
+            <span className="inline-flex items-center gap-2 flex-wrap">
+              © 2026{' '}
+              <a
                 href="https://www.relevantmediaproperties.com/"
                 target="_blank"
                 rel="noopener noreferrer"
                 className="hover:text-[#1D4ED8] transition-colors underline-offset-2 hover:underline">
                 Relevant Media Properties
-              </a>. All rights reserved.
+              </a>
+              <RmpMark mode="dark" height={20} />
+              . All rights reserved.
             </span>
           </div>
         </div>
diff --git a/src/components/RmpMark.tsx b/src/components/RmpMark.tsx
new file mode 100644
index 0000000..d2ab710
--- /dev/null
+++ b/src/components/RmpMark.tsx
@@ -0,0 +1,129 @@
+import React from 'react';
+
+/**
+ * RmpMark — compact static "Relevant Media Properties" lockup placed
+ * inline next to any RMP text mention on a property site.
+ *
+ * Variants:
+ *   mode="light" → for placement on dark backgrounds (BB, BE, SMB, TCG footers)
+ *   mode="dark"  → for placement on light backgrounds (AV footer, white pages)
+ *
+ * Mirrors the geometry of the canonical RelevantMediaPropertiesLogo on the
+ * RMP site but ships a fully static inline SVG (no JS, no animation) so it
+ * works inside React Server Components and email-template renders.
+ *
+ * Link target is always the public RMP homepage.
+ */
+export type RmpMarkMode = 'light' | 'dark';
+
+interface RmpMarkProps {
+  /** 'light' = light wordmark on dark bg; 'dark' = dark wordmark on light bg. */
+  mode?: RmpMarkMode;
+  /** Vertical size in px. Width is auto via SVG aspect ratio. Default 22. */
+  height?: number;
+  /** Extra wrapper classes. Wrapper is inline-flex by default. */
+  className?: string;
+  /** Override the link href — defaults to the RMP homepage. */
+  href?: string;
+  /** Hide the link wrapper (renders just the SVG). */
+  asImage?: boolean;
+}
+
+export default function RmpMark({
+  mode = 'light',
+  height = 22,
+  className = '',
+  href = 'https://relevantmediaproperties.com',
+  asImage = false,
+}: RmpMarkProps) {
+  const inkColor = mode === 'light' ? '#F4F6FF' : '#0A0A0A';
+  const accent = '#D60701';
+
+  const VB_W = 220;
+  const VB_H = 44;
+  const CELL = 9.5;
+  const GAP = 1.5;
+  const TOTAL_GRID = 3 * CELL + 2 * GAP;
+  const GRID_Y = (VB_H - TOTAL_GRID) / 2;
+  const WM_X = TOTAL_GRID + 10;
+  const ACCENT_SET = new Set<string>(['0-2', '2-0']);
+
+  const cells: { id: string; x: number; y: number; isAccent: boolean }[] = [];
+  for (let r = 0; r < 3; r++) {
+    for (let c = 0; c < 3; c++) {
+      const id = `${r}-${c}`;
+      cells.push({
+        id,
+        x: c * (CELL + GAP),
+        y: r * (CELL + GAP),
+        isAccent: ACCENT_SET.has(id),
+      });
+    }
+  }
+
+  const svg = (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox={`0 0 ${VB_W} ${VB_H}`}
+      height={height}
+      width="auto"
+      preserveAspectRatio="xMinYMid meet"
+      role="img"
+      aria-label="Relevant Media Properties"
+      style={{ display: 'inline-block', verticalAlign: 'middle' }}
+    >
+      <g transform={`translate(0, ${GRID_Y})`}>
+        {cells.map((c) => (
+          <rect
+            key={c.id}
+            x={c.x}
+            y={c.y}
+            width={CELL}
+            height={CELL}
+            rx="0.5"
+            ry="0.5"
+            fill={c.isAccent ? accent : inkColor}
+          />
+        ))}
+      </g>
+      <g transform={`translate(${WM_X}, 0)`}>
+        <text
+          x="0"
+          y="22"
+          fill={inkColor}
+          fontFamily="'Inter','SF Pro Display',system-ui,-apple-system,sans-serif"
+          fontWeight="800"
+          fontSize="17"
+          letterSpacing="-0.4"
+        >
+          RELEVANT
+        </text>
+        <text
+          x="0"
+          y="34"
+          fill={accent}
+          fontFamily="'Inter','SF Pro Display',system-ui,-apple-system,sans-serif"
+          fontWeight="700"
+          fontSize="7"
+          letterSpacing="3.4"
+        >
+          MEDIA PROPERTIES
+        </text>
+      </g>
+    </svg>
+  );
+
+  if (asImage) return svg;
+  return (
+    <a
+      href={href}
+      target={href.startsWith('http') ? '_blank' : undefined}
+      rel={href.startsWith('http') ? 'noopener noreferrer' : undefined}
+      aria-label="Visit Relevant Media Properties"
+      className={`inline-flex items-center align-middle opacity-90 hover:opacity-100 transition-opacity ${className}`}
+      style={{ lineHeight: 0 }}
+    >
+      {svg}
+    </a>
+  );
+}