Professional service tiers with feature comparison, testimonials, FAQ accordion, and booking CTA for freelancers and agencies. Present your services with clear pricing, social proof, and a frictionless path from visitor to booked client.
Build Prompt
Copy this prompt into Claude Code
Build a service pricing and booking page as a static HTML/CSS/JS site. Use a dark professional theme with background #0a0a0f, surfaces #12121a, and accent #3b82f6 (blue). Load data from inline `const SERVICES = {...}` and `const AVAILABILITY = {...}`.
SERVICES has: businessName, tagline, tiers (array of {name, price, period ("month" or "project" or "hour"), description, features (array of {text, included: boolean}), highlighted (boolean), ctaText, ctaUrl (Calendly link or mailto)}), testimonials (array of {name, company, text, avatar (emoji), result}), faq (array of {question, answer}).
AVAILABILITY has: nextAvailable (date string), bookedDates (array of date strings), timezone, note (e.g., "Currently accepting new clients").
Layout: Hero with business name, tagline, and an availability badge ("Accepting Clients" in green or "Fully Booked" in red based on AVAILABILITY).
Pricing tiers in a horizontal card layout (3 columns desktop, stacked mobile). The highlighted tier is visually prominent: slightly larger, has a "Most Popular" badge, and a brighter border. Each tier card shows: tier name, price with period, description, feature list with check marks (included) and X marks (not included), and a CTA button linking to the booking URL.
Below the pricing cards, a feature comparison table (visible on desktop, collapsed accordion on mobile) listing all features as rows and tiers as columns, with checkmarks and X marks.
Testimonials section: cards with quote, client name, company, and a "result" metric (e.g., "Revenue increased 340%"). Arranged in a 3-column grid.
Process section: "How I Work" with 4 numbered steps (e.g., Discovery Call, Proposal, Execution, Delivery) in a horizontal timeline layout.
FAQ accordion: clicking a question expands the answer with smooth animation. All start collapsed.
Contact/booking section at the bottom with the CTA "Book a Free Consultation" linking to the Calendly URL (or mailto). Show next available date from AVAILABILITY.
Add SEO: JSON-LD Service schema with provider, areaServed, offers. Meta targeting "[service type] pricing", "[service type] freelancer".
Seed with a realistic freelancer example: Web Development services with 3 tiers (Starter $499/project, Professional $1499/project, Enterprise $3999/project).
Read the guide at https://accessagent.ai/api/guide and follow it to deploy the site to AccessAgent.ai. My email is [your@email.com].
Make It Yours
Portfolio Showcase
Add a portfolio section with project thumbnails, descriptions, and links to past work.
ROI Calculator
Add an interactive calculator showing potential ROI based on the chosen tier and client's revenue.
Comparison with Competitors
Add a "Why Choose Me" section comparing your pricing/features to typical agencies.
Guarantee Badge
Add a prominent money-back guarantee or satisfaction guarantee badge near the CTA.
Team Profiles
Replace the solo freelancer angle with a team page showing member roles, photos, and expertise.
Update Prompt
Update Prompt — Manage pricing and availability
Update my service pricing page: [describe changes — e.g., "Change Professional tier price to $1799", "Add a new feature to Enterprise tier: Priority Support", "Mark me as fully booked until March 15", "Add a new testimonial from John at Acme Corp: 'Incredible work, delivered ahead of schedule' with result 'Launched 2 weeks early'", "Add a new FAQ: Q: Do you offer ongoing maintenance? A: Yes, monthly retainer plans available starting at $299/month"]. Update the SERVICES and AVAILABILITY data. Redeploy.
SEO Tips
Target "[service type] pricing", "[service type] freelancer", and "how much does [service] cost" for high-intent search traffic.
Add JSON-LD Service schema with provider details, service area, and pricing offers for structured data in search results.
Create a detailed FAQ section with schema markup answering pricing questions to win featured snippets.
Add case study content with specific results ("Increased revenue 340%") to rank for "[service type] case study" queries.
Include location-based keywords if you serve specific areas to capture local search traffic.
Monetization Ideas
Direct service bookings through Calendly or contact form — the primary revenue driver with high-ticket pricing.
Offer a DIY template or course ($99-$299) for clients who cannot afford the full service but want to learn.
Add an email course ("7 Days to Better [Service Area]") to capture leads and nurture them toward paid services.
Create a referral program offering existing clients a discount on their next project for successful referrals.
Sell this pricing page template to other freelancers ($49) as a ready-to-deploy client acquisition tool.