81 lines
3.2 KiB
TypeScript
81 lines
3.2 KiB
TypeScript
|
import { useState } from 'react';
|
||
|
|
import { motion, AnimatePresence } from 'framer-motion';
|
||
|
|
import { Plus, Minus } from 'lucide-react';
|
||
|
|
import { cn } from '../lib/utils';
|
||
|
|
|
||
|
|
export default function FAQ() {
|
||
|
|
const [openIndex, setOpenIndex] = useState<number | null>(0);
|
||
|
|
|
||
|
|
const faqs = [
|
||
|
|
{
|
||
|
|
q: "Preciso ter conhecimento prévio em tecnologia?",
|
||
|
|
a: "Não. O material foi desenhado do absoluto zero para que você consiga implementar os sistemas mesmo que seja total iniciante no mercado digital."
|
||
|
|
},
|
||
|
|
{
|
||
|
|
q: "Quanto tempo de acesso eu terei?",
|
||
|
|
a: "O acesso é vitalício. Você pode assistir e revisar o conteúdo quantas vezes quiser, no seu próprio ritmo, sem prazos de validade."
|
||
|
|
},
|
||
|
|
{
|
||
|
|
q: "Como receberei o acesso ao material?",
|
||
|
|
a: "Imediatamente após a confirmação do pagamento, os dados restritos de acesso à plataforma serão enviados automaticamente para o seu e-mail cadastrado na hora da compra."
|
||
|
|
},
|
||
|
|
{
|
||
|
|
q: "Funciona para quem vende produto físico?",
|
||
|
|
a: "Sim. A arquitetura de vendas ensinada foca em aumentar o valor percebido e gerenciar o fluxo comercial."
|
||
|
|
}
|
||
|
|
];
|
||
|
|
|
||
|
|
return (
|
||
|
|
<section className="py-24 border-t border-white/5 bg-neutral-950/20">
|
||
|
|
<div className="container mx-auto px-6 max-w-3xl">
|
||
|
|
<div className="text-center mb-16">
|
||
|
|
<h2 className="text-3xl md:text-5xl font-display font-medium mb-4 tracking-tight">
|
||
|
|
Perguntas Frequentes.
|
||
|
|
</h2>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="space-y-4">
|
||
|
|
{faqs.map((faq, i) => (
|
||
|
|
<motion.div
|
||
|
|
key={i}
|
||
|
|
initial={{ opacity: 0, y: 10 }}
|
||
|
|
whileInView={{ opacity: 1, y: 0 }}
|
||
|
|
viewport={{ once: true }}
|
||
|
|
transition={{ delay: i * 0.1 }}
|
||
|
|
className="border border-white/10 rounded-2xl bg-neutral-900/30 overflow-hidden transition-colors hover:border-white/20"
|
||
|
|
>
|
||
|
|
<button
|
||
|
|
onClick={() => setOpenIndex(openIndex === i ? null : i)}
|
||
|
|
className="w-full px-6 py-6 flex items-center justify-between text-left"
|
||
|
|
>
|
||
|
|
<span className="font-medium pr-8">{faq.q}</span>
|
||
|
|
<div className={cn(
|
||
|
|
"w-8 h-8 rounded-full border border-white/10 flex items-center justify-center shrink-0 transition-colors",
|
||
|
|
openIndex === i ? "bg-white text-black" : "bg-neutral-800 text-white"
|
||
|
|
)}>
|
||
|
|
{openIndex === i ? <Minus className="w-4 h-4" /> : <Plus className="w-4 h-4" />}
|
||
|
|
</div>
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<AnimatePresence>
|
||
|
|
{openIndex === i && (
|
||
|
|
<motion.div
|
||
|
|
initial={{ height: 0, opacity: 0 }}
|
||
|
|
animate={{ height: "auto", opacity: 1 }}
|
||
|
|
exit={{ height: 0, opacity: 0 }}
|
||
|
|
transition={{ duration: 0.3 }}
|
||
|
|
>
|
||
|
|
<div className="px-6 pb-6 text-neutral-400 font-light leading-relaxed">
|
||
|
|
{faq.a}
|
||
|
|
</div>
|
||
|
|
</motion.div>
|
||
|
|
)}
|
||
|
|
</AnimatePresence>
|
||
|
|
</motion.div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
);
|
||
|
|
}
|