Refactor website to use shadcn components

frontend/app/(root)/sections/Faq.tsx

@@ -0,0 +1,109 @@
+'use client'
+
+import {Accordion, AccordionContent, AccordionItem, AccordionTrigger,} from "@/components/ui/accordion"
+import {motion} from "framer-motion"
+
+const faqItems = [
+    {
+        id: "dauer",
+        question: "Wie lange dauert es, bis meine Website oder App online ist?",
+        answers: [
+            "Das hängt vom Umfang des Projekts ab – einfache Websites oder MVPs sind meist innerhalb von 4–6 Wochen realisierbar.",
+            "Komplexere Anwendungen oder individuelle Features benötigen entsprechend mehr Zeit. Wir geben dir zu Beginn eine realistische Einschätzung.",
+        ],
+    },
+    {
+        id: "inhalte",
+        question: "Muss ich Texte und Bilder selbst liefern?",
+        answers: [
+            "Wenn du Inhalte hast, bauen wir diese gerne ein. Falls nicht, unterstützen wir dich mit Textvorschlägen, Icons oder lizenzfreien Bildern.",
+            "Bei Apps helfen wir dir auch bei der Strukturierung und Formulierung von App-Inhalten, z. B. Onboarding-Texte oder UI-Texte.",
+        ],
+    },
+    {
+        id: "technik",
+        question: "Ich habe keine Ahnung von Technik – funktioniert das trotzdem?",
+        answers: [
+            "Auf jeden Fall. Wir begleiten dich Schritt für Schritt und erklären alles verständlich – ganz ohne Fachkenntnisse..",
+            "Du bekommst eine Lösung, die für dich funktioniert – egal ob Website, App oder Backend.",
+        ],
+    },
+    {
+        id: "änderungen",
+        question: "Was ist, wenn ich im Nachhinein etwas ändern möchte?",
+        answers: [
+            "Kein Problem. Du kannst jederzeit neue Inhalte, Features oder Anpassungen beauftragen.",
+            "Auf Wunsch übernehmen wir auch die laufende Wartung oder stellen dir ein CMS bzw. Admin-Interface bereit.",
+        ],
+    },
+    {
+        id: "seo",
+        question: "Wird meine Website oder App auch für Suchmaschinen optimiert?",
+        answers: [
+            "Ja. Jede Website wird suchmaschinenfreundlich aufgebaut – inkl. technischer SEO-Basics wie saubere Struktur, schnelle Ladezeit und mobile Optimierung.",
+            "Bei Apps unterstützen wir dich z.B. auch mit App Store Optimierung (ASO), damit du besser gefunden wirst.",
+        ],
+    },
+]
+
+export default function Faq() {
+    return (
+        <section id="faq" className="py-24 px-4 bg-background text-foreground">
+            <div className="max-w-3xl mx-auto">
+                <motion.h2
+                    className="text-3xl md:text-4xl font-bold mb-2 text-center"
+                    initial={{opacity: 0, y: 10}}
+                    whileInView={{opacity: 1, y: 0}}
+                    viewport={{once: true}}
+                    transition={{duration: 0.4}}
+                >
+                    Fragen? Antworten.
+                </motion.h2>
+
+                <motion.div
+                    className="w-12 h-[2px] mt-2 mb-6 bg-amber-500 mx-auto"
+                    initial={{opacity: 0, x: -20}}
+                    whileInView={{opacity: 1, x: 0}}
+                    viewport={{once: true}}
+                    transition={{duration: 0.4, delay: 0.1}}
+                />
+
+                <motion.p
+                    className="text-sm md:text-base mb-10 text-muted-foreground text-center"
+                    initial={{opacity: 0, y: 10}}
+                    whileInView={{opacity: 1, y: 0}}
+                    viewport={{once: true}}
+                    transition={{duration: 0.4, delay: 0.2}}
+                >
+                    Hier beantworten wir häufige Fragen rund um Web- und App-Projekte – klar gegliedert nach Themen.
+                    Wenn du darüber hinaus etwas wissen möchtest, melde dich gerne persönlich bei uns.
+                </motion.p>
+
+                <motion.div
+                    className="text-sm md:text-base mb-10 text-muted-foreground text-center"
+                    initial={{opacity: 0, y: 10}}
+                    whileInView={{opacity: 1, y: 0}}
+                    viewport={{once: true}}
+                    transition={{duration: 0.4, delay: 0.4}}
+                >
+                    <Accordion
+                        type="single"
+                        collapsible
+                        className="w-full"
+                    >
+                        {faqItems.map((item, index) => (
+                            <AccordionItem key={index} value={`faq-${index}`}>
+                                <AccordionTrigger>{item.question}</AccordionTrigger>
+                                <AccordionContent className="flex flex-col gap-4 text-left">
+                                    {item.answers.map((text, idx) => (
+                                        <p key={idx}>{text}</p>
+                                    ))}
+                                </AccordionContent>
+                            </AccordionItem>
+                        ))}
+                    </Accordion>
+                </motion.div>
+            </div>
+        </section>
+    )
+}