/* global React, INK, CREAM, PULSE, GENS, GradText, Reveal, useReveal, SB_EASE, MShell, MHead */ // Shared across the Creators solutions pages: ONE way creators make brand money — brands stock // products, you post one, you're paid on views. The three Brands pages sit underneath as // "here's how the brand side works" links. const { useState: cbS } = React; const CB_COPY = { influencer: { h1: 'One more way', h2: 'to get paid.', lede: 'Brands put their products into Sozee and pay creators for the views those posts earn. Choose a product, make your content with it, post it — you get paid on how it performs.', mLede: 'Brands put products into Sozee and pay for the views your post earns.', d: ['Sponsored products sit right next to your own wardrobe, each with its rate per thousand views. Pick what fits your feed — no pitching, no media kit, no emails.', 'Generate as normal. The product renders into your content pixel-consistent, in your setting, at your angle — nothing about your look changes.', 'Queue it with the rest of your week. Payment releases automatically once the post verifies, and a post that overperforms just pays more.'] }, micro: { h1: 'Brand money', h2: 'before the follower count.', lede: 'You don’t need a big following to get paid. Brands put products into Sozee and pay for views, not audience size — so a small account making good content can start earning now.', mLede: 'Brands pay for views, not audience size — so a small account can start earning now.', d: ['The sponsored shelf is open to every creator. Nobody has to say yes to you first — the rate is posted and the same for everyone.', 'Generate the set like any other post. The product lands in frame correctly, so your first sponsored shoot looks like your best one.', 'Schedule it, post it, get paid per thousand views. Your first paid post can be your first good post.'] }, ai: { h1: 'They post.', h2: 'You get paid.', lede: 'A character with an audience earns like a creator. Brands put products into Sozee and pay for views — so your characters can carry paid placements without a single shoot.', mLede: 'Brands pay for views — your characters carry paid placements without a shoot.', d: ['Pick a sponsored product from the library and assign it to whichever character fits the brand.', 'It renders into their next set, pixel-consistent across every photo — identity lock holds, the product stays exact.', 'Queue across characters and earn per thousand views. More personas posting means more inventory earning.'] }, agency: { h1: 'A revenue line', h2: 'your roster isn’t billing yet.', lede: 'Brands put their products into Sozee and pay for the views each post earns. Every creator you manage can take paid placements — nothing to broker, and it lands in the same dashboard as their other numbers.', mLede: 'Brands pay for the views each post earns — paid placements for every creator you manage.', d: ['One sponsored library, your whole roster. Assign a product across creators in a single pass instead of brokering deals one by one.', 'Each creator generates it on their own locked model, so the product is consistent and every creator still looks like themselves.', 'Queue it from the same board and earn per thousand views — your highest performers earn proportionally, and it lands in one report.'] }, }; // the brand-side pages — the other half of this deal const CB_BRAND_PAGES = [ { t: 'UGC Campaigns', tag: 'Soon', href: '/ugc-campaigns', d: 'Brands run whole campaigns across the network' }, { t: 'Brand Portal', tag: 'Soon', href: '/brand-portal', d: 'Where products and view rates get set' }, { t: 'White Label', tag: 'Beta', href: '/white-label', d: 'Enterprise programs that cover your seat' }, ]; const CBTag = ({ label, compact = false }) => { const beta = label === 'Beta'; return {label}; }; // ---------- step 1: pick a product out of the brand library ---------- const CBLibrary = ({ h = 176 }) => { const [on, setOn] = cbS(false); return (
Brand library 412 products
{[['assets/control/collar-silver.png', '$3.00', true], ['assets/garments/top-velvet-emerald.webp', '$2.50'], ['assets/garments/shoe-stiletto-gold.webp', '$4.00']].map(([src, rate, sel], i) => {rate}/1k {sel && ✓} )}
setOn(true)} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', borderRadius: 8, padding: '7px 0', cursor: 'pointer', transition: `all 0.25s ${SB_EASE}`, background: on ? 'rgba(34,197,94,0.12)' : PULSE, color: on ? '#15803D' : '#fff', fontSize: 8.5, fontWeight: 800, letterSpacing: '0.05em', boxShadow: on ? 'inset 0 0 0 1px rgba(34,197,94,0.3)' : '0 6px 16px -4px rgba(104,19,212,0.4)' }}> {on ? '✓ ADDED TO YOUR NEXT SET' : 'ADD TO YOUR NEXT SET'}
); }; // ---------- step 2: generate with the product in frame ---------- const CBGenerate = ({ h = 176 }) => { const [ref, on] = useReveal(0.35); return (
rooftop at golden hour, collar in frame LOCKED
{['assets/shoot/brand-deal-1.webp', 'assets/shoot/brand-deal-2.webp', 'assets/shoot/brand-deal-3.webp'].map((src, i) => )}
Your look, your setting — the product stays exact.
); }; // ---------- step 3: schedule, post, earn ---------- const CBEarnings = ({ h = 176 }) => { const [ref, on] = useReveal(0.35); return (
Queued · posted Tue 9:00 PM $3.00 / 1k views
{[['Views', 100, '184k'], ['Earned', 62, '$552']].map(([l, w, v], i) => {l} {v} )}
Paid automatically once the post verifies.
); }; // ---------- desktop ---------- const BrandDealsSection = ({ bg = '#fff', audience = 'influencer' }) => { const c = CB_COPY[audience] || CB_COPY.influencer; const cardBg = bg === '#fff' ? CREAM : '#fff'; const steps = [['Select a sponsored product from the outfit library', c.d[0], ], ['Generate content in the promoted product', c.d[1], ], ['Schedule, post it, and earn', c.d[2], ]]; return (
Coming soon

{c.h1}
{c.h2}

{c.lede}
{steps.map(([t, d, media], i) =>
{media}
{i + 1} {t}
{d}
)}
For brands
How the other side of this works
{CB_BRAND_PAGES.map(p => {p.t} {p.d} )}
); }; // ---------- mobile ---------- const MBrandDealsSection = ({ bg = '#fff', audience = 'influencer' }) => { const c = CB_COPY[audience] || CB_COPY.influencer; const cardBg = bg === '#fff' ? CREAM : '#fff'; const steps = [['Select a sponsored product from the outfit library', c.d[0], ], ['Generate content in the promoted product', c.d[1], ], ['Schedule, post it, and earn', c.d[2], ]]; return (
Coming soon
{c.h1}
{c.h2}} sub={c.mLede} />
{steps.map(([t, d, media], i) =>
{media}
{i + 1} {t}
{d}
)}
For brands
{CB_BRAND_PAGES.map(p => {p.t} → )}
); }; Object.assign(window, { BrandDealsSection, MBrandDealsSection, CB_BRAND_PAGES });