first publish

src/components/ui/Faq.tsx

@@ -0,0 +1,38 @@
+import { cn } from "@/lib/utils";
+import type { FaqItem } from "@/content/home";
+
+export type { FaqItem };
+
+export interface FaqProps {
+  items: readonly FaqItem[];
+  className?: string;
+}
+
+/** DM Mono „+“ that turns into „ד by rotating 45° when the `<details>` is open. */
+export const PLUS_GLYPH =
+  "font-mono text-base leading-none text-accent transition-transform duration-300 ease-[var(--ease-out-quart)] group-open:rotate-45";
+
+/**
+ * Native `<details>/<summary>` ledger: question Bodoni 28 px, answer Jost 400,
+ * hairline-separated, no accordion library. Fully usable without JS.
+ */
+export function Faq({ items, className }: FaqProps) {
+  if (!items.length) return null;
+  return (
+    <div className={cn("border-t border-line", className)}>
+      {items.map((item) => (
+        <details key={item.q} className="group border-b border-line">
+          <summary className="flex cursor-pointer list-none items-baseline justify-between gap-6 py-6 [&::-webkit-details-marker]:hidden">
+            <span className="font-display text-[1.75rem] font-normal leading-[1.15] text-fg">{item.q}</span>
+            <span aria-hidden="true" className={cn(PLUS_GLYPH, "shrink-0 self-center")}>
+              +
+            </span>
+          </summary>
+          <p className="max-w-[36rem] pb-8 font-sans text-[1.0625rem] leading-[1.6] text-fg">{item.a}</p>
+        </details>
+      ))}
+    </div>
+  );
+}
+
+export default Faq;