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>

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "siteforge",
-  "version": "2.27.0",
+  "version": "2.28.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "siteforge",
-      "version": "2.27.0",
+      "version": "2.28.0",
       "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.27.0",
+  "version": "2.28.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/App.css

@@ -978,124 +978,35 @@
 }
 
 /* ── About ── */
-.section-about {
-  background: #0d0d0d;
-  padding: 5rem 0;
-}
 
-.section-about .section-inner {
-  max-width: 1160px;
-}
 
-.about-inner {
-  display: grid;
-  grid-template-columns: minmax(340px, 420px) 1fr;
-  gap: 4.5rem;
-  align-items: start;
-}
 
-.about-photo {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
 
-.about-photo img {
-  display: block;
-  width: 100%;
-  border-radius: 14px;
-  box-shadow:
-    0 12px 50px rgba(0, 0, 0, 0.55),
-    0 0 0 1px rgba(201, 168, 76, 0.15);
-}
 
-.about-photo-divider {
-  width: 86%;
-  height: 1px;
-  margin: 0.3rem auto 0.45rem;
-  background: linear-gradient(
-    90deg,
-    rgba(201, 168, 76, 0),
-    rgba(201, 168, 76, 0.6) 20%,
-    rgba(201, 168, 76, 0.9) 50%,
-    rgba(201, 168, 76, 0.6) 80%,
-    rgba(201, 168, 76, 0)
-  );
-}
 
-.about-nate-copy {
-  padding: 0;
-}
 
-.about-nate-copy .eyebrow {
-  margin-bottom: 0.3rem;
-}
 
-.about-nate-rule {
-  width: 170px;
-  height: 1px;
-  background: linear-gradient(90deg, var(--brand-gold), rgba(201, 168, 76, 0.18));
-  margin-bottom: 0.8rem;
-}
 
-.about-nate-copy p {
-  font-family: var(--brand-font-body);
-  font-weight: 400;
-  font-size: 1.2rem;
-  line-height: 1.7;
-  color: var(--brand-warm-white);
-  margin: 0 0 1rem;
-  padding: 0;
-  opacity: 0.9;
-}
 
-.about-nate-cta {
-  display: inline-block;
-  font-family: var(--brand-font-body);
-  font-size: 0.95rem;
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
-  color: var(--brand-gold);
-  text-decoration: none;
-  margin-top: 0.35rem;
-  padding-bottom: 0.1rem;
-  border-bottom: 1px solid rgba(201, 168, 76, 0.45);
-  transition: color 180ms ease, border-color 180ms ease;
-}
 
-.about-nate-cta:hover {
-  color: var(--brand-warm-white);
-  border-bottom-color: rgba(246, 232, 186, 0.85);
-}
 
-.about-verse-art {
-  display: block;
-  width: 100%;
-  margin-top: 1.1rem;
-  border-radius: 14px;
-  box-shadow:
-    0 12px 50px rgba(0, 0, 0, 0.55),
-    0 0 0 1px rgba(201, 168, 76, 0.15);
-}
 
-.about-text h2 {
-  font-family: var(--brand-font-heading);
-  font-size: clamp(1.8rem, 3vw, 2.4rem);
-  color: var(--brand-warm-white);
-  margin: 0.5rem 0 1.2rem;
-  font-weight: 700;
-}
 
-.about-text p {
+
-  font-family: var(--brand-font-body);
+
-  font-weight: 400;
+
-  font-size: 1.2rem;
+
-  line-height: 1.7;
+
-  color: var(--brand-warm-white);
+
-  margin: 0 0 1rem;
+
-  padding: 0;
+
-  opacity: 0.9;
+
-}
+
+
+
+
+
+
 
 /* ── Homepage Newsletter ── */
 .section-newsletter {
@@ -7667,15 +7578,9 @@ a.study-track-card:hover {
     justify-content: center;
   }
 
-  .about-inner {
+  
-    grid-template-columns: 1fr;
-    gap: 2rem;
-  }
 
-  .about-photo {
+  
-    max-width: 260px;
-    margin: 0 auto;
-  }
 
   .series-card {
     grid-template-columns: 1fr;
@@ -13500,9 +13405,7 @@ a.study-track-card:hover {
   }
 
   /* About copy was set larger than body text everywhere else */
-  .about-inner p {
+  
-    font-size: 1.0625rem;
-  }
 
   /* Nothing readable below 12px */
   .study-module-lesson,
@@ -13553,9 +13456,7 @@ a.study-track-card:hover {
     font-size: clamp(1.4rem, 2.4vw, 1.625rem);
   }
 
-  .about-inner p {
+  
-    font-size: 1.0625rem;
-  }
 }
 
 /* ── Resources page (tabs + compact grids) ─────────────────────────────── */
@@ -13750,3 +13651,56 @@ a.study-track-card:hover {
   .cx-row { grid-template-columns: minmax(0, 1fr); }
 }
 
+/* ── About page ────────────────────────────────────────────────────────── */
+.ab-section { padding: 2.5rem 0 1.5rem; }
+.ab-intro { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 2.5rem; align-items: center; }
+.ab-photo { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 16px; border: 1px solid var(--brand-gold-dark); box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5); }
+.ab-intro-copy { display: flex; flex-direction: column; gap: 0.9rem; align-items: flex-start; }
+.ab-intro-copy .eyebrow { margin: 0; }
+.ab-bio { margin: 0; font-size: 1.1rem; line-height: 1.75; color: var(--brand-warm-white); max-width: 60ch; }
+.ab-cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.4rem; }
+
+.ab-show {
+  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 2.5rem; align-items: center;
+  margin-top: 3rem; padding: 2rem; border-radius: 16px;
+  background: var(--brand-black-3); border: 1px solid var(--brand-border);
+}
+.ab-show-copy { display: flex; flex-direction: column; gap: 0.8rem; }
+.ab-show-copy .eyebrow { margin: 0; }
+#root > :not(.admin-shell) .ab-show-copy h2 { margin: 0; line-height: 1.15; }
+.ab-show-copy p:not(.eyebrow) { margin: 0; font-size: 1.02rem; line-height: 1.7; color: var(--brand-muted); max-width: 60ch; }
+.ab-verse-art { width: 100%; height: auto; border-radius: 12px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5); }
+
+.ab-paths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.5rem; }
+.ab-path {
+  display: flex; flex-direction: column; gap: 0.35rem; padding: 1.15rem; text-decoration: none; color: inherit;
+  background: transparent; border: 1px solid var(--brand-border); border-radius: 12px;
+  transition: border-color 150ms, transform 150ms;
+}
+.ab-path:hover { border-color: var(--brand-gold-dark); transform: translateY(-2px); }
+.ab-path-title { font-family: var(--brand-font-heading); font-size: 1.35rem; font-weight: 600; color: var(--brand-warm-white); }
+.ab-path-text { font-size: 0.92rem; line-height: 1.5; color: var(--brand-muted); }
+.ab-path-go { margin-top: 0.2rem; font-size: 0.85rem; color: var(--brand-gold); }
+
+@media (max-width: 900px) {
+  .ab-intro { grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 1.75rem; }
+  .ab-show { grid-template-columns: minmax(0, 1fr); padding: 1.5rem; }
+  .ab-verse-art { max-width: 420px; justify-self: center; }
+  .ab-paths { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
+  .ab-path { padding: 0.9rem 1rem; }
+  .ab-path-go { display: none; }
+}
+@media (max-width: 600px) {
+  .ab-section { padding: 1.5rem 0 1rem; }
+  .ab-intro { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
+  .ab-photo { max-width: 200px; aspect-ratio: 1 / 1; }
+  .ab-bio { font-size: 1.02rem; }
+  .ab-show { margin-top: 2rem; padding: 1.15rem; gap: 1.25rem; }
+  .ab-cta-row .btn-primary, .ab-cta-row .btn-secondary { flex: 1 1 100%; justify-content: center; text-align: center; }
+}
+
+@media (max-width: 600px) {
+  .section-testimonials { padding-top: 2rem; padding-bottom: 2rem; }
+  .cx-support { padding-bottom: 2rem; }
+}
+

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">
+    <section className="ab-section" aria-label="About the show">
-      <div className="section-inner about-inner">
+      <div className="section-inner">
-        <div className="about-photo">
+        <div className="ab-intro">
-          <img src={content.aboutPhotoUrl || '/images/nate-photo.jpeg'} alt="Nate Emmert" />
+          <img
-          <div className="about-photo-divider" aria-hidden="true" />
+            src={content.aboutPhotoUrl || '/images/nate-photo.jpeg'}
-          <div className="about-nate-copy">
+            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 className="ab-bio">{content.aboutNate}</p>
-            <p>{content.aboutNate}</p>
+            <div className="ab-cta-row">
-            <Link to="/episodes" className="about-nate-cta">{content.aboutListenBtnLabel || 'Listen Now ↓'}</Link>
+              <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>}
+        <div className="ab-show">
-          <h2>{content.aboutShowHeading}</h2>
+          <div className="ab-show-copy">
-          <p>{content.aboutShowP1}</p>
+            {content.aboutShowEyebrow && <p className="eyebrow">{content.aboutShowEyebrow}</p>}
-          <p>{content.aboutShowP2}</p>
+            <h2>{content.aboutShowHeading}</h2>
-          <div className="rule-divider" aria-hidden="true" />
+            <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} />