faqs-3

1import { PlusIcon } from "lucide-react";
2import {
3  Accordion,
4  AccordionContent,
5  AccordionItem,
6  AccordionTrigger,
7} from "@/components/ui/accordion";
8 
9export function FaqsSection() {
10  return (
11    <section className="mx-auto grid min-h-screen w-full max-w-5xl grid-cols-1 md:grid-cols-2 lg:border-x">
12      <div className="px-4 pt-12 pb-6">
13        <div className="space-y-5">
14          <h2 className="text-balance font-bold text-4xl md:text-6xl lg:font-black">
15            Frequently Asked Questions
16          </h2>
17          <p className="text-muted-foreground">
18            Quick answers to common questions about Freddy. Open any question to
19            learn more.
20          </p>
21          <p className="text-muted-foreground">
22            {"Can't find what you're looking for? "}
23            <a className="text-primary hover:underline" href="#">
24              Contact Us
25            </a>
26          </p>
27        </div>
28      </div>
29      <div className="relative place-content-center">
30        {/* vertical guide line */}
31        <div
32          aria-hidden="true"
33          className="pointer-events-none absolute inset-y-0 left-3 h-full w-px bg-border"
34        />
35 
36        <Accordion collapsible type="single">
37          {faqs.map((item) => (
38            <AccordionItem
39              className="group relative border-b pl-5 first:border-t last:border-b"
40              key={item.id}
41              value={item.id}
42            >
43              {/*  plus */}
44              <PlusIcon
45                aria-hidden="true"
46                className="-bottom-[5.5px] -translate-x-1/2 pointer-events-none absolute left-[12.5px] size-2.5 text-muted-foreground group-last:hidden"
47              />
48 
49              <AccordionTrigger className="px-4 py-4 text-[15px] leading-6 hover:no-underline">
50                {item.title}
51              </AccordionTrigger>
52 
53              <AccordionContent className="px-4 pb-4 text-muted-foreground">
54                {item.content}
55              </AccordionContent>
56            </AccordionItem>
57          ))}
58        </Accordion>
59      </div>
60    </section>
61  );
62}
63 
64const faqs = [
65  {
66    id: "item-1",
67    title: "What is Freddy?",
68    content:
69      "Freddy is a collection of beautifully crafted Shadcn UI blocks and components, designed to help developers build modern websites with ease.",
70  },
71  {
72    id: "item-2",
73    title: "Who can benefit from Freddy?",
74    content:
75// … truncated