FAQs Section Two

1import {
2  Accordion,
3  AccordionContent,
4  AccordionItem,
5  AccordionTrigger,
6} from '@/components/ui/accordion'
7import Link from 'next/link'
8 
9const faqItems = [
10  {
11    id: 'item-1',
12    question: 'Can I use this template for a commercial project?',
13    answer:
14      '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.',
15  },
16  {
17    id: 'item-2',
18    question: 'Is this section responsive on mobile devices?',
19    answer:
20      '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.',
21  },
22  {
23    id: 'item-3',
24    question: 'Do I need to install any extra dependencies?',
25    answer:
26      '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.',
27  },
28  {
29    id: 'item-4',
30    question: 'Can I customize the questions and answers?',
31    answer:
32      '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.',
33  },
34  {
35    id: 'item-5',
36    question: 'Can this be used on a pricing or landing page?',
37    answer:
38      '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.',
39  },
40]
41 
42export default function FAQsTwo() {
43  return (
44    <section className="relative overflow-hidden py-16 md:py-24">
45      <div className="relative mx-auto max-w-5xl px-6">
46        <div className="mx-auto flex max-w-2xl flex-col items-center text-center">
47          <h2 className="mt-4 text-4xl font-semibold tracking-tight text-foreground">
48            Frequently asked questions
49          </h2>
50 
51          <p className="mt-4 text-lg text-balance text-muted-foreground">
52            Everything you need to know before using this section in your project.
53          </p>
54        </div>
55 
56        <div className="mx-auto mt-10 max-w-3xl rounded-2xl border border-border bg-background p-2 shadow-xs backdrop-blur">
57          <Accordion type="single" collapsible className="space-y-2">
58            {faqItems.map((item) => (
59              <AccordionItem
60                key={item.id}
61                value={item.id}
62// … truncated