Components
Multi-category FAQ section with sidebar filters, adaptive accordion layout, and elegant interactive transitions.
Loading preview...
import { FaqsSection, type Question, Category } from "@/components/ui/faqs-4";
import { CreditCard, Feather, LayoutGrid, LifeBuoy, Power } from 'lucide-react';
export default function DemoOne() {
return <FaqsSection categories={categories} questions={ questions } defaultCategory="all" />;
}
const categories: Category[] = [
{ icon: LayoutGrid, id: 'all', label: 'All Topics' },
{ icon: Power, id: 'getting-started', label: 'Getting Started' },
{ icon: Feather, id: 'features', label: 'Features' },
{ icon: CreditCard, id: 'billing', label: 'Billing' },
{ icon: LifeBuoy, id: 'support', label: 'Support' },
];
const questions: Question[] = [
{
id: 1,
category: 'getting-started',
title: 'How do I create my first project?',
content:
'Click the "New Project" button in your dashboard, choose a template or start from scratch, customize your project name and settings, and you\'ll be ready to start building in seconds.',
},
{
id: 2,
category: 'getting-started',
title: 'What are the system requirements?',
content:
'Efferd works on any modern web browser including Chrome, Firefox, Safari, and Edge. No special software installation is required—just visit our platform and log in.',
},
{
id: 3,
category: 'features',
title: 'Can I use Efferd for team collaboration?',
content:
'Absolutely! Invite team members, set role-based permissions, leave comments on components, and track changes in real-time. Our collaboration features are built for teams of all sizes.',
},
{
id: 4,
category: 'features',
title: 'Is there a component library?',
content:
'Yes, Efferd includes a comprehensive library of pre-built, customizable components. You can also create your own reusable components and share them across your projects.',
},
{
id: 5,
category: 'features',
title: 'Do you support custom integrations?',
content:
'We support integrations with GitHub, GitLab, Figma, Slack, and major cloud providers. For custom integrations, contact our support team to discuss your needs.',
},
{
id: 6,
category: 'billing',
title: 'What payment methods do you accept?',
content:
'We accept all major credit cards, PayPal, and bank transfers for annual plans. Invoicing is available for enterprise customers.',
},
{
id: 7,
category: 'billing',
title: 'Can I change my plan anytime?',
content:
"Yes, you can upgrade or downgrade your plan at any time. Changes take effect immediately, and we'll prorate your billing accordingly.",
},
{
id: 8,
category: 'support',
title: 'How do I report a bug?',
content:
'Use the in-app feedback button or email support@efferd.com with details about the issue. Our team typically responds within 24 hours.',
},
{
id: 9,
category: 'support',
title: 'Do you offer training or onboarding?',
content:
'We provide video tutorials, documentation, and live webinars. Premium plans include personalized onboarding sessions with our support team.',
},
];