docs: add qa to pricing

Author: tianzhou

src/app/[locale]/pricing/page.tsx

@@ -2,6 +2,7 @@ import getMetadata from '@/utils/get-metadata';
 
 import Hero from '@/components/pages/pricing/hero';
 import Table from '@/components/pages/pricing/table';
+import QuestionsAndAnswers from '@/components/pages/pricing/qa';
 
 import SEO_DATA from '@/lib/seo-data';
 
@@ -12,6 +13,7 @@ export default function Page() {
     <>
       <Hero />
       <Table />
+      <QuestionsAndAnswers />
     </>
   );
 }

src/components/pages/pricing/qa/client.tsx

@@ -0,0 +1,20 @@
+'use client';
+
+import type { Question } from './types';
+
+type Props = {
+  questions: Question[];
+};
+
+export default function QuestionsAndAnswersClient({ questions }: Props) {
+  return (
+    <div className="space-y-4 text-16">
+      {questions.map((item, index) => (
+        <div key={index} className="border-gray-200 overflow-hidden border p-6">
+          <h3 className="mb-2 font-medium">{item.question}</h3>
+          <p className="text-gray-600">{item.answer}</p>
+        </div>
+      ))}
+    </div>
+  );
+}

src/components/pages/pricing/qa/index.tsx

@@ -0,0 +1,40 @@
+import QuestionsAndAnswersClient from './client';
+import type { Question } from './types';
+
+const QUESTIONS: Question[] = [
+  {
+    question: 'Are self-host and cloud version the same price?',
+    answer: 'Yes, the price is the same.',
+  },
+  {
+    question: 'Can self-host version operate in air-gapped environment?',
+    answer:
+      'Yes, you can deploy it in your own data center or private cloud without any external connectivity.',
+  },
+  {
+    question: 'Which certifications do you have?',
+    answer: 'We have SOC 2 Type 1 certification. Type 2 is in progress.',
+  },
+  {
+    question: 'Is there a free trial?',
+    answer: 'Yes, for the Enterprise plan, you can try it for free for 14 days.',
+  },
+  {
+    question: 'Which payment methods do you accept?',
+    answer: 'We accept credit card, wire transfers, AWS Marketplace, and GCP Marketplace.',
+  },
+  {
+    question: 'What is your cancellation policy?',
+    answer:
+      'For the Pro plan, you can cancel your subscription at any time. For the Enterprise plan, it is yearly subscription. You can not cancel in the middle of the year.',
+  },
+];
+
+export default function QuestionsAndAnswers() {
+  return (
+    <section className="mx-auto max-w-4xl px-4 py-16">
+      <h2 className="mb-12 text-center text-36 font-bold">Questions and Answers</h2>
+      <QuestionsAndAnswersClient questions={QUESTIONS} />
+    </section>
+  );
+}

src/components/pages/pricing/qa/types.ts

@@ -0,0 +1,4 @@
+export type Question = {
+  question: string;
+  answer: string;
+};