Knowledge Pack Files

SideButton Marketing Website Knowledge Pack Files

Browse the source files that power the SideButton Marketing Website MCP server knowledge pack.

Available free v1.0.3 Browser

$ sidebutton install sidebutton.com

Download ZIP

pricing/_skill.md

20.4 KB

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.