faqs-1

1import {
2  Accordion,
3  AccordionContent,
4  AccordionItem,
5  AccordionTrigger,
6} from "@/components/ui/accordion";
7 
8export function FaqsSection() {
9  return (
10    <div className="mx-auto w-full max-w-3xl space-y-7 px-4 pt-16">
11      <div className="space-y-2">
12        <h2 className="font-semibold text-3xl md:text-4xl">
13          Frequently Asked Questions
14        </h2>
15        <p className="max-w-2xl text-muted-foreground">
16          Here are some common questions and answers that you might encounter
17          when using Freddy. If you don't find the answer you're looking for,
18          feel free to reach out.
19        </p>
20      </div>
21      <Accordion
22        className="-space-y-px w-full rounded-lg bg-card shadow dark:bg-card/50"
23        collapsible
24        defaultValue="item-1"
25        type="single"
26      >
27        {questions.map((item) => (
28          <AccordionItem
29            className="relative border-x first:rounded-t-lg first:border-t last:rounded-b-lg last:border-b"
30            key={item.id}
31            value={item.id}
32          >
33            <AccordionTrigger className="px-4 py-4 text-[15px] leading-6 hover:no-underline">
34              {item.title}
35            </AccordionTrigger>
36            <AccordionContent className="px-4 pb-4 text-muted-foreground">
37              {item.content}
38            </AccordionContent>
39          </AccordionItem>
40        ))}
41      </Accordion>
42      <p className="text-muted-foreground">
43        Can't find what you're looking for? Contact our{" "}
44        <a className="text-primary hover:underline" href="#">
45          customer support team
46        </a>
47      </p>
48    </div>
49  );
50}
51 
52const questions = [
53  {
54    id: "item-1",
55    title: "What is Freddy?",
56    content:
57      "Freddy is a collection of beautifully crafted Shadcn UI blocks and components, designed to help developers build modern websites with ease.",
58  },
59  {
60    id: "item-2",
61    title: "Who can benefit from Freddy?",
62    content:
63      "Freddy is built for founders, product teams, and agencies that want to accelerate idea validation and delivery.",
64  },
65  {
66    id: "item-3",
67    title: "What features does Freddy include?",
68    content:
69      "Freddy offers a collaborative workspace where you can design and build beautiful web applications, with reusable UI blocks, deployment automation, and comprehensive analytics all in one place. With Freddy, you can streamline your team’s workflow and deliver high-quality websites quickly and efficiently.",
70  },
71  {
72// … truncated