From 7a71296e6d285421f3f4267c003abdc96de87638 Mon Sep 17 00:00:00 2001
From: Marc Mintel <marc@mintel.me>
Date: Mon, 5 Oct 2026 12:12:59 +0200
Subject: [PATCH] fix: questions and answers are all open instead of an
 accordion

Opening one question pushed everything below it down. The answers are two or
three lines long, so they are simply shown: two columns on wide screens, one
on phones.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/web/src/components/home/Faq.tsx | 30 ++++++++++++----------------
 1 file changed, 13 insertions(+), 17 deletions(-)

diff --git a/apps/web/src/components/home/Faq.tsx b/apps/web/src/components/home/Faq.tsx
index f23082a..1ce2e31 100644
--- a/apps/web/src/components/home/Faq.tsx
+++ b/apps/web/src/components/home/Faq.tsx
@@ -1,26 +1,22 @@
 import * as React from "react";
 import type { FaqItem } from "@/src/content/types";
 
+/**
+ * Faq: a handful of short questions with their answers, all open. No accordion:
+ * opening one pushed everything below it down (owner feedback), and with
+ * answers of two or three lines there is nothing worth hiding.
+ */
 export const Faq: React.FC<{ items: readonly FaqItem[] }> = ({ items }) => (
-  <div className="grid grid-cols-1 gap-x-12 md:grid-cols-2">
+  <dl className="m-0 grid grid-cols-1 gap-x-12 gap-y-10 md:grid-cols-2 md:gap-y-14">
     {items.map((item) => (
-      <details
-        key={item.question}
-        className="group border-t border-slate-200 py-6 open:pb-8"
-      >
-        <summary className="flex cursor-pointer list-none items-start justify-between gap-6 font-sans text-xl font-bold tracking-tight text-slate-900 md:text-2xl [&::-webkit-details-marker]:hidden">
+      <div key={item.question} className="border-t border-slate-900 pt-6">
+        <dt className="font-sans text-xl font-bold tracking-tight text-slate-900 md:text-2xl">
           {item.question}
-          <span
-            className="mt-1 shrink-0 font-mono text-xl text-slate-400 transition-transform duration-300 group-open:rotate-45"
-            aria-hidden="true"
-          >
-            +
-          </span>
-        </summary>
-        <p className="m-0 mt-4 font-sans text-base leading-relaxed text-slate-500 md:text-lg">
+        </dt>
+        <dd className="m-0 mt-3 font-sans text-base leading-relaxed text-slate-500 md:text-lg">
           {item.answer}
-        </p>
-      </details>
+        </dd>
+      </div>
     ))}
-  </div>
+  </dl>
 );