FAQ 4 – Centered accordion with supporting panel

1import {
2  Accordion,
3  AccordionContent,
4  AccordionItem,
5  AccordionTrigger,
6} from "@/components/ui/accordion";
7import {
8  SectionHeading,
9  SectionHeadingTagline,
10  SectionHeadingTitle,
11} from "@/components/shadcncraft/pro-marketing/section-heading";
12 
13export function Faqs4() {
14  return (
15    <section className="py-12 lg:py-20">
16      <div className="mx-auto flex max-w-7xl flex-col gap-16 px-5 lg:px-0">
17        {/* Section Heading */}
18        <div className="mx-auto w-full max-w-2xl">
19          <SectionHeading alignment="center">
20            <SectionHeadingTagline>FAQ</SectionHeadingTagline>
21            <SectionHeadingTitle>Your questions answered</SectionHeadingTitle>
22          </SectionHeading>
23        </div>
24 
25        {/* FAQs Accordion */}
26        <div className="mx-auto w-full max-w-2xl">
27          <Accordion type="single" className="w-full">
28            {faqsData.map((faq) => (
29              <AccordionItem key={faq.question} value={faq.question}>
30                <AccordionTrigger className="text-base">{faq.question}</AccordionTrigger>
31                <AccordionContent>{faq.answer}</AccordionContent>
32              </AccordionItem>
33            ))}
34          </Accordion>
35        </div>
36 
37        {/* Contact CTA */}
38        <div className="mx-auto w-full max-w-2xl text-center">
39          <p className="text-muted-foreground">
40            Still have questions? We&apos;re here to help.{" "}
41            <a href="#" className="text-foreground underline">
42              Contact support
43            </a>
44          </p>
45        </div>
46      </div>
47    </section>
48  );
49}
50 
51const faqsData = [
52  {
53    question: "What is Acme Inc.?",
54    answer:
55      "Acme Inc. is a productivity platform designed to help teams work smarter and faster. It provides tools for collaboration, project management, and workflow optimization.",
56  },
57  {
58    question: "How do I get started?",
59    answer:
60      "Getting started is easy. Sign up for a free account, complete the onboarding process, and you'll be ready to use Acme Inc. in minutes.",
61  },
62  {
63    question: "What are the pricing plans?",
64    answer:
65      "We offer flexible pricing plans to suit teams of all sizes. Visit our pricing page to see detailed information about each plan and choose the one that fits your needs.",
66  },
67  {
68    question: "Is there a free trial?",
69    answer:
70      "Yes, we offer a free trial period so you can explore all features before committing to a paid plan. No credit card required.",
71  },
72  {
73// … truncated