Home page: add Ko-fi as a third card beside newsletter and share; v2.32.1

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

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "siteforge",
-  "version": "2.32.0",
+  "version": "2.32.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "siteforge",
-      "version": "2.32.0",
+      "version": "2.32.1",
       "dependencies": {
         "@aws-sdk/client-s3": "^3.1135.0",
         "@dnd-kit/core": "^6.3.1",

package.json

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

src/App.css

@@ -13854,7 +13854,7 @@ a.study-track-card:hover {
 .section-prism { padding: 3.5rem 0; }
 
 .section-home-connect { background: #0c0c08; border-top: 1px solid rgba(201, 168, 76, 0.15); border-bottom: 1px solid rgba(201, 168, 76, 0.15); padding: 3.5rem 0; }
-.home-connect-grid { max-width: 1100px; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
+.home-connect-grid { max-width: 1200px; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; }
 .home-connect-card { background: rgba(26, 26, 21, 0.7); border: 1px solid rgba(201, 168, 76, 0.18); border-radius: 14px; padding: 2rem; }
 .home-connect-card--newsletter { text-align: center; }
 .home-connect-card--newsletter .newsletter-inner { max-width: none; }
@@ -13866,7 +13866,7 @@ a.study-track-card:hover {
 .home-more .section-qa-callout, .home-more .section-tfl, .home-more .section-external-sites { padding-top: 3rem; padding-bottom: 3rem; }
 
 @media (max-width: 860px) {
-  .home-now-grid, .home-connect-grid { grid-template-columns: 1fr; gap: 2rem; }
+  .home-now-grid { grid-template-columns: 1fr; gap: 2rem; }
 }
 @media (max-width: 520px) {
   .home-series-card { grid-template-columns: 84px 1fr; gap: 0.9rem; padding: 0.9rem; }

src/App.tsx

@@ -1473,6 +1473,21 @@ function LandingPage({ content }: { content: SiteContent }) {
               <img src={content.shareQrImageUrl || '/images/qr-code.jpg'} alt="QR code to share the show" className="share-qr" />
             </div>
           </div>
+          {(content.platformKofiUrl || content.platformKofiQrUrl) && (
+            <div className="home-connect-card home-connect-card--kofi">
+              <p className="eyebrow">Support the Ministry</p>
+              <h2 className="section-heading" style={{ textAlign: 'left', marginBottom: '0.75rem' }}>Help keep the Word going</h2>
+              <p className="share-p">This show is listener-supported. Your gift keeps the teaching free for everyone.</p>
+              <div className="home-connect-share-row">
+                {content.platformKofiUrl && (
+                  <a href={content.platformKofiUrl} target="_blank" rel="noreferrer" className="kofi-btn">☕ Support on Ko-fi</a>
+                )}
+                {content.platformKofiQrUrl && (
+                  <img src={content.platformKofiQrUrl} alt="Ko-fi donation QR code" className="share-qr" onError={e => { e.currentTarget.style.display = 'none' }} />
+                )}
+              </div>
+            </div>
+          )}
         </div>
       </section>