{"compiledCode":"\"use strict\";Object.defineProperty(exports, \"__esModule\", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }var _react = require('react'); var _react2 = _interopRequireDefault(_react);\n\n function OffersPage() {\n  const ink = \"var(--c13eu7bh-runtime-text, #182230)\",\n    body = \"var(--c13eu7bh-runtime-muted, #44515f)\",\n    accent = \"var(--c13eu7bh-runtime-accent, #1f6f6b)\",\n    accentDark = \"var(--c13eu7bh-runtime-accent, #123f3b)\",\n    tint = \"var(--c13eu7bh-runtime-bg, #eef4f2)\",\n    border = \"var(--c13eu7bh-runtime-border, #dfe7e4)\",\n    chip = \"var(--c13eu7bh-runtime-bg, #eaf1ef)\";\n\n  const page = {\n    maxWidth: 1000,\n    margin: \"0 auto\",\n    padding: \"40px 20px 72px\",\n    color: body,\n    fontFamily: \"var(--c13eu7bh-font-body, inherit)\",\n    lineHeight: 1.65,\n  };\n  const h1 = { color: ink, fontSize: \"clamp(28px,5vw,40px)\", lineHeight: 1.15, margin: \"0 0 14px\" };\n  const h2 = { color: ink, fontSize: \"clamp(20px,3vw,26px)\", margin: \"44px 0 12px\" };\n  const lead = { fontSize: \"clamp(17px,2.2vw,19px)\", color: ink, margin: \"0 0 14px\" };\n  const p = { margin: \"0 0 14px\" };\n  const summary = {\n    background: tint,\n    border: `1px solid ${border}`,\n    borderRadius: 12,\n    padding: \"16px 20px\",\n    margin: \"22px 0\",\n  };\n  const card = {\n    background: \"var(--c13eu7bh-runtime-panel, #fff)\",\n    border: `1px solid ${border}`,\n    borderRadius: 12,\n    padding: \"18px 20px\",\n    marginBottom: 14,\n  };\n  const stageLabel = {\n    display: \"inline-block\",\n    background: chip,\n    color: accentDark,\n    fontWeight: 600,\n    fontSize: 13,\n    letterSpacing: 0.3,\n    textTransform: \"uppercase\",\n    borderRadius: 999,\n    padding: \"4px 12px\",\n    margin: \"0 0 10px\",\n  };\n  const link = { color: accent, fontWeight: 600, textDecoration: \"none\" };\n  const guideTitle = { color: ink, fontWeight: 600, textDecoration: \"none\" };\n  const cta = {\n    display: \"inline-block\",\n    background: \"var(--c13eu7bh-runtime-action-bg, #1f6f6b)\",\n    color: \"var(--c13eu7bh-runtime-action-fg, #fff)\",\n    textDecoration: \"none\",\n    fontWeight: 600,\n    padding: \"12px 20px\",\n    borderRadius: 10,\n    marginRight: 12,\n    marginTop: 8,\n  };\n  const ctaGhost = {\n    display: \"inline-block\",\n    background: \"var(--c13eu7bh-runtime-panel, #fff)\",\n    color: accentDark,\n    textDecoration: \"none\",\n    fontWeight: 600,\n    padding: \"12px 20px\",\n    borderRadius: 10,\n    border: `1px solid ${border}`,\n    marginTop: 8,\n  };\n  const ul = { margin: \"0 0 14px\", paddingLeft: 22 };\n  const li = { marginBottom: 8 };\n  const reason = { color: body, margin: \"4px 0 0\", fontSize: 15.5 };\n  const detailsBox = {\n    border: `1px solid ${border}`,\n    borderRadius: 10,\n    padding: \"4px 16px\",\n    marginBottom: 10,\n    background: \"var(--c13eu7bh-runtime-panel, #fff)\",\n  };\n  const summaryEl = { cursor: \"pointer\", fontWeight: 600, color: ink, padding: \"12px 0\" };\n  const resourceBox = {\n    background: tint,\n    border: `1px solid ${border}`,\n    borderLeft: `4px solid ${accent}`,\n    borderRadius: 12,\n    padding: \"18px 22px\",\n    margin: \"22px 0\",\n  };\n  const resourceTag = {\n    display: \"inline-block\",\n    background: \"var(--c13eu7bh-runtime-panel, #fff)\",\n    color: accentDark,\n    fontWeight: 700,\n    fontSize: 12,\n    letterSpacing: 0.4,\n    textTransform: \"uppercase\",\n    border: `1px solid ${border}`,\n    borderRadius: 999,\n    padding: \"4px 12px\",\n    marginBottom: 10,\n  };\n\n  const Guide = ({ href, title, reasonText }) => (\n    _react2.default.createElement('div', { style: card,}\n      , _react2.default.createElement('a', { style: guideTitle, href: href,}\n        , title\n      )\n      , _react2.default.createElement('p', { style: reason,}, reasonText)\n    )\n  );\n\n  return (\n    _react2.default.createElement('main', { style: page,}\n      , _react2.default.createElement('h1', { style: h1,}, \"Offer Design and Service Packaging: Turn a Messy Service Into a Clear, Buyable Offer\"             )\n      , _react2.default.createElement('p', { style: lead,}, \"When someone asks \\\"how much?\\\" and your honest answer is \\\"it depends,\\\" you have an offer problem, not a pricing problem. This hub is about turning a vague, custom-everything service into something a buyer can understand, compare, and say yes to without a long back-and-forth.\"\n\n\n\n      )\n      , _react2.default.createElement('p', { style: p,}, \"A clear offer is not about boxing yourself in or dumbing down good work. It is about removing the guesswork that makes people hesitate. When customers can see what they get, what it costs, and which option fits, they decide faster and trust you more, and you spend less time writing custom quotes.\"\n\n\n\n      )\n\n      , _react2.default.createElement('div', { style: summary,}\n        , _react2.default.createElement('strong', null, \"In short:\" ), \" A buyable offer names exactly what the customer gets, what it costs (or how the price is set), and who it is for. Package your service into clear options, describe them in the buyer's words, and decide what not to offer, and you cut quote friction and win more of the work you actually want.\"\n\n\n\n      )\n\n      , _react2.default.createElement('section', null\n        , _react2.default.createElement('h2', { style: h2,}, \"Who this is for\"   )\n        , _react2.default.createElement('ul', { style: ul,}\n          , _react2.default.createElement('li', { style: li,}, \"Service providers whose answer to \\\"what do you charge?\\\" is always \\\"it depends,\\\" and who feel the cost of that.\"                   )\n          , _react2.default.createElement('li', { style: li,}, \"Owners writing endless custom quotes who want a faster, more repeatable way to sell.\"             )\n          , _react2.default.createElement('li', { style: li,}, \"Anyone whose services are technically good but hard to compare, so buyers stall or ghost.\"              )\n          , _react2.default.createElement('li', { style: li,}, \"Operators deciding whether to productize a service, add tiers, or finally say no to certain work.\"               )\n        )\n      )\n\n      , _react2.default.createElement('section', null\n        , _react2.default.createElement('h2', { style: h2,}, \"What you'll find here and when to use it\"        )\n        , _react2.default.createElement('p', { style: p,}, \"This page collects the Outclimber offer-design guides in the order you actually need them, from diagnosing why \\\"it depends\\\" costs you deals to packaging a finished offer with clear tiers. Use it when:\"\n\n\n\n        )\n        , _react2.default.createElement('ul', { style: ul,}\n          , _react2.default.createElement('li', { style: li,}, \"Prospects go quiet after they ask for a quote, and you suspect the friction is the quote itself.\"                 )\n          , _react2.default.createElement('li', { style: li,}, \"You are not sure whether to keep everything custom or build a standard, productized package.\"              )\n          , _react2.default.createElement('li', { style: li,}, \"Your service descriptions read like a list of tasks, and buyers cannot tell what they actually get.\"                )\n          , _react2.default.createElement('li', { style: li,}, \"You want good/better/best tiers but worry about anchoring, padding, or confusing people.\"           )\n        )\n        , _react2.default.createElement('p', { style: p,}, \"Start at the top if your offer feels foggy, or jump to the stage that matches your situation.\"\n\n        )\n      )\n\n      , _react2.default.createElement('section', null\n        , _react2.default.createElement('h2', { style: h2,}, \"The guides, by where you are\"     )\n\n        , _react2.default.createElement('div', { style: { marginTop: 18 },}\n          , _react2.default.createElement('span', { style: stageLabel,}, \"Start here: why \\\"it depends\\\" costs you\"      )\n          , _react2.default.createElement(Guide, {\n            href: \"/blog/it-depends-quote-problem\",\n            title: \"The 'it depends' quote problem (and how to fix it)\"         ,\n            reasonText: \"Why the most honest answer in services is also the one that loses deals, and how to give buyers enough certainty to move forward without overpromising. Read this first if quotes stall your sales.\"                                 ,}\n          )\n          , _react2.default.createElement(Guide, {\n            href: \"/blog/productized-vs-custom-quote\",\n            title: \"Productized vs. custom: which way should you quote?\"       ,\n            reasonText: \"A clear-eyed look at when to standardize an offer and when bespoke work really is the right call, so you package the parts that should be packaged and keep flexibility where it matters.\"                                ,}\n          )\n          , _react2.default.createElement(Guide, {\n            href: \"/blog/offer-design-mistakes\",\n            title: \"Common offer-design mistakes to avoid\"    ,\n            reasonText: \"The traps that make good services hard to buy, from burying the price to offering ten options no one can choose between. Spot them before they cost you another deal.\"                             ,}\n          )\n        )\n\n        , _react2.default.createElement('div', { style: { marginTop: 22 },}\n          , _react2.default.createElement('span', { style: stageLabel,}, \"Say it so buyers get it\"     )\n          , _react2.default.createElement(Guide, {\n            href: \"/blog/write-service-descriptions\",\n            title: \"How to write service descriptions buyers actually understand\"       ,\n            reasonText: \"Turn a list of what you do into a description of what the customer gets and why it matters to them. The difference between a task list and a reason to buy.\"                               ,}\n          )\n        )\n\n        , _react2.default.createElement('div', { style: { marginTop: 22 },}\n          , _react2.default.createElement('span', { style: stageLabel,}, \"Resource: build the offer\"   )\n          , _react2.default.createElement(Guide, {\n            href: \"/blog/package-a-service-offer\",\n            title: \"How to package a service into a clear offer\"        ,\n            reasonText: \"A step-by-step method for turning a custom service into a named, scoped offer with a clear deliverable, a clear price logic, and a clear yes. This is the build guide for this hub.\"                                ,}\n          )\n          , _react2.default.createElement(Guide, {\n            href: \"/blog/good-better-best-pricing-tiers\",\n            title: \"Good, better, best: how to design pricing tiers\"       ,\n            reasonText: \"How to build three honest options that help people self-select, without padding the cheap tier or hiding the real cost. Make choosing easier, not more confusing.\"                         ,}\n          )\n        )\n      )\n\n      , _react2.default.createElement('section', null\n        , _react2.default.createElement('h2', { style: h2,}, \"Where your offer connects\"   )\n        , _react2.default.createElement('p', { style: p,}, \"An offer does not live alone. It expresses a strategy, sits on a page, and starts a relationship. Three neighboring hubs pick up where this one leaves off:\"\n\n\n        )\n        , _react2.default.createElement('div', { style: card,}\n          , _react2.default.createElement('a', { style: guideTitle, href: \"/competitive-strategy\",}, \"Competitive positioning and differentiation\"\n\n          )\n          , _react2.default.createElement('p', { style: reason,}, \"Your offer should express your positioning. Decide what makes you the better choice first, then package the offer so that difference is built into what people buy.\"\n\n\n          )\n        )\n        , _react2.default.createElement('div', { style: card,}\n          , _react2.default.createElement('a', { style: guideTitle, href: \"/website-experience\",}, \"Your website experience\"\n\n          )\n          , _react2.default.createElement('p', { style: reason,}, \"A packaged offer needs a page that sells it. Learn how to present options, prices, and proof on a service or pricing page that helps people decide.\"\n\n\n          )\n        )\n        , _react2.default.createElement('div', { style: card,}\n          , _react2.default.createElement('a', { style: guideTitle, href: \"/onboarding\",}, \"Onboarding, support, and service recovery\"\n\n          )\n          , _react2.default.createElement('p', { style: reason,}, \"The offer sets the promise; onboarding keeps it. See what should happen right after a customer buys, so the experience matches what you sold.\"\n\n\n          )\n        )\n      )\n\n      , _react2.default.createElement('section', null\n        , _react2.default.createElement('h2', { style: h2,}, \"Free templates to do the work\"     )\n        , _react2.default.createElement('p', { style: p,}, \"These free tools take you from \\\"it depends\\\" to a clear, repeatable offer you can put in front of buyers. All are available in the\"\n\n               , \" \"\n          , _react2.default.createElement('a', { style: link, href: \"/templates\",}, \"Outclimber template library\"\n\n          ), \".\"\n\n        )\n        , _react2.default.createElement('ul', { style: ul,}\n          , _react2.default.createElement('li', { style: li,}\n            , _react2.default.createElement('strong', null, \"Offer Packaging Worksheet\"  ), \" — work through scope, deliverables, price logic, and who each option is for, and come out with a clear offer.\"\n\n          )\n          , _react2.default.createElement('li', { style: li,}\n            , _react2.default.createElement('strong', null, \"Service Page Template\"  ), \" — a structure for presenting your offer on a page, from the headline to the tiers to the call to action.\"\n\n          )\n          , _react2.default.createElement('li', { style: li,}\n            , _react2.default.createElement('strong', null, \"Quote-Intake Checklist\" ), \" — the questions to ask up front so a quote is fast, accurate, and free of surprises for both sides.\"\n\n          )\n        )\n        , _react2.default.createElement('p', { style: p,}, \"Need a definition? The\"\n             , \" \"\n          , _react2.default.createElement('a', { style: link, href: \"/glossary\",}, \"Outclimber glossary\"\n\n          ), \" \", \"explains offer and pricing terms in plain English.\"\n\n        )\n      )\n\n      , _react2.default.createElement('section', null\n        , _react2.default.createElement('h2', { style: h2,}, \"When you're ready to build the page\"      )\n        , _react2.default.createElement('div', { style: resourceBox,}\n          , _react2.default.createElement('span', { style: resourceTag,}, \"Optional tool\" )\n          , _react2.default.createElement('p', { style: p,}, \"A packaged offer eventually needs a real service or pricing page where people can read the options and decide. When you reach that step,\"\n\n                   , \" \"\n            , _react2.default.createElement('strong', null, \"Cedros\"), \" is one way to build it. It is a website builder for turning an offer like the one you design here into a live page, without starting from a blank screen.\"\n\n          )\n          , _react2.default.createElement('p', { style: { ...p, marginBottom: 0, fontSize: 14, color: body },}, \"This is an optional implementation aid, not a requirement. You can package and publish your offer with whatever tools you already use. Cedros is a sibling project we have a relationship with, so treat this as a suggestion to evaluate on its own merits, not an endorsement of it as the only or best choice.\"\n\n\n\n\n          )\n        )\n      )\n\n      , _react2.default.createElement('section', null\n        , _react2.default.createElement('h2', { style: h2,}, \"Where to go next\"   )\n        , _react2.default.createElement('ul', { style: ul,}\n          , _react2.default.createElement('li', { style: li,}, \"Quotes stalling your sales? Start with\"\n                 , \" \"\n            , _react2.default.createElement('a', { style: link, href: \"/blog/it-depends-quote-problem\",}, \"the \\\"it depends\\\" quote problem\"\n\n            ), \".\"\n\n          )\n          , _react2.default.createElement('li', { style: li,}, \"Ready to build the offer? Follow\"\n                 , \" \"\n            , _react2.default.createElement('a', { style: link, href: \"/blog/package-a-service-offer\",}, \"how to package a service into a clear offer\"\n\n            ), \".\"\n\n          )\n          , _react2.default.createElement('li', { style: li,}, \"Need the strategy behind it? The\"\n                 , \" \"\n            , _react2.default.createElement('a', { style: link, href: \"/competitive-strategy\",}, \"competitive strategy hub\"\n\n            ), \" \", \"helps you decide what your offer should stand for before you package it.\"\n\n          )\n        )\n      )\n\n      , _react2.default.createElement('section', null\n        , _react2.default.createElement('h2', { style: h2,}, \"Frequently asked questions\"  )\n\n        , _react2.default.createElement('details', { style: detailsBox,}\n          , _react2.default.createElement('summary', { style: summaryEl,}, \"What does it mean to \\\"package\\\" a service?\"       )\n          , _react2.default.createElement('p', { style: p,}, \"Packaging means turning open-ended work into a defined offer: a clear name, a clear scope, a clear deliverable, and a clear way the price is set. Instead of \\\"we do consulting,\\\" you offer a \\\"90-day growth audit\\\" with stated inputs and outputs. The customer knows what they are buying before they ask.\"\n\n\n\n\n          )\n        )\n\n        , _react2.default.createElement('details', { style: detailsBox,}\n          , _react2.default.createElement('summary', { style: summaryEl,}, \"Isn't \\\"it depends\\\" just being honest about real complexity?\"        )\n          , _react2.default.createElement('p', { style: p,}, \"It is honest, but it puts all the uncertainty on the buyer, who often responds by stalling. The fix is not to fake certainty. It is to give a clear starting point, a price range, or a fixed-scope entry offer, so people can move forward. The\"\n\n\n                   , \" \"\n            , _react2.default.createElement('a', { style: link, href: \"/blog/it-depends-quote-problem\",}, \"\\\"it depends\\\" quote guide\"\n\n            ), \" \", \"walks through how.\"\n\n          )\n        )\n\n        , _react2.default.createElement('details', { style: detailsBox,}\n          , _react2.default.createElement('summary', { style: summaryEl,}, \"Should I productize my service or keep it custom?\"        )\n          , _react2.default.createElement('p', { style: p,}, \"Often both. Many services have a repeatable core that can be packaged and a genuinely custom layer that should stay flexible. Productize the part that is the same every time; quote the rest. The\"\n\n                            , \" \"\n            , _react2.default.createElement('a', { style: link, href: \"/blog/productized-vs-custom-quote\",}, \"productized vs. custom guide\"\n\n            ), \" \", \"helps you draw that line.\"\n\n          )\n        )\n\n        , _react2.default.createElement('details', { style: detailsBox,}\n          , _react2.default.createElement('summary', { style: summaryEl,}, \"How do good, better, best pricing tiers actually help?\"        )\n          , _react2.default.createElement('p', { style: p,}, \"Three options let buyers self-select instead of comparing you against a single take-it-or-leave-it price. Done honestly, tiers clarify trade-offs and make the middle option feel like a sensible choice. Done badly, they confuse or manipulate. The\"\n\n\n                   , \" \"\n            , _react2.default.createElement('a', { style: link, href: \"/blog/good-better-best-pricing-tiers\",}, \"tiers guide\"\n\n            ), \" \", \"shows the honest version.\"\n\n          )\n        )\n\n        , _react2.default.createElement('details', { style: detailsBox,}\n          , _react2.default.createElement('summary', { style: summaryEl,}, \"How specific should my service descriptions be?\"      )\n          , _react2.default.createElement('p', { style: p,}, \"Specific enough that a buyer can picture the result and know it fits. Describe what they get and what changes for them, not just the tasks you perform. \\\"We will rebuild your booking flow so fewer customers abandon checkout\\\" beats \\\"booking system work.\\\" See\"\n\n\n                   , \" \"\n            , _react2.default.createElement('a', { style: link, href: \"/blog/write-service-descriptions\",}, \"writing service descriptions\"\n\n            ), \".\"\n\n          )\n        )\n\n        , _react2.default.createElement('details', { style: detailsBox,}\n          , _react2.default.createElement('summary', { style: summaryEl,}, \"How do I decide what not to offer?\"       )\n          , _react2.default.createElement('p', { style: p,}, \"Look at the work that drains time, attracts the wrong clients, or sits far from your strength. Deciding what to drop sharpens the offer that remains and makes your value clearer. A focused offer is easier to explain, price, and deliver well than a do-everything menu.\"\n\n\n\n          )\n        )\n\n        , _react2.default.createElement('details', { style: detailsBox,}\n          , _react2.default.createElement('summary', { style: summaryEl,}, \"Will packaging make me look less flexible to clients?\"        )\n          , _react2.default.createElement('p', { style: p,}, \"Usually the opposite. A clear offer gives people a confident starting point; you can still tailor from there. Flexibility without structure reads as uncertainty. A defined package plus a stated way to customize signals that you have done this many times before.\"\n\n\n\n          )\n        )\n\n        , _react2.default.createElement('details', { style: detailsBox,}\n          , _react2.default.createElement('summary', { style: summaryEl,}, \"Where does a packaged offer get presented to buyers?\"        )\n          , _react2.default.createElement('p', { style: p,}, \"Usually on a service or pricing page, where people can read the options and decide. The\"\n                           , \" \"\n            , _react2.default.createElement('a', { style: link, href: \"/website-experience\",}, \"website experience hub\"\n\n            ), \" \", \"covers how to present an offer on a page so it is easy to compare and act on.\"\n\n          )\n        )\n      )\n\n      , _react2.default.createElement('section', { style: { marginTop: 36 },}\n        , _react2.default.createElement('h2', { style: h2,}, \"Make your offer easy to buy\"     )\n        , _react2.default.createElement('p', { style: p,}, \"The businesses that win the work they want are rarely the cheapest. They are the ones whose offer is clear enough to say yes to. Package yours, step by step.\"\n\n\n        )\n        , _react2.default.createElement('a', { style: cta, href: \"/blog/package-a-service-offer\",}, \"Package your offer step by step\"\n\n        )\n        , _react2.default.createElement('a', { style: ctaGhost, href: \"/templates\",}, \"Get the Service Page Template\"\n\n        )\n      )\n    )\n  );\n} exports.default = OffersPage;"}