diff --git a/components/Pricing.js b/components/Pricing.js index 2de58ef..5ad08a2 100644 --- a/components/Pricing.js +++ b/components/Pricing.js @@ -1,6 +1,8 @@ import { useState } from 'react' import Link from 'next/link' +import TierSelector from '@components/TierSelector' + import { track, EVENTS } from 'utils/analytics' import status from '../public/status.json' @@ -199,11 +201,15 @@ export default function Pricing({ hostedOffer = null }) { Choose how you want to start.

- Run OpenAdapt yourself, qualify a consequential enterprise - workflow with our team, or subscribe to managed Cloud for an - approved workflow. + Run OpenAdapt yourself, subscribe to managed Cloud for an + approved workflow, or qualify a consequential enterprise + workflow with our team.

+
+ +
+
- -

- Native, RDP, and Citrix qualifications are typically - $25,000–$40,000. The sprint is paid even when the - correct outcome is not to automate. -

- - Qualify one workflow - - - -
+
{hostedStatusLabel} {runCapLabel && ( - {runCapLabel} - +

)}
+

+ Evaluating first? The free{' '} + + OpenAdapt Community + {' '} + runtime runs locally at no cost. +

@@ -325,6 +313,34 @@ export default function Pricing({ hostedOffer = null }) {

+ + +

+ Native, RDP, and Citrix qualifications are typically + $25,000–$40,000. The sprint is paid even when the + correct outcome is not to automate. +

+ + Qualify one workflow + +
+ +

+ Production contracts are priced per verified + workflow-run volume against the published annual floor + shown above; exact quotes follow qualification. +

{/* diff --git a/components/TierSelector.js b/components/TierSelector.js new file mode 100644 index 0000000..6bcddab --- /dev/null +++ b/components/TierSelector.js @@ -0,0 +1,167 @@ +import { useState } from 'react' + +import styles from './TierSelector.module.css' + +/* + * Pure client-side helper at the top of /pricing. Three questions map a + * visitor to one recommended starting tier, with anchor links to the tier + * cards below. Recommendations only restate claims already made by the tier + * cards themselves: Cloud is scoped to browser workflows on non-regulated + * data, and regulated data, desktop, RDP, and Citrix start with + * qualification. + */ + +const QUESTIONS = [ + { + id: 'substrate', + label: 'Where does the workflow run?', + options: [ + { value: 'browser', label: 'In the browser' }, + { value: 'desktop-or-remote', label: 'Desktop or remote (RDP/Citrix)' }, + ], + }, + { + id: 'regulated', + label: 'Is the data regulated?', + options: [ + { value: 'no', label: 'No' }, + { value: 'yes', label: 'Yes' }, + ], + }, + { + id: 'operator', + label: 'Who operates it?', + options: [ + { value: 'you', label: 'Your team' }, + { value: 'us', label: 'OpenAdapt' }, + ], + }, +] + +const TIERS = { + community: { + href: '#community', + name: 'OpenAdapt Community', + why: 'Run the free MIT-licensed local runtime yourself and evaluate at no cost.', + }, + cloud: { + href: '#cloud-preview', + name: 'OpenAdapt Cloud', + why: 'Managed browser execution on non-regulated data, with history, evidence, and usage in one control plane.', + }, + sprint: { + href: '#pricing-enterprise', + name: 'Workflow Qualification Sprint', + why: 'Regulated data, desktop, RDP/Citrix surfaces, and enterprise scale start with a qualification.', + }, +} + +const TIER_ORDER = ['community', 'cloud', 'sprint'] + +function recommend(answers) { + const { substrate, regulated, operator } = answers + if (regulated === 'yes') return 'sprint' + if (substrate === 'desktop-or-remote') return 'sprint' + if (operator === 'us') return 'cloud' + if (operator === 'you') return 'community' + return null +} + +export default function TierSelector() { + const [answers, setAnswers] = useState({}) + + const answeredCount = QUESTIONS.filter( + (question) => answers[question.id] + ).length + const selected = recommend(answers) + const complete = answeredCount === QUESTIONS.length + + return ( +
+

Not sure where to start?

+

+ Answer three questions. +

+ +
+ {QUESTIONS.map((question) => ( +
+

+ {question.label} +

+
+ {question.options.map((option) => { + const isActive = + answers[question.id] === option.value + return ( + + ) + })} +
+
+ ))} +
+ +
+ {!complete ? ( +

+ {answeredCount > 0 + ? `${answeredCount} of ${QUESTIONS.length} answered.` + : 'Answer all three to see a recommended starting tier.'} +

+ ) : ( +
+

+ Recommended starting point:{' '} + + {TIERS[selected].name} + + . {TIERS[selected].why} +

+

+ Or compare all three:{' '} + {TIER_ORDER.map((tier, index) => ( + + {index > 0 && ' · '} + + {TIERS[tier].name} + + + ))} +

+
+ )} +
+
+ ) +} diff --git a/components/TierSelector.module.css b/components/TierSelector.module.css new file mode 100644 index 0000000..db0dd46 --- /dev/null +++ b/components/TierSelector.module.css @@ -0,0 +1,42 @@ +/* Stateful segmented-option styling lives here so selected states never rely + on dynamically composed Tailwind class strings. Color values mirror the + theme tokens in tailwind.config.js (hairline, panel, ground, ink, ink-2, + ink-3, accent). */ + +.group + .group { + margin-top: 1rem; +} + +.options { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + margin-top: 0.5rem; +} + +.option { + border: 1px solid #dddcd2; + border-radius: 9999px; + background-color: #fdfcf9; + color: #4c523f; + padding: 0.375rem 0.875rem; + font-size: 0.8125rem; + line-height: 1.25rem; + cursor: pointer; +} + +.option:hover { + border-color: #23281f; +} + +.option:focus-visible { + outline: 2px solid #3e6b4f; + outline-offset: 2px; +} + +.optionSelected, +.optionSelected:hover { + border-color: #23281f; + background-color: #23281f; + color: #f2f1ec; +}