feat: Add FAQ page data and render it dynamically

webv2/src/pages/faq/faq-data.ts

@@ -0,0 +1,44 @@
+import type { DictionaryKeys } from 'src/components/locale/dictionary';
+
+type FaqPageData = Array<{
+  title: DictionaryKeys<'faq-topic'>;
+  questions: Array<{
+    question: DictionaryKeys<'faq-topic'>;
+    answer: DictionaryKeys<'faq-topic'>;
+  }>;
+}>;
+
+export const faqPageData: FaqPageData = [
+  {
+    title: 'faq-topic-1',
+    questions: [
+      { question: 'faq-topic-1-question-1', answer: 'faq-topic-1-answer-1' },
+      { question: 'faq-topic-1-question-2', answer: 'faq-topic-1-answer-2' },
+      { question: 'faq-topic-1-question-3', answer: 'faq-topic-1-answer-3' },
+    ],
+  },
+  {
+    title: 'faq-topic-2',
+    questions: [
+      { question: 'faq-topic-2-question-1', answer: 'faq-topic-2-answer-1' },
+      { question: 'faq-topic-2-question-2', answer: 'faq-topic-2-answer-2' },
+      { question: 'faq-topic-2-question-3', answer: 'faq-topic-2-answer-3' },
+    ],
+  },
+  {
+    title: 'faq-topic-3',
+    questions: [
+      { question: 'faq-topic-3-question-1', answer: 'faq-topic-3-answer-1' },
+      { question: 'faq-topic-3-question-2', answer: 'faq-topic-3-answer-2' },
+      { question: 'faq-topic-3-question-3', answer: 'faq-topic-3-answer-3' },
+    ],
+  },
+  {
+    title: 'faq-topic-4',
+    questions: [
+      { question: 'faq-topic-4-question-1', answer: 'faq-topic-4-answer-1' },
+      { question: 'faq-topic-4-question-2', answer: 'faq-topic-4-answer-2' },
+      { question: 'faq-topic-4-question-3', answer: 'faq-topic-4-answer-3' },
+    ],
+  },
+];

webv2/src/pages/faq/page.tsx

@@ -1,9 +1,33 @@
-import { Text } from 'src/components/text';
+import { Locale, localize } from 'src/components/locale';
+import { faqPageData } from './faq-data';
+import { Markdown } from 'src/components/makrdown';
 
 export default function Page(): JSX.Element {
   return (
-    <main>
-      <Text>FAQ Page</Text>
+    <main className="flex justify-center">
+      <div className="flex flex-col gap-8 m-2 mt-8 mb-8 max-w-screen-md">
+        <h1 className="text-xl font-bold m-auto">
+          <Locale faq-header-title />
+        </h1>
+        {faqPageData.map(({ title, questions }, categoryIndex) => (
+          <div key={categoryIndex} className="flex flex-col gap-2">
+            <h1 className="text-2xl font-bold m-auto">
+              <Locale localeKey={title} />
+            </h1>
+            {questions.map(({ question, answer }, questionIndex) => (
+              <div className="collapse bg-base-200" key={questionIndex}>
+                <input type="radio" name="1" />
+                <div className="collapse-title text-xl font-medium">
+                  <Locale localeKey={question} />
+                </div>
+                <div className="collapse-content">
+                  <Markdown content={localize(answer)} />
+                </div>
+              </div>
+            ))}
+          </div>
+        ))}
+      </div>
     </main>
   );
 }