# Plan 1 — WordPress Pages (HTML for Beaver Builder)
> **For agentic workers:** REQUIRED SUB-SKILL: Use `superpowers:subagent-driven-development` (recommended) or `superpowers:executing-plans` to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
**Goal:** Produce 14 self-contained, conversion-driven HTML page snippets that drop into Beaver Builder "Code Module" blocks on btwebgroup.com under the `/packages/*` URL tree. All snippets share a single CSS token file + reusable lead-capture form (no online payments).
**Architecture:** Each page is a single `.html` file containing scoped HTML + `
```
- [ ] **Step 2: Test the modal locally**
Open `_components/lead-form-modal.html` in a browser via a quick wrapper, click any element with `data-btw-lead-open="test-package"`, confirm modal opens, ESC closes it, invalid submit triggers HTML5 validation.
Run: `open /Users/sanketlakhani/Work/btwebgroup-packages/packages-html/_components/lead-form-modal.html`
Expected: file opens in browser; no console errors. (Modal won't have a trigger button standalone — wrap in test harness if needed; functional verification happens once embedded in Task 4.)
- [ ] **Step 3: Confirm phone (859) XXX-XXXX placeholder with Sanket**
Get the real Lexington phone number from Sanket and replace `(859) XXX-XXXX` everywhere in the modal source before moving on.
- [ ] **Step 4: Commit**
```bash
git add packages-html/_components/lead-form-modal.html
git commit -m "feat(pages): add reusable lead-capture modal"
```
---
## Task 3: Build shared trust + FAQ components
**Files:**
- Create: `packages-html/_components/trust-strip.html`
- Create: `packages-html/_components/sticky-trust-bar.html`
- Create: `packages-html/_components/faq-accordion.html`
- [ ] **Step 1: Trust strip (5 pillars, horizontal cards)**
```html
Why local businesses keep choosing us
Pillar 1
Real Specialists, Real Decisions
Every campaign, every page, every ad is strategized and approved by our Lexington-based team. Nothing leaves our office without a human signature on it.
Pillar 2
AI Where It Belongs — In the Background
We use AI for the mundane: drafting first passes, running audits, generating options. We don't use it for the work that matters — that's our team's job.
Pillar 3
You Get the Savings
Because the busywork takes 70% less time, our specialists can do more for your dollar. That's why a strategy that used to cost $2,000 now costs $497.
Pillar 4
20+ Years in Lexington
AI is new. Our expertise isn't. We've been growing local businesses since before social media existed.
Pillar 5
No Lock-In. Ever.
Cancel any month, no penalties, no questions. Within 5 business days we export everything to you — contacts, campaigns, ads, designs, content, dashboards. No hidden fees, no cancellation gymnastics. Your business is yours.
```
- [ ] **Step 2: Sticky top trust bar**
```html
🟢 No contracts
·
Cancel anytime
·
Your data is yours
·
Lexington team
·
20+ years
```
- [ ] **Step 3: FAQ accordion**
```html
Questions, answered
Can I cancel anytime?
Yes. Cancel any month, no penalties, no notice period. We close your subscription at the end of your current billing month and export your data within 5 business days.
What if I want my data back?
You get a complete export package: contact lists, written content, ad creatives, design files, performance reports, and a handoff document for whoever takes over next. Delivered within 5 business days of cancellation.
Are there setup fees or hidden charges?
No. The price you see is the price you pay. No setup fees, no cancellation fees, ever.
Do I sign a contract?
No. Month-to-month for recurring packages. One-time payment for tripwires and websites. You're never locked in.
How are you cheaper than other Lexington agencies?
Honest answer: AI tools handle the mundane work — research, drafts, audits, repetitive iteration — that used to eat 70% of our hours. Our team still owns every decision, but they're 4x faster on the busywork. We passed those savings to you instead of pocketing them.
Who actually does the work — your team or AI?
Our team owns every strategic decision, every approval, every customer-facing deliverable. AI just speeds up the first-draft and research phases. Think of it like a calculator for accountants — it makes them faster, it doesn't replace their judgment.
```
- [ ] **Step 4: Commit**
```bash
git add packages-html/_components/
git commit -m "feat(pages): add reusable trust + FAQ components"
```
---
## Task 4: Build root `/packages` catalog page
**Files:**
- Create: `packages-html/packages-root.html`
**Structure** (per spec §8.2): hero · filter bar · tripwire row · bundle row · service catalog · trust strip · social proof · FAQ · footer CTA.
- [ ] **Step 1: Write the page**
Each Beaver Builder snippet starts with a single `` wrapper containing the Google Fonts link, the inline `_tokens.css`, all sections (hero, filter, tripwire row, bundle row, service catalog, trust strip, social proof, FAQ, footer CTA), and the lead-form modal at the end. Concrete copy and prices to use, drawn from spec:
- **Hero headline:** `Real Marketing Packages. Real Prices. Starting at $247.`
- **Hero sub:** `20 years of marketing expertise — now faster, sharper, and 60% more affordable thanks to the right AI tools running quietly in the background.`
- **Hero CTAs:** `[See all packages ↓]` (anchor to `#catalog`), `[Book a free 15-min call →]` (opens modal with `data-btw-lead-open="root-hero-call"`)
- **Filter bar:** three filter groups (Goal / Budget / Service) as filter chips — clicking sets `?goal=…&budget=…&service=…` URL params and hides non-matching cards via JS data-attributes on each card
- **Tripwire row:** 3 horizontal cards using copy from spec §4 (5K Email Blast $247, AI SEO Audit + Fix $297, AI Landing Page Mockup $247). Each card has `data-btw-lead-open="tripwire-"`.
- **Bundle row:** 4 cards (Lead Engine $1,197, Brand Builder $797, Upsell Engine $797, Full Spectrum $2,997). Each links to `/packages/`.
- **Service catalog:** 6 cards (Email, Social, PPC, SEO, Websites, Graphics) — each card includes the per-service AI angle paragraph from spec §3 and links to the service hub.
- **Trust strip:** paste the strip from Task 3.
- **Social proof:** 3 testimonial cards (placeholder names — Sanket to provide real quotes/logos before publish) + counter row: `[N] local businesses since 2005`.
- **FAQ:** 6 items from Task 3.
- **Footer CTA:** *"Still not sure? Book a free 15-minute call. We'll tell you which package fits — even if it's the cheapest one."* `[Book a call →]` opens modal.
- **End:** include the lead-form-modal snippet from Task 2.
Filter chip behavior — concrete JS (place before `
` of the snippet):
```html