AICTPO AI Coding Agents Knowledge Pack Files

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 Formspree. 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

Submitted as JSON POST to https://formspree.io/f/mjgpkzaw.

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	Formspree returns non-OK	Error text "Something went wrong. Please try again." shown
Submit Success	Formspree 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

1. Navigate to https://aictpo.com/
2. Click "Pricing" in nav or scroll to #pricing
3. Verify three plan cards visible: Squad, Fleet, Custom Fleet
4. Verify pricing: Squad $125/agent, Fleet $99/agent

2. Open Lead Modal for a Plan

1. Scroll to #pricing section
2. Click the plan's CTA button (button[data-plan="Squad"], button[data-plan="Fleet"], or button[data-plan="Custom Fleet"])
3. Wait for modal: #lead-modal.lead-modal-open
4. Verify modal title matches plan (e.g., "Start with Squad")
5. Verify plan badge shows correct plan name

3. Submit Lead Form (Happy Path)

1. Open lead modal for desired plan (Task 2)
2. Type name into input#lead-name
3. Type valid email into input#lead-email
4. Optionally type message into textarea#lead-message
5. Click submit button #lead-submit
6. Wait for redirect to /start
7. Verify "You're In" heading visible
8. Verify Calendly iframe loaded

4. Trigger Validation Errors

1. Open lead modal for any plan
2. Click submit without filling fields
3. Verify name error visible: #lead-name-error.lead-error-visible
4. Verify email error visible: #lead-email-error.lead-error-visible
5. Verify name input has class lead-input-error

5. Close Lead Modal

1. Open lead modal for any plan
2. Close via one of:
   • Click close button #lead-modal-close
   • Click backdrop #lead-modal-backdrop
   • Press Escape key
3. Verify modal no longer has class lead-modal-open
4. 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 Formspree
• The _subject field in Formspree 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