Add Ko-fi support section with QR code to About page; v1.1.47

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "siteforge",
   "private": true,
-  "version": "1.1.46",
+  "version": "1.1.47",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/AdminPage.tsx

@@ -937,6 +937,7 @@ const FIELDS: Array<{ key: StringField; label: string; multiline?: boolean; sect
   { key: 'platformFacebookUrl', label: 'Platform — Facebook URL', section: 'global' },
   { key: 'platformCreatorUrl', label: 'Platform — Creator Profile URL', section: 'global' },
   { key: 'platformKofiUrl', label: 'Platform — Ko-fi URL', section: 'global' },
+  { key: 'platformKofiQrUrl', label: 'Platform — Ko-fi QR Code Image URL', section: 'global' },
   { key: 'welcomeEmailSubject', label: 'Welcome Email — Subject', section: 'global' },
   { key: 'welcomeEmailGreetingPrefix', label: 'Welcome Email — Greeting Prefix', section: 'global' },
   { key: 'welcomeEmailIntro', label: 'Welcome Email — Intro Paragraph', multiline: true, section: 'global' },

src/App.css

@@ -12006,3 +12006,13 @@
 .ct-history-ep-section { margin-top: 0.6rem; border-top: 1px solid rgba(255,255,255,0.07); padding-top: 0.6rem; }
 .ct-history-ep-label { font-size: 0.72rem; color: #6b7280; margin: 0 0 0.4rem; text-transform: uppercase; letter-spacing: 0.04em; }
 .ct-history-item--ep { background: rgba(99,102,241,0.07); border-left: 2px solid #6366f1; }
+
+/* ── Ko-fi support section ───────────────────────────────────────────────── */
+.section-kofi-support { background: var(--bg-alt, #f9f6f0); padding: 4rem 1.5rem; text-align: center; }
+.kofi-support-inner { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
+.kofi-support-desc { font-size: 1rem; line-height: 1.7; color: var(--text-muted, #555); max-width: 480px; }
+.kofi-qr-wrap { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; margin: 0.5rem 0; }
+.kofi-qr-img { width: 180px; height: 180px; border-radius: 8px; border: 1px solid rgba(0,0,0,0.1); }
+.kofi-qr-caption { font-size: 0.8rem; color: var(--text-muted, #888); }
+.kofi-btn { display: inline-block; background: #29abe0; color: #fff; font-size: 0.95rem; font-weight: 600; padding: 0.75rem 1.75rem; border-radius: 6px; text-decoration: none; transition: background 0.2s; }
+.kofi-btn:hover { background: #1a91c7; }

src/App.tsx

@@ -557,6 +557,35 @@ function PlatformButtons({ content }: { content: SiteContent }) {
   )
 }
 
+function KofiSupportSection({ content }: { content: SiteContent }) {
+  const kofiUrl = content.platformKofiUrl
+  const qrUrl = content.platformKofiQrUrl
+  if (!kofiUrl && !qrUrl) return null
+  return (
+    <section className="section-kofi-support" aria-label="Support the show">
+      <div className="section-inner kofi-support-inner">
+        <p className="eyebrow">Support the Ministry</p>
+        <h2>Help Keep the Word Going</h2>
+        <p className="kofi-support-desc">
+          This podcast and study resources are listener-supported. If God has used this ministry in your life,
+          consider buying me a coffee — it goes directly toward keeping the teaching free for everyone.
+        </p>
+        {qrUrl && (
+          <div className="kofi-qr-wrap">
+            <img src={qrUrl} alt="Ko-fi donation QR code" className="kofi-qr-img" />
+            <p className="kofi-qr-caption">Scan to give on Ko-fi</p>
+          </div>
+        )}
+        {kofiUrl && (
+          <a href={kofiUrl} target="_blank" rel="noreferrer" className="kofi-btn">
+            ☕ Support on Ko-fi
+          </a>
+        )}
+      </div>
+    </section>
+  )
+}
+
 function AboutSection({ content }: { content: SiteContent }) {
   return (
     <section className="section-about" aria-label="About the show">
@@ -1894,6 +1923,7 @@ function AboutPage({ content }: { content: SiteContent }) {
       <SiteSearchBar content={content} />
       <PageBanner eyebrow="About" title="About the Show" />
       <AboutSection content={content} />
+      <KofiSupportSection content={content} />
       <TestimonialsSection testimonials={content.testimonials ?? []} />
       <CustomBlocksSection content={content} page="about" />
       <SiteFooter content={content} />

src/content.ts

@@ -200,6 +200,7 @@ export interface SiteContent {
   platformFacebookUrl: string
   platformCreatorUrl: string
   platformKofiUrl?: string
+  platformKofiQrUrl?: string
   // ── Welcome Email ──
   welcomeEmailSubject: string
   welcomeEmailGreetingPrefix: string
@@ -418,6 +419,7 @@ export const DEFAULTS: SiteContent = {
   platformFacebookUrl: 'https://facebook.com/versebyversewithnate',
   platformCreatorUrl: 'https://creators.spotify.com/pod/profile/nmemmert/',
   platformKofiUrl: 'https://ko-fi.com/versebyversewithnate',
+  platformKofiQrUrl: '/images/kofi-qr.png',
   welcomeEmailSubject: 'Welcome to Verse by Verse with Nate',
   welcomeEmailGreetingPrefix: 'Glad you\'re here',
   welcomeEmailIntro: 'Thanks for subscribing to Verse by Verse with Nate - a Bible teaching podcast where we slow down, dig into the text, and pull out the nuggets God has for us word by word.',