first commit

frontend/src/components/faq/Faq.tsx

@@ -0,0 +1,58 @@
+import { createSignal, Show } from 'solid-js';
+import { FaSolidChevronDown } from 'solid-icons/fa';
+import type { FaqItem, FaqProps } from '@/types/globalInterfaces';
+
+const Faq = (props: FaqProps) => {
+    const [openIndex, setOpenIndex] = createSignal<number | null>(null);
+
+    const toggleAccordion = (index: number) => {
+        setOpenIndex(openIndex() === index ? null : index);
+    };
+
+    return (
+        <section class="bg-white py-20 md:py-28">
+            <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+                <div class="text-center mb-12">
+                    <h2 class="text-3xl md:text-4xl font-bold text-gray-900">
+                        Häufig gestellte Fragen
+                    </h2>
+                    <p class="mt-4 text-lg text-gray-600 max-w-3xl mx-auto">
+                        Wir haben die Antworten auf die häufigsten Fragen zu unserem Service
+                        hier für Sie zusammengestellt.
+                    </p>
+                </div>
+
+                <div class="space-y-3">
+                    {props.faqItems.map((item, index) => (
+                        <div class="border border-gray-200 rounded-lg overflow-hidden">
+                            <button
+                                type="button"
+                                class="w-full flex justify-between items-center p-4 bg-gray-50 hover:bg-gray-100 text-left cursor-pointer"
+                                onClick={() => toggleAccordion(index)}
+                            >
+                                <span class="font-medium text-gray-900 pr-4">{item.question}</span>
+                                <FaSolidChevronDown
+                                    class={`flex-shrink-0 transform transition-transform duration-300 ${
+                                        openIndex() === index ? 'rotate-180 text-blue-600' : 'text-blue-600'
+                                    }`}
+                                />
+                            </button>
+
+                            <div
+                                class={`transition-all duration-300 ease-in-out overflow-hidden ${
+                                    openIndex() === index ? 'max-h-96 opacity-100' : 'max-h-0 opacity-0'
+                                }`}
+                            >
+                                <div class="p-4 bg-white border-t border-gray-200">
+                                    <p class="text-gray-600">{item.answer}</p>
+                                </div>
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default Faq;