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

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

package.json

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

src/App.css

@@ -7854,6 +7854,171 @@
   cursor: pointer;
   transition: all 0.2s ease;
 }
+/* ── Start Here page ── */
+.start-page {
+  padding: clamp(2.5rem, 6vw, 4.5rem) 1.25rem clamp(3rem, 7vw, 5rem);
+  background:
+    radial-gradient(ellipse at top, rgba(201, 168, 76, 0.12) 0%, transparent 55%),
+    var(--brand-black);
+}
+
+.start-hero {
+  max-width: 720px;
+  margin: 0 auto clamp(2rem, 5vw, 3.25rem);
+  text-align: center;
+}
+
+.start-hero h1 {
+  font-family: var(--brand-font-heading);
+  font-size: clamp(2.1rem, 5.5vw, 3.4rem);
+  line-height: 1.1;
+  color: var(--brand-warm-white);
+  margin: 0.4rem 0 1rem;
+}
+
+.start-intro {
+  font-family: var(--brand-font-body);
+  font-size: 1.1rem;
+  font-weight: 300;
+  line-height: 1.7;
+  color: var(--brand-muted);
+  margin: 0;
+}
+
+.start-steps {
+  list-style: none;
+  margin: 0 auto;
+  padding: 0;
+  max-width: 1040px;
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 1.25rem;
+}
+
+.start-step {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  padding: 1.5rem 1.5rem 1.6rem;
+  background: linear-gradient(180deg, rgba(26, 26, 26, 0.95), rgba(16, 16, 16, 0.95));
+  border: 1px solid rgba(201, 168, 76, 0.22);
+  border-radius: 16px;
+  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.35);
+  text-align: left;
+  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.start-step:hover {
+  transform: translateY(-3px);
+  border-color: rgba(201, 168, 76, 0.55);
+  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
+}
+
+/* Connector between cards on the desktop row */
+.start-step:not(:last-child)::after {
+  content: '';
+  position: absolute;
+  top: 2.6rem;
+  right: -1.25rem;
+  width: 1.25rem;
+  border-top: 1px dashed rgba(201, 168, 76, 0.45);
+}
+
+.start-step-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 1.1rem;
+}
+
+.start-step-number {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.6rem;
+  height: 2.6rem;
+  border-radius: 50%;
+  background: rgba(201, 168, 76, 0.14);
+  border: 1px solid rgba(201, 168, 76, 0.6);
+  color: var(--brand-gold, #c9a84c);
+  font-family: var(--brand-font-heading);
+  font-size: 1.35rem;
+  font-weight: 700;
+}
+
+.start-step-icon {
+  font-size: 1.6rem;
+  opacity: 0.9;
+}
+
+.start-step-label {
+  margin: 0 0 0.3rem;
+  font-size: 0.72rem;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: var(--brand-gold, #c9a84c);
+}
+
+.start-step-title {
+  margin: 0 0 0.7rem;
+  font-family: var(--brand-font-heading);
+  font-size: 1.45rem;
+  line-height: 1.2;
+  color: var(--brand-warm-white);
+}
+
+.start-step-body {
+  flex: 1;
+  margin: 0 0 1.4rem;
+  font-family: var(--brand-font-body);
+  font-size: 1rem;
+  line-height: 1.65;
+  color: #d6c7a6;
+}
+
+.start-step-cta {
+  align-self: flex-start;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  white-space: nowrap;
+  font-size: 0.9rem;
+  padding: 0.7rem 1.35rem;
+}
+
+.start-back {
+  margin: 2.25rem 0 0;
+  text-align: center;
+}
+
+.start-back a {
+  color: var(--brand-muted);
+  text-decoration: none;
+  font-size: 0.95rem;
+}
+
+.start-back a:hover {
+  color: var(--brand-warm-white);
+  text-decoration: underline;
+}
+
+@media (max-width: 900px) {
+  .start-steps {
+    grid-template-columns: 1fr;
+    max-width: 560px;
+  }
+
+  .start-step:not(:last-child)::after {
+    display: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .start-step { transition: none; }
+  .start-step:hover { transform: none; }
+}
+
 /* New here page cards */
 .start-grid {
   display: grid;

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">
+      <main className="start-page" aria-labelledby="start-here-heading">
-        <div className="thanks-card" style={{ maxWidth: '980px', width: '100%' }}>
+        <header className="start-hero">
           <p className="eyebrow">Verse by Verse with Nate</p>
-          <h1>{content.startHereHeading}</h1>
+          <h1 id="start-here-heading">{content.startHereHeading}</h1>
-          <p>
+          {content.startHereIntro && <p className="start-intro">{content.startHereIntro}</p>}
-            {content.startHereIntro}
+        </header>
-          </p>
 
-          <div className="start-grid" style={{ marginTop: '1.25rem' }}>
+        <ol className="start-steps">
-            <article className="start-card">
+          {steps.map((step, index) => {
-              <h3>{content.startHereStep1Title}</h3>
+            const { number, title } = splitStepTitle(step.title, index + 1)
-              <p>{content.startHereStep1Body}</p>
+            return (
-              <Link to="/episodes" className="btn-secondary">{content.startHereStep1Cta}</Link>
+              <li className="start-step" key={step.to}>
-            </article>
+                <div className="start-step-top">
-            <article className="start-card">
+                  <span className="start-step-number" aria-hidden="true">{number}</span>
-              <h3>{content.startHereStep2Title}</h3>
+                  <span className="start-step-icon" aria-hidden="true">{step.icon}</span>
-              <p>{content.startHereStep2Body}</p>
+                </div>
-              <Link to="/questions" className="btn-secondary">{content.startHereStep2Cta}</Link>
+                <p className="start-step-label">Step {number}</p>
-            </article>
+                <h2 className="start-step-title">{title}</h2>
-            <article className="start-card">
+                <p className="start-step-body">{step.body}</p>
-              <h3>{content.startHereStep3Title}</h3>
+                <Link to={step.to} className={`${step.primary ? 'btn-primary' : 'btn-secondary'} start-step-cta`}>
-              <p>{content.startHereStep3Body}</p>
+                  {step.cta} <span aria-hidden="true">→</span>
-              <Link to="/contact" className="btn-primary">{content.startHereStep3Cta}</Link>
+                </Link>
-            </article>
+              </li>
-          </div>
+            )
+          })}
+        </ol>
 
-          <div style={{ marginTop: '1.4rem' }}>
+        <p className="start-back"><Link to="/">← Back to site</Link></p>
-            <Link to="/" className="btn-secondary">Back to Site</Link>
-          </div>
-        </div>
       </main>
       <SiteFooter content={content} />
       <AnalyticsConsentBanner content={content} />