Home page: replace Where to Next card grid with a featured-study card plus an Explore list; v2.34.0

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

package-lock.json

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

src/App.css

@@ -1567,70 +1567,6 @@
   padding: 4.5rem 0;
 }
 
-.home-jump-head {
-  text-align: center;
-  margin-bottom: 1.25rem;
-}
-
-.home-jump-head .section-heading {
-  margin-bottom: 0;
-}
-
-.home-jump-grid {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 1rem;
-}
-
-.home-jump-card {
-  display: block;
-  text-decoration: none;
-  background: linear-gradient(180deg, rgba(20, 20, 18, 0.95), rgba(11, 11, 10, 0.95));
-  border: 1px solid rgba(201, 168, 76, 0.2);
-  border-radius: 14px;
-  padding: 1.1rem 1.15rem;
-  transition: transform 180ms, border-color 180ms, background 180ms;
-}
-
-.home-jump-card:hover {
-  transform: translateY(-2px);
-  border-color: rgba(201, 168, 76, 0.45);
-  background: linear-gradient(180deg, rgba(28, 27, 23, 0.98), rgba(14, 14, 12, 0.98));
-}
-
-.home-jump-card h3 {
-  margin: 0 0 0.35rem;
-  font-family: var(--brand-font-heading);
-  color: var(--brand-warm-white);
-  font-size: 1.28rem;
-}
-
-.home-jump-card p {
-  margin: 0;
-  font-family: var(--brand-font-body);
-  color: var(--brand-muted);
-  line-height: 1.55;
-  font-size: 0.97rem;
-}
-
-.home-jump-card--featured {
-  border-color: rgba(201, 168, 76, 0.38);
-  background: linear-gradient(180deg, rgba(201, 168, 76, 0.1), rgba(12, 12, 11, 0.96));
-}
-
-.home-jump-card--featured:hover {
-  border-color: rgba(201, 168, 76, 0.55);
-  background: linear-gradient(180deg, rgba(201, 168, 76, 0.16), rgba(14, 14, 12, 0.98));
-}
-
-.home-jump-featured-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.75rem;
-  margin-bottom: 0.45rem;
-}
-
 .home-jump-new-tag {
   display: inline-block;
   padding: 0.12rem 0.48rem;
@@ -7645,10 +7581,6 @@ a.study-track-card:hover {
     flex-direction: column;
   }
 
-  .home-jump-grid {
-    grid-template-columns: 1fr;
-  }
-
   
 
   
@@ -13935,3 +13867,40 @@ a.study-track-card:hover {
 }
 .btn-primary:focus-visible,
 .consent-btn:focus-visible { outline: 2px solid #f0d276; outline-offset: 3px; }
+
+/* ── Home: featured study + ways in ── */
+.section-home-jump { padding: 3.5rem 0; }
+.home-ways { max-width: 1100px; display: grid; grid-template-columns: 1.25fr 1fr; gap: 2rem; align-items: stretch; }
+.home-ways--list-only { grid-template-columns: minmax(0, 560px); justify-content: center; }
+.home-feature {
+  display: flex; flex-direction: column; justify-content: flex-end; min-height: 320px;
+  padding: 2.2rem; border-radius: 16px; text-decoration: none; color: inherit;
+  border: 1px solid rgba(201, 168, 76, 0.4);
+  background: radial-gradient(circle at 85% 15%, rgba(201, 168, 76, 0.35), transparent 55%), linear-gradient(160deg, #1f1b0e, #0f0e08);
+  transition: border-color 200ms, transform 200ms;
+}
+.home-feature:hover { border-color: rgba(201, 168, 76, 0.75); transform: translateY(-2px); }
+.home-feature:hover .home-feature-btn { background: #f0d276; transform: translateY(-3px); box-shadow: 0 8px 22px rgba(201, 168, 76, 0.55), 0 0 0 3px rgba(240, 210, 118, 0.28); }
+.home-feature-head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.8rem; }
+.home-feature-eyebrow { font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--brand-gold); }
+.home-feature h3 { font-family: var(--brand-font-heading); font-size: clamp(1.6rem, 3vw, 2.1rem); margin: 0 0 0.6rem; color: #f4e9c6; }
+.home-feature p { color: var(--brand-muted); margin: 0 0 1.4rem; line-height: 1.55; font-size: 0.97rem; }
+.home-feature-btn { align-self: flex-start; margin-top: auto; }
+
+.home-ways-list { display: flex; flex-direction: column; }
+.home-ways-eyebrow { margin: 0; font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--brand-gold); }
+.home-ways-heading { font-family: var(--brand-font-heading); font-size: 1.5rem; font-weight: 600; color: #e8d9b5; margin: 0.25rem 0 0.6rem; }
+.home-ways-link {
+  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
+  padding: 0.8rem 0.2rem; border-bottom: 1px solid rgba(201, 168, 76, 0.16);
+  text-decoration: none; color: #e8d9b5; transition: padding 180ms, color 180ms;
+}
+.home-ways-link strong { display: block; font-weight: 600; }
+.home-ways-link small { display: block; color: var(--brand-muted); font-size: 0.82rem; margin-top: 0.1rem; line-height: 1.4; }
+.home-ways-link:hover { padding-left: 0.7rem; color: #fff4d0; }
+.home-ways-arrow { color: var(--brand-gold); flex-shrink: 0; }
+
+@media (max-width: 800px) {
+  .home-ways { grid-template-columns: 1fr; }
+  .home-feature { min-height: 260px; padding: 1.6rem; }
+}

src/App.tsx

@@ -1360,30 +1360,32 @@ function LandingPage({ content }: { content: SiteContent }) {
         </div>
       </section>
 
-      {/* ── WAYS IN ── */}
+      {/* ── FEATURED STUDY + WAYS IN ── */}
       <section className="section-home-jump" aria-label="Homepage navigation">
-        <div className="section-inner">
+        <div className={`section-inner home-ways${featuredStudy ? '' : ' home-ways--list-only'}`}>
-          <div className="home-jump-head">
-            <p className="eyebrow">{content.whereToNextEyebrow || 'Where to Next'}</p>
-            <h2 className="section-heading">{content.whereToNextHeading || 'Choose the page you need.'}</h2>
-          </div>
-          <div className="home-jump-grid">
-            {[...fixedCards, ...adminCards].map(card => (
-              <Link key={card.id} to={card.path} className="home-jump-card">
-                <h3>{card.title}</h3>
-                <p>{card.description}</p>
-              </Link>
-            ))}
           {featuredStudy && (
-              <Link to={`/study/${featuredStudy.slug || ''}`} className="home-jump-card home-jump-card--featured">
+            <Link to={`/study/${featuredStudy.slug || ''}`} className="home-feature">
-                <div className="home-jump-featured-head">
+              <div className="home-feature-head">
-                  <p className="eyebrow">{featuredStudy.homepageEyebrow || 'Study'}</p>
+                <span className="home-feature-eyebrow">{featuredStudy.homepageEyebrow || 'Study'}</span>
                 {featuredStudy.showNewTag && <span className="home-jump-new-tag">{featuredStudy.newTagLabel || 'NEW'}</span>}
               </div>
               <h3>{featuredStudy.title}</h3>
               <p>{featuredStudy.description || 'Explore this study track with lesson notes, commentary, and guided questions.'}</p>
+              <span className="btn-primary home-feature-btn">Start the study</span>
             </Link>
           )}
+          <div className="home-ways-list">
+            <p className="home-ways-eyebrow">{content.whereToNextEyebrow || 'Where to Next'}</p>
+            <h2 className="home-ways-heading">{content.whereToNextHeading || 'Explore the site'}</h2>
+            {[...fixedCards, ...adminCards].map(card => (
+              <Link key={card.id} to={card.path} className="home-ways-link">
+                <span>
+                  <strong>{card.title}</strong>
+                  <small>{card.description}</small>
+                </span>
+                <span className="home-ways-arrow" aria-hidden="true">→</span>
+              </Link>
+            ))}
           </div>
         </div>
       </section>