Spaces:
Running
Running
File size: 5,400 Bytes
64b0c84 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 | import { useState } from 'react';
import { motion, AnimatePresence } from 'motion/react';
import { Plus, Minus, MessageCircleQuestion } from 'lucide-react';
const coreFaqs = [
{
q: 'Может ли бот ошибиться или выдумать несуществующую информацию (галлюцинация LLM)?',
a: 'При использовании технологии RAG (Retrieval-Augmented Generation) риск галлюцинаций сводится к минимуму. Мы настраиваем LLM так, чтобы она отвечала строго на основе переданного контекста (ваша корпоративная база знаний). Если ответа в базе нет, бот честно признается в этом и переводит диалог на оператора, а не фантазирует.'
},
{
q: 'Как решается вопрос с Rate Limits API ВКонтакте при большой нагрузке?',
a: 'Наша архитектура включает встроенные Message Queues (например, Redis или RabbitMQ) и систему троттлинга. Это означает, что входящие запросы аккумулируются в очередь и отправляются во VK строго в рамках лимитов платформы, исключая риск блокировки токена сообщества даже при пиковых нагрузках во время рекламных кампаний.'
},
{
q: 'Возможна ли сквозная авторизация и связка профиля VK с аккаунтом на сайте (CRM)?',
a: 'Да. Мы реализуем механизмы Seamless Login и Account Linking через защищенные OAuth-подобные токены. Бот в VK будет точно знать, какой заказ на сайте принадлежит клиенту, и сможет выводить персональный статус доставки или баланс бонусных баллов прямо в чате.'
},
{
q: 'Сколько времени занимает разработка и развертывание enterprise-бота?',
a: 'От 2 до 6 недель в зависимости от сложности. Базовый бот с RAG разворачивается за 2 недели. Интеграции с тяжелыми ERP (1C, кастомные решения) и разработка пайплайна генерации контента могут потребовать больше времени на тестирование и синхронизацию.'
}
];
export default function FAQ() {
const [openIndex, setOpenIndex] = useState<number | null>(0);
return (
<section id="faq" className="py-32 bg-[#FAFAFA] relative">
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="text-center mb-16">
<div className="w-16 h-16 rounded-3xl bg-indigo-100 flex items-center justify-center text-indigo-600 mx-auto mb-6">
<MessageCircleQuestion size={32} />
</div>
<h2 className="text-3xl md:text-5xl font-black text-slate-900 tracking-tighter mb-6">Frequently Asked Questions</h2>
<p className="text-lg text-slate-600 font-medium">Ответы на сложные технические вопросы от нашей engineering team.</p>
</div>
<div className="space-y-4">
{coreFaqs.map((faq, index) => (
<div
key={index}
className={`border-2 rounded-3xl overflow-hidden transition-colors duration-300 ${openIndex === index ? 'border-indigo-600 bg-white shadow-xl shadow-indigo-100' : 'border-slate-200 bg-white hover:border-indigo-200'}`}
>
<button
onClick={() => setOpenIndex(openIndex === index ? null : index)}
className="w-full px-8 py-6 flex items-center justify-between text-left focus:outline-none"
>
<span className="text-lg font-bold text-slate-900 pr-8">{faq.q}</span>
<div className={`shrink-0 w-8 h-8 rounded-full flex items-center justify-center transition-colors ${openIndex === index ? 'bg-indigo-600 text-white' : 'bg-slate-100 text-slate-500'}`}>
{openIndex === index ? <Minus size={18} /> : <Plus size={18} />}
</div>
</button>
<AnimatePresence>
{openIndex === index && (
<motion.div
initial={{ height: 0, opacity: 0 }}
animate={{ height: 'auto', opacity: 1 }}
exit={{ height: 0, opacity: 0 }}
transition={{ duration: 0.3, ease: 'easeInOut' }}
className="overflow-hidden"
>
<div className="px-8 pb-8 pt-2 text-slate-600 font-medium leading-relaxed border-t border-slate-100 mt-2">
{faq.a}
</div>
</motion.div>
)}
</AnimatePresence>
</div>
))}
</div>
</div>
</section>
);
}
|