FAQ

Component 315

About

A comprehensive FAQ section component with animated accordions, gradient styling, and an optional contact prompt. Built with shadcn/ui primitives and Framer Motion animations. Features - Header Section - Gradient text title - Optional description - Animated entrance - FAQ Items - Animated accordions - Smooth transitions - Progressive reveal animation - Interactive hover states - Gradient backgrounds - Status indicators - Contact Section - Optional inclusion - Custom call-to-action - Animated entrance - Configurable content

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds FAQ to your project and fits it to your theme.

Code

How FAQ is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { FaqSection } from "@/components/blocks/faq";

const DEMO_FAQS = [
  {
    question: "What makes your platform unique?",
    answer: "Our platform stands out through its intuitive design, powerful automation capabilities, and seamless integration options. We've focused on creating a user experience that combines simplicity with advanced features.",
  },
  {
    question: "How does the pricing structure work?",
    answer: "We offer flexible, transparent pricing tiers designed to scale with your needs. Each tier includes a core set of features, with additional capabilities as you move up. All plans start with a 14-day free trial.",
  },
  {
    question: "What kind of support do you offer?",
    answer: "We provide comprehensive support through multiple channels. This includes 24/7 live chat, detailed documentation, video tutorials, and dedicated account managers for enterprise clients.",
  },
];

export function FaqSectionDemo() {
  return (
    <FaqSection
      title="Frequently Asked Questions"
      description="Everything you need to know about our platform"
      items={DEMO_FAQS}
      contactInfo={{
        title: "Still have questions?",
        description: "We're here to help you",
        buttonText: "Contact Support",
        onContact: () => console.log("Contact support clicked"),
      }}
    />
  );
}