faqs-2

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 min-h-screen w-full max-w-5xl lg:border-x">
11      <div className="mx-4 grid h-[calc(100vh-3.5rem)] grid-cols-1 border-x md:mx-0 md:grid-cols-2 md:border-x-0">
12        <div className="space-y-4 px-4 pt-12 pb-4 md:border-r">
13          <h2 className="font-black text-3xl md:text-4xl">FAQs</h2>
14          <p className="text-muted-foreground">
15            Here are some common questions and answers that you might encounter
16            when using Freddy.
17          </p>
18        </div>
19        <div className="place-content-center">
20          <Accordion collapsible defaultValue="item-1" type="single">
21            {questions.map((item) => (
22              <AccordionItem
23                className="first:border-t last:border-b data-[state=open]:bg-card"
24                key={item.id}
25                value={item.id}
26              >
27                <AccordionTrigger className="px-4 py-4 text-[15px] leading-6 hover:no-underline">
28                  {item.title}
29                </AccordionTrigger>
30                <AccordionContent className="px-4 pb-4 text-muted-foreground">
31                  {item.content}
32                </AccordionContent>
33              </AccordionItem>
34            ))}
35          </Accordion>
36        </div>
37      </div>
38      <div className="flex h-14 items-center justify-center border-t">
39        <p className="text-muted-foreground">
40          Can't find what you're looking for?{" "}
41          <a className="text-primary hover:underline" href="#">
42            Contact Us
43          </a>
44        </p>
45      </div>
46    </div>
47  );
48}
49 
50const questions = [
51  {
52    id: "item-1",
53    title: "What is Freddy?",
54    content:
55      "Freddy is a collection of beautifully crafted Shadcn UI blocks and components, designed to help developers build modern websites with ease.",
56  },
57  {
58    id: "item-2",
59    title: "Who can benefit from Freddy?",
60    content:
61      "Freddy is built for founders, product teams, and agencies that want to accelerate idea validation and delivery.",
62  },
63  {
64    id: "item-3",
65    title: "What features does Freddy include?",
66    content:
67// … truncated