/* KitRate — the media kit document + template themes */
/* ---------- template themes (1 flagship + 4 variants) ---------- */
const KIT_THEMES = [
{
id: "editorial", label: "Minimal editorial",
bg: "#FBFAF6", ink: "#1D1A15", muted: "#7C7466", line: "#E2DCCF",
accent: "#1F3A8F", accentInk: "#FFFFFF",
serif: "'Newsreader', Georgia, serif", sans: "'Schibsted Grotesk', sans-serif",
coverMode: "light", desc: "Quiet confidence — hairlines, serif headlines, lots of air."
},
{
id: "bold", label: "Bold creator portfolio",
bg: "#16140F", ink: "#F4F1EA", muted: "#9B948A", line: "#33302A",
accent: "#E0742C", accentInk: "#16140F",
serif: "'Archivo', sans-serif", sans: "'Schibsted Grotesk', sans-serif",
coverMode: "dark", desc: "Dark ground, oversized type, athletic energy."
},
{
id: "luxe", label: "Luxury beauty / fashion",
bg: "#F5EFE6", ink: "#2E2418", muted: "#8A7B66", line: "#E0D5C2",
accent: "#8E6F3E", accentInk: "#FFFFFF",
serif: "'Libre Caslon Text', Georgia, serif", sans: "'Archivo', sans-serif",
coverMode: "light", desc: "Champagne neutrals, Caslon serifs, gallery spacing."
},
{
id: "vital", label: "Fitness / wellness",
bg: "#F4F4EF", ink: "#1B2620", muted: "#6E7A70", line: "#DCDED2",
accent: "#1F5C40", accentInk: "#FFFFFF",
serif: "'Schibsted Grotesk', sans-serif", sans: "'Schibsted Grotesk', sans-serif",
coverMode: "light", desc: "Clean grotesque, deep green, performance-data forward."
},
{
id: "ugc", label: "UGC performance marketer",
bg: "#FFFFFF", ink: "#171717", muted: "#737373", line: "#E8E5DE",
accent: "#1F3A8F", accentInk: "#FFFFFF",
serif: "'Spline Sans Mono', monospace", sans: "'Schibsted Grotesk', sans-serif",
coverMode: "stat", desc: "Stat-led, mono accents — built to read like a results sheet."
}
];
const KIT_SECTIONS = [
{ id: "cover", label: "Cover" },
{ id: "bio", label: "About" },
{ id: "audience", label: "Audience snapshot" },
{ id: "metrics", label: "Platform metrics" },
{ id: "showcase", label: "Video showcase" },
{ id: "pillars", label: "Content pillars" },
{ id: "partners", label: "Brand collaborations" },
{ id: "testimonials", label: "Testimonials" },
{ id: "packages", label: "Packages & deliverables" },
{ id: "rates", label: "Rate card" },
{ id: "addons", label: "Usage rights & add-ons" },
{ id: "casestudy", label: "Case study" },
{ id: "contact", label: "Contact / CTA" }
];
const DEFAULT_KIT_CONFIG = {
templateId: "editorial",
hidden: [],
order: KIT_SECTIONS.map(s => s.id),
showRates: true,
showRateRanges: true, // false = midpoint "from $X"
packageNames: ["Testing the Waters", "The Single Round", "Fight Camp Series", "Main Event Retainer"],
showcaseKpi: "smart", /* smart | views | engagement | recent */
density: "comfortable" // comfortable | compact
};
/* ---------- helpers ---------- */
function kitPackages(rates, names) {
const E = KitRateEngine;
const organic = rates.items.filter(i => i.platform !== "UGC").sort((a, b) => b.mid - a.mid);
if (!organic.length) return [];
const top = organic[0], second = organic[1] || organic[0];
const pk = [];
const entryFloor = E.roundRate(Math.max(top.floor || top.low, (top.target || top.mid) * 0.72));
const entryAnchor = E.roundRate(Math.max(entryFloor, (top.target || top.mid) * 0.9));
pk.push({
name: names[0] || "Testing the Waters",
contents: ["1× " + top.label, "One revision", "30-day organic usage"],
blurb: "A simple first collab to see the fit — one post, no commitment.",
low: entryFloor, high: entryAnchor, flat: entryFloor === entryAnchor, tag: "Start here"
});
pk.push({
name: names[1] || "Single",
contents: ["1× " + top.label, "1× Story set (3 frames)"],
blurb: "A single, well-made placement with full production attention.",
low: E.roundRate(top.low * 1.18), high: E.roundRate(top.high * 1.18)
});
/* best-value bundle — priced between the single placement and the retainer */
pk.push({
name: names[2] || "Series",
contents: ["2× " + top.label, "1× " + second.label, "30-day organic usage"],
blurb: "A multi-week narrative arc — the format that performs best.",
low: E.roundRate((top.low * 2 + second.low) * 0.95), high: E.roundRate((top.high * 2 + second.high) * 0.95),
featured: true, tag: "Best value"
});
if (rates.retainer) {
pk.push({
name: names[3] || "Retainer",
contents: [...rates.retainer.items, "Monthly performance recap", "Priority scheduling"],
blurb: "Always-on partnership, priced under à-la-carte.",
low: rates.retainer.low, high: rates.retainer.high, perMonth: true
});
}
return pk;
}
/* ---------- the document ---------- */
function KitDocument({ profile, rates, config, scale = 1, shared = false, preparedFor = null }) {
const t = KIT_THEMES.find(x => x.id === config.templateId) || KIT_THEMES[0];
const E = KitRateEngine;
const compact = config.density === "compact";
/* motion gating — "countup" tweak widens count-up beyond the share page;
"reveal" slides sections in on scroll (share page only, transform-only so
print and DOM captures never hide content) */
const krTweaks = window.KR_TWEAKS || {};
const countMode = krTweaks.countup || "share";
const motion = !KR_REDUCED_MOTION && countMode !== "off" && (shared || countMode === "everywhere");
const reveal = shared && !KR_REDUCED_MOTION && krTweaks.reveal !== false;
const pad = compact ? "40px 52px" : "56px 64px";
const visible = config.order.filter(id => !config.hidden.includes(id));
const packages = kitPackages(rates, config.packageNames);
const plats = Object.entries(profile.platforms || {}).filter(([, v]) => v && v.followers);
const a = profile.audience || {};
/* section numbers follow the visible order, so drag-reorder renumbers cleanly */
const num = (id) => String(visible.filter(x => x !== "cover" && x !== "contact").indexOf(id) + 1).padStart(2, "0");
const topReels = rankReels(profile.reels, config.showcaseKpi || "smart");
const eyebrowStyle = { fontFamily: "var(--mono)", fontSize: 10.5, letterSpacing: "0.16em", textTransform: "uppercase", color: t.muted };
const h2Style = { fontFamily: t.serif, fontSize: compact ? 26 : 30, fontWeight: 500, letterSpacing: "-0.01em", color: t.ink, margin: "8px 0 0" };
const Section = ({ id, eyebrow, title, children, style }) => {
const [revealRef, revealSeen] = useRevealOnce(!reveal);
return (
{eyebrow && {eyebrow}
}
{title && {title} }
{children}
);
};
const renderers = {
cover: () => (
Media kit · {new Date().getFullYear()}{preparedFor ? — prepared for {preparedFor} : null}
{profile.platforms.instagram?.handle || profile.website}
{profile.name || "Your Name"}
{profile.tagline}
{[profile.nicheLabel, profile.location].filter(Boolean).map(x => (
{x}
))}
{t.coverMode === "stat" && plats.length > 0 && (
{plats.map(([k, v]) => (
{E.fmtCompact(v.followers)}
{k} followers
))}
),
bio: () => (
{profile.bio || "Add a short bio in the editor."}
),
audience: () => (
),
metrics: () => (
),
showcase: () => topReels.length === 0 ? null : (
Auto-selected from connected accounts — ranked by {{ smart: "views × engagement", views: "views", engagement: "engagement rate", recent: "most recent" }[config.showcaseKpi || "smart"]}, trailing 120 days.
),
pillars: () => (
{(profile.pillars || []).map((pl, i) => (
{String(i + 1).padStart(2, "0")}
{pl.title}
{pl.desc}
))}
{(profile.contentFormats || []).length > 0 && (
{profile.contentFormats.map(f => (
{f}
))}
)}
),
partners: () => (
{(profile.pastBrands || []).map((b, i) => (
{b.name}
{b.category}
{b.result}
))}
Open to first partnerships — UGC samples available on request.
}
),
testimonials: () => (profile.testimonials || []).length === 0 ? null : (
{(profile.testimonials || []).map((tm, i) => (
“ {tm.quote}”
— {tm.author}
))}
),
packages: () => (
{packages.map((pk, i) => (
{pk.tag && (
{pk.tag}
)}
{pk.name}
{pk.blurb}
{pk.contents.map(c => {c} )}
{config.showRates && (
{pk.flat ? E.fmtMoney(pk.low) : config.showRateRanges ? E.fmtRange(pk.low, pk.high) : "from " + E.fmtMoney(pk.low)}
{pk.perMonth && /mo }
{pk.flat &&
Flat rate
}
{pk.featured &&
Bundle — under à-la-carte
}
)}
))}
All sponsored content includes platform-appropriate paid-partnership disclosure.
),
rates: () => config.showRates ? (
) : null,
addons: () => config.showRates ? (
{rates.addons.map(ad => (
{ad.label}
+{ad.pct}%
))}
Organic posting rights for 30 days are included with every deliverable. Anything beyond — paid amplification, whitelisting, exclusivity, perpetual use — is licensed separately so both sides know exactly what's covered.
) : null,
casestudy: () => profile.caseStudy ? (
{profile.caseStudy.context}
{profile.caseStudy.deliverables}
{profile.caseStudy.results.map((r, i) => (
))}
) : null,
contact: () => (
Next step
Let's build a campaign.
{profile.email}{profile.website ? " · " + profile.website : ""}
{plats.map(([k, v]) => (
{k}: {v.handle}
))}
)
};
return (
{visible.map(id => {
const r = renderers[id];
return r ?
{r()} : null;
})}
Made with KitRate
Rates benchmarked {rates.benchmarkDate}