Build world campaigns rewards and recaps

resources/js/Pages/World/WorldIndex.jsx

@@ -1,31 +1,14 @@
 import React from 'react'
 import { usePage } from '@inertiajs/react'
 import SeoHead from '../../components/seo/SeoHead'
-import WorldCard from '../../components/worlds/WorldCard'
-
-function WorldRail({ title, description, items }) {
-  if (!Array.isArray(items) || items.length === 0) {
-    return null
-  }
-
-  return (
-    <section className="mt-10">
-      <div className="mb-5 flex items-end justify-between gap-4">
-        <div>
-          <h2 className="text-2xl font-semibold tracking-[-0.03em] text-white">{title}</h2>
-          {description ? <p className="mt-2 max-w-3xl text-sm leading-6 text-slate-400">{description}</p> : null}
-        </div>
-        <div className="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">{items.length} worlds</div>
-      </div>
-      <div className="grid gap-4 xl:grid-cols-3">
-        {items.map((world) => <WorldCard key={world.id} world={world} compact />)}
-      </div>
-    </section>
-  )
-}
+import ActiveWorldSpotlight from '../../components/worlds/ActiveWorldSpotlight'
+import WorldFamilyCard from '../../components/worlds/WorldFamilyCard'
+import WorldsIndexSection from '../../components/worlds/WorldsIndexSection'
 
 export default function WorldIndex() {
   const { props } = usePage()
+  const hasSpotlight = Boolean(props.spotlightWorld)
+  const featuredFallback = !hasSpotlight && Array.isArray(props.featuredWorlds) ? props.featuredWorlds : []
 
   return (
     <main className="min-h-screen bg-[radial-gradient(circle_at_top_left,_rgba(249,115,22,0.12),_transparent_28%),radial-gradient(circle_at_top_right,_rgba(56,189,248,0.12),_transparent_32%),linear-gradient(180deg,_#020617_0%,_#02040a_100%)] px-4 py-10 sm:px-6 lg:px-8">
@@ -39,24 +22,68 @@ export default function WorldIndex() {
           </div>
         </section>
 
-        {props.featuredWorld ? <section className="mt-8"><WorldCard world={props.featuredWorld} /></section> : null}
+        {hasSpotlight ? (
+          <section className="mt-8">
+            <ActiveWorldSpotlight
+              spotlight={props.spotlightWorld}
+              secondary={Array.isArray(props.featuredWorlds) ? props.featuredWorlds.slice(0, 3) : []}
+              indexUrl="/worlds"
+              eyebrow="Active world spotlight"
+              secondaryTitle="Featured worlds"
+              sourceSurface="worlds_index"
+              sourceDetail="spotlight"
+              secondarySourceSurface="worlds_index"
+              secondarySourceDetail="featured"
+            />
+          </section>
+        ) : null}
 
-        <WorldRail
+        {!hasSpotlight ? (
+          <WorldsIndexSection
+            title="Featured Worlds"
+            description="Editorially promoted worlds stay visible here even when there is no live campaign spotlighting the homepage moment."
+            items={featuredFallback}
+            sourceSurface="worlds_index"
+            sourceDetail="featured"
+          />
+        ) : null}
+
+        <WorldsIndexSection
           title="Active Worlds"
-          description="Campaigns and seasonal surfaces currently live across the platform."
+          description="Live worlds and currently running campaign surfaces across Skinbase Nova."
           items={props.activeWorlds}
+          emptyMessage="No worlds are currently live. Check upcoming programming below."
+          sourceSurface="worlds_index"
+          sourceDetail="active"
         />
 
-        <WorldRail
+        <WorldsIndexSection
           title="Upcoming Worlds"
-          description="Scheduled worlds in the pipeline, ready to anchor the next publishing moment."
+          description="Scheduled campaign moments and future worlds lined up for the next launch window."
           items={props.upcomingWorlds}
+          emptyMessage="No upcoming worlds are scheduled right now."
+          sourceSurface="worlds_index"
+          sourceDetail="upcoming"
         />
 
-        <WorldRail
+        <WorldsIndexSection
+          title="Recurring Worlds"
+          description="Long-running campaign families keep a canonical current edition while preserving a browsable yearly archive."
+          items={props.recurringWorldFamilies}
+          emptyMessage="Recurring families will appear here as worlds begin building an archive across editions."
+          countLabel="families"
+          renderItem={(family, sourceProps) => <WorldFamilyCard key={family.id} family={family} {...sourceProps} />}
+          sourceSurface="worlds_index"
+          sourceDetail="recurring"
+        />
+
+        <WorldsIndexSection
           title="Archive Editions"
           description="Past worlds stay available as browsable records of recurring culture and editorial programming."
           items={props.archivedWorlds}
+          emptyMessage="Archived worlds will appear here as campaigns finish and move into the public record."
+          sourceSurface="worlds_index"
+          sourceDetail="archive"
         />
       </div>
     </main>