91 lines
4.5 KiB
JavaScript
91 lines
4.5 KiB
JavaScript
import React from 'react'
|
|
import { usePage } from '@inertiajs/react'
|
|
import SeoHead from '../../components/seo/SeoHead'
|
|
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">
|
|
<SeoHead title={props.seo?.title || 'Worlds - Skinbase'} description={props.seo?.description || props.description} image={props.seo?.image} />
|
|
<div className="mx-auto max-w-7xl">
|
|
<section className="rounded-[36px] border border-white/10 bg-white/[0.03] p-6 sm:p-8">
|
|
<div className="max-w-4xl">
|
|
<p className="text-[11px] font-semibold uppercase tracking-[0.24em] text-sky-200/70">Skinbase Worlds</p>
|
|
<h1 className="mt-4 text-4xl font-semibold tracking-[-0.05em] text-white sm:text-5xl">Curated spaces for seasonal culture, scene moments, and editorial campaigns.</h1>
|
|
<p className="mt-5 max-w-3xl text-base leading-7 text-slate-300">Worlds bundle together artworks, collections, creators, groups, cards, releases, events, challenges, and newsroom context into a single themed destination. They are not filters. They are editorial environments.</p>
|
|
</div>
|
|
</section>
|
|
|
|
{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}
|
|
|
|
{!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="Live worlds and currently running campaign surfaces across Skinbase."
|
|
items={props.activeWorlds}
|
|
emptyMessage="No worlds are currently live. Check upcoming programming below."
|
|
sourceSurface="worlds_index"
|
|
sourceDetail="active"
|
|
/>
|
|
|
|
<WorldsIndexSection
|
|
title="Upcoming Worlds"
|
|
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"
|
|
/>
|
|
|
|
<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>
|
|
)
|
|
} |