const PACKAGES = [
{
id: 1,
name: "Design Only",
tag: "Bring your own hosting",
price: "from $800",
salePrice: "from $200",
blurb: "A custom website, designed and built. You keep the files and host it yourself (or with someone you trust).",
forWho: "Technical folks, agencies who need design help, or businesses with an existing host they like.",
includes: [
"Custom design (3-5 pages)",
"Hand-built, no page builders",
"Mobile-first, runs fast, even on slow Wi-Fi",
"All source files handed over",
"User Self hosts",
],
timeline: "1-2 weeks",
},
{
id: 2,
name: "Design + Hosting",
tag: "Recommended",
price: "from $600 setup · $50/mo",
salePrice: "Free setup · $50/mo",
blurb: "I design the site, host it, keep it patched, and pick up the phone when something breaks. The everything-in-one option.",
forWho: "Small business owners who never want to think about a server, plug-in update, or SSL cert.",
includes: [
"Everything in Design Only",
"Hosting + domain + SSL + Search Optimization handled",
"Monthly content edits included",
"Backups & security monitoring",
"Phone & text support",
],
timeline: "2-3 weeks",
featured: true,
},
{
id: 3,
name: "Facelift",
tag: "For an outdated site",
price: "from $650",
salePrice: "from $500",
promoText: "Design is free when you sign up for a hosting plan",
blurb: "Your site works, but it looks like 2014. I rebuild it on a modern foundation, fix the mobile experience, and make it load fast.",
forWho: "Businesses with a tired site that still pulls in customers. Don't blow it up, just upgrade it.",
includes: [
"Visual + UX redesign",
"Mobile-first rebuild",
"Performance pass (Core Web Vitals)",
"Keep your domain & content",
"Optional: migrate site to beckhost management: $50/mo",
],
timeline: "1-2 weeks",
},
{
id: 4,
name: "Full Custom Build",
tag: "For advanced users",
price: "from $2500 setup · $150/mo",
blurb: "When you need significant backend features, logins, dashboards, compliance standards, integrations with the tools you already use.",
forWho: "Large organizations, Clinics, School systems, anyone whose site needs advanced features",
includes: [
"Everything in Design + Hosting",
"User accounts & dashboards",
"Online booking / scheduling",
"API integrations (Square, Stripe, etc.)",
"Custom admin tools",
],
timeline: "3-4 weeks",
},
];
const Packages = () => {
return (
Packages
★ Summer launch sale
Four ways to work together. Pick the one that fits, or let me help.
);
};
const QUESTIONS = [
{ id: "has", q: "Do you already have a website?",
options: [
{ v: "no", label: "No, starting from scratch" },
{ v: "old", label: "Yes, but it's outdated" },
{ v: "good", label: "Yes, and it's fine, I just need work done" },
] },
{ id: "host", q: "How do you feel about hosting and tech stuff?",
options: [
{ v: "handle", label: "Please just handle it for me" },
{ v: "diy", label: "I want to host it myself" },
{ v: "unsure", label: "Honestly, I don't know what that means" },
] },
{ id: "scope", q: "What's the scope, roughly?",
options: [
{ v: "brochure", label: "An online brochure, pages, photos, contact info" },
{ v: "refresh", label: "Refresh an existing site" },
{ v: "features", label: "Real features, bookings, accounts, dashboards" },
] },
{ id: "features", q: "Do you need anything fancier than a brochure site?",
options: [
{ v: "no", label: "No, keep it simple" },
{ v: "booking", label: "Online booking or scheduling" },
{ v: "accounts", label: "User logins / member areas / dashboards" },
] },
{ id: "ongoing", q: "Want me to look after it after launch?",
options: [
{ v: "yes", label: "Yes, keep it updated, fix what breaks" },
{ v: "no", label: "No, I'll take it from here" },
{ v: "maybe",label: "Maybe down the road" },
] },
];
const recommend = (a) => {
if (a.features === "accounts" || a.scope === "features") return 4;
if (a.has === "old" && a.scope === "refresh") return 3;
if (a.host === "diy" && a.ongoing === "no") return 1;
if (a.host === "handle" || a.host === "unsure" || a.ongoing === "yes") return 2;
if (a.features === "booking") return 4;
return 2;
};
function explainPick(a, id) {
if (id === 1) return "You're comfortable handling hosting yourself, so the cleanest fit is a beautiful site I design and hand to you, files and all. No ongoing strings.";
if (id === 2) return "You want a website that just works, without ever logging into a server. I'll design it, host it, keep it patched, and answer when you call.";
if (id === 3) return "Your site already does its job, it just looks dated. We don't need to start over. I'll modernize what's there, fix the mobile experience, and make it faster.";
if (id === 4) return "You need a website that does work, has a database, logins, integrations. That's a full custom build, but with the same hands-on local support.";
return "";
}
const PackageFinder = () => {
const [step, setStep] = React.useState(0);
const [answers, setAnswers] = React.useState({});
const [done, setDone] = React.useState(false);
const total = QUESTIONS.length;
const choose = (v) => {
const next = { ...answers, [QUESTIONS[step].id]: v };
setAnswers(next);
if (step + 1 < total) setStep(step + 1);
else setDone(true);
};
const restart = () => { setAnswers({}); setStep(0); setDone(false); };
const rec = done ? PACKAGES.find(p => p.id === recommend(answers)) : null;
return (
Package finder
Five questions. One honest answer.
No email signup, no funnel, just tell me what's going on and I'll point
you to the package that actually fits. Or take a coffee meeting and we'll
skip the form entirely.
{QUESTIONS.map((_, i) => (
))}
{done ? "Done · here's what I'd pick" : `Question ${step+1} of ${total}`}