Service Plan Builder

Install

Or by hand, in a Next.js project with shadcn set up. It writes components/pastetaste/service-plan-builder.tsx.

Install the pastetaste component "Service Plan Builder" (service-plan-builder) into this Next.js project and use it.

What it is: Build-your-own pricing: tick services, pick locations and commitment, and a dark summary recalculates the monthly total, discount, expected result and cost per result.

Before you place it, ask me (one short message, in my language; "skip" = sensible default): which page and section it goes in, my brand colour (hex), the text, labels or images it should show, and whether I want my logo or my own copy in the demo content. Then:

Steps:
1. If the project has no components.json, run: npx shadcn@latest init -y -d. Then run: npx shadcn@latest add https://pastetaste.com/r/service-plan-builder.json
   (it writes components/pastetaste/service-plan-builder.tsx; install any npm packages it reports).
2. Import it: import { ServicePlanBuilder } from "@/components/pastetaste/service-plan-builder" (check the file for the exact named export).
3. Put it where it fits on the page I name, keep the rest of the page untouched, and pass props for my colours instead of editing the installed file.
4. It does not depend on Tailwind; colours come from CSS variables (--pt-*) or props.
5. It supports prefers-reduced-motion with a still state; do not remove it.

Props (all optional unless the type has no default):
- services: { id, name, sub?, price, yield }[] = 4 marketing services — Toggle rows. price is monthly for one location; yield is the result it adds a month.
- locations: { label, mult }[] = 1 / 2 / 3 locations — Segmented options multiplying price and result.
- terms: { label, off }[] = month / 6 / 12 months — Commitment options; off is the discount (0 to 1).
- defaultOn: string[] = ['maps','social'] — Service ids ticked at the start.
- currency: string = '$' — Prefix of money values.
- heading / intro / footnote: string — Texts above the card and under the summary.
- resultNoun: string = 'cover' — Word in the result rows of the summary.
- bundleBonus: number = 1.1 — Result multiplier when more than two services are on.
- summaryImage: string = '/p/plated/tex-slate.jpg' — Texture photo behind the summary; empty string for none.
- ctaLabel / onCta: string / (plan) => void — Summary button and its handler (selected ids, location, term, total).
- className / style: string / CSSProperties — On the root.

Live preview: https://pastetaste.com/c/service-plan-builder
Then run the dev server, check it in the browser at desktop and mobile width, and tell me the page URL.

Props 11