ANDJ
abf761db07
Ich habe soweit automatisiert the Emails sortieren aber ich muss noch schauen was es fur bugs es gibt wenn die app online ist deswegen wurde ich mit diesen Commit die website veroffentlichen obwohjl es sein konnte das es noch nicht fertig ist und verkaufs bereit
120 lines
3.6 KiB
TypeScript
120 lines
3.6 KiB
TypeScript
import { useState } from 'react'
|
||
import { ChevronDown, HelpCircle } from 'lucide-react'
|
||
import { cn } from '@/lib/utils'
|
||
|
||
const faqs = [
|
||
{
|
||
question: "Are my emails secure?",
|
||
answer: "Yes! We use OAuth – we never see your password. Content is only analyzed briefly, never stored."
|
||
},
|
||
{
|
||
question: "Which email providers work?",
|
||
answer: "Gmail and Outlook. More coming soon."
|
||
},
|
||
{
|
||
question: "Can I create custom rules?",
|
||
answer: "Absolutely! You can set VIP contacts and define custom categories."
|
||
},
|
||
{
|
||
question: "What about old emails?",
|
||
answer: "The last 30 days are analyzed. You decide if they should be sorted too."
|
||
},
|
||
{
|
||
question: "Can I cancel anytime?",
|
||
answer: "Yes, with one click. No tricks, no long commitments."
|
||
},
|
||
{
|
||
question: "Do I need a credit card?",
|
||
answer: "No, the 14-day trial is completely free."
|
||
},
|
||
{
|
||
question: "Does it work on mobile?",
|
||
answer: "Yes! Sorting runs on our servers – works in any email app."
|
||
},
|
||
{
|
||
question: "What if the AI sorts wrong?",
|
||
answer: "Just correct it. The AI learns and gets better over time."
|
||
},
|
||
]
|
||
|
||
export function FAQ() {
|
||
const [openIndex, setOpenIndex] = useState<number | null>(0)
|
||
|
||
return (
|
||
<section id="faq" className="py-24 bg-slate-50">
|
||
<div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
{/* Section header */}
|
||
<div className="text-center mb-16">
|
||
<div className="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-primary-100 mb-6">
|
||
<HelpCircle className="w-8 h-8 text-primary-600" />
|
||
</div>
|
||
<h2 className="text-3xl sm:text-4xl font-bold text-slate-900 mb-4">
|
||
FAQ
|
||
</h2>
|
||
<p className="text-lg text-slate-600">
|
||
Quick answers to common questions.
|
||
</p>
|
||
</div>
|
||
|
||
{/* FAQ items */}
|
||
<div className="space-y-3">
|
||
{faqs.map((faq, index) => (
|
||
<FAQItem
|
||
key={index}
|
||
question={faq.question}
|
||
answer={faq.answer}
|
||
isOpen={openIndex === index}
|
||
onClick={() => setOpenIndex(openIndex === index ? null : index)}
|
||
/>
|
||
))}
|
||
</div>
|
||
|
||
{/* Contact CTA */}
|
||
<div className="mt-12 text-center p-6 bg-white rounded-2xl border border-slate-200">
|
||
<p className="text-slate-600 mb-2">Still have questions?</p>
|
||
<a
|
||
href="mailto:support@emailsorter.com"
|
||
className="text-primary-600 font-semibold hover:text-primary-700"
|
||
>
|
||
Contact us →
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
)
|
||
}
|
||
|
||
interface FAQItemProps {
|
||
question: string
|
||
answer: string
|
||
isOpen: boolean
|
||
onClick: () => void
|
||
}
|
||
|
||
function FAQItem({ question, answer, isOpen, onClick }: FAQItemProps) {
|
||
return (
|
||
<div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
|
||
<button
|
||
className="w-full px-6 py-4 text-left flex items-center justify-between hover:bg-slate-50 transition-colors"
|
||
onClick={onClick}
|
||
>
|
||
<span className="font-semibold text-slate-900 pr-4">{question}</span>
|
||
<ChevronDown
|
||
className={cn(
|
||
"w-5 h-5 text-slate-400 transition-transform duration-200 flex-shrink-0",
|
||
isOpen && "rotate-180"
|
||
)}
|
||
/>
|
||
</button>
|
||
<div
|
||
className={cn(
|
||
"overflow-hidden transition-all duration-200",
|
||
isOpen ? "max-h-40" : "max-h-0"
|
||
)}
|
||
>
|
||
<p className="px-6 pb-4 text-slate-600">{answer}</p>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|