109 lines
4.9 KiB
TypeScript
109 lines
4.9 KiB
TypeScript
'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>
|
||
)
|
||
} |