/* Backentra marketing site — composed from DS primitives. Renders into #root. */ const MK = window.BackentraDesignSystem_93cf3a; const { Button, Icon, Card, Badge, SegmentedControl } = MK; const container = { maxWidth: "var(--container-max)", margin: "0 auto", padding: "0 32px" }; function Hero({ onJoin }) { return (
SOON Founding-member spots are open now

Run your service business like it's built to last.

Backentra gives service-based business owners the structure, support, and tools to run a stronger, more profitable business: jobs, schedule, clients, and invoicing in one dependable place. We're building it now, and the first group of companies gets in first.

No card, nothing to install · We'll email you before launch
); } function Pillars() { const items = (window.BackentraPillars || []).map(([ic, t, lead, d]) => [ic, t, lead + " " + d]); return (
Built for business

We're in your corner.

{items.map(([ic, t, d]) => (

{t}

{d}

))}
); } function Features() { const feats = [ ["calendar", "Smart scheduling", "Dispatch the right crew to the right job. Drag-and-drop calendar with travel time built in."], ["receipt", "Invoicing that gets paid", "Send invoices from the field and get paid faster with reminders and card payments."], ["users", "Client history", "Every job, note, and photo for every client, right where your team needs it."], ["bar-chart-3", "Reports that matter", "Know your revenue, margins, and crew utilization at a glance. No spreadsheets."], ]; return (
Everything in one place

The tools to run a stronger business.

From the first call to the final invoice, Backentra keeps the whole job organized.

{feats.map(([ic, t, d]) => (

{t}

{d}

 ))}
); } function Industries({ onProduct }) { const trades = ["Gutters", "Roofing", "Concrete & masonry", "Landscaping & lawn", "Tree service", "Plumbing", "HVAC", "Electrical", "Painting", "Remodeling & general contracting", "Pressure washing", "Snow & ice management"]; return (
Who it's for

Built for the trades.

Service businesses that run crews, quote work on site, and get paid after the job is done. If that is the shape of your day, this is built for you.

{trades.map((t) => ( {t} ))}

Not on the list? The platform does not care what the trade is, only that the work flows the same way. { e.preventDefault(); onProduct(); }} style={{ color: "var(--accent-text)", fontWeight: 600 }}>See how it works.

); } function Pricing({ onJoin, onPlans }) { const P = window.BK_PLANS; const tiers = ((P && P.TIERS) || []).filter((t) => t.monthly); const ent = ((P && P.TIERS) || []).filter((t) => !t.monthly)[0]; const annualPct = P ? Math.round(P.ANNUAL_DISCOUNT * 100) : 15; const money = (n) => "$" + Number(n).toLocaleString("en-US"); return (
Plans & pricing

One price for the whole platform.

Every plan includes unlimited jobs, unlimited clients, and unlimited portal users. What changes is how many people work in it.

{tiers.map((t) => ( ))}
Annual billing saves {annualPct}%.{ent ? " " + ent.name + " is quoted per company." : ""}
); } function CTA({ onJoin }) { return (

Built to back you up.

Join the list and we'll reach out before launch. Founding-member pricing is open until we go live.

); } /* Full-account sign-in dialog. Hand-rolled because this site ships no UI library, which means everything a or a modal component would give us for free has to be written out: without it the page behind stays fully tabbable, so a keyboard or screen-reader user tabs straight out of the dialog into content they cannot see, with no way back and no way to close. What is deliberate here: role="dialog" + aria-modal announces it as a dialog and tells assistive tech to treat everything outside as inert aria-labelledby/-describedby gives it a name and a first line, read on open focus moves in, and back out the trigger gets focus again on close, so the keyboard does not get dumped at the top of the document Tab / Shift+Tab wrap focus cannot leave the card while it is open Escape closes capture phase, so it wins before anything else listening backdrop click closes target check only, so a drag out of the card is not a close body scroll locked the page behind must not scroll under the overlay Focusables are re-read on every Tab rather than cached on open: the card's contents are static today, but a cached list silently stops matching the DOM the moment they are not. */ const BK_FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'; /* The real not-found route. Reachable both by a stale/mistyped link inside the app and by loading an unknown URL directly (the Vercel rewrite hands the request to index.html, and the router below resolves the path to "notfound"), so it has to work as a first paint, not just as a state transition. */ function NotFound({ onNav }) { React.useEffect(() => { window.BackentraSetMeta && window.BackentraSetMeta({ title: "Page not found — Backentra", description: "That page does not exist. Here is the site.", robots: "noindex, nofollow", }); }, []); const go = (k) => (e) => { e.preventDefault(); onNav(k); }; return (
404

We can't find that page.

The address may be mistyped, or the page may have moved. Here is the way back.

Back to Backentra
); } function Site() { /* Real routing: the URL is the source of truth. Initial state reads whatever path the browser is actually on (a direct load or a refresh), not always the homepage, and the router keeps history in sync so back/forward and bookmarking work like any other site. */ const pathToPage = window.BackentraPathToPage; const pageToPath = window.BackentraPageToPath; const [page, setPageState] = React.useState(() => pathToPage(window.location.pathname)); /* Every page and every link should go through nav(): it is the only path that pushes history, so it is what keeps the address bar, back/forward and the rendered page in sync. (product/founding/privacy/terms/pipeline used to take a raw setState setter here — harmless while the whole app was one URL, silently wrong now that it isn't, because the page would change without the address bar following it.) */ const nav = (key) => { const k = key || "home"; const path = pageToPath(k); if (window.location.pathname !== path) window.history.pushState({ page: k }, "", path); setPageState(k); window.scrollTo({ top: 0 }); }; const go = (k) => () => nav(k); const exit = () => nav("home"); const onJoin = go("join"); /* Back/forward: the browser changes location.pathname on its own, so this only has to read it and update state — no history call, or every Back press would push a new entry and Back would stop working after one press. */ React.useEffect(() => { const onPop = () => { setPageState(pathToPage(window.location.pathname)); window.scrollTo({ top: 0 }); }; window.addEventListener("popstate", onPop); return () => window.removeEventListener("popstate", onPop); }, []); React.useEffect(() => { window.BackentraAnalytics && window.BackentraAnalytics.trackPageView(page); }, [page]); /* Every branch below is an early return out of this same component instance, so every hook this component ever calls has to run on every render regardless of which branch fires — otherwise the hook count changes between renders and React's hook bookkeeping breaks. This is why the homepage's meta effect lives up here rather than down by its JSX: down there it would only run on the branch that falls all the way through. */ React.useEffect(() => { if (page === "home") window.BackentraSetMeta && window.BackentraSetMeta({ path: "/" }); }, [page]); if (page === "join") return ; if (page === "enterprise") return ; if (page === "referral") return ; if (page === "plans") return ; if (page === "product") return nav("join")} />; if (page === "founding") return nav("join")} />; if (page === "privacy" || page === "terms") return ; if (page === "pipeline") return nav("join")} />; if (page === "blog") return ; if (page === "blog-crm-guide") return ; if (page === "blog-vision") return ; if (typeof page === "string" && page.indexOf("blog-") === 0) return ; if (page === "about") return ; if (page === "preview") return ; if (page === "notfound") return ; /* A page key nobody handles used to fall through and render the homepage, so a link to a removed page looked like it had worked — that is how nine dead "See integrations" CTAs stayed invisible. Fail loudly in the console instead, and still show the homepage so a visitor is never stranded. A genuinely unknown URL no longer reaches this path at all: the router above resolves it to "notfound" and shows the real 404 page. */ if (page !== "home") { console.error('Unrouted page key: "' + page + '". Falling back to home — check the link that set it.'); } return (
{/* No onShowFullSignIn: SiteHeader takes { current, onNav } only, and deliberately routes Sign in to the demo-key gate pre-launch (see the comment in sitechrome.jsx). The design version passed a handler that was never defined in this file, so every render threw `ReferenceError: onShowFullSignIn is not defined` and the homepage came up blank. */} {/* One section per component, one per line. The previous single-line version made every edit a pattern-match against a 400-character string, and an orphaned reference in it blanked the page three separate times. */}
); } window.BackentraSite = Site; /* Standalone repo: this page IS the site, so it mounts unconditionally. The design ships this mount guarded behind a marketing-page flag on window, because inside the design system the operator app could claim the same #root. That flag is only ever set by the design system's own index.html, so the guarded version would simply never mount here and the site would render nothing at all. Kept unconditional deliberately — do not "restore" the guard from a future drop without re-reading this. */ ReactDOM.createRoot(document.getElementById("root")).render();