FAQs

The FAQs component helps you answer your users’ most common questions clearly and efficiently. It’s perfect for support pages, product sites, or landing pages — anywhere users might need quick answers.

Built with Tailwind CSS and fully compatible with Next.js and React.js, it’s reusable, responsive, and easy to customize.

FAQs section preview

1. FAQs section component setup

Create a new file components/sections/FAQs.tsx

jsx
"use client";

import { MinusIcon, PlusIcon } from "@heroicons/react/24/outline";
import { motion } from "framer-motion";
import { useState } from "react";

import SectionHeading from "@/components/typography/SectionHeading";

const faqs = [
  {
    question: "Will I be able to get a job after completing the course?",
    answer:
      "The knowledge I teach comes from my real work experience. I’ve also spent 3 years mentoring interns at my company, so after finishing the course, you'll feel confident to start working in a real business environment.",
  },
  {
    question: "Will you help me find a job after the course?",
    answer:
      "If you study well and are hardworking, I can recommend you to my current company and my brother's company. I’ll also help you prepare for interviews and work with you on any questions you might face.",
  },
  {
    question: "Is the study schedule flexible?",
    answer:
      "Yes, the schedule is very flexible since it’s an online course. You can book a session whenever you're free.",
  },
];

const FAQs = () => {
  const [openIndex, setOpenIndex] = useState<number | null>(null);

  const toggleFAQ = (index: number) => {
    setOpenIndex(openIndex === index ? null : index);
  };

  return (
    <motion.div
      initial={{ y: 60, opacity: 0 }} // Start below with 0 opacity
      whileInView={{ y: 0, opacity: 1 }} // Move to the normal position and become visible
      viewport={{ once: true }} // Trigger animation when 30% of the card is visible
      transition={{
        duration: 0.6,
        ease: "easeOut",
      }}
      className="bg-gray-50 py-20"
      id="cau-hoi-thuong-gap"
    >
      <div className="mx-auto max-w-4xl px-3 lg:px-8">
        <SectionHeading>Frequently Asked Questions</SectionHeading>

        <div className="mt-10 space-y-6">
          {faqs.map((faq, index) => {
            const isOpen = openIndex === index;
            return (
              <div key={index} className="border-b border-gray-200">
                {/* Question Button */}
                <button
                  onClick={() => toggleFAQ(index)}
                  className="flex w-full items-center justify-between py-4 text-left text-gray-900"
                  aria-expanded={isOpen}
                >
                  <span className="text-lg font-semibold">{faq.question}</span>
                  <span
                    className={`transition-transform duration-300 ${
                      isOpen ? "rotate-180" : "rotate-0"
                    }`}
                  >
                    {isOpen ? <MinusIcon className="size-6" /> : <PlusIcon className="size-6" />}
                  </span>
                </button>

                {/* Answer Section with Smooth Animation */}
                <div
                  className={`grid transition-all duration-300 ease-in-out ${
                    isOpen ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"
                  }`}
                >
                  <div className="overflow-hidden">
                    <p className="mt-2 pb-3 text-gray-600">{faq.answer}</p>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </motion.div>
  );
}

export default FAQs;

2. Usages

we can use FAQs component in any pages on your app

jsx
import Faqs from "@/components/sections/Faqs";

...

<DefaultLayout>
  <HeroBanner />
  <Faqs />
  <Callout />
  <Contact />
  <AboutMe />
</DefaultLayout>

The UI is shown like that