improve faq formatting

backend/templates/v2/public/components/faq-question.html

@@ -0,0 +1,45 @@
+<div
+  x-data="{ expanded: false }">
+
+  <dt>
+    <!-- Expand/collapse question button -->
+    <button
+      @click="expanded = !expanded"
+      type="button"
+      class="flex w-full items-start justify-between text-left text-gray-900"
+      aria-controls="faq-0"
+      aria-expanded="false">
+
+      <span
+        class="text-base/7 font-semibold">
+        {{ question }}
+      </span>
+
+      <span
+        class="ml-6 flex h-7 items-center">
+
+        <!-- Icon when question is collapsed. Item expanded: "hidden", Item collapsed: "" -->
+        <svg class="size-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m6-6H6"></path>
+        </svg>
+
+        <!-- Icon when question is expanded. Item expanded: "", Item collapsed: "hidden" -->
+        <svg class="hidden size-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M18 12H6"></path>
+        </svg>
+
+      </span>
+    </button>
+  </dt>
+
+  <dd
+    class="mt-2 pr-12"
+    x-show="expanded">
+
+    <div
+      class="text-base/7 text-gray-600">
+      {{ answer|safe }}
+    </div>
+  </dd>
+
+</div>

backend/templates/v2/public/faq.html

@@ -5,28 +5,33 @@
   <div class="container">
     <div class="bg-white">
       <div class="mx-auto max-w-7xl px-6 py-24 sm:py-32 lg:px-8 lg:py-40">
-        <div class="mx-auto max-w-4xl divide-y divide-gray-900/10">
-          <h1 class="text-6xl font-semibold tracking-tight text-gray-900 sm:text-5xl">
+        <div class="mx-auto max-w-4xl">
+          <h1 class="font-semibold tracking-tight text-gray-900 sm:text-5xl">
             FAQ – Întrebări frecvente
           </h1>
 
           {% for section in questions %}
+            <div>
+              <h2
+                id="#{{ section.title | slugify }}"
+                class="font-semibold tracking-tight text-gray-900 sm:text-3xl pt-10">
 
-            <h2 class="text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">
-              {{ section.title }}
-            </h2>
+                <a href="#{{ section.title | slugify }}" class="group">
+                  {{ section.title }}
+                </a>
 
-            <dl class="mt-10 space-y-6 divide-y divide-gray-900/10">
+              </h2>
 
-              {% for question in section.questions %}
-                <div class="pt-6">
-                  {% include "public/components/faq-question-title.html" with question=question.title %}
-                  {% include "public/components/faq-question-answer.html" with answer=question.answer %}
-                </div>
-              {% endfor %}
+              <dl class="mt-10 space-y-6">
 
-            </dl>
+                {% for question in section.questions %}
+                  <div class="pt-6">
+                    {% include "public/components/faq-question.html" with question=question.title answer=question.answer %}
+                  </div>
+                {% endfor %}
 
+              </dl>
+            </div>
           {% endfor %}
 
         </div>