93 lines
3.7 KiB
TypeScript
93 lines
3.7 KiB
TypeScript
|
import { useState } from 'react'
|
|||
|
|
import { ChevronDown } from 'lucide-react'
|
|||
|
|
|
|||
|
|
interface FAQItem {
|
|||
|
|
question: string
|
|||
|
|
answer: string
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const faqs: FAQItem[] = [
|
|||
|
|
{
|
|||
|
|
question: 'Wie funktioniert der KI-Chatbot?',
|
|||
|
|
answer:
|
|||
|
|
'Unser Chatbot nutzt modernste KI-Technologie (RAG - Retrieval Augmented Generation). Sie laden Ihre Dokumente hoch, und der Bot durchsucht diese, um präzise Antworten auf Kundenfragen zu geben. Die KI versteht den Kontext und formuliert natürliche Antworten.',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
question: 'Welche Dateiformate werden unterstützt?',
|
|||
|
|
answer:
|
|||
|
|
'Aktuell unterstützen wir PDF-Dateien. Weitere Formate wie Word, Excel und Textdateien sind in Planung. Sie können beliebig viele PDFs hochladen – FAQs, Produktkataloge, Anleitungen, etc.',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
question: 'Ist der Service DSGVO-konform?',
|
|||
|
|
answer:
|
|||
|
|
'Ja, 100%! Alle Daten werden ausschließlich auf Servern in Deutschland gehostet. Wir verarbeiten keine Daten außerhalb der EU. Sie erhalten einen Auftragsverarbeitungsvertrag (AVV) auf Anfrage.',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
question: 'Kann ich den Chatbot an mein Design anpassen?',
|
|||
|
|
answer:
|
|||
|
|
'Ja! Im Starter- und Business-Plan können Sie Farben, Logo und Begrüßungstext anpassen. Der Chatbot fügt sich nahtlos in Ihr Website-Design ein.',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
question: 'Was passiert nach der Trial-Phase?',
|
|||
|
|
answer:
|
|||
|
|
'Nach 7 Tagen endet Ihre Trial automatisch. Sie können jederzeit auf einen bezahlten Plan upgraden. Wenn Sie innerhalb der ersten 3 Tage upgraden, erhalten Sie 30% Rabatt!',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
question: 'Wie integriere ich den Chatbot in meine Website?',
|
|||
|
|
answer:
|
|||
|
|
'Ganz einfach! Sie erhalten einen Code-Snippet, den Sie vor dem </body>-Tag Ihrer Website einfügen. Das funktioniert mit WordPress, Shopify, Wix, und jeder anderen Website.',
|
|||
|
|
},
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
export default function FAQ() {
|
|||
|
|
const [openIndex, setOpenIndex] = useState<number | null>(null)
|
|||
|
|
|
|||
|
|
const toggle = (idx: number) => {
|
|||
|
|
setOpenIndex((prev) => (prev === idx ? null : idx))
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<section id="faq" className="py-[100px] bg-white">
|
|||
|
|
<div className="max-w-container mx-auto px-6">
|
|||
|
|
{/* Section Header */}
|
|||
|
|
<div className="text-center max-w-[700px] mx-auto mb-[60px]">
|
|||
|
|
<span
|
|||
|
|
className="inline-block px-4 py-1.5 text-white text-xs font-semibold uppercase tracking-wider rounded-full mb-4"
|
|||
|
|
style={{ background: 'linear-gradient(135deg, #6366f1 0%, #0ea5e9 100%)' }}
|
|||
|
|
>
|
|||
|
|
FAQ
|
|||
|
|
</span>
|
|||
|
|
<h2 className="text-[clamp(2rem,4vw,3rem)] font-bold text-gray-900 mb-4">
|
|||
|
|
Häufig gestellte Fragen
|
|||
|
|
</h2>
|
|||
|
|
<p className="text-lg text-gray-600">Alles was Sie wissen müssen</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Accordion */}
|
|||
|
|
<div className="max-w-[800px] mx-auto">
|
|||
|
|
{faqs.map((item, idx) => (
|
|||
|
|
<div key={idx} className="border-b border-gray-200">
|
|||
|
|
<button
|
|||
|
|
onClick={() => toggle(idx)}
|
|||
|
|
className="w-full flex items-center justify-between py-6 bg-transparent border-none cursor-pointer text-left text-lg font-semibold text-gray-900 hover:text-primary transition-colors duration-150"
|
|||
|
|
>
|
|||
|
|
<span>{item.question}</span>
|
|||
|
|
<ChevronDown
|
|||
|
|
size={16}
|
|||
|
|
className={`text-gray-400 flex-shrink-0 transition-transform duration-300 ${
|
|||
|
|
openIndex === idx ? 'rotate-180' : ''
|
|||
|
|
}`}
|
|||
|
|
/>
|
|||
|
|
</button>
|
|||
|
|
|
|||
|
|
<div className={`faq-answer ${openIndex === idx ? 'open' : ''}`}>
|
|||
|
|
<p className="pb-6 text-gray-600 leading-[1.7]">{item.answer}</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
)
|
|||
|
|
}
|