fix(blog): optimize component share logic, typography, and modal layouts

apps/web/src/components/FAQSection.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import React from "react";
+import { H3 } from "./ArticleHeading";
+import { Paragraph } from "./ArticleParagraph";
+
+interface FAQItem {
+    question: string;
+    answer: string;
+}
+
+interface FAQSectionProps {
+    children?: React.ReactNode;
+}
+
+/**
+ * FAQSection: A simple semantic wrapper for FAQs in blog posts.
+ * It can be used by the AI to wrap a list of questions and answers.
+ */
+export const FAQSection: React.FC<FAQSectionProps> = ({ children }) => {
+    return (
+        <div className="my-16 border-t border-slate-100 pt-12">
+            <H3 id="faq">Häufig gestellte Fragen (FAQ)</H3>
+            <div className="mt-8 space-y-8">
+                {children}
+            </div>
+        </div>
+    );
+};