/* global React, INK, CREAM, PULSE, GENS, GradText, CTAButton, Reveal, useReveal, SB_EASE, MShell, MHead */ // Brand Portal solutions page — mobile layout (skews alternate right → left → right …). const { useState: bmzS } = React; // eyebrows are hero-only on mobile — keep the heading, drop the pill const MBPBadgeHead = ({ title, sub }) => ; const MBPCard = ({ lean = 'right', children, pad = 12 }) => (
{children}
); // hero const MBPHero = () => { const [ref, on] = useReveal(0.25); return (
sozee
Solutions / Brand Portal

Creator reach,
bought like media.

Stock the library, set a CPM, and pay only for the views the content actually earns — never for promises.

Open the portal
A Aurelle · live 18 creators posting
{[['Views', '1.34M'], ['Eff. CPM', '$1.42'], ['Spend', '$1,994']].map(([l, v]) =>
{l}
{v}
)}
$1,994 spent $2,500 · pauses at $0
); }; // § 01 old way const MBP_OLD = [['Wk 1', 'DM 40 creators, hear from 6'], ['Wk 2', 'Negotiate, sign 3'], ['Wk 3', 'Ship samples, wait'], ['Wk 7', 'Screenshots as reporting']]; const MBP_NEW = [['Day 1', 'Import catalog, set CPM, live'], ['Day 3', 'First posts land'], ['Ongoing', 'Pay per view, read receipts']]; const MBPOldWay = () => { const [ref, on] = useReveal(0.3); return ( Fire the
spreadsheet.} sub="DMs, rate cards, shipped samples, chased drafts — the portal replaces the whole pipeline." />
The campaign, before
{MBP_OLD.map(([t, d], i) =>
{t} {d}
)}
With the portal
{MBP_NEW.map(([t, d], i) =>
{t} {d}
)}
); }; // § 02 pay per view const MBPCpm = () => { const [cpm, setCpm] = bmzS(2.5); const reach = Math.round(2500 / cpm); return ( Pay for views.
Nothing else.} sub="Set the CPM, prepay a budget — spend meters against real views and pauses at $0." />
spend = (views ÷ 1000) × yourCPM
remaining = budget − spend // pauses at 0
Your CPM setCpm(c => Math.max(1, +(c - 0.5).toFixed(2)))} style={{ width: 24, height: 24, borderRadius: '50%', background: '#fff', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.12)', display: 'grid', placeItems: 'center', cursor: 'pointer', fontSize: 12, fontWeight: 700 }}>− ${cpm.toFixed(2)} setCpm(c => Math.min(10, +(c + 0.5).toFixed(2)))} style={{ width: 24, height: 24, borderRadius: '50%', background: '#fff', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.12)', display: 'grid', placeItems: 'center', cursor: 'pointer', fontSize: 12, fontWeight: 700 }}>+
$2,500 budget buys ~{reach.toLocaleString()}k views
); }; // § 03 catalog const MBPCatalog = () => ( Your store,
in by lunch.} sub="Scrape your site, connect Shopify, paste URLs or upload a file — live the same day." />
{[['Scrape our site', 'Keep what you want'], ['Connect your store', 'Shopify · Woo + 6'], ['Paste URLs', 'A curated set'], ['Upload a file', 'CSV · Excel · ZIP']].map(([t, d], i) =>
{t}
{d}
)}
); // § 04 in frame const MBPInFrame = () => { const [ref, on] = useReveal(0.3); return ( No samples.
No shipping.} sub="The studio renders your product into creator content — pixel-consistent, correctly tagged." />
Sculpt Collar · Silver Your product · CPM $3.00 IN FRAME
{[2, 4, 6].map((n, i) =>
)}
); }; // § 05 safety const MBPSafety = () => { const [state, setState] = bmzS('pending'); return ( Your brand.
Your sign-off.} sub="Pre-approval holds every post for your yes. Anything live can be flagged — spend held while we review." />
Scarlett · IG + Fanvue
Sculpt Collar · tonight 9:00 PM
{state === 'pending' ?
setState('approved')} style={{ borderRadius: 9999, padding: '5px 11px', background: PULSE, color: '#fff', fontSize: 8, fontWeight: 800, letterSpacing: '0.04em', cursor: 'pointer' }}>APPROVE setState('declined')} style={{ borderRadius: 9999, padding: '5px 11px', fontSize: 8, fontWeight: 700, color: 'rgba(28,27,27,0.6)', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.14)', cursor: 'pointer' }}>Decline
: setState('pending')} style={{ marginTop: 'auto', fontSize: 8.5, fontWeight: 700, cursor: 'pointer', color: state === 'approved' ? '#15803D' : '#B42318' }}> {state === 'approved' ? '✓ Approved' : '✕ Declined'} · undo}
{['⚑ Not my product', '⚑ Misrepresents brand', '⚑ Off-brand', '⚑ Undisclosed ad'].map(f => {f})}
); }; // § 06 receipts const MBPReceipts = () => { const [ref, on] = useReveal(0.3); return ( Attribution,
not screenshots.} sub="Views, engagement and link taps — by creator, product, post and platform." />
{[['Views', 100, '988K'], ['Engagement', 36, '86K'], ['Link taps', 9, '14K']].map(([l, w, v], i) =>
{l} {v}
)}
{[['By creator', 'Scarlett 412k · Nova 287k'], ['By product', 'Collar 512k · Mini 431k'], ['By platform', 'IG 46% · TT 38% · FV 16%']].map(([k, v]) =>
{k} {v}
)}
); }; // § 07 plans const MBPPlans = ({ badge = 'Brand Portal · Plans' }) => ( One fee for capacity.
Budget is fuel.} sub="A one-time fee sets products and budget cap — not a subscription. Every campaign dollar goes to views." />
{[{ n: 'Starter', p: '$500', d: '10 products · $2.5K cap', hot: false }, { n: 'Growth', p: '$750', d: '25 products · $5K cap', hot: true }, { n: 'Scale', p: '$1,000', d: '50 products · $10K cap', hot: false }].map((p, i) =>
{p.hot && MOST BRANDS}
{p.n}
{p.p} one-time
{p.d}
 )}
); const MBPPage = () => (
); Object.assign(window, { MBPPage });