Skip to main content

Vibe Coding Project 5: Pricing and Services Page

Build a complete services + pricing section — one of the most common client requests — using AI and then porting to WordPress.

🎯 Project Goal​

A services/pricing page featuring:

  • Services grid (icons + descriptions).
  • Three-tier pricing table with a featured card.
  • FAQ accordion section (CSS-only).
  • Social proof strip (logos or stats).

Phase 1: AI Prompt for the Full Page​

Build a pricing and services page in HTML + CSS.
Design tokens (use as CSS variables in :root):
  --bg:         #0f0f0f;
  --surface:    #1a1a1a;
  --border:     rgba(255,255,255,0.08);
  --primary:    #6c63ff;
  --text:       #f0f0f0;
  --muted:      #777777;
  --radius-md:  8px;
  --radius-lg:  16px;

Sections:
1. Services grid: 3 columns, each with an SVG icon placeholder (div), title, short text.
2. Pricing table: 3 cards (Starter / Pro / Enterprise). Pro card is featured (highlighted border, slightly larger).
   - Each card: price, billing period, feature list with checkmarks, CTA button.
3. FAQ: 4 items using <details>/<summary> for accordion. Style with  custom CSS.
4. Stats bar: full-width, 4 large numbers with labels (e.g., "500+ Clients").

All responsive, mobile-first, BEM naming.
Output: single HTML file.

Phase 2: Key CSS Patterns​

CSS-Only Accordion (FAQ)​

details {
  border-bottom: 1px solid var(--border);
  padding: 1rem 0;
}
summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 1.1rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
}
summary::after { content: '+'; font-size: 1.5rem; color: var(--primary); transition: transform 0.3s; }
details[open] summary::after { content: '−'; }
details p { margin-top: 0.75rem; color: var(--muted); line-height: 1.7; }

Pricing Grid​

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  align-items: start; /* featured card can be taller */
}
.pricing-card--featured {
  border: 2px solid var(--primary);
  box-shadow: 0 0 40px rgba(108, 99, 255, 0.2);
}

Stats Bar​

.stats-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  text-align: center;
  padding: 4rem 2rem;
  background: var(--surface);
  gap: 2rem;
}
.stat__number {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  color: var(--primary);
  line-height: 1;
}
.stat__label { font-size: 0.875rem; color: var(--muted); margin-top: 0.5rem; }

Phase 3: WordPress Implementation​

GeneratePress + GenerateBlocks​

  1. Services grid: GB Container → set CSS Grid columns in Additional CSS.
  2. Pricing cards: Three GB Containers side-by-side. Add .pricing-card--featured class to the middle one.
  3. FAQ: Use a native Accordion block (if GP Premium) or a plugin like Kadence Accordion.
  4. Stats bar: GB Container with 4-column layout. Use GB Headline for each number.

Bricks Builder​

  1. Pricing table: Bricks Section → 3-column layout → Containers with .pricing-card class.
  2. FAQ: Bricks has a native Accordion element — style with Custom CSS using %root%.
  3. Apply all CSS in Settings → Custom Code → Custom CSS.

Phase 4: Refinement Prompts​

1. "Add a toggle between Monthly/Annual billing that swaps the prices using a CSS checkbox hack."
2. "Add a 'Most Popular' badge to the featured pricing card using ::before pseudo-element."
3. "The stats should count up from 0 when scrolled into view — give me the Intersection Observer JS."
4. "Add subtle noise texture to the stats bar background using a CSS filter."