Pricing — SideButton Marketing Website Knowledge Module

What This Is

Pricing page for SideButton with three tiers: Free (Chrome extension install CTA), Pro (contact sales, "14-day trial" badge, marked as "Most Popular"), and Team (contact sales). The page is fully static with no billing/payment integration -- Pro and Team CTAs link to mailto addresses. Page layout: hero section with gradient text, 3-column pricing cards, social proof stats bar, feature comparison table (7 categories, ~30 rows), FAQ accordion (8 questions), and a bottom CTA section. A PricingToggle component (monthly/annual switch) exists in the codebase but is not imported or rendered on the current page -- all pricing display is static.

URL Patterns

Pattern	Description
/pricing	Main pricing page

Page Structure

+--[Header]-----------------------------------------------------+
|                                                                |
|  [1. HERO]                                                     |
|  H1: "Free forever. Upgrade when you're ready."               |
|  Subtitle: "SideButton is open source and always will be..."  |
|                                                                |
|  [2. PRICING CARDS — 3-column grid, md:grid-cols-3]            |
|  +----------+  +---[Most Popular banner]---+  +----------+     |
|  | FREE     |  | PRO                      |  | TEAM     |     |
|  | tier dot |  | tier dot + "14-day trial" |  | tier dot |     |
|  | "Free"   |  | "Contact Sales"          |  | "Contact"|     |
|  | desc     |  | desc                     |  | desc     |     |
|  | [Install |  | [Contact Sales] purple   |  | [Contact |     |
|  |  Free]   |  |  gradient CTA            |  |  Sales]  |     |
|  | 10 feats |  | 9 feats (4 highlighted)  |  | 8 feats  |     |
|  +----------+  +--------------------------+  | (3 high) |     |
|                                              +----------+     |
|  Fine print: "All plans include the full open-source core..." |
|                                                                |
|  [3. SOCIAL PROOF STATS BAR — border-t, 4 items + dividers]   |
|  Unlimited (skill packs) | 50+ (integrations) |               |
|  100% (local & private) | OSS (GitHub icon)                   |
|                                                                |
|  [4. COMPARE PLANS — feature comparison table]                 |
|  H2: "Compare plans"                                          |
|  Subtitle: "Everything in the free plan, plus more..."        |
|  Desktop: <table> with 4 columns (Feature, Free, Pro, Team)   |
|  Mobile: accordion <details> per category                     |
|  7 categories: AI Models(3), Core(5), Workflows(5),           |
|    Embed Buttons(3), Cloud Features(4), Team & Admin(5),      |
|    Support(4) = 29 feature rows total                         |
|                                                                |
|  [5. FAQ — bg-slate-50 background, 8 questions]               |
|  H2: "Frequently asked questions"                             |
|  Subtitle: "Everything you need to know about our plans"      |
|  8x <details> elements, first one open by default             |
|                                                                |
|  [6. BOTTOM CTA]                                               |
|  H2: "Still not sure?"                                        |
|  Subtitle: "Start free — no account, no credit card..."       |
|  [Install Free Extension] [Talk to Us]                        |
+--[Footer]-----------------------------------------------------+

Key Elements

Hero Section

Element	Selector	Notes
Hero section	section.pt-20.pb-4	Contains heading and subtitle
Main heading	h1.text-4xl	Text: "Free forever. Upgrade when you're ready."
Gradient text span	h1 span.gradient-text	"Upgrade when you're ready." with green-to-orange gradient
Subtitle	section.pt-20 p.text-lg	Description of open-source and Pro features

Pricing Cards

Element	Selector	Notes
Cards container	div.grid.grid-cols-1.md\\:grid-cols-3	3-column on desktop, stacked on mobile
Free card	div.pricing-card:nth-child(1)	No .popular class
Pro card	div.pricing-card.popular	Purple border + shadow, "Most Popular" banner
Team card	div.pricing-card:nth-child(3)	No .popular class
"Most Popular" banner	div.popular-banner	Purple gradient banner at top of Pro card
Tier dot (Free)	span.tier-dot.free	Green dot (#10b981)
Tier dot (Pro)	span.tier-dot.pro	Purple dot (#a855f7)
Tier dot (Team)	span.tier-dot.team	Teal dot (#15C39A)
Badge "14-day trial"	span.bg-amber-100.text-amber-700	Amber pill badge, only on Pro card
Price display (Free)	span.text-4xl.font-bold	Static text "Free"
Price display (Pro/Team)	span.text-2xl.font-bold	Static text "Contact Sales"
Free CTA button	a.pricing-cta.free	Dark bg (#0f172a), links to Chrome Web Store
Pro CTA button	a.pricing-cta.pro	Purple gradient, links to mailto:[email protected]?subject=Pro%20Plan
Team CTA button	a.pricing-cta.team	Teal gradient, links to mailto:[email protected]?subject=Team%20Plan
Feature list	ul.space-y-3	Inside each .card-body
Included feature	li svg.text-emerald-500	Green checkmark for standard features
Highlighted feature	li svg.text-purple-500	Purple checkmark for upgraded features
Excluded feature	li.opacity-40 svg.text-slate-300	Dash icon, 40% opacity
Fine print	p.text-sm.text-slate-400.mt-8	"All plans include the full open-source core..."

Social Proof Stats Bar

Element	Selector	Notes
Stats section	section.py-12.border-t	Horizontal stat blocks with dividers
Stat value	div.text-2xl.font-bold	"Unlimited", "50+", "100%", "OSS"
Stat label	div.text-xs.text-slate-500	Description below each value
Dividers	div.w-px.h-8.bg-slate-200	Vertical lines, hidden md:block
GitHub icon	svg.w-5.h-5 in OSS stat	Inline SVG of GitHub logo

Compare Plans Table

Element	Selector	Notes
Section heading	h2 with text "Compare plans"	Centered, bold
Subtitle	p.text-slate-500 after heading	"Everything in the free plan, plus more as you scale"
Desktop table wrapper	div.hidden.md\\:block.overflow-x-auto	Hidden below md breakpoint
Desktop table	div.hidden.md\\:block table.w-full	4 columns, no striping
Table header row	thead tr.border-b	"Feature", "Free" (green dot), "Pro" (purple dot), "Team" (teal dot)
Category header	td[colspan="4"] span.text-xs.uppercase	"AI Models", "Core", etc.
Feature row	tbody tr.border-b.border-slate-100	Feature name + 3 value cells
Check icon (Free)	svg.text-emerald-500 in table cell	Green checkmark
Check icon (Pro)	svg.text-purple-500 in table cell	Purple checkmark
Check icon (Team)	svg.text-\\[\\#15C39A\\] in table cell	Teal checkmark
Dash (not included)	span.text-slate-300 with —	Em dash for missing features
Text value	span.text-sm.text-slate-600 in cell	e.g., "Up to 5", "Unlimited", "7 days"
Mobile accordion	div.md\\:hidden.space-y-3	Shown only below md breakpoint
Mobile category	details.group.bg-white	One per category, first one open by default
Mobile expand icon	summary svg.group-open\\:rotate-180	Chevron rotates 180deg when open
Mobile feature grid	div.grid.grid-cols-3 per row	3-col layout: Free / Pro / Team values

FAQ Accordion

Element	Selector	Notes
FAQ section	section.py-16.bg-slate-50	Gray background distinguishes from comparison
Section heading	h2 with text "Frequently asked questions"	Centered
Subtitle	p.text-slate-500 after heading	"Everything you need to know about our plans"
FAQ container	div.space-y-3 inside FAQ section	8 <details> elements
FAQ item	details.group.bg-white.border.rounded-xl	Native <details> element
FAQ question	details summary span.text-sm.font-semibold	Click target to toggle
FAQ chevron	summary svg.group-open\\:rotate-180	Rotates when open
FAQ answer	details div.px-5.pb-4 p	Text content, hidden when closed
FAQ 1	1st details in FAQ section	"Is SideButton really free?" -- open by default
FAQ 2	2nd details	"What does Pro add?"
FAQ 3	3rd details	"Do I need my own API key?"
FAQ 4	4th details	"Can I try Pro before committing?"
FAQ 5	5th details	"What happens if I cancel?"
FAQ 6	6th details	"Do you offer discounts?"
FAQ 7	7th details	"What is the Team plan for?"
FAQ 8	8th details	"Is my data safe?"

Bottom CTA

Element	Selector	Notes
CTA section	section.py-16.bg-white (last section before footer)	White background
Heading	h2 with text "Still not sure?"	Centered
Subtitle	p.text-slate-600.mb-6	"Start free -- no account, no credit card. Upgrade anytime."
Install button	a.btn.btn-primary in CTA section	Links to Chrome Web Store
Talk to Us button	a.btn.btn-secondary	Links to mailto:[email protected]

Data Model

Plan Tiers

Field	Type	Description
name	string	Display name: "Free", "Pro", "Team"
tier	'free' | 'pro' | 'team'	Machine key, used for CSS classes (.pricing-cta.free, .tier-dot.pro, etc.)
description	string	One-sentence summary shown below price
price	{ monthly: number; yearly: number } | null	Price object. Currently null for all tiers -- not passed from page data
cta.label	string	Button text: "Install Free Extension" or "Contact Sales"
cta.href	string	Button link: Chrome Web Store URL or mailto:[email protected]?subject=<Plan>%20Plan
popular	boolean	If true, renders "Most Popular" banner and purple border. Only Pro
badge	string | undefined	Optional pill badge text. Pro has "14-day trial"
features	Feature[]	Array of feature items displayed in card
features[].text	string	Feature description text
features[].included	boolean	true = green/purple check; false = dash + 40% opacity
features[].highlight	boolean | undefined	true = purple check + bold text (used for key differentiators)

Comparison Table Data

Field	Type	Description
category	string	Category group name: "AI Models", "Core", "Workflows", etc.
rows	FeatureRow[]	Feature rows within this category
rows[].name	string	Feature name displayed in first column
rows[].free	string | boolean	Free tier value. true = check, false = dash, string = text value
rows[].pro	string | boolean	Pro tier value. Same type logic as free
rows[].team	string | boolean	Team tier value. Same type logic as free

FAQ Data

Field	Type	Description
q	string	Question text shown in <summary>
a	string	Answer text shown in collapsed <div>, plain text (no markdown/HTML)

Plan Feature Lists (Current Content)

Plan	Feature Count	Highlighted	CTA Target
Free	10	0	Chrome Web Store
Pro	9	4 (Claude/GPT-4o, Pro library, unlimited custom, unlimited runs)	mailto:[email protected]?subject=Pro%20Plan
Team	8	3 (workspace, team library, RBAC)	mailto:[email protected]?subject=Team%20Plan

Comparison Table Categories (Current Content)

Category	Rows	Key Differentiators
AI Models	3	Free: standard model; Pro/Team: top-tier (Claude, GPT-4o, Gemini Pro); all: BYOK
Core	5	All plans identical: chat, browser automation, OSS core, recording, MCP
Workflows	5	Free: 5 custom, 100 runs/mo; Pro/Team: unlimited + pro library + early access
Embed Buttons	3	Free: community only; Pro/Team: pro + custom buttons
Cloud Features	4	Free: none; Pro: sync, scheduled, webhooks, 90-day history; Team: unlimited history
Team & Admin	5	Team only: workspace, team library, RBAC, audit log, SSO/SAML
Support	4	Free: community; Pro: + email; Team: + priority + onboarding

States & Variations

Pricing Toggle (Component Exists but NOT Rendered)

The PricingToggle component (/components/pricing/PricingToggle.astro) exists in the codebase but is not imported on the pricing page. If wired in, it would:

• Toggle data-active attribute between "monthly" and "yearly" on #pricing-toggle
• Swap .active class between Monthly/Yearly labels
• Update elements with class .price-amount using data-monthly / data-yearly attributes
• Toggle visibility of .yearly-note elements
• Toggle knob slides right (green bg) when annual is active
• Show -20% save badge next to "Yearly" label (always visible, green pill)

Current state: all pricing displays are static text ("Free" or "Contact Sales") with no dynamic price switching.

Card Hover Effects

• All cards: translateY(-4px) lift + box-shadow: 0 20px 40px rgba(0,0,0,0.08) on hover
• Popular card at rest: purple border (#a855f7) + purple shadow (rgba(168,85,247,0.12))
• Popular card on hover: intensified purple shadow (rgba(168,85,247,0.18))
• CTA buttons: translateY(-1px) lift + colored shadow on hover
• Transitions: transform 0.2s ease, box-shadow 0.2s ease on cards; all 0.15s ease on CTAs

Popular Card Treatment

• Purple border: border-color: #a855f7
• "Most Popular" banner: purple gradient header bar (#a855f7 to #7c3aed), white uppercase text
• Purple CTA button: gradient bg (#a855f7 to #7c3aed), darkens on hover
• Purple checkmarks for highlighted features (vs green for standard)

FAQ Accordion

• First FAQ item (idx === 0) has open attribute by default
• Native <details> / <summary> elements -- no JavaScript required for open/close
• Chevron icon rotates 180 degrees when open via group-open:rotate-180 Tailwind class
• White background cards on bg-slate-50 section background
• Multiple items can be open simultaneously (no exclusive/radio behavior)

Comparison Table Responsive Behavior

• Desktop (md: and above): full <table> element, 4 columns, hidden class hidden md:block
• Mobile (below md): accordion <details> per category, class md:hidden
• Mobile shows 3-column grid (Free/Pro/Team) per feature row within each accordion
• First mobile accordion (idx === 0) is open by default
• Desktop table wrapped in overflow-x-auto for safety, though content fits within max-w-4xl

Card Alignment

• Cards use items-start on grid so they align to top (cards have different heights)
• Description box has min-height: 3.75rem to keep CTA buttons aligned across cards
• Feature list has flex-grow to push content down evenly

Common Tasks

1. Verify pricing page loads with all tiers

• Navigate to /pricing
• Assert h1 contains "Free forever"
• Assert 3 .pricing-card elements exist
• Assert .pricing-card.popular exists (Pro card)
• Assert "Most Popular" banner text is visible

2. Verify pricing card content and CTAs

• Check Free card: price text "Free", CTA "Install Free Extension" links to https://chromewebstore.google.com/detail/sidebutton/odaefhmdmgijnhdbkfagnlnmobphgkij
• Check Pro card: price text "Contact Sales", CTA "Contact Sales" links to mailto:[email protected]?subject=Pro%20Plan
• Check Team card: price text "Contact Sales", CTA "Contact Sales" links to mailto:[email protected]?subject=Team%20Plan
• Verify feature counts: Free = 10 items, Pro = 9, Team = 8
• Verify Pro has "14-day trial" badge (amber pill)

3. Verify comparison table content

• Scroll to "Compare plans" heading
• On desktop: assert table is visible with 4 column headers (Feature, Free, Pro, Team)
• Verify 7 category headers exist: "AI Models", "Core", "Workflows", "Embed Buttons", "Cloud Features", "Team & Admin", "Support"
• Spot-check values: "Custom workflows (YAML)" shows "Up to 5" / "Unlimited" / "Unlimited"
• Verify check icons use correct colors: green (Free), purple (Pro), teal (Team)

4. Expand and collapse FAQ items

• Scroll to "Frequently asked questions"
• Assert first FAQ ("Is SideButton really free?") is open by default
• Click second FAQ summary ("What does Pro add?") -- assert its answer becomes visible
• Click first FAQ summary -- assert it closes
• Verify all 8 FAQ items can be independently toggled

5. Verify comparison table mobile layout

• Resize to mobile viewport (below 768px)
• Assert desktop table is hidden, mobile accordion is visible
• Assert first category accordion ("AI Models") is open by default
• Expand another category -- verify 3-column grid shows Free/Pro/Team values
• Verify multiple categories can be open simultaneously

6. Verify bottom CTA and links

• Scroll to "Still not sure?" section
• Assert "Install Free Extension" button links to Chrome Web Store
• Assert "Talk to Us" button links to mailto:[email protected]
• Verify social proof stats bar shows 4 items: "Unlimited", "50+", "100%", "OSS"

Tips

• All pricing is currently static -- there is no billing system, payment gateway, or Stripe integration. Pro/Team CTAs open a mailto link, not a checkout flow.
• The PricingToggle component exists at /components/pricing/PricingToggle.astro with full monthly/yearly switching logic, but it is not imported on the page. If prices are added later, this component is ready to wire in -- it looks for .price-amount, .price-period, and .yearly-note class elements.
• The comparison table uses two completely separate DOM trees for desktop (table) and mobile (accordion) -- when testing content changes, both must be verified.
• FAQ items use native <details> / <summary> HTML elements with no JavaScript. Open/close is handled by the browser. Multiple items can be open at the same time.
• Highlighted features (purple checkmarks + bold text) are controlled by the highlight: true flag in the feature data. Pro has 4 highlighted, Team has 3, Free has 0.
• Card vertical alignment is carefully controlled: description-box has a min-height to keep CTAs level, and items-start on the grid means cards can have different heights without stretching.
• The popular card's purple treatment is all CSS: border color, box-shadow, banner gradient, and CTA gradient. No JavaScript is involved.
• Social proof stats bar dividers (w-px h-8 bg-slate-200) are hidden on mobile via hidden md:block.

Gotchas

• Two "Contact Sales" links, two "Install Free Extension" links: The Pro and Team CTAs both say "Contact Sales" but have different mailto subject lines (Pro%20Plan vs Team%20Plan). The bottom CTA also has "Install Free Extension". When targeting by link text, use positional selectors or check href attribute to disambiguate.
• No pricing toggle on page: Despite PricingToggle.astro existing in the components folder, it is not rendered. Tests should NOT expect a monthly/annual toggle to be present. The toggle script targets .price-amount elements which do not exist on the current page.
• Desktop/mobile comparison are separate DOM trees: Content is duplicated -- the desktop <table> and mobile accordion <details> elements render the same data independently. A content bug could appear in only one view. Always test both breakpoints.
• First FAQ and first mobile category are pre-opened: Both the first FAQ item and the first comparison accordion on mobile have open attribute set at build time (open={idx === 0}). This is a server-rendered attribute, not JavaScript-controlled.
• Card hover transitions may interfere with click targeting: Cards lift 4px on hover (translateY(-4px)) with a 200ms transition. Fast automated clicks right after hover may target the wrong position if the card is still animating.
• Comparison table check icons have different colors per tier: Free = text-emerald-500 (green), Pro = text-purple-500, Team = text-[#15C39A] (teal, custom Tailwind value). The Team color uses an arbitrary Tailwind value, not a named color class, which makes it harder to grep for.