Contact page redesign: message-type chips with hints, side-by-side names, character count, sticky profile card, form first on phones, compact Ko-fi card; v2.27.0

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

src/App.tsx

@@ -637,25 +637,29 @@ function KofiSupportSection({ content }: { content: SiteContent }) {
   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>
+    <section className="cx-support" aria-label="Support the show">
+      <div className="section-inner">
+       <div className="cx-support-card">
+        <div className="cx-support-copy">
+          <p className="eyebrow">Support the Ministry</p>
+          <h2>Help Keep the Word Going</h2>
+          <p>
+            This podcast and its study resources are listener-supported. If God has used this ministry in your life,
+            consider buying me a coffee. It goes straight toward keeping the teaching free for everyone.
+          </p>
+          {kofiUrl && (
+            <a href={kofiUrl} target="_blank" rel="noreferrer" className="kofi-btn">
+              ☕ Support on Ko-fi
+            </a>
+          )}
+        </div>
         {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>
+          <figure className="cx-support-qr">
+            <img src={qrUrl} alt="Ko-fi donation QR code" />
+            <figcaption>Scan to give on Ko-fi</figcaption>
+          </figure>
         )}
+       </div>
       </div>
     </section>
   )
@@ -694,64 +698,59 @@ function AboutSection({ content }: { content: SiteContent }) {
 
 
 function ContactSection({ content }: { content: SiteContent }) {
+  const point = (text: string, icon: ReactElement) => (
+    <div className="cx-point">
+      {icon}
+      <span>{text}</span>
+    </div>
+  )
   return (
-    <section className="section-contact" id="contact" aria-label="Contact form">
-      <div className="section-inner contact-inner">
-        <div className="contact-copy">
-          <div className="contact-card">
-            <div className="contact-profile">
-              <img
-                src={content.contactPhotoUrl || '/images/nate-contact-photo.png'}
-                alt={content.contactName || 'Nate'}
-                className="contact-profile-photo"
-              />
-              <div className="contact-profile-meta">
-                <p className="contact-profile-name">{content.contactName || 'Nate'}</p>
-                <p className="contact-profile-role">{content.contactRole || 'Bible teacher · Lynchburg, VA'}</p>
-              </div>
+    <section className="cx-section" id="contact" aria-label="Contact form">
+      <div className="section-inner cx-layout">
+        <aside className="cx-side">
+          <div className="cx-profile">
+            <img
+              src={content.contactPhotoUrl || '/images/nate-contact-photo.png'}
+              alt={content.contactName || 'Nate'}
+              className="cx-photo"
+            />
+            <div>
+              <p className="cx-name">{content.contactName || 'Nate'}</p>
+              <p className="cx-role">{content.contactRole || 'Bible teacher · Lynchburg, VA'}</p>
             </div>
-
-            {content.contactQuote && (
-              <blockquote className="contact-quote">
-                <p>"{content.contactQuote}"</p>
-              </blockquote>
-            )}
-
-            {content.contactIntro && (
-              <p className="contact-intro">{content.contactIntro}</p>
-            )}
-
-            <div className="contact-points" aria-label="Contact response details">
-              {content.contactPoint1 && (
-                <div className="contact-point">
-                  <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
-                    <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
-                  </svg>
-                  <span>{content.contactPoint1}</span>
-                </div>
-              )}
-              {content.contactPoint2 && (
-                <div className="contact-point">
-                  <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
-                    <circle cx="12" cy="12" r="10" />
-                    <polyline points="12 6 12 12 16 14" />
-                  </svg>
-                  <span>{content.contactPoint2}</span>
-                </div>
-              )}
-            </div>
-
-            {content.contactVerse && (
-              <div className="contact-scripture">
-                <p>
-                  "{content.contactVerse}" -{' '}
-                  <span className="contact-scripture-ref">{content.contactVerseRef}</span>
-                </p>
-              </div>
-            )}
           </div>
+
+          {content.contactQuote && <blockquote className="cx-quote">&ldquo;{content.contactQuote}&rdquo;</blockquote>}
+          {content.contactIntro && <p className="cx-intro">{content.contactIntro}</p>}
+
+          {(content.contactPoint1 || content.contactPoint2) && (
+            <div className="cx-points" aria-label="Contact response details">
+              {content.contactPoint1 && point(content.contactPoint1, (
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                  <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+                </svg>
+              ))}
+              {content.contactPoint2 && point(content.contactPoint2, (
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                  <circle cx="12" cy="12" r="10" />
+                  <polyline points="12 6 12 12 16 14" />
+                </svg>
+              ))}
+            </div>
+          )}
+
+          {content.contactVerse && (
+            <p className="cx-verse">
+              &ldquo;{content.contactVerse}&rdquo; <span>{content.contactVerseRef}</span>
+            </p>
+          )}
+
+          <Link to="/questions" className="cx-qa-link">Browse answered questions →</Link>
+        </aside>
+
+        <div className="cx-form-card">
+          <ContactForm />
         </div>
-        <ContactForm />
       </div>
     </section>
   )