FAQ Section Three

1import {
2  Accordion,
3  AccordionContent,
4  AccordionItem,
5  AccordionTrigger,
6} from '@/components/ui/accordion'
7 
8const faqItems = [
9  {
10    id: 'item-1',
11    question: 'Can I use this template for a commercial project?',
12    answer:
13      'Yes, you can use this template for personal and commercial projects. You can customize the layout, styling, and content to match your product or brand.',
14  },
15  {
16    id: 'item-2',
17    question: 'Is this section responsive on mobile devices?',
18    answer:
19      'Yes, the layout is designed to work across desktop, tablet, and mobile screens. On smaller screens, the content stacks vertically so the FAQ remains easy to read.',
20  },
21  {
22    id: 'item-3',
23    question: 'Do I need to install any extra dependencies?',
24    answer:
25      'This section uses the shadcn Accordion component. As long as Accordion is already installed in your project, you do not need anything extra for the basic version.',
26  },
27  {
28    id: 'item-4',
29    question: 'Can I customize the questions and answers?',
30    answer:
31      'Absolutely. The FAQ content is stored in a simple array, so you can update the questions, answers, IDs, and order without changing the layout logic.',
32  },
33  {
34    id: 'item-5',
35    question: 'Can this be used on a pricing or landing page?',
36    answer:
37      'Yes, this type of FAQ section works well on pricing pages, landing pages, documentation pages, and product pages where users need quick answers before taking action.',
38  },
39]
40 
41export default function FAQsThree() {
42  return (
43    <section className="mx-auto max-w-md py-8 md:max-w-7xl">
44      <div
45        aria-hidden="true"
46        className="hidden min-h-50 grid-cols-3 gap-0 border-x border-t border-dashed md:grid"
47      >
48        <div className="md:col-span-1"></div>
49        <div className="col-span-1 border-b border-l border-dashed"></div>
50        <div className="col-span-1 border-b border-l border-dashed"></div>
51      </div>
52 
53      <div className="grid grid-cols-1 gap-0 md:grid-cols-3 md:gap-[1.5px]">
54        <div className="col-span-1 border-x border-t border-dashed px-6 py-10 md:border-t-0 md:border-r-0 md:py-6">
55          <span className="items-center gap-2 text-xs font-normal tracking-wide text-muted-foreground uppercase">
56            FAQ
57          </span>
58          <h2 className="mt-8 max-w-sm text-4xl font-medium tracking-tight text-foreground md:text-5xl">
59            Small questions. Clear answers.
60          </h2>
61        </div>
62 
63// … truncated