first commit

Made-with: Cursor

frontend/app/faq/page.tsx

@@ -0,0 +1,103 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { ChevronDown } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { api } from "@/lib/api";
+import { Navbar } from "@/components/public/Navbar";
+import { Footer } from "@/components/public/Footer";
+import { FaqPageJsonLd } from "@/components/public/JsonLd";
+
+interface FaqItem {
+  id: string;
+  question: string;
+  answer: string;
+  order: number;
+  showOnHomepage: boolean;
+}
+
+export default function FaqPage() {
+  const [items, setItems] = useState<FaqItem[]>([]);
+  const [openIndex, setOpenIndex] = useState<number | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    api.getFaqsAll()
+      .then((data) => {
+        if (Array.isArray(data)) setItems(data);
+      })
+      .catch(() => {})
+      .finally(() => setLoading(false));
+  }, []);
+
+  return (
+    <>
+      {items.length > 0 && (
+        <FaqPageJsonLd items={items.map((i) => ({ question: i.question, answer: i.answer }))} />
+      )}
+      <Navbar />
+      <div className="min-h-screen">
+        <div className="max-w-3xl mx-auto px-8 pt-16 pb-24">
+          <h1 className="text-4xl font-black mb-4">Frequently Asked Questions</h1>
+          <p className="text-on-surface-variant text-lg mb-12">
+            Everything you need to know about the Belgian Bitcoin Embassy.
+          </p>
+
+          {loading && (
+            <div className="space-y-4">
+              {[...Array(5)].map((_, i) => (
+                <div key={i} className="bg-surface-container-low rounded-xl h-[72px] animate-pulse" />
+              ))}
+            </div>
+          )}
+
+          {!loading && items.length === 0 && (
+            <p className="text-on-surface-variant">No FAQs available yet.</p>
+          )}
+
+          {!loading && items.length > 0 && (
+            <div className="space-y-4">
+              {items.map((item, i) => {
+                const isOpen = openIndex === i;
+                return (
+                  <div
+                    key={item.id}
+                    className="bg-surface-container-low rounded-xl overflow-hidden"
+                  >
+                    <button
+                      onClick={() => setOpenIndex(isOpen ? null : i)}
+                      className="w-full flex items-center justify-between p-6 text-left"
+                    >
+                      <span className="text-lg font-bold pr-4">{item.question}</span>
+                      <ChevronDown
+                        size={20}
+                        className={cn(
+                          "shrink-0 text-primary transition-transform duration-200",
+                          isOpen && "rotate-180"
+                        )}
+                      />
+                    </button>
+
+                    <div
+                      className={cn(
+                        "grid transition-all duration-200",
+                        isOpen ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
+                      )}
+                    >
+                      <div className="overflow-hidden">
+                        <p className="px-6 pb-6 text-on-surface-variant leading-relaxed">
+                          {item.answer}
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </div>
+      </div>
+      <Footer />
+    </>
+  );
+}