feat: faqs and docker

src/components/faq.tsx

@@ -0,0 +1,67 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '@/components/ui/accordion'
+
+interface FAQItem {
+  question: string
+  answer: string
+}
+
+export default function FAQ() {
+  const [faqs, setFaqs] = useState<FAQItem[]>([])
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    async function fetchFAQ() {
+      try {
+        const response = await fetch('/api/faq')
+        if (!response.ok) {
+          throw new Error('Failed to load FAQ')
+        }
+        const data = await response.json()
+        setFaqs(data)
+      } catch {
+        // If there's an error, just show no FAQs
+        setFaqs([])
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    fetchFAQ()
+  }, [])
+
+  // Don't show anything if loading, error, or no FAQs
+  if (loading || faqs.length === 0) {
+    return null
+  }
+
+  return (
+    <Card className="w-full max-w-md dark:bg-zinc-950 dark:border-zinc-800">
+      <CardHeader>
+        <CardTitle className="dark:text-white">Frequently Asked Questions</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <Accordion type="single" collapsible className="w-full">
+          {faqs.map((faq, index) => (
+            <AccordionItem key={index} value={`item-${index}`} className="dark:border-zinc-800">
+              <AccordionTrigger className="dark:text-white">
+                {faq.question}
+              </AccordionTrigger>
+              <AccordionContent className="dark:text-zinc-400">
+                {faq.answer}
+              </AccordionContent>
+            </AccordionItem>
+          ))}
+        </Accordion>
+      </CardContent>
+    </Card>
+  )
+}