Add FAQ Items

The FAQ section helps answer common questions visitors have about your product. This guide shows you how to add, edit, and organize FAQ items.

Steps

locales/en.json

{
  "homePage": {
    "faqSection": {
      "title": {
        "firstLine": "Frequently asked questions"
      },
      "description": "Answer common questions about your product.\nHelp customers make informed decisions."
    }
  }
}

"faq": [
  {
    "title": "How does Reddit Lead Finder work?",
    "description": "Reddit Lead Finder monitors relevant subreddits for discussions where your product can help. When it finds a match, you get notified with the post details and suggested response templates."
  },
  {
    "title": "Which subreddits can I monitor?",
    "description": "You can monitor any public subreddit. Our Pro plan allows unlimited subreddit tracking, while the Starter plan includes up to 5 subreddits."
  }
]

npm run dev

Common Issues

FAQ Not Showing

Check that the FAQ component is imported in the homepage:

import { Faq } from '@/components/Faq';

export default function HomePage() {
  return (
    <>
      <Faq />
    </>
  );
}

Accordion Not Working

Ensure the Accordion component is properly configured with type="single" and collapsible:

<Accordion type="single" collapsible className="w-full">

Text Overflow on Mobile

The component uses text-balance for better wrapping. If issues persist, add break-words class to the AccordionTrigger.

Best Practices

• Optimal count: 8-12 questions for comprehensive coverage
• Use customer language - Write questions as customers would ask them
• Update regularly - Add new questions based on support tickets
• SEO benefits - FAQ sections target long-tail keywords and can show as rich snippets

Next Steps

• Customize Hero Section - Update your homepage headline
• Add Blog Post - Create content marketing
• Add Testimonials - Build social proof