feat: ship creator journey v2 and profile updates

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