Save workspace changes

.deploy/artwork-evolution-release/resources/js/Pages/Group/GroupIndex.jsx

@@ -0,0 +1,79 @@
+import React from 'react'
+import { usePage } from '@inertiajs/react'
+import SeoHead from '../../components/seo/SeoHead'
+import GroupPromoCard from '../../components/groups/GroupPromoCard'
+import GroupTrendingSection from '../../components/groups/GroupTrendingSection'
+import GroupBrowseFilters from '../../components/groups/GroupBrowseFilters'
+import GroupDiscoveryCard from '../../components/groups/GroupDiscoveryCard'
+import GroupLeaderboardCard from '../../components/groups/GroupLeaderboardCard'
+
+export default function GroupIndex() {
+  const { props } = usePage()
+  const groups = props.groups?.data || []
+  const surfaces = Array.isArray(props.surfaces) ? props.surfaces : []
+  const currentSurface = props.currentSurface || 'featured'
+  const highlightSections = Array.isArray(props.highlightSections) ? props.highlightSections : []
+  const leaderboardItems = Array.isArray(props.leaderboard?.items) ? props.leaderboard.items : []
+
+  return (
+    <main className="min-h-screen bg-[radial-gradient(circle_at_top_left,_rgba(56,189,248,0.16),_transparent_28%),linear-gradient(180deg,_#020617_0%,_#02040a_100%)] px-4 py-10 sm:px-6 lg:px-8">
+      <SeoHead title="Groups - Skinbase" description={props.description} />
+      <div className="mx-auto max-w-6xl">
+        <section className="rounded-[32px] border border-white/10 bg-white/[0.03] p-6">
+          <p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-sky-200/80">Groups</p>
+          <h1 className="mt-2 text-4xl font-semibold text-white">Collective publishing identities</h1>
+          <p className="mt-4 max-w-3xl text-sm leading-6 text-slate-300">Discover collaborative studios, follow shared creative brands, and browse the artworks, releases, and collections published under each group identity.</p>
+          <GroupBrowseFilters surfaces={surfaces} currentSurface={currentSurface} />
+        </section>
+
+        <div className="mt-8">
+          <GroupPromoCard
+            group={props.spotlightGroup}
+            eyebrow="Public groups"
+            title="Find collaborative identities with real momentum"
+            description="Groups now sit alongside creators and artworks across Nova, making shared publishing, team recruitment, and release-driven collaboration easier to discover."
+            ctaLabel="Open spotlight"
+          />
+        </div>
+
+        {highlightSections.map((section) => (
+          <GroupTrendingSection
+            key={section.key}
+            title={section.title}
+            description={section.description}
+            items={section.items || []}
+            href={`/groups?surface=${encodeURIComponent(section.key)}`}
+          />
+        ))}
+
+        {leaderboardItems.length > 0 ? (
+          <section className="mt-10">
+            <div className="mb-5 flex items-end justify-between gap-4">
+              <div>
+                <h2 className="text-2xl font-semibold tracking-[-0.02em] text-white">Monthly group leaderboard</h2>
+                <p className="mt-2 max-w-3xl text-sm leading-6 text-slate-400">A fast view of the collaborative teams moving the most attention and publishing energy right now.</p>
+              </div>
+              <a href="/leaderboard?type=groups&period=monthly" className="text-sm font-semibold text-sky-200 transition hover:text-white">View leaderboard</a>
+            </div>
+            <div className="grid gap-4 xl:grid-cols-3">
+              {leaderboardItems.slice(0, 3).map((item) => <GroupLeaderboardCard key={item.entity?.id || item.rank} item={item} />)}
+            </div>
+          </section>
+        ) : null}
+
+        <section className="mt-10">
+          <div className="mb-5 flex items-end justify-between gap-4">
+            <div>
+              <h2 className="text-2xl font-semibold tracking-[-0.02em] text-white">Browse groups</h2>
+              <p className="mt-2 max-w-3xl text-sm leading-6 text-slate-400">Filter the directory by discovery surface, then jump into each group’s public page for artworks, releases, projects, events, and activity.</p>
+            </div>
+            <div className="text-sm text-slate-500">{Number(props.groups?.meta?.total || 0).toLocaleString()} public groups</div>
+          </div>
+          <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
+            {groups.map((group) => <GroupDiscoveryCard key={group.slug || group.id} group={group} />)}
+          </div>
+        </section>
+      </div>
+    </main>
+  )
+}