FAQ Section One

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 FAQsOne() {
43  return (
44    <section className="py-16 md:py-24">
45      <div className="mx-auto max-w-5xl px-6">
46        <div className="grid gap-8 lg:grid-cols-5 lg:gap-12">
47          <div className="lg:col-span-2">
48            <h2 className="text-4xl font-semibold text-foreground">FAQs</h2>
49            <p className="mt-4 text-lg text-balance text-muted-foreground">
50              Everything you need to know
51            </p>
52            <p className="mt-6 hidden text-muted-foreground lg:block">
53              Still have questions? Reach out to our{' '}
54              <Link href="#" className="font-medium text-blue-500 hover:underline">
55                support team
56              </Link>
57            </p>
58          </div>
59 
60          <div className="min-w-0 lg:col-span-3">
61            <Accordion type="single" collapsible>
62              {faqItems.map((item) => (
63                <AccordionItem
64                  key={item.id}
65// … truncated