/* App entry point — composes sections into the full page. */
const DEFAULTS = /*EDITMODE-BEGIN*/{
"headlineVariation": "primary",
"billingDefault": "monthly",
"accentHue": 244,
"showRolesMarquee": true,
"showCalcDeepDive": true,
"heroFragmentsRotation": "default"
}/*EDITMODE-END*/;
const HEADLINES = {
primary: "Stop chasing\nyour money.",
secondary: "The set companion\nfor film freelancers.",
payroll: "Wrap the day.\nNot the math.",
};
function App() {
const [tweaks, setTweak] = useTweaks(DEFAULTS);
// Apply accent hue to CSS vars, live
React.useEffect(() => {
const h = tweaks.accentHue;
document.documentElement.style.setProperty('--sa-accent', `hsl(${h}, 76%, 64%)`);
document.documentElement.style.setProperty('--sa-accent-hi', `hsl(${h}, 86%, 72%)`);
document.documentElement.style.setProperty('--sa-accent-2', `hsl(${h}, 96%, 82%)`);
document.documentElement.style.setProperty('--sa-accent-dim', `hsla(${h}, 76%, 64%, 0.16)`);
document.documentElement.style.setProperty('--sa-accent-bd', `hsla(${h}, 86%, 72%, 0.38)`);
}, [tweaks.accentHue]);
// Reveal-on-scroll
React.useEffect(() => {
const els = document.querySelectorAll('.reveal');
const io = new IntersectionObserver((entries) => {
entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('in'); });
}, {threshold: 0.15});
els.forEach(el => io.observe(el));
return () => io.disconnect();
});
// Page-load fade-in: trigger once React has mounted and painted
React.useEffect(() => {
const id = requestAnimationFrame(() => {
document.body.classList.add('page-ready');
});
return () => cancelAnimationFrame(id);
}, []);
const headline = HEADLINES[tweaks.headlineVariation] || HEADLINES.primary;
return (
<>
{tweaks.showRolesMarquee && }
{/* ── Section title (Apple intro pattern) ── */}
What's inside
Built for the call sheet. Not the boardroom.
Every screen, every calculation, every invoice template — designed by people
who have been on a 14-hour day and still had to do their own bookkeeping.
Here's what you get.
{/* ── Calculator deep-dive ── */}
ACCP rates. Down to the meal penalty.}
body={
<>
Pick your role. Punch in your hours. Set Assist runs the ACCP scale —
base rate, OT 1.5× hours 1–2, OT 2× hours 3–4, OT 3× hour 5+, meal
penalties, kit fees, weekend bumps, multipliers — and tells you what
your day is worth before you've even unwrapped the slate.
Custom roles and flat day rates work the same way. Save the calc to a
job. Email it to a PM. Paste it into an invoice.
}
>
{/* ── Invoicing deep-dive ── */}
Get paid. Without the spreadsheet.}
body={
<>
Gear-only, labour-only, or both at once. Auto-numbered. Net 15, 30,
or 60. Tax applied per line. Production company address book remembers
who you bill and what they owe.
On Pro, your logo lands on every PDF, and the Finances tab tells you
who's late, who paid, and what your HST quarter looks like.
}
accent="var(--sa-green)"
reverse
>
{/* ── Crew deep-dive ── */}
Get found. Get booked.}
body={
<>
Build a crew profile — role, location, kit, availability. PMs in the
directory can find you and reach out. Block your shoot days on the
calendar so you stop double-booking by accident.
Teams lets you split a rental three ways with a tap, and the sun
tracker pulls accurate sunrise/sunset for any location on your call sheet.
}
accent="var(--sa-pink)"
>
{/* ── Finances deep-dive ── */}
Tax time without the panic.}
body={
<>
Every invoice you send and every kilometre you drive lands in one
dashboard. CRA mileage at $0.70/km for the first 5,000 — automatic.
HST tracked by quarter so you stop being surprised in July.
Expenses by category. Year-to-date totals. Export when your
accountant asks.
}
accent="var(--sa-amber)"
reverse
>
{/* ── Payroll Wrap deep-dive ── */}
Wrap the show. Pay the crew.}
body={
<>
For Production Managers and key creatives running their own payroll.
Add the crew, pull in their timesheets, assign ACCP line numbers, and
export a payroll-ready bundle in one screen.
Common-line presets handle 80% of jobs. Edit per-crew rates without
breaking the totals. Export to PDF or your favourite payroll service.
}
accent="var(--sa-purple)"
>
{/* ── Kit deep-dive ── */}
Your gear is a second income.}
body={
<>
Track every body, lens, monitor, and stand. Set daily rates per item.
Total kit value at a glance. When a job calls for kit, drop the items
into the calculator or invoice — rates auto-fill.
Insurance? Export a manifest. Retired a piece? Mark it sold. Your kit
is your business. Treat it like one.
}
accent="var(--sa-teal)"
reverse
>
{/* ── Pricing ── */}
{/* ── Compare ── */}
{/* ── FAQ ── */}
{/* ── Final CTA ── */}
That's a wrap.
Free to start. Five minutes to set up. One less spreadsheet on your laptop.