SideButton Marketing Website Knowledge Pack Files

What This Is

Feature page for AI Automation — the overview page explaining how SideButton enables zero-config browser control for AI tools. Uses the shared FeatureHero component with "Zero Config" badge (success/green color). Includes: AIToolsGrid component (4 cards linking to integration pages with setup time badges), dashboard screenshot section with /screenshots/actions.png, ComparisonTable component (6-row traditional vs SideButton comparison), CapabilityList component (6 capability cards in default single-column layout), ExamplePrompts component (6 quote cards), Related Features 3-card grid, and dark FeatureCTA section. Includes BreadcrumbList and HowTo JSON-LD schemas for SEO.

URL Patterns

Pattern	Description
/features/ai-automation	AI automation overview page

Page Structure

+--[Header: sticky banner]---------------------------+
|                                                     |
| [1. HERO — FeatureHero component]                   |
|   Badge: "Zero Config" (green/success color)        |
|   H1: "AI Automation with SideButton Extension"     |
|   Subtitle + 2 CTA buttons                          |
|   "Get Started Free" -> docs install                |
|   "Documentation" -> docs home                      |
|                                                     |
| [2. AI TOOLS GRID — AIToolsGrid component]          |
|   "Works with Your AI" heading                      |
|   2×2 grid (grid-cols-2 md:grid-cols-4)            |
|   ChatGPT (badge "30 seconds", featured)            |
|   Claude Code (badge "1 minute", featured)          |
|   Cursor ("1 minute" as small text)                 |
|   Windsurf ("1 minute" as small text)               |
|   Each: SVG logo + name + setup time                |
|   Cards link to /integrations/{tool}                |
|                                                     |
| [3. DASHBOARD SCREENSHOT — bg-slate-50]             |
|   "Your Automations Dashboard" heading              |
|   /screenshots/actions.png (lazy, 1280x800)         |
|                                                     |
| [4. COMPARISON TABLE — ComparisonTable component]   |
|   "Traditional vs SideButton" heading               |
|   3-column table: label | Traditional | SideButton  |
|   6 rows with SideButton column highlighted         |
|                                                     |
| [5. CAPABILITIES — CapabilityList component]         |
|   "What AI Can Do" heading                          |
|   6 cards (default columns, no 2-col override)      |
|   Navigate | Click & Interact | Type & Fill |       |
|   Extract Data | See Pages | Run Workflows          |
|                                                     |
| [6. EXAMPLE PROMPTS — ExamplePrompts component]     |
|   "Example Prompts" heading, bg-slate-50            |
|   6 quote cards with large quote mark               |
|   Gmail, Amazon, HubSpot, LinkedIn, Jira, pricing   |
|                                                     |
| [7. RELATED FEATURES — bg-slate-50, 3-card grid]    |
|   Chat | Browser MCP | Integrations                 |
|                                                     |
| [8. CTA — FeatureCTA component, bg-slate-900]       |
|   "Start Automating with AI"                        |
|   "Get Started Free" + "Browse Workflows"           |
|                                                     |
+--[Footer: 6-column grid]---------------------------+

Key Elements

Hero Section (FeatureHero component)

Element	Selector	Notes
Hero section	section.relative.overflow-hidden (first)	Shared FeatureHero component
Badge	.inline-flex.rounded-full with "Zero Config"	Green: bg-success/10 text-success border-success/20
Badge dot	span.w-1\\.5.h-1\\.5.rounded-full.animate-pulse	Pulsing green dot
Hero heading	h1 "AI Automation with SideButton Extension"	text-4xl md:text-5xl lg:text-6xl
Hero subtitle	p "Give ChatGPT and Claude full browser control..."	text-lg md:text-xl
Get Started Free	a[href*="docs.sidebutton.com/installation"]	bg-primary, shadow-lg shadow-primary/25
Documentation	a[href*="docs.sidebutton.com"] (outline)	bg-white border border-slate-200

AI Tools Grid (AIToolsGrid component)

Element	Selector	Notes
Section	section.py-16 (AIToolsGrid)	White background
Section heading	h2 "Works with Your AI"	text-2xl md:text-3xl
Subtitle	p "Connect your favorite AI tools in seconds..."	text-slate-600
Grid	.grid.grid-cols-2.md\\:grid-cols-4.gap-4	2-col mobile, 4-col desktop
ChatGPT card	a.ai-tool-card[href="/integrations/chatgpt"]	Featured: badge "30 seconds" in top-right
Claude Code card	a.ai-tool-card[href="/integrations/claude-code"]	Featured: badge "1 minute" in top-right
Cursor card	a.ai-tool-card[href="/integrations/cursor"]	Not featured: "1 minute" as small text below name
Windsurf card	a.ai-tool-card[href="/integrations/windsurf"]	Not featured: "1 minute" as small text below name
Tool badge	.ai-tool-badge	Absolute positioned, top-right, bg-primary white text, rounded-full
Tool logo	.ai-tool-logo	48x48px SVG icon container
Tool name	.ai-tool-name	font-semibold text
Setup time (non-featured)	.ai-tool-time	text-xs text-slate-500

Dashboard Screenshot Section

Element	Selector	Notes
Section	section.py-16.bg-slate-50 (Dashboard)	Slate background
Section heading	h2 "Your Automations Dashboard"	text-2xl md:text-3xl
Subtitle	p "Manage workflows, track runs, and monitor success rates"	text-slate-600
Screenshot	img[alt*="SideButton actions dashboard"]	/screenshots/actions.png, 1280x800, lazy loaded, rounded-xl shadow-2xl

Comparison Table (ComparisonTable component)

Element	Selector	Notes
Section	section.py-16 (ComparisonTable)	White background
Section heading	h2 "Traditional vs SideButton"	text-2xl md:text-3xl
Subtitle	p "See why AI-native automation is different"	text-slate-600
Table container	.bg-white.rounded-2xl.border.border-slate-200.overflow-hidden.shadow-sm	Rounded card with border
Table header	.grid.grid-cols-3.border-b.bg-slate-50	3-column header row
Traditional label	span "Traditional (Zapier/Make)"	text-sm font-semibold text-slate-500
SideButton label	span "SideButton"	text-sm font-semibold text-primary, bg-primary/5 column
Row: Setup time	"30+ minutes" vs "30 seconds"	SideButton column highlighted bg-primary/5
Row: API keys	"Yes, multiple" vs "None"
Row: Webhooks	"Required" vs "Not needed"
Row: Data mapping	"Manual" vs "Automatic"
Row: Any website	"Only with APIs" vs "Yes, any website"
Row: Real-time	"Cached data" vs "Live page content"

Capabilities Section (CapabilityList component)

Element	Selector	Notes
Section	section.py-16 (CapabilityList)	White background
Section heading	h2 "What AI Can Do"	text-2xl md:text-3xl
Subtitle	p "With SideButton connected, your AI can control any website"	text-slate-600
Grid	.grid.gap-4	Default columns (no explicit md:grid-cols-2 override)
Navigate card	Card containing h3 "Navigate"	"Open any URL, follow links, navigate through multi-page flows"
Click & Interact card	Card containing h3 "Click & Interact"	"Click buttons, expand menus, interact with any page element"
Type & Fill card	Card containing h3 "Type & Fill"	"Fill forms, compose messages, enter data into any input field"
Extract Data card	Card containing h3 "Extract Data"	"Get structured data from pages to JSON or CSV format"
See Pages card	Card containing h3 "See Pages"	"AI sees the page structure through accessibility snapshots"
Run Workflows card	Card containing h3 "Run Workflows"	"Execute pre-built workflows or install skill packs for any app"

Example Prompts (ExamplePrompts component)

Element	Selector	Notes
Section	section.py-16.bg-slate-50 (ExamplePrompts)	Slate background
Section heading	h2 "Example Prompts"	text-2xl md:text-3xl
Subtitle	p "Just ask your AI in natural language"	text-slate-600
Prompt list	.space-y-4	Vertical list of quote cards
Prompt card	.prompt-card	White card, border-slate-200, hover:border-primary + shadow
Quote mark	.prompt-quote	Large serif quote mark, primary color, opacity 0.5
Prompt 1	.prompt-text	"Open Gmail and draft a reply to the support ticket from Mike"
Prompt 2	.prompt-text	"Scrape the top 10 products from this Amazon page into a CSV"
Prompt 3	.prompt-text	"Fill out the HubSpot contact form with this lead data"
Prompt 4	.prompt-text	"Check my LinkedIn notifications and summarize them"
Prompt 5	.prompt-text	"Go to Jira and create a bug ticket for the login issue"
Prompt 6	.prompt-text	"Extract all the pricing information from this competitor page"

Related Features

Element	Selector	Notes
Section	section.py-12.bg-slate-50	Slate background
Section heading	h2 "Related Features"	text-xl
Chat card	a[href="/features/chat"]	h3 "SideButton AI Assistant", hover:border-primary
Browser MCP card	a[href="/features/browser-mcp"]	h3 "SideButton Browser MCP"
Integrations card	a[href="/integrations"]	h3 "Integrations"

CTA Section (FeatureCTA component)

Element	Selector	Notes
CTA container	.bg-slate-900.rounded-2xl	Dark background with blur decorations
Section heading	h2 "Start Automating with AI"	text-white
Subtitle	p "Install SideButton and give your AI full browser control in 30 seconds."	text-slate-300
Get Started Free	a[href*="docs.sidebutton.com/installation"]	bg-primary button (default FeatureCTA primary)
Browse Workflows	a[href="/integrations"]	bg-white/10 button (default FeatureCTA secondary)

Data Model

Static feature page — no editable entities. Content is rendered at build time from Astro components.

Field	Type	Description
comparisonItems	array[6]	Comparison row data: label, traditional value, sidebutton value
capabilities	array[6]	Capability card data: icon key, title, description
examplePrompts	array[6]	Raw prompt strings (no icon/title wrapper)
defaultTools (AIToolsGrid)	array[4]	Tool card data: name, setupTime, href, logo key, featured boolean
Related features	array[3]	Chat (/features/chat), Browser MCP (/features/browser-mcp), Integrations (/integrations)
SEO schemas	array[2]	BreadcrumbList (Home > Features > AI Automation), HowTo (3-step setup)
ComparisonTable labels	object	traditionalLabel = "Traditional (Zapier/Make)", sideButtonLabel = "SideButton"

States & Variations

State	Trigger	Visual Indicator
Default	Page load	All sections visible, no interactive state
Cookie dialog	First visit	Cookie Notice dialog overlay with Accept/Reject buttons
SideButton FAB	Extension installed	Green "S" + "Click" button bottom-right
Hero badge pulse	Continuous	Green dot pulses via animate-pulse
AI tool card hover	Hover on card	border -> border-primary, shadow, translateY(-2px)
Prompt card hover	Hover on card	border-slate-200 -> border-primary + primary shadow
Related card hover	Hover on card	border-primary + shadow-md, h3 changes to primary color
Capability card hover	Hover on card	border-slate-100 -> border-slate-200
Responsive mobile (<= 768px)	Small viewport	AI Tools grid 2x2, comparison table columns tight, capabilities single column, CTA buttons stack
Responsive desktop (>= 768px)	Medium+ viewport	AI Tools grid 4-column, comparison table full width
Screenshot lazy load	Scroll to dashboard section	Image loads when entering viewport (loading="lazy")

Common Tasks

Verify Page Loads Correctly

1. Navigate to /features/ai-automation
2. Verify hero heading "AI Automation with SideButton Extension" is visible
3. Verify "Zero Config" badge appears with pulsing green dot
4. Scroll through all 8 sections and verify none are missing
5. Check that dashboard screenshot loads without broken image

Verify AI Tools Grid Cards

1. Scroll to "Works with Your AI" section
2. Verify 4 tool cards are displayed
3. Verify ChatGPT card has "30 seconds" badge (positioned top-right)
4. Verify Claude Code card has "1 minute" badge
5. Verify Cursor and Windsurf cards show setup time as small text (no badge)
6. Click each card and verify navigation to correct /integrations/ page

Verify Comparison Table

1. Scroll to "Traditional vs SideButton" section
2. Verify 3-column table with 6 data rows
3. Verify header: empty | "Traditional (Zapier/Make)" | "SideButton" (primary color)
4. Verify SideButton column has bg-primary/5 highlighting
5. Verify data: Setup time "30+ minutes" vs "30 seconds", API keys "Yes, multiple" vs "None", etc.
6. Verify all 6 rows render with proper border separators

Verify Example Prompts

1. Scroll to "Example Prompts" section
2. Count 6 prompt cards in vertical stack
3. Verify each card has a large serif quote mark in primary color (opacity 0.5)
4. Verify prompt text is italic
5. Hover over a card and verify border changes to primary color with shadow

Verify All Links Work

1. Check hero "Get Started Free" -> docs.sidebutton.com/installation
2. Check hero "Documentation" -> docs.sidebutton.com
3. Check AI tool cards: /integrations/chatgpt, /integrations/claude-code, /integrations/cursor, /integrations/windsurf
4. Check Related Features: /features/chat, /features/browser-mcp, /integrations
5. Check CTA "Get Started Free" -> docs install
6. Check CTA "Browse Workflows" -> /integrations

Verify Responsive Layout

1. Set viewport to 375px width (mobile)
2. Verify AI tools grid becomes 2x2 layout
3. Verify comparison table columns remain 3 but text may wrap
4. Verify capabilities go single column
5. Set viewport to 768px+ and verify AI tools grid becomes 4-column

Tips

• The AI Tools Grid component uses scoped CSS with custom .ai-tool-card class — hover effects include translateY(-2px) lift and primary border
• Featured tool cards (ChatGPT, Claude Code) show setup time as an absolute-positioned badge; non-featured cards show it as inline text below the name
• The ComparisonTable component is generic and accepts traditionalLabel and sideButtonLabel props — this page passes "Traditional (Zapier/Make)" and "SideButton"
• The CapabilityList on this page uses default columns (no columns={2} prop) unlike the chat and browser-mcp pages which pass columns={2}
• Example prompts use the ExamplePrompts component with scoped .prompt-card and .prompt-quote CSS — the large quote marks are positioned absolutely
• The CTA section uses default FeatureCTA props (no custom primaryText/primaryHref) so "Get Started Free" links to docs install and "Browse Workflows" links to /integrations
• Dashboard screenshot path is /screenshots/actions.png — this is a build-time asset, not dynamically generated

Gotchas

• No interactive JavaScript on this page: Unlike browser-mcp (tabs, copy, animation), this page is entirely static — all content renders at build time with no client-side scripts
• Comparison table on mobile: The 3-column grid layout can become cramped on small screens — text may wrap but the grid-cols-3 structure is fixed (no responsive collapse)
• AI tool card badges vs text: Featured cards (ChatGPT, Claude Code) show setup time as a badge (.ai-tool-badge absolute top-right) while non-featured show it as .ai-tool-time text — the visual difference can be subtle in snapshots
• Dashboard screenshot is lazy-loaded: The loading="lazy" and decoding="async" attributes mean the image may not be present when first scrolling to the section
• Two adjacent bg-slate-50 sections: Example Prompts and Related Features both use bg-slate-50 background — they appear as one continuous section visually
• CapabilityList columns differ from other pages: This page does not pass columns={2} to CapabilityList, so it uses the default layout which may differ from chat and browser-mcp pages