About page redesign: photo + bio intro with actions, compact about-the-show card, where-to-start links, testimonials before the support card; v2.28.0

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

src/App.tsx

@@ -666,31 +666,54 @@ function KofiSupportSection({ content }: { content: SiteContent }) {
 }
 
 function AboutSection({ content }: { content: SiteContent }) {
+  const paths = [
+    { to: '/start-here', title: 'New here?', text: 'A short path through the show, one step at a time.' },
+    { to: '/episodes', title: 'Listen', text: 'Every episode, newest first.' },
+    { to: '/study', title: 'Study with us', text: 'Self-paced Bible studies with notes and discussion.' },
+  ]
   return (
-    <section className="section-about" aria-label="About the show">
-      <div className="section-inner about-inner">
-        <div className="about-photo">
-          <img src={content.aboutPhotoUrl || '/images/nate-photo.jpeg'} alt="Nate Emmert" />
-          <div className="about-photo-divider" aria-hidden="true" />
-          <div className="about-nate-copy">
+    <section className="ab-section" aria-label="About the show">
+      <div className="section-inner">
+        <div className="ab-intro">
+          <img
+            src={content.aboutPhotoUrl || '/images/nate-photo.jpeg'}
+            alt="Nate Emmert"
+            className="ab-photo"
+          />
+          <div className="ab-intro-copy">
             <p className="eyebrow">{content.aboutEyebrow || 'About Nate'}</p>
-            <div className="about-nate-rule" aria-hidden="true" />
-            <p>{content.aboutNate}</p>
-            <Link to="/episodes" className="about-nate-cta">{content.aboutListenBtnLabel || 'Listen Now ↓'}</Link>
+            <p className="ab-bio">{content.aboutNate}</p>
+            <div className="ab-cta-row">
+              <Link to="/episodes" className="btn-primary">{content.aboutListenBtnLabel || 'Listen Now ↓'}</Link>
+              <Link to="/start-here" className="btn-secondary">New here? Start here</Link>
+            </div>
           </div>
         </div>
-        <div className="about-text">
-          {content.aboutShowEyebrow && <p className="eyebrow">{content.aboutShowEyebrow}</p>}
-          <h2>{content.aboutShowHeading}</h2>
-          <p>{content.aboutShowP1}</p>
-          <p>{content.aboutShowP2}</p>
-          <div className="rule-divider" aria-hidden="true" />
+
+        <div className="ab-show">
+          <div className="ab-show-copy">
+            {content.aboutShowEyebrow && <p className="eyebrow">{content.aboutShowEyebrow}</p>}
+            <h2>{content.aboutShowHeading}</h2>
+            <p>{content.aboutShowP1}</p>
+            <p>{content.aboutShowP2}</p>
+          </div>
           <img
             src={content.aboutVerseArtUrl || '/images/hebrews-4-12-verse-art.png'}
             alt="Hebrews 4:12 verse artwork"
-            className="about-verse-art"
+            className="ab-verse-art"
+            loading="lazy"
           />
         </div>
+
+        <div className="ab-paths">
+          {paths.map(p => (
+            <Link key={p.to} to={p.to} className="ab-path">
+              <span className="ab-path-title">{p.title}</span>
+              <span className="ab-path-text">{p.text}</span>
+              <span className="ab-path-go">Go →</span>
+            </Link>
+          ))}
+        </div>
       </div>
     </section>
   )
@@ -2496,8 +2519,8 @@ 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 ?? []} />
+      <KofiSupportSection content={content} />
       <CustomBlocksSection content={content} page="about" />
       <SiteFooter content={content} />
       <AnalyticsConsentBanner content={content} />