Pricing Page

The pricing page (/pricing) displays your subscription plans and pricing information. It's integrated with your billing configuration and automatically displays plans from config/billing.config.ts.

Page Structure

The pricing page is located at app/pricing/page.tsx and includes:

• Pricing Hero Section - Headline and description for the pricing page
• Pricing Section - Displays all plans from your billing configuration
• FAQ Section - Frequently asked questions about pricing

Integration with Billing Config

The pricing page automatically reads plans from config/billing.config.ts. Plans are displayed based on:

• Plan visibility - Plans with hidden: true are not shown
• Plan order - Plans are displayed in the order they appear in the config
• Recommended plans - Plans with recommended: true are highlighted
• Enterprise plans - Plans with isEnterprise: true show a "Contact Sales" button

Customization

Update Pricing Content

Edit the PricingHeroSection component:

export function PricingHeroSection(): React.JSX.Element {
  return (
    <section>
      <h1>Choose Your Plan</h1>
      <p>Select the perfect plan for your needs</p>
    </section>
  );
}

Customize Plan Display

The PricingSection component automatically renders plans from your billing config. To customize how plans are displayed, edit:

// Customize plan card styling, features display, etc.

Update FAQ

Modify the FAQ section in app/pricing/page.tsx:

const faqSchema = {
  '@context': 'https://schema.org',
  '@type': 'FAQPage',
  mainEntity: [
    {
      '@type': 'Question',
      name: 'Your question?',
      acceptedAnswer: {
        '@type': 'Answer',
        text: 'Your answer.'
      }
    }
  ]
};

SEO

The pricing page includes structured data (JSON-LD) for:

• Product schema
• Breadcrumb schema
• FAQ schema

Best Practices

1. Clear pricing - Make prices and features easy to understand
2. Highlight recommended plan - Use the recommended flag to guide users
3. Show value - Include feature comparisons and benefits
4. Mobile friendly - Ensure pricing tables work on all screen sizes
5. Clear CTAs - Use action-oriented button text