Redesign Start Here page: numbered step cards, icons, connectors, mobile stack; v2.10.2

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

src/App.tsx

@@ -2610,46 +2610,57 @@ function ContactPage({ content }: { content: SiteContent }) {
   )
 }
 
+// Splits "Step 2: Use Q&A to Go Deeper" into its number and title so the number can be
+// rendered as a badge. Titles without a "Step N:" prefix fall back to the position.
+function splitStepTitle(title: string | undefined, fallbackNumber: number) {
+  const text = (title ?? '').trim()
+  const match = /^step\s*(\d+)\s*[:.\-–—]\s*(.+)$/i.exec(text)
+  return match ? { number: match[1], title: match[2] } : { number: String(fallbackNumber), title: text }
+}
+
 function StartHerePage({ content }: { content: SiteContent }) {
   const siteTitle = content.seo?.title || DEFAULTS.seo.title
   usePageMeta(
     `Start Here | ${siteTitle}`,
     content.startHereIntro || 'A beginner\'s guide to Verse by Verse with Nate.',
   )
+  const steps = [
+    { icon: '🎧', title: content.startHereStep1Title, body: content.startHereStep1Body, cta: content.startHereStep1Cta, to: '/episodes', primary: false },
+    { icon: '🔎', title: content.startHereStep2Title, body: content.startHereStep2Body, cta: content.startHereStep2Cta, to: '/questions', primary: false },
+    { icon: '✉️', title: content.startHereStep3Title, body: content.startHereStep3Body, cta: content.startHereStep3Cta, to: '/contact', primary: true },
+  ]
   return (
     <div className="site">
       <SiteHeader content={content} />
       <SiteSearchBar content={content} />
-      <main className="thanks-page" aria-label="Start Here">
-        <div className="thanks-card" style={{ maxWidth: '980px', width: '100%' }}>
+      <main className="start-page" aria-labelledby="start-here-heading">
+        <header className="start-hero">
           <p className="eyebrow">Verse by Verse with Nate</p>
-          <h1>{content.startHereHeading}</h1>
-          <p>
-            {content.startHereIntro}
-          </p>
+          <h1 id="start-here-heading">{content.startHereHeading}</h1>
+          {content.startHereIntro && <p className="start-intro">{content.startHereIntro}</p>}
+        </header>
 
-          <div className="start-grid" style={{ marginTop: '1.25rem' }}>
-            <article className="start-card">
-              <h3>{content.startHereStep1Title}</h3>
-              <p>{content.startHereStep1Body}</p>
-              <Link to="/episodes" className="btn-secondary">{content.startHereStep1Cta}</Link>
-            </article>
-            <article className="start-card">
-              <h3>{content.startHereStep2Title}</h3>
-              <p>{content.startHereStep2Body}</p>
-              <Link to="/questions" className="btn-secondary">{content.startHereStep2Cta}</Link>
-            </article>
-            <article className="start-card">
-              <h3>{content.startHereStep3Title}</h3>
-              <p>{content.startHereStep3Body}</p>
-              <Link to="/contact" className="btn-primary">{content.startHereStep3Cta}</Link>
-            </article>
-          </div>
+        <ol className="start-steps">
+          {steps.map((step, index) => {
+            const { number, title } = splitStepTitle(step.title, index + 1)
+            return (
+              <li className="start-step" key={step.to}>
+                <div className="start-step-top">
+                  <span className="start-step-number" aria-hidden="true">{number}</span>
+                  <span className="start-step-icon" aria-hidden="true">{step.icon}</span>
+                </div>
+                <p className="start-step-label">Step {number}</p>
+                <h2 className="start-step-title">{title}</h2>
+                <p className="start-step-body">{step.body}</p>
+                <Link to={step.to} className={`${step.primary ? 'btn-primary' : 'btn-secondary'} start-step-cta`}>
+                  {step.cta} <span aria-hidden="true">→</span>
+                </Link>
+              </li>
+            )
+          })}
+        </ol>
 
-          <div style={{ marginTop: '1.4rem' }}>
-            <Link to="/" className="btn-secondary">Back to Site</Link>
-          </div>
-        </div>
+        <p className="start-back"><Link to="/">← Back to site</Link></p>
       </main>
       <SiteFooter content={content} />
       <AnalyticsConsentBanner content={content} />