Pricing
The pricing module is the primary conversion section of aictpo.com. It displays three plan cards (Squad, Fleet, Custom Fleet) with feature lists and pricing. Clicking any CTA button opens a lead capture modal with a contact form that submits to a hosted form endpoint. On success, the user is redirected to /start which embeds a Calendly booking widget.
URL Patterns
| Pattern | Description |
|---|
/#pricing | Anchor scroll to pricing section on homepage |
/start | Post-submission confirmation page with Calendly embed |
Page Structure
+--[Section Header: "Choose Your Fleet"]--+
| Subtitle text |
| |
| [Squad Card] [Fleet Card] [Custom] |
| badge:STARTER badge:BEST badge:ENT |
| 4 agents 10 agents Your infra |
| $125/agent $99/agent Custom |
| -50% off -60% off |
| $499/mo $999/mo |
| features×5 features×5 features×6 |
| [Get Started] [Get Started] [Contact] |
| |
| Footnote: "Individual agents from $99" |
+-----------------------------------------+
Lead Modal (overlay):
+--[Close X]--------------------------------+
| [Plan Badge] |
| "Start with {Plan}" / "Contact Sales" |
| Subtitle with pricing summary |
| |
| [Name input] required |
| [Work email input] required, validated |
| [Message textarea] optional |
| |
| [Send & Book a Call] |
| [Error message area] |
+-------------------------------------------+
/start page:
+--[Nav: logo only]-------------------------+
| "You're In" |
| "We received your request..." |
| [Calendly iframe - 30min booking] |
| [Back to site link] |
+-------------------------------------------+
Key Elements
Pricing Section
| Element | Selector | Notes |
|---|
| Section container | #pricing | Anchor target for nav links |
| Section heading | #pricing h2 | "Choose Your Fleet" |
| Squad card heading | #pricing h3:has-text("Squad") | First plan card |
| Fleet card heading | #pricing h3:has-text("Fleet") | Second plan card, "BEST VALUE" badge |
| Custom Fleet heading | #pricing h3:has-text("Custom Fleet") | Third plan card, "ENTERPRISE" badge |
| Squad Get Started | button[data-plan="Squad"] | Opens lead modal for Squad |
| Fleet Get Started | button[data-plan="Fleet"] | Opens lead modal for Fleet |
| Contact Sales | button[data-plan="Custom Fleet"] | Opens lead modal for Custom Fleet |
Lead Modal
| Element | Selector | Notes |
|---|
| Modal container | #lead-modal | Hidden by default; shown via .lead-modal-open class |
| Backdrop | #lead-modal-backdrop | Overlay behind modal |
| Close button | #lead-modal-close | Also triggered by Escape key |
| Plan badge | #lead-plan-badge | Shows selected plan name; has data-variant attribute |
| Modal title | #lead-modal-title | Dynamic: "Start with Squad" / "Start with Fleet" / "Contact Sales" |
| Modal subtitle | #lead-modal-subtitle | Dynamic: pricing summary per plan |
| Form | #lead-form | Has novalidate attribute; JS validation |
| Hidden plan input | input#lead-plan | Auto-set to plan name |
| Name input | input#lead-name | Required; autocomplete="name" |
| Name error | #lead-name-error | "Name is required" |
| Email input | input#lead-email | Required; email regex validated |
| Email error | #lead-email-error | "Please enter a valid email" |
| Message textarea | textarea#lead-message | Optional |
| Submit button | #lead-submit | Text changes to "Sending..." during submit |
| Submit spinner | #lead-submit-spinner | Hidden SVG spinner, shown during submit |
| Submit error | #lead-submit-error | "Something went wrong. Please try again." |
/start Confirmation Page
| Element | Selector | Notes |
|---|
| Heading | main h1, main h2 | "You're In" |
| Calendly iframe | iframe[src*="calendly.com"] | 30min booking widget; primary_color=4F46E5 |
| Back to site link | a:has-text("Back to site") | Returns to homepage |
Data Model
Lead Form Submission
| Field | Type | Values | Default | Required |
|---|
| name | string | free text | -- | yes |
| email | string | valid email format | -- | yes |
| message | string | free text | -- | no |
| plan | enum | Squad, Fleet, Custom Fleet | -- | auto-set |
| _subject | string | "New Lead: {plan} -- {name}" | -- | auto-generated |
Pricing Plans
| Plan | Agents | Price/Agent/Mo | Total/Mo | Discount | Billing |
|---|
| Squad | 4 | $125 | $499 | 50% off $249 | Annual |
| Fleet | 10 | $99 | $999 | 60% off $249 | Annual |
| Custom Fleet | Custom | Custom | Custom | -- | Custom |
States
| State | Trigger | Visual Indicator |
|---|
| Default | Page load / scroll to #pricing | Three plan cards visible, no modal |
| Modal Open (Squad) | Click Squad "Get Started" | Modal with "Start with Squad" title, badge variant dev |
| Modal Open (Fleet) | Click Fleet "Get Started" | Modal with "Start with Fleet" title, badge variant premium |
| Modal Open (Custom) | Click "Contact Sales" | Modal with "Contact Sales" title, badge variant custom |
| Form Pristine | Modal opens | All fields empty, no errors visible |
| Validation Error | Submit with empty/invalid fields | Red border on inputs, error text visible (.lead-error-visible) |
| Submitting | Form passes validation, submit clicked | Button text "Sending...", spinner visible, button disabled |
| Submit Error | Form endpoint returns non-OK | Error text "Something went wrong. Please try again." shown |
| Submit Success | Form endpoint returns OK | Redirect to /start; lead data stored in sessionStorage key aictpo_lead |
| Confirmation | /start page loads | "You're In" heading, Calendly embed, "Back to site" link |
Common Tasks
1. View Pricing Plans
- Navigate to
https://aictpo.com/
- Click "Pricing" in nav or scroll to
#pricing
- Verify three plan cards visible: Squad, Fleet, Custom Fleet
- Verify pricing: Squad $125/agent, Fleet $99/agent
2. Open Lead Modal for a Plan
- Scroll to
#pricing section
- Click the plan's CTA button (
button[data-plan="Squad"], button[data-plan="Fleet"], or button[data-plan="Custom Fleet"])
- Wait for modal:
#lead-modal.lead-modal-open
- Verify modal title matches plan (e.g., "Start with Squad")
- Verify plan badge shows correct plan name
3. Submit Lead Form (Happy Path)
- Open lead modal for desired plan (Task 2)
- Type name into
input#lead-name
- Type valid email into
input#lead-email
- Optionally type message into
textarea#lead-message
- Click submit button
#lead-submit
- Wait for redirect to
/start
- Verify "You're In" heading visible
- Verify Calendly iframe loaded
4. Trigger Validation Errors
- Open lead modal for any plan
- Click submit without filling fields
- Verify name error visible:
#lead-name-error.lead-error-visible
- Verify email error visible:
#lead-email-error.lead-error-visible
- Verify name input has class
lead-input-error
5. Close Lead Modal
- Open lead modal for any plan
- Close via one of:
- Click close button
#lead-modal-close
- Click backdrop
#lead-modal-backdrop
- Press Escape key
- Verify modal no longer has class
lead-modal-open
- Verify body overflow restored (scroll enabled)
Tips
- Pricing nav link and "Get Your AI Team" CTA both anchor to
#pricing — they are the same target
- The lead modal auto-focuses the name input 100ms after opening
- Form validation is JS-only (
novalidate on form) — no native browser validation
- Email regex:
/^[^\s@]+@[^\s@]+\.[^\s@]+$/ — simple format check, not strict RFC
- Successful submission stores lead data in
sessionStorage.aictpo_lead as JSON — useful for verifying submission without checking the form endpoint
- The
_subject field in the payload sets the email subject line
- Umami analytics events:
lead_modal_open (with plan param) and lead_form_submit (with plan param) — only if umami is loaded
- Calendly embed URL includes
hide_event_type_details=1 and primary_color=4F46E5 (indigo)
- Individual agents are available from $99/mo per footnote below the cards
Gotchas
- Modal focus trap: The modal implements keyboard focus trapping (Tab cycles within modal, Shift+Tab wraps). Automation must account for this if using keyboard navigation
- Body scroll lock: When modal is open,
document.body.style.overflow = 'hidden'. Must close modal before scrolling to other sections
- Form reset on open: Every time the modal opens,
resetForm() clears all fields and errors. Previous input is not preserved
- Submit button state: Button is disabled during submission (
submitBtn.disabled = true). Wait for redirect or error before re-interacting
- Redirect on success: Form submit triggers
window.location.href = '/start' — the page navigates away. A fresh snapshot is needed after redirect
- Calendly in iframe: The
/start page embeds Calendly in an iframe. SideButton cannot interact with iframe content — booking must be treated as a manual step
- No back button handling: The lead modal does not push browser history. Browser back from
/start returns to homepage, not to modal
- Cookie dialog overlap: If cookie consent dialog is still showing, it may overlap with pricing section. Dismiss cookies first