feat: ship creator journey v2 and profile updates

resources/js/components/profile/CreatorJourneySection.jsx

@@ -0,0 +1,477 @@
+import React from 'react'
+
+function formatDate(value) {
+  if (!value) return null
+
+  try {
+    return new Intl.DateTimeFormat('en', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+    }).format(new Date(value))
+  } catch {
+    return null
+  }
+}
+
+function formatYear(value) {
+  if (!value) return null
+  try {
+    return new Intl.DateTimeFormat('en', { year: 'numeric' }).format(new Date(value))
+  } catch {
+    return null
+  }
+}
+
+function iconForType(type) {
+  switch (type) {
+    case 'first_upload':
+      return 'fa-solid fa-seedling'
+    case 'first_featured_artwork':
+      return 'fa-solid fa-star'
+    case 'first_group_release':
+      return 'fa-solid fa-people-group'
+    case 'biggest_download_spike':
+      return 'fa-solid fa-bolt'
+    case 'best_performing_work':
+      return 'fa-solid fa-trophy'
+    case 'most_productive_year':
+      return 'fa-solid fa-calendar-check'
+    case 'yearly_recap':
+      return 'fa-solid fa-chart-column'
+    // v2
+    case 'comeback_minor':
+      return 'fa-solid fa-rotate-right'
+    case 'comeback_major':
+      return 'fa-solid fa-person-walking-arrow-right'
+    case 'comeback_legendary':
+      return 'fa-solid fa-fire-flame-curved'
+    case 'upload_streak_3':
+    case 'upload_streak_6':
+    case 'upload_streak_12':
+      return 'fa-solid fa-fire'
+    case 'active_year_streak_3':
+    case 'active_year_streak_5':
+      return 'fa-solid fa-calendar-days'
+    case 'before_now':
+      return 'fa-solid fa-arrows-rotate'
+    case 'era_started':
+      return 'fa-solid fa-flag'
+    default:
+      return 'fa-solid fa-sparkles'
+  }
+}
+
+function milestoneHref(item) {
+  return item?.artwork?.url || item?.release?.url || null
+}
+
+function StatPill({ label, value }) {
+  if (value === null || value === undefined || value === '') return null
+
+  return (
+    <div className="rounded-2xl border border-white/10 bg-white/[0.04] px-3.5 py-2.5">
+      <div className="text-[10px] font-semibold uppercase tracking-[0.24em] text-sky-200/60">{label}</div>
+      <div className="mt-1 text-sm font-semibold text-white">{value}</div>
+    </div>
+  )
+}
+
+function EmptyJourneyState({ username, memberSinceYear, yearsOnSkinbase }) {
+  return (
+    <div className="rounded-[28px] border border-dashed border-white/12 bg-white/[0.03] px-6 py-12">
+      <div className="flex flex-wrap items-center gap-3">
+        <div className="flex h-12 w-12 items-center justify-center rounded-2xl border border-white/10 bg-white/[0.05] text-slate-200">
+          <i className="fa-solid fa-route text-lg" />
+        </div>
+        <div>
+          <div className="text-lg font-semibold text-white">Creator Journey is just getting started</div>
+          <div className="mt-1 text-sm text-slate-400">
+            Public milestones will appear here as @{username} builds more history on Skinbase.
+          </div>
+        </div>
+      </div>
+
+      <div className="mt-5 grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+        <StatPill label="Member since" value={memberSinceYear || 'Unknown'} />
+        <StatPill label="Years on Skinbase" value={yearsOnSkinbase ?? 0} />
+        <StatPill label="Milestones saved" value="0" />
+      </div>
+    </div>
+  )
+}
+
+// ── v2: Era strip ─────────────────────────────────────────────────────────────
+
+const ERA_COLORS = {
+  early_years:  { bg: 'bg-slate-800/60',   border: 'border-slate-600/40',   text: 'text-slate-300',   icon: 'fa-solid fa-seedling',          dot: 'bg-slate-400' },
+  breakthrough: { bg: 'bg-amber-900/30',   border: 'border-amber-600/30',   text: 'text-amber-200',   icon: 'fa-solid fa-star',              dot: 'bg-amber-400' },
+  experimental: { bg: 'bg-violet-900/30',  border: 'border-violet-600/30',  text: 'text-violet-200',  icon: 'fa-solid fa-flask',             dot: 'bg-violet-400' },
+  comeback:     { bg: 'bg-emerald-900/30', border: 'border-emerald-600/30', text: 'text-emerald-200', icon: 'fa-solid fa-rotate-right',      dot: 'bg-emerald-400' },
+  current:      { bg: 'bg-sky-900/30',     border: 'border-sky-600/30',     text: 'text-sky-200',     icon: 'fa-solid fa-bolt',             dot: 'bg-sky-400' },
+}
+
+function EraStrip({ eras }) {
+  if (!eras?.length) return null
+
+  return (
+    <div className="mt-7">
+      <div className="text-xs font-semibold uppercase tracking-[0.24em] text-slate-400 mb-3">Creator Eras</div>
+      <div className="flex flex-wrap gap-3">
+        {eras.map((era, i) => {
+          const style = ERA_COLORS[era.type] ?? ERA_COLORS.current
+          return (
+            <div
+              key={i}
+              className={`flex items-start gap-3 rounded-2xl border ${style.border} ${style.bg} px-4 py-3 min-w-[180px] max-w-xs flex-1`}
+            >
+              <div className={`mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-xl bg-white/5 ${style.text}`}>
+                <i className={style.icon} />
+              </div>
+              <div className="min-w-0">
+                <div className="flex items-center gap-2">
+                  <span className={`text-sm font-semibold ${style.text}`}>{era.title}</span>
+                  {era.is_current && (
+                    <span className="rounded-full bg-white/10 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wider text-slate-300">
+                      Now
+                    </span>
+                  )}
+                </div>
+                <div className="mt-0.5 text-[11px] text-slate-500">
+                  {formatYear(era.starts_at)}
+                  {era.ends_at ? ` – ${formatYear(era.ends_at)}` : era.is_current ? ' – present' : ''}
+                </div>
+                {era.description && (
+                  <p className="mt-1.5 text-[11px] leading-relaxed text-slate-400 line-clamp-2">{era.description}</p>
+                )}
+                {(era.stats?.uploads_count ?? 0) > 0 && (
+                  <div className="mt-2 text-[10px] text-slate-500">
+                    {era.stats.uploads_count} upload{era.stats.uploads_count !== 1 ? 's' : ''}
+                  </div>
+                )}
+              </div>
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+// ── v2: Streaks ──────────────────────────────────────────────────────────────
+
+function StreakBadge({ label, value, active = false }) {
+  if (!value) return null
+  return (
+    <div className={`flex items-center gap-3 rounded-2xl border px-4 py-3 ${active ? 'border-orange-500/30 bg-orange-900/20' : 'border-white/10 bg-white/[0.03]'}`}>
+      <div className={`flex h-9 w-9 shrink-0 items-center justify-center rounded-xl ${active ? 'bg-orange-500/15 text-orange-300' : 'bg-white/5 text-slate-400'}`}>
+        <i className={`fa-solid fa-fire${active ? '' : ''}`} />
+      </div>
+      <div>
+        <div className={`text-base font-bold tabular-nums ${active ? 'text-orange-200' : 'text-white'}`}>{value}</div>
+        <div className="text-[11px] text-slate-500">{label}</div>
+      </div>
+    </div>
+  )
+}
+
+function StreaksSection({ streaks }) {
+  if (!streaks) return null
+  const { current_monthly_upload_streak, best_monthly_upload_streak, current_active_year_streak, best_active_year_streak } = streaks
+  const hasAny = current_monthly_upload_streak > 0 || best_monthly_upload_streak > 0 || best_active_year_streak > 0
+
+  if (!hasAny) return null
+
+  return (
+    <div className="mt-7">
+      <div className="text-xs font-semibold uppercase tracking-[0.24em] text-slate-400 mb-3">Creative Streaks</div>
+      <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
+        {current_monthly_upload_streak > 0 && (
+          <StreakBadge label="Current monthly streak" value={`${current_monthly_upload_streak}mo`} active />
+        )}
+        {best_monthly_upload_streak > 0 && (
+          <StreakBadge label="Best monthly streak" value={`${best_monthly_upload_streak}mo`} />
+        )}
+        {current_active_year_streak > 0 && (
+          <StreakBadge label="Active year streak" value={`${current_active_year_streak}yr`} active={current_active_year_streak >= 3} />
+        )}
+        {best_active_year_streak > 0 && (
+          <StreakBadge label="Best year streak" value={`${best_active_year_streak}yr`} />
+        )}
+      </div>
+    </div>
+  )
+}
+
+// ── v2: Growth & Evolution ───────────────────────────────────────────────────
+
+const RELATION_LABELS = {
+  remake_of:           'Remake',
+  remaster_of:         'Remaster',
+  revision_of:         'Revision',
+  inspired_by:         'Inspired by own work',
+  variation_of:        'Variation',
+}
+
+function EvolutionSection({ evolution }) {
+  if (!evolution?.length) return null
+
+  return (
+    <div className="mt-7 rounded-[28px] border border-white/10 bg-white/[0.03] p-5">
+      <div className="text-xs font-semibold uppercase tracking-[0.24em] text-slate-400">Growth &amp; Evolution</div>
+      <div className="mt-1 text-lg font-semibold text-white">Then &amp; Now</div>
+
+      <div className="mt-5 space-y-5">
+        {evolution.map((item) => (
+          <div key={item.id} className="grid gap-3 sm:grid-cols-[1fr_auto_1fr]">
+            {/* Original */}
+            <a
+              href={item.target_artwork?.url}
+              className="group flex items-start gap-3 rounded-2xl border border-white/8 bg-white/[0.03] p-3 transition-colors hover:border-white/20 hover:bg-white/[0.06]"
+            >
+              <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-white/5 text-slate-500 group-hover:text-slate-300">
+                <i className="fa-solid fa-image" />
+              </div>
+              <div className="min-w-0">
+                <div className="text-[10px] font-semibold uppercase tracking-[0.2em] text-slate-600">Original</div>
+                <div className="mt-0.5 truncate text-sm font-medium text-slate-300 group-hover:text-white">{item.target_artwork?.title}</div>
+                <div className="text-[10px] text-slate-600">{formatYear(item.target_artwork?.published_at)}</div>
+              </div>
+            </a>
+
+            {/* Arrow + relation type */}
+            <div className="flex flex-col items-center justify-center gap-1 py-2 text-slate-600">
+              <i className="fa-solid fa-arrow-right-long" />
+              <span className="text-[10px] font-semibold uppercase tracking-wider text-slate-600">
+                {RELATION_LABELS[item.relation_type] ?? item.relation_type}
+              </span>
+              {item.years_between > 0 && (
+                <span className="text-[10px] text-slate-700">{item.years_between}yr later</span>
+              )}
+            </div>
+
+            {/* New version */}
+            <a
+              href={item.source_artwork?.url}
+              className="group flex items-start gap-3 rounded-2xl border border-emerald-700/30 bg-emerald-900/10 p-3 transition-colors hover:border-emerald-600/50 hover:bg-emerald-900/20"
+            >
+              <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-emerald-500/10 text-emerald-400">
+                <i className="fa-solid fa-wand-magic-sparkles" />
+              </div>
+              <div className="min-w-0">
+                <div className="text-[10px] font-semibold uppercase tracking-[0.2em] text-emerald-600">New version</div>
+                <div className="mt-0.5 truncate text-sm font-medium text-emerald-200 group-hover:text-white">{item.source_artwork?.title}</div>
+                <div className="text-[10px] text-emerald-800">{formatYear(item.source_artwork?.published_at)}</div>
+              </div>
+            </a>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default function CreatorJourneySection({ journey, username }) {
+  const summary = journey?.summary ?? {}
+  const highlights = Array.isArray(journey?.highlights) ? journey.highlights : []
+  const timeline = Array.isArray(journey?.timeline) ? journey.timeline.slice(0, 6) : []
+  const recaps = Array.isArray(journey?.yearly_recaps) ? journey.yearly_recaps.slice(0, 3) : []
+  const eras = Array.isArray(journey?.eras) ? journey.eras : []
+  const evolution = Array.isArray(journey?.evolution) ? journey.evolution : []
+  const streaks = journey?.streaks ?? null
+  const latestMilestone = summary.latest_milestone ?? null
+  const available = !!summary.available
+
+  if (!available) {
+    return (
+      <section className="rounded-[34px] border border-white/10 bg-[linear-gradient(145deg,rgba(17,24,39,0.96),rgba(15,23,42,0.9))] p-6 shadow-[0_24px_80px_rgba(2,6,23,0.28)] sm:p-7">
+        <div className="mb-5 flex flex-wrap items-center justify-between gap-4">
+          <div>
+            <div className="text-[11px] font-semibold uppercase tracking-[0.3em] text-sky-200/70">Creator Journey</div>
+            <h2 className="mt-2 text-2xl font-semibold text-white">A profile built as a story, not only a feed</h2>
+          </div>
+        </div>
+
+        <EmptyJourneyState
+          username={username}
+          memberSinceYear={summary.member_since_year}
+          yearsOnSkinbase={summary.years_on_skinbase}
+        />
+      </section>
+    )
+  }
+
+  return (
+    <section className="rounded-[34px] border border-white/10 bg-[linear-gradient(145deg,rgba(15,23,42,0.98),rgba(8,15,28,0.92))] p-6 shadow-[0_24px_80px_rgba(2,6,23,0.32)] sm:p-7">
+      <div className="flex flex-wrap items-start justify-between gap-5">
+        <div className="max-w-2xl">
+          <div className="text-[11px] font-semibold uppercase tracking-[0.3em] text-sky-200/70">Creator Journey</div>
+          <h2 className="mt-2 text-2xl font-semibold text-white">A profile shaped by milestones, turning points, and yearly chapters.</h2>
+          {latestMilestone && (
+            <p className="mt-3 max-w-xl text-sm leading-relaxed text-slate-300">
+              Latest moment: <span className="font-semibold text-white">{latestMilestone.title}</span>
+              {latestMilestone.headline ? ` - ${latestMilestone.headline}` : ''}
+            </p>
+          )}
+        </div>
+
+        <div className="grid min-w-[18rem] gap-3 sm:grid-cols-3">
+          <StatPill label="Member since" value={summary.member_since_year} />
+          <StatPill label="Years on Skinbase" value={summary.years_on_skinbase ?? 0} />
+          <StatPill label="Milestones" value={summary.milestone_count ?? 0} />
+        </div>
+      </div>
+
+      {/* ── v2: Era strip ── */}
+      <EraStrip eras={eras} />
+
+      {highlights.length > 0 && (
+        <div className="mt-7 grid gap-4 xl:grid-cols-2">
+          {highlights.map((item) => {
+            const href = milestoneHref(item)
+
+            return (
+              <article
+                key={item.id}
+                className="rounded-[28px] border border-white/10 bg-[linear-gradient(180deg,rgba(255,255,255,0.06),rgba(255,255,255,0.02))] p-5"
+              >
+                <div className="flex items-start justify-between gap-4">
+                  <div className="flex min-w-0 items-start gap-3">
+                    <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl bg-sky-400/12 text-sky-200">
+                      <i className={iconForType(item.type)} />
+                    </div>
+                    <div className="min-w-0">
+                      <div className="text-xs font-semibold uppercase tracking-[0.22em] text-slate-400">{item.title}</div>
+                      <div className="mt-1 text-lg font-semibold text-white">{item.headline || item.value}</div>
+                    </div>
+                  </div>
+                  {item.value && (
+                    <div className="rounded-full border border-white/10 bg-white/[0.04] px-3 py-1 text-xs font-medium text-slate-200">
+                      {item.value}
+                    </div>
+                  )}
+                </div>
+
+                {item.summary && (
+                  <p className="mt-4 text-sm leading-relaxed text-slate-300">{item.summary}</p>
+                )}
+
+                {href && (
+                  <a
+                    href={href}
+                    className="mt-4 inline-flex items-center gap-2 text-sm font-medium text-sky-200 transition-colors hover:text-white"
+                  >
+                    Open source moment
+                    <i className="fa-solid fa-arrow-up-right-from-square text-xs" />
+                  </a>
+                )}
+              </article>
+            )
+          })}
+        </div>
+      )}
+
+      <div className="mt-7 grid gap-6 xl:grid-cols-[minmax(0,1.35fr)_minmax(18rem,0.95fr)]">
+        <div className="rounded-[28px] border border-white/10 bg-white/[0.03] p-5">
+          <div className="flex items-center justify-between gap-3">
+            <div>
+              <div className="text-xs font-semibold uppercase tracking-[0.24em] text-slate-400">Timeline</div>
+              <div className="mt-1 text-lg font-semibold text-white">Important creator milestones</div>
+            </div>
+          </div>
+
+          <div className="mt-5 space-y-4">
+            {timeline.map((item, index) => {
+              const href = milestoneHref(item)
+
+              return (
+                <div key={item.id} className="grid grid-cols-[2.5rem_minmax(0,1fr)] gap-3">
+                  <div className="flex flex-col items-center">
+                    <div className="flex h-10 w-10 items-center justify-center rounded-2xl border border-white/10 bg-white/[0.05] text-slate-100">
+                      <i className={iconForType(item.type)} />
+                    </div>
+                    {index < timeline.length - 1 && <div className="mt-2 h-full w-px bg-white/10" />}
+                  </div>
+                  <div className="pb-4">
+                    <div className="flex flex-wrap items-center gap-2">
+                      <div className="text-base font-semibold text-white">{item.title}</div>
+                      {formatDate(item.occurred_at) && (
+                        <div className="text-xs uppercase tracking-[0.2em] text-slate-500">{formatDate(item.occurred_at)}</div>
+                      )}
+                    </div>
+                    {item.headline && <div className="mt-1 text-sm font-medium text-sky-100">{item.headline}</div>}
+                    {item.summary && <div className="mt-1 text-sm leading-relaxed text-slate-400">{item.summary}</div>}
+                    {href && (
+                      <a href={href} className="mt-2 inline-flex items-center gap-2 text-sm text-slate-200 transition-colors hover:text-white">
+                        View linked work
+                        <i className="fa-solid fa-arrow-right text-xs" />
+                      </a>
+                    )}
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+        </div>
+
+        <div className="rounded-[28px] border border-white/10 bg-white/[0.03] p-5">
+          <div>
+            <div className="text-xs font-semibold uppercase tracking-[0.24em] text-slate-400">Yearly recap</div>
+            <div className="mt-1 text-lg font-semibold text-white">Recent chapters</div>
+          </div>
+
+          <div className="mt-5 space-y-3">
+            {recaps.map((item) => {
+              const status = item.metrics?.year_status
+              const statusColors = {
+                breakout:     'bg-emerald-400/12 text-emerald-200',
+                steady:       'bg-sky-400/12 text-sky-200',
+                experimental: 'bg-violet-400/12 text-violet-200',
+                comeback:     'bg-amber-400/12 text-amber-200',
+                quiet:        'bg-slate-700 text-slate-400',
+              }
+              return (
+                <article key={item.id} className="rounded-2xl border border-white/10 bg-white/[0.04] p-4">
+                  <div className="flex items-center justify-between gap-3">
+                    <div>
+                      <div className="flex items-center gap-2">
+                        <div className="text-sm font-semibold uppercase tracking-[0.2em] text-slate-400">{item.value}</div>
+                        {status && (
+                          <span className={`rounded-full px-2 py-0.5 text-[10px] font-semibold capitalize ${statusColors[status] ?? statusColors.steady}`}>
+                            {status}
+                          </span>
+                        )}
+                      </div>
+                      <div className="mt-1 text-lg font-semibold text-white">{item.headline}</div>
+                    </div>
+                    <div className="flex h-11 w-11 items-center justify-center rounded-2xl bg-amber-400/12 text-amber-200">
+                      <i className="fa-solid fa-chart-column" />
+                    </div>
+                  </div>
+                  <p className="mt-3 text-sm leading-relaxed text-slate-300">{item.summary}</p>
+
+                  <div className="mt-4 grid gap-2 sm:grid-cols-2">
+                    <StatPill label="Views" value={(item.metrics?.views ?? 0).toLocaleString()} />
+                    <StatPill label="Downloads" value={(item.metrics?.downloads ?? 0).toLocaleString()} />
+                    {(item.metrics?.featured_count ?? 0) > 0 && (
+                      <StatPill label="Featured" value={item.metrics.featured_count} />
+                    )}
+                    {item.metrics?.top_category && (
+                      <StatPill label="Top category" value={item.metrics.top_category} />
+                    )}
+                  </div>
+                </article>
+              )
+            })}
+          </div>
+        </div>
+      </div>
+
+      {/* ── v2: Streaks ── */}
+      <StreaksSection streaks={streaks} />
+
+      {/* ── v2: Growth & Evolution ── */}
+      <EvolutionSection evolution={evolution} />
+    </section>
+  )
+}

resources/js/components/profile/ProfileHero.jsx

@@ -23,7 +23,6 @@ export default function ProfileHero({ user, profile, isOwner, viewerIsFollowing,
   const joinDate = user.created_at
     ? new Date(user.created_at).toLocaleDateString('en-US', { month: 'long', year: 'numeric' })
     : null
-  const bio = profile?.bio || profile?.about || ''
   const progressPercent = Math.round(Number(user?.progress_percent ?? 0))
   const heroStats = [
     { label: 'Followers', value: formatCompactNumber(count) },
@@ -156,12 +155,6 @@ export default function ProfileHero({ user, profile, isOwner, viewerIsFollowing,
                       ) : null}
                     </div>
 
-                    {bio ? (
-                      <p className="mx-auto mt-4 max-w-2xl text-sm leading-relaxed text-slate-300/90 md:mx-0 md:text-[15px]">
-                        {bio}
-                      </p>
-                    ) : null}
-
                     <XPProgressBar
                       xp={user?.xp}
                       currentLevelXp={user?.current_level_xp}

resources/js/components/profile/collections/CollectionCard.jsx

@@ -46,8 +46,35 @@ function StatPill({ icon, label, value }) {
   )
 }
 
-export default function CollectionCard({ collection, isOwner, onDelete, onToggleFeature, onMoveUp, onMoveDown, canMoveUp, canMoveDown, busy = false, saveContext = null, saveContextMeta = null }) {
+function CoverMedia({ collection, isOwner }) {
   const coverImage = collection?.cover_image
+  const coverMaturity = !isOwner && collection?.cover_image_maturity ? collection.cover_image_maturity : null
+  const shouldBlur = Boolean(coverMaturity?.should_blur)
+  const isMature = Boolean(coverMaturity?.is_mature_effective)
+
+  if (!coverImage) {
+    return (
+      <div className="flex aspect-[16/10] items-center justify-center bg-[linear-gradient(135deg,rgba(8,17,31,1),rgba(15,23,42,1),rgba(8,17,31,1))] text-slate-500">
+        <i className="fa-solid fa-layer-group text-4xl" />
+      </div>
+    )
+  }
+
+  return (
+    <div className="relative aspect-[16/10] overflow-hidden bg-slate-950">
+      <img
+        src={coverImage}
+        alt={collection?.title || 'Collection cover'}
+        className={`h-full w-full object-cover transition-[transform,filter] duration-500 group-hover:scale-[1.04] ${shouldBlur ? 'scale-[1.02] blur-xl' : ''}`}
+        loading="lazy"
+      />
+      {isMature ? <div className="absolute left-3 top-3 rounded-full border border-amber-300/20 bg-black/60 px-3 py-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-amber-100">Mature cover</div> : null}
+      {shouldBlur ? <div className="absolute inset-x-3 bottom-3 rounded-full border border-amber-300/20 bg-black/60 px-3 py-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-amber-100">Blurred by your settings</div> : null}
+    </div>
+  )
+}
+
+export default function CollectionCard({ collection, isOwner, onDelete, onToggleFeature, onMoveUp, onMoveDown, canMoveUp, canMoveDown, busy = false, saveContext = null, saveContextMeta = null }) {
   const [saved, setSaved] = React.useState(Boolean(collection?.saved))
   const [saveBusy, setSaveBusy] = React.useState(false)
 
@@ -113,20 +140,7 @@ export default function CollectionCard({ collection, isOwner, onDelete, onToggle
     >
       <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_left,rgba(56,189,248,0.12),transparent_34%),radial-gradient(circle_at_bottom_right,rgba(249,115,22,0.12),transparent_28%)] opacity-0 transition duration-300 group-hover:opacity-100" />
       <div className="relative">
-        {coverImage ? (
-          <div className="aspect-[16/10] overflow-hidden bg-slate-950">
-            <img
-              src={coverImage}
-              alt={collection?.title || 'Collection cover'}
-              className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-[1.04]"
-              loading="lazy"
-            />
-          </div>
-        ) : (
-          <div className="flex aspect-[16/10] items-center justify-center bg-[linear-gradient(135deg,rgba(8,17,31,1),rgba(15,23,42,1),rgba(8,17,31,1))] text-slate-500">
-            <i className="fa-solid fa-layer-group text-4xl" />
-          </div>
-        )}
+        <CoverMedia collection={collection} isOwner={isOwner} />
 
         <div className="p-5">
           <div className="mb-3 flex flex-wrap items-center gap-2">

resources/js/components/profile/tabs/TabAbout.jsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import CreatorJourneySection from '../CreatorJourneySection'
 
 const SOCIAL_ICONS = {
   twitter:    { icon: 'fa-brands fa-x-twitter',  label: 'X / Twitter' },
@@ -169,7 +170,7 @@ function SectionCard({ icon, eyebrow, title, children, className = '' }) {
  * TabAbout
  * Bio, social links, metadata - replaces old sidebar profile card.
  */
-export default function TabAbout({ user, profile, stats, achievements, artworks, creatorStories, profileComments, socialLinks, countryName, followerCount, recentFollowers, leaderboardRank, groupContributionHistory }) {
+export default function TabAbout({ user, profile, stats, achievements, artworks, creatorStories, profileComments, socialLinks, countryName, followerCount, recentFollowers, leaderboardRank, groupContributionHistory, journey }) {
   const uname = user.username || user.name
   const displayName = user.name || uname
   const about = profile?.about
@@ -240,6 +241,8 @@ export default function TabAbout({ user, profile, stats, achievements, artworks,
             )}
           </SectionCard>
 
+          <CreatorJourneySection journey={journey} username={uname} />
+
           <SectionCard icon="fa-solid fa-address-card" eyebrow="Details" title="Profile information">
             <div className="grid gap-3 md:grid-cols-2">
               {displayName && displayName !== uname ? (

resources/js/components/profile/tabs/TabArtworks.jsx

@@ -90,6 +90,8 @@ function FeaturedShowcase({ featuredArtworks }) {
   const secondaryArtworks = featuredArtworks.slice(1, 4)
   const leadMeta = artworkMeta(leadArtwork)
   const leadStats = artworkStats(leadArtwork)
+  const leadShouldBlur = Boolean(leadArtwork?.maturity?.should_blur)
+  const leadIsMature = Boolean(leadArtwork?.maturity?.is_mature_effective)
 
   return (
     <section className="relative mt-8 overflow-hidden rounded-[36px] border border-white/10 bg-[linear-gradient(135deg,rgba(56,189,248,0.14),rgba(255,255,255,0.04),rgba(249,115,22,0.12))] shadow-[0_30px_90px_rgba(2,6,23,0.3)]">
@@ -104,10 +106,12 @@ function FeaturedShowcase({ featuredArtworks }) {
             <img
               src={leadArtwork.thumb}
               alt={leadArtwork.name}
-              className="h-full w-full object-cover transition-transform duration-700 group-hover:scale-[1.05]"
+              className={`h-full w-full object-cover transition-[transform,filter] duration-700 group-hover:scale-[1.05] ${leadShouldBlur ? 'scale-[1.02] blur-xl' : ''}`}
               loading="lazy"
             />
           </div>
+          {leadIsMature ? <div className="absolute left-5 top-20 rounded-full border border-amber-300/20 bg-black/60 px-3 py-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-amber-100">Mature content</div> : null}
+          {leadShouldBlur ? <div className="absolute inset-x-5 bottom-28 rounded-full border border-amber-300/20 bg-black/60 px-3 py-1 text-center text-[10px] font-semibold uppercase tracking-[0.16em] text-amber-100">Blurred by your settings</div> : null}
           <div className="absolute inset-x-0 top-0 flex items-start justify-between p-5 md:p-7">
             <div className="inline-flex items-center gap-2 rounded-full border border-amber-300/20 bg-amber-300/10 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.2em] text-amber-100 backdrop-blur-sm">
               <i className="fa-solid fa-star text-[10px]" />
@@ -174,7 +178,7 @@ function FeaturedShowcase({ featuredArtworks }) {
                   <img
                     src={art.thumb}
                     alt={art.name}
-                    className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-[1.04]"
+                    className={`h-full w-full object-cover transition-[transform,filter] duration-300 group-hover:scale-[1.04] ${art?.maturity?.should_blur ? 'scale-[1.02] blur-xl' : ''}`}
                     loading="lazy"
                   />
                 </div>

resources/js/components/profile/tabs/TabPosts.jsx

@@ -5,10 +5,6 @@ import PostComposer    from '../../Feed/PostComposer'
 import PostCardSkeleton from '../../Feed/PostCardSkeleton'
 import FeedSidebar     from '../../Feed/FeedSidebar'
 
-function formatCompactNumber(value) {
-  return Number(value ?? 0).toLocaleString()
-}
-
 function EmptyPostsState({ isOwner, username }) {
   return (
     <div className="flex flex-col items-center justify-center rounded-[28px] border border-dashed border-white/12 bg-white/[0.03] px-6 py-20 text-center">
@@ -78,7 +74,6 @@ export default function TabPosts({
   suggestedUsers,
   socialLinks,
   countryName,
-  profileUrl,
   onTabChange,
 }) {
   const [posts,    setPosts]    = useState([])
@@ -116,78 +111,14 @@ export default function TabPosts({
     setPosts((prev) => prev.filter((p) => p.id !== postId))
   }, [])
 
-  const summaryCards = [
-    { label: 'Followers', value: formatCompactNumber(followerCount), icon: 'fa-user-group' },
-    { label: 'Uploads', value: formatCompactNumber(stats?.uploads_count ?? 0), icon: 'fa-image' },
-    { label: 'Awards', value: formatCompactNumber(stats?.awards_received_count ?? 0), icon: 'fa-trophy' },
-    { label: 'Location', value: countryName || 'Unknown', icon: 'fa-location-dot' },
-  ]
-
   return (
     <div className="py-6">
-      <div className="grid gap-4 xl:grid-cols-[minmax(0,1fr)_20rem]">
-        <section className="rounded-[30px] border border-white/10 bg-[linear-gradient(135deg,rgba(56,189,248,0.08),rgba(255,255,255,0.04),rgba(249,115,22,0.06))] p-6 shadow-[0_20px_60px_rgba(2,6,23,0.24)]">
-          <div className="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
-            <div className="max-w-3xl">
-              <p className="text-[11px] font-semibold uppercase tracking-[0.24em] text-sky-200/80">Profile posts</p>
-              <h2 className="mt-2 text-3xl font-semibold tracking-[-0.03em] text-white">
-                Updates, thoughts, and shared work from @{username}
-              </h2>
-              <p className="mt-3 max-w-2xl text-sm leading-relaxed text-slate-300">
-                This stream adds the human layer to the profile: quick notes, shared artwork posts, and announcements that do not belong inside the gallery grid.
-              </p>
-            </div>
-
-            <div className="flex flex-wrap gap-2">
-              <button
-                type="button"
-                onClick={() => onTabChange?.('artworks')}
-                className="inline-flex items-center gap-2 rounded-2xl border border-white/15 bg-white/[0.06] px-4 py-2.5 text-sm font-medium text-slate-200 transition-colors hover:bg-white/[0.1]"
-              >
-                <i className="fa-solid fa-images fa-fw" />
-                View artworks
-              </button>
-              <button
-                type="button"
-                onClick={() => onTabChange?.('about')}
-                className="inline-flex items-center gap-2 rounded-2xl border border-white/10 bg-white/[0.03] px-4 py-2.5 text-sm font-medium text-slate-300 transition-colors hover:bg-white/[0.08] hover:text-white"
-              >
-                <i className="fa-solid fa-id-card fa-fw" />
-                About creator
-              </button>
-              {profileUrl ? (
-                <a
-                  href={profileUrl}
-                  className="inline-flex items-center gap-2 rounded-2xl border border-white/10 bg-white/[0.03] px-4 py-2.5 text-sm font-medium text-slate-300 transition-colors hover:bg-white/[0.08] hover:text-white"
-                >
-                  <i className="fa-solid fa-user fa-fw" />
-                  Canonical profile
-                </a>
-              ) : null}
-            </div>
-          </div>
-        </section>
-
-        <section className="grid grid-cols-2 gap-3 sm:grid-cols-4 xl:grid-cols-2">
-          {summaryCards.map((card) => (
-            <div
-              key={card.label}
-              className="rounded-[24px] border border-white/10 bg-white/[0.04] px-4 py-4 shadow-[inset_0_1px_0_rgba(255,255,255,0.04)]"
-            >
-              <div className="flex items-center justify-between gap-3">
-                <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">{card.label}</div>
-                <i className={`fa-solid ${card.icon} text-slate-500`} />
-              </div>
-              <div className="mt-3 text-xl font-semibold tracking-tight text-white">{card.value}</div>
-            </div>
-          ))}
-        </section>
-      </div>
-
-      <div className="mt-6 grid items-start gap-6 xl:grid-cols-[minmax(0,1fr)_20rem]">
+      <div className="grid items-start gap-6 xl:grid-cols-[minmax(0,1fr)_20rem]">
         <div className="min-w-0 space-y-4">
         {isOwner && authUser && (
-          <PostComposer user={authUser} onPosted={handlePosted} />
+          <div className="sticky top-24 z-20">
+            <PostComposer user={authUser} onPosted={handlePosted} />
+          </div>
         )}
 
         {!loaded && loading && (

resources/js/components/profile/tabs/TabStats.jsx

@@ -19,6 +19,7 @@ function KpiCard({ icon, label, value, color = 'text-sky-400' }) {
  * KPI overview cards. Charts can be added here once chart infrastructure exists.
  */
 export default function TabStats({ stats, followerCount, followAnalytics }) {
+  const medalTotals = stats?.medal_totals ?? null
   const kpis = [
     { icon: 'fa-eye',           label: 'Profile Views',     value: stats?.profile_views_count,            color: 'text-sky-400' },
     { icon: 'fa-images',        label: 'Uploads',           value: stats?.uploads_count,                  color: 'text-violet-400' },
@@ -62,6 +63,31 @@ export default function TabStats({ stats, followerCount, followAnalytics }) {
               <KpiCard key={kpi.label} {...kpi} />
             ))}
           </div>
+          <div className="mt-8 rounded-2xl border border-white/10 bg-white/4 p-5 shadow-xl shadow-black/20">
+            <div className="flex items-center justify-between gap-4">
+              <div>
+                <h3 className="text-xs font-semibold uppercase tracking-widest text-slate-500">Medal Breakdown</h3>
+                <p className="mt-2 text-sm text-slate-400">Real medal totals collected across all public artworks.</p>
+              </div>
+              <div className="text-right">
+                <div className="text-xs uppercase tracking-widest text-slate-500">Weighted Score</div>
+                <div className="mt-1 text-2xl font-bold text-white tabular-nums">{Number(medalTotals?.score_total ?? 0).toLocaleString()}</div>
+              </div>
+            </div>
+            <div className="mt-4 grid grid-cols-2 gap-3 md:grid-cols-4">
+              {[
+                { label: 'Gold', value: medalTotals?.gold ?? 0, color: 'text-amber-300' },
+                { label: 'Silver', value: medalTotals?.silver ?? 0, color: 'text-slate-300' },
+                { label: 'Bronze', value: medalTotals?.bronze ?? 0, color: 'text-orange-300' },
+                { label: 'Total Medals', value: medalTotals?.count ?? 0, color: 'text-cyan-300' },
+              ].map((item) => (
+                <div key={item.label} className="rounded-2xl border border-white/10 bg-black/15 px-4 py-4">
+                  <div className="text-[11px] uppercase tracking-widest text-slate-500">{item.label}</div>
+                  <div className={`mt-2 text-2xl font-semibold tabular-nums ${item.color}`}>{Number(item.value).toLocaleString()}</div>
+                </div>
+              ))}
+            </div>
+          </div>
           <h3 className="mt-8 mb-4 text-xs font-semibold uppercase tracking-widest text-slate-500 flex items-center gap-2">
             <i className="fa-solid fa-user-group text-emerald-400 fa-fw" />
             Follow Growth