Can I switch plans later?

Available plan changes and their effective dates are shown in billing settings.

ASSET_SPEC // PRICING_FAQ

Pricing & Billing FAQFAQ template

A grid-based FAQ specifically tailored for handling billing, subscription, and pricing questions.

Live_Preview_Environment

Pricing

Frequently Asked Questions

How do I cancel?: Cancellation options and effective dates are shown in account settings.
What payment methods do you accept?: Supported payment methods are shown during checkout and in the billing documentation.
Are there any additional charges?: The checkout summary lists applicable taxes and processing charges before confirmation.
Can I switch plans later?: Available plan changes and their effective dates are shown in billing settings.

When_to_Use

Choose the pricing FAQ on billing or plan-comparison pages. The static, grid-based layout is built for quick scanning of payment, cancellation, and plan-change questions.

Source_Manifest

Source_Inspector // TAILWIND

<section class="mx-auto max-w-7xl px-6 py-24 sm:py-32 lg:px-8">
  <div class="mx-auto max-w-4xl text-center">
    <h2 class="text-base font-semibold leading-7 text-blue-600">Pricing</h2>
    <p class="mt-2 text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl">Frequently Asked Questions</p>
  </div>
  <dl class="mt-20 grid grid-cols-1 gap-12 sm:grid-cols-2 lg:grid-cols-3">
    <div>
      <dt class="text-base font-semibold leading-7 text-gray-900">What payment methods are accepted?</dt>
      <dd class="mt-2 text-base leading-7 text-gray-600">Supported payment methods are shown during checkout and in the billing documentation.</dd>
    </div>
    <div>
      <dt class="text-base font-semibold leading-7 text-gray-900">Are there any hidden fees?</dt>
      <dd class="mt-2 text-base leading-7 text-gray-600">The checkout summary lists applicable taxes and processing charges before confirmation.</dd>
    </div>
    <div>
      <dt class="text-base font-semibold leading-7 text-gray-900">Can I cancel anytime?</dt>
      <dd class="mt-2 text-base leading-7 text-gray-600">Cancellation options and effective dates are shown in account settings.</dd>
    </div>
  </dl>
</section>

READ_ONLY

interface PricingFaqItem {
  question: string;
  answer: string;
}

const defaultItems = [
  { question: 'What payment methods are accepted?', answer: 'Supported payment methods are shown during checkout and in the billing documentation.' },
  { question: 'Are there any additional charges?', answer: 'The checkout summary lists applicable taxes and processing charges before confirmation.' },
  { question: 'How do I cancel?', answer: 'Cancellation options and effective dates are shown in account settings.' }
];

export function PricingFaq({ items = defaultItems }: { items?: PricingFaqItem[] }) {
  return (
    <section className="bg-white py-24 sm:py-32">
      <div className="mx-auto max-w-7xl px-6 lg:px-8">
        <div className="mx-auto max-w-4xl lg:text-center">
          <h2 className="text-base font-semibold leading-7 text-blue-600">Billing</h2>
          <p className="mt-2 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
            Everything you need to know about pricing
          </p>
        </div>
        <div className="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-none">
          <dl className="grid max-w-xl grid-cols-1 gap-x-12 gap-y-16 lg:max-w-none lg:grid-cols-2">
            {items.map((item) => (
              <div key={item.question} className="flex flex-col">
                <dt className="text-base font-semibold leading-7 text-gray-900">
                  {item.question}
                </dt>
                <dd className="mt-4 flex flex-auto flex-col text-base leading-7 text-gray-600">
                  <p className="flex-auto">{item.answer}</p>
                </dd>
              </div>
            ))}
          </dl>
        </div>
      </div>
    </section>
  );
}

READ_ONLY