/* global React, INK, CREAM, PULSE, GENS, GradText, CTAButton, Reveal, useReveal, SB_EASE, UGCStatus */ // UGC Campaigns — Materials · Posting · Analytics · Payouts · How it runs. const { useState: ugS } = React; const UGCBadge = ({ label, ac = '#813CED', bg = CREAM }) =>
{label}
; const UGCShell = ({ label, ac, h1, h2, sub, note, panel, flip = false, lean = 'right', bg = '#fff' }) => (

{h1}
{h2}

{sub}

 Launch a campaign {note &&
{note}
}
{panel}
); const UGCCard = ({ children, pad = 18 }) =>
{children}
; // ---------- § 01 Materials ---------- const UGC_OBJECTS = [['assets/control/collar-silver.png', 'Sculpt Collar'], ['assets/control/heels-black.webp', 'Aurelle Heel'], ['assets/control/top-red.webp', 'Slip Top']]; const UGC_OUTFITS = [['assets/garments/top-velvet-emerald.webp', 'Velvet Halter'], ['assets/garments/bottom-mini-oxblood.webp', 'Oxblood Mini'], ['assets/garments/shoe-stiletto-gold.webp', 'Gold Stiletto']]; const MaterialsPanel = () => { const [ref, on] = useReveal(0.35); const Lib = ({ title, items, d0 }) => (
{title}
{items.map(([src, n], i) =>
{n}
{n}
)}
); return (
Aurelle brand kit Synced to 12 creator studios
{['No samples', 'No shipping', 'No returns', 'Pixel-consistent'].map(c => ✓ {c})}
); }; // ---------- § 02 Posting ---------- const UGC_STAGES = ['Brief', 'Created', 'Approved', 'Posted']; const UGC_TRACK = [ { g: GENS[0], n: 'Scarlett', p: 'IG Reel', done: 4, s: 'posted', note: 'Verified 9:02 PM' }, { g: GENS[5], n: 'Nova', p: 'TikTok', done: 3, s: 'scheduled', note: 'Publishes Fri' }, { g: GENS[3], n: 'Jade', p: 'TikTok', done: 1, s: 'nudged', note: 'Due in 2 days' }]; const TrackerPanel = () => { const [ref, on] = useReveal(0.35); return (
Deliverables Brief → Created → Approved → Posted
{UGC_TRACK.map((r, i) =>
{r.n} · {r.p}
{UGC_STAGES.map((st, k) => ( {k < r.done ? '✓' : ''} {st} {k < 3 && } ))}
{r.s === 'nudged' ? '⚡ Auto-nudge sent — deadline reminder, no DM from you' : r.note}
)}
); }; // ---------- § 03 Analytics ---------- const UGC_BARS = [['Scarlett', 100, '412k', true], ['Nova', 70, '287k', true], ['Mara', 48, '198k', true], ['Jade', 0, '—', false]]; const UGCAnalyticsPanel = () => { const [ref, on] = useReveal(0.35); const [tab, setTab] = ugS(0); return (
{['By creator', 'By post', 'By platform'].map((p, i) => setTab(i)} style={{ borderRadius: 9999, padding: '6px 12px', fontSize: 10.5, fontWeight: tab === i ? 700 : 600, cursor: 'pointer', whiteSpace: 'nowrap', transition: 'all 0.18s', background: tab === i ? INK : 'rgb(246,243,242)', color: tab === i ? '#fff' : 'rgba(28,27,27,0.6)', boxShadow: tab === i ? 'none' : 'inset 0 0 0 1px rgba(28,27,27,0.08)' }}>{p})} Campaign to date
{[['Views', '2.1M', '▲ 22%'], ['Engagement', '8.4%', '▲ 1.1'], ['Link taps', '31k', '▲ 9%']].map(([l, v, d]) =>
{l}
{v} {d}
)}
{UGC_BARS.map(([n, w, v, ok], i) =>
{n} {v} {ok && ✓}
)}
✓ = read from the publishing pipeline, not self-reported. Jade hasn’t posted — so she has no numbers to inflate.
); }; // ---------- § 04 Payouts ---------- const UGC_PAY = [ { g: GENS[0], n: 'Scarlett', a: '$400', s: 'Paid', d: 'Released on verified post · 9:02 PM' }, { g: GENS[5], n: 'Nova', a: '$400', s: 'Holds', d: 'Releases Friday, when the post verifies' }, { g: GENS[3], n: 'Jade', a: '$400', s: 'Escrow', d: 'Returns to you if the deadline passes' }]; const PayoutsPanel = () => { const [ref, on] = useReveal(0.35); return (
$4,800 escrowed · one charge $1,600 released · $3,200 held
{UGC_PAY.map((r, i) =>
{r.n} · {r.a} {r.d} {r.s}
)}
One receipt from Sozee — not twelve invoices, twelve wires and a tax-form folder.
); }; // ---------- Sections ---------- const MaterialsSection = () => } />; const TrackerSection = () => } />; const UGCAnalyticsSection = () => } />; const PayoutsSection = () => } />; // ---------- § 05 How it runs ---------- const UGC_STEPS = [ ['01', 'Brief it', 'Deliverables, deadline, rate per creator — one page.'], ['02', 'Stock the kit', 'Products and wardrobe sync to every accepted studio.'], ['03', 'They create & post', 'Content is approved, scheduled and verified on publish.'], ['04', 'Payouts release', 'Escrow pays on proof. You read one dashboard.']]; const HowItRunsSection = () => (

Live in
four moves.

The whole campaign runs inside one board — the part of the job that used to be spreadsheets, DMs and follow-ups.

{UGC_STEPS.map(([n, t, d], i) =>
§ {n}
{t}
{d}
)}
); Object.assign(window, { MaterialsSection, TrackerSection, UGCAnalyticsSection, PayoutsSection, HowItRunsSection });