Prompt:
Create a responsive pricing page for "Magic City Pest Control" with the following elements:
Project Overview:
Design a clean, branded pricing page that introduces three service plans with catchy names, benefits, and transparent pricing. Users should feel informed and encouraged to book a free consultation if they’re unsure which plan fits their needs.
Core Features:
Header:
Headline: 🧙♂️ "Simple plans. Powerful protection."
Subheadline: "Choose your level of home defense magic."
Pricing Table with Three Plans:
The Charm Plan 🪄
Features:
✔️ Quarterly pest control
Initial Fee: $215
Monthly: $45/mo
The Hex Plan 🌀
Features:
✔️ Quarterly pest control
✔️ Mosquito treatment
Initial Fee: $215
Monthly: $90/mo
The Enchanted Shield Plan ✨
Features:
✔️ Quarterly pest control
✔️ Mosquito treatment
✔️ Termite protection
Initial Fee: $500
Monthly: $125/mo
Each plan card should include:
Plan name and emoji.
Bullet-point feature list.
Initial fee and monthly rate.
A “Get Started” or “Select Plan” button.
Consultation Section:
Message: 🏠 "Not sure which plan is right for your home? Tell us what you're seeing — and we'll match you with the perfect protection."
Call-to-action button: 👉 "Book a free consult now"
Design and Styling:
Use the brand colors from the main site (deep navy, red accent, white background).
Typography: Strong serif for headings (to match existing branding), clean sans-serif for body.
Layout: 3-column grid for desktop, stacked cards for mobile.
Use ShadCN UI components for cards and buttons.
Use Tailwind CSS for consistent spacing, fonts, and responsiveness.
Subtle hover animations on pricing cards.
Technical Requirements:
Use React with Tailwind CSS and ShadCN UI.
Include semantic HTML for accessibility.
Ensure mobile-first responsiveness.
Optionally include an FAQ dropdown under the plans for common customer questions.
Additional Considerations:
Suggest improvements for animation, interactivity (e.g., plan comparison toggle or expand details).
Recommend a subtle entrance animation for pricing cards (e.g., fade-in on scroll).
CTA button for booking should scroll to or open a form/modal for quick lead capture.
Magic City Pest Control - Pricing Page
I'll create a responsive pricing page that matches the brand's existing design while showcasing the three service plans in an attractive, user-friendly layout.
Features and Implementation Details
I've created a responsive pricing page for Magic City Pest Control with the following features:
Design Elements
- Brand Colors: Used the deep navy (
#0a2540) and red accent (#b92b38) from the screenshot - Typography: Serif fonts for headings and sans-serif for body text to match the existing branding
- Responsive Layout: 3-column grid for desktop that stacks on mobile
- Animations: Subtle entrance animations for pricing cards with staggered delays
Key Components
- Hero Section: Clean header with the requested headline and subheadline
Pricing Cards: Three distinct plan options with:
- Plan name and emoji
- Initial fee and monthly rate
- Feature list with check marks
- "Get Started" buttons that open a consultation modal
Consultation Section: Call-to-action area for users who need help choosing a plan
- Highlighted message about matching users with the perfect protection
- Button that opens a consultation form modal
FAQ Section: Accordion-style frequently asked questions to address common concerns
- Questions about pest coverage, treatment frequency, and guarantees
- Expandable answers with detailed information
Interactive Elements:
- Modal form for booking consultations
- Hover effects on pricing cards
- Smooth animations for better user experience
Technical Implementation
Component Structure:
- Stateless page component for SEO benefits
- Client-side interactive version with animations
- Reusable PricingCard component for consistent styling
- Modal component for consultation form
Styling Approach:
- Used Tailwind CSS for responsive design
- Customized the color scheme to match brand colors
- Added custom animations in globals.css
- Implemented hover states for interactive elements
Accessibility Features:
- Semantic HTML structure
- Proper contrast ratios for text readability
- Focus states for interactive elements
- Screen reader friendly markup
Responsive Behavior:
- Mobile-first approach with stacked cards on small screens
- Fluid typography that scales with viewport size
- Properly spaced elements at all breakpoints
This pricing page effectively communicates Magic City Pest Control's service offerings while maintaining brand consistency and providing a smooth user experience across all devices.
I'll update the pricing page to show a $100 off promotion by crossing out the original initial fees and displaying the discounted prices.
I've updated the pricing page to include the $100 off promotion with the following changes:
- Crossed-out Original Prices: Each plan now shows the original initial fee with a strikethrough, followed by the discounted price (original price - $100).
- Promotional Label: Added a "$100 OFF Promotion!" text in the brand's red color under each initial fee to draw attention to the discount.
- Promotional Banner: Added a prominent banner at the top of the page to announce the limited-time offer, making it immediately visible to all visitors.
The changes maintain the original design aesthetic while clearly highlighting the special promotion. The strikethrough effect creates a visual contrast that emphasizes the savings, and the promotional banner ensures that visitors are aware of the offer as soon as they land on the page.
These updates have been applied to both the static and interactive versions of the pricing page, ensuring consistency across implementations.