Make homepage study card admin-editable with NEW tag controls

src/App.tsx

@@ -3,8 +3,9 @@ import { Link, NavLink, Routes, Route, useLocation, useNavigate, useParams } fro
 import AdminPage from './AdminPage'
 import QASection from './components/QASection'
 import ContactForm from './components/ContactForm'
+import { ColossiansStudyIndexPage, ColossiansStudyNotesPage, ColossiansStudySectionPage, StudyLandingPage } from './colossiansStudy'
 import { SpotifyIcon } from './icons'
-import type { SiteContent, ArchivedSeries } from './content'
+import type { SiteContent, ArchivedSeries, StudyProgram } from './content'
 import { DEFAULTS } from './content'
 import './App.css'
 
@@ -55,6 +56,14 @@ function isLikelySpotifyEpisodeUrl(url: string | undefined): boolean {
   return false
 }
 
+function getHomepageFeaturedStudy(content: SiteContent): StudyProgram | null {
+  const studies = Array.isArray(content.studies) ? content.studies : []
+  if (studies.length === 0) return null
+  return studies.find(study => study.showOnHomepage === true)
+    ?? studies.find(study => study.status === 'active')
+    ?? studies[0]
+}
+
 function HeadlinerWidget() {
   const [iframeSrc, setIframeSrc] = useState('')
   const [status, setStatus] = useState<'loading' | 'ready' | 'empty'>('loading')
@@ -457,6 +466,7 @@ function SiteHeader({ content }: { content: SiteContent }) {
         <nav id="site-nav" className={`header-nav ${menuOpen ? 'header-nav--open' : ''}`}>
           <NavLink to="/episodes" className={({ isActive }) => `header-nav-link${isActive ? ' header-nav-link--active' : ''}`} onClick={() => setMenuOpen(false)}>Episodes</NavLink>
           <NavLink to="/questions" className={({ isActive }) => `header-nav-link${isActive ? ' header-nav-link--active' : ''}`} onClick={() => setMenuOpen(false)}>Q&amp;A</NavLink>
+          <NavLink to="/study" className={({ isActive }) => `header-nav-link${isActive ? ' header-nav-link--active' : ''}`} onClick={() => setMenuOpen(false)}>Studies</NavLink>
           <NavLink to="/resources" className={({ isActive }) => `header-nav-link${isActive ? ' header-nav-link--active' : ''}`} onClick={() => setMenuOpen(false)}>Downloads</NavLink>
           <NavLink to="/about" className={({ isActive }) => `header-nav-link${isActive ? ' header-nav-link--active' : ''}`} onClick={() => setMenuOpen(false)}>About</NavLink>
           <NavLink to="/contact" className={({ isActive }) => `header-nav-link${isActive ? ' header-nav-link--active' : ''}`} onClick={() => setMenuOpen(false)}>Contact</NavLink>
@@ -939,6 +949,8 @@ function CustomBlocksSection({ content, page }: { content: SiteContent; page: st
 }
 
 function LandingPage({ content }: { content: SiteContent }) {
+  const featuredStudy = getHomepageFeaturedStudy(content)
+
   return (
     <div className="site">
       <SiteHeader content={content} />
@@ -1024,6 +1036,16 @@ function LandingPage({ content }: { content: SiteContent }) {
                 <p>{card.description}</p>
               </Link>
             ))}
+            {featuredStudy && (
+              <Link to={`/study/${featuredStudy.slug || ''}`} className="home-jump-card home-jump-card--featured">
+                <div className="home-jump-featured-head">
+                  <p className="eyebrow">{featuredStudy.homepageEyebrow || 'Study'}</p>
+                  {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>
+              </Link>
+            )}
           </div>
         </div>
       </section>
@@ -1908,6 +1930,10 @@ export default function App() {
       <Routes>
         <Route path="/" element={<LandingPage content={content} />} />
       <Route path="/start-here" element={<StartHerePage content={content} />} />
+        <Route path="/study" element={<StudyLandingPage content={content} />} />
+        <Route path="/study/:studySlug" element={<ColossiansStudyIndexPage content={content} />} />
+        <Route path="/study/:studySlug/notes" element={<ColossiansStudyNotesPage content={content} />} />
+        <Route path="/study/:studySlug/:sectionId" element={<ColossiansStudySectionPage content={content} />} />
       <Route path="/episodes" element={<EpisodesPage content={content} />} />
       <Route path="/episodes/:id" element={<EpisodeDetailPage content={content} />} />
       <Route path="/resources" element={<ResourcesPage content={content} />} />