wm
3118943b2e
Originalgetreue Migration der HTML-Landingpage in eine React-SPA. Registrierungsformular mit Webhook-Integration und n8n-Response-Anzeige. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
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>
|
||
)
|
||
}
|