FAQ

1"use client";23import {4  Accordion,5  AccordionContent,6  AccordionItem,7  AccordionTrigger,8} from "@/components/ui/accordion";9import { cn } from "@/lib/utils";1011type Faq01Props = {12  className?: string;13};1415const FAQS = [16  {17    value: "1",18    question: "Can I restyle blocks with my own theme?",19    answer:20      "Yes. Every block uses your theme tokens for color, radius, and type — swap the theme and the section follows.",21  },22  {23    value: "2",24    question: "How do I install a block?",25    answer:26      "Run the CLI add command for the block you want, then import it into a page. No extra setup beyond your existing UI kit.",27  },28  {29    value: "3",30    question: "Do blocks work in light and dark mode?",31    answer:32      "They do. Surfaces and text pull from semantic tokens, so both modes stay consistent without a second stylesheet.",33  },34  {35    value: "4",36    question: "Can I mix blocks freely?",37    answer:38      "That’s the point. Heroes, pricing, FAQs, and the rest are independent sections — compose them in any order.",39  },40] as const;4142export function Faq01({ className }: Faq01Props) {43  return (44    <section className={cn("@container w-full bg-background", className)}>45      <div className="mx-auto w-full max-w-2xl px-4 py-10 @[32rem]:px-6 @[32rem]:py-14">46        <div className="text-center">47          <h2 className="text-xl font-medium tracking-wide text-foreground @[32rem]:text-2xl">48            Frequently asked questions49          </h2>50          <p className="mt-2 text-sm tracking-wide text-muted-foreground">51            Quick answers about install, theming, and how blocks fit together.52          </p>53        </div>54        <Accordion type="single" collapsible className="mt-8">55          {FAQS.map((faq) => (56            <AccordionItem key={faq.value} value={faq.value}>57              <AccordionTrigger indicator="plus">{faq.question}</AccordionTrigger>58              <AccordionContent>{faq.answer}</AccordionContent>59            </AccordionItem>60          ))}61        </Accordion>62      </div>63    </section>64  );65}

1"use client";23import {4  Accordion,5  AccordionContent,6  AccordionItem,7  AccordionTrigger,8} from "@/components/ui/accordion";9import { cn } from "@/lib/utils";1011type Faq02Props = {12  className?: string;13};1415const FAQS = [16  {17    value: "1",18    question: "What’s included when I add a block?",19    answer:20      "You get the React component and its local dependencies. Swap the copy, media, and links for your product.",21  },22  {23    value: "2",24    question: "Do I need a design file?",25    answer:26      "No. Blocks ship production-ready. Tweak spacing and tokens in code if you want them tighter or louder.",27  },28  {29    value: "3",30    question: "Can my team use these commercially?",31    answer:32      "Yes — use them in client work and products. Keep the install path and attribution wherever your license requires.",33  },34  {35    value: "4",36    question: "How often are new blocks added?",37    answer:38      "We ship in small batches — marketing first, then app surfaces. Check the blocks index for what’s live.",39  },40] as const;4142export function Faq02({ className }: Faq02Props) {43  return (44    <section className={cn("@container w-full bg-background", className)}>45      <div className="mx-auto w-full max-w-4xl px-4 py-10 @[32rem]:px-6 @[32rem]:py-14">46        <div47          data-slot="block-split"48          className="flex flex-col gap-8 rounded-xl bg-muted p-5 @[40rem]:flex-row @[40rem]:gap-10 @[40rem]:p-8"49        >50          <div className="max-w-xs shrink-0">51            <h2 className="text-xl font-medium tracking-wide text-foreground @[32rem]:text-2xl">52              Questions & answers53            </h2>54            <p className="mt-2 text-sm tracking-wide text-muted-foreground">55              Still stuck? Reach out and we’ll point you at the right block or56              pattern.57            </p>58          </div>59          <Accordion type="single" collapsible className="min-w-0 flex-1">60            {FAQS.map((faq) => (61              <AccordionItem key={faq.value} value={faq.value}>62                <AccordionTrigger indicator="plus">63                  {faq.question}64                </AccordionTrigger>65                <AccordionContent>{faq.answer}</AccordionContent>66              </AccordionItem>67            ))}68          </Accordion>69        </div>70      </div>71    </section>72  );73}

1"use client";23import {4  Accordion,5  AccordionContent,6  AccordionItem,7  AccordionTrigger,8} from "@/components/ui/accordion";9import { cn } from "@/lib/utils";1011type Faq03Props = {12  className?: string;13};1415const GROUPS = [16  {17    title: "Product",18    items: [19      {20        value: "p1",21        question: "Can I restyle blocks with my theme?",22        answer:23          "Yes. Colors, radii, and type come from your tokens — change the theme and every block updates.",24      },25      {26        value: "p2",27        question: "Do blocks support dark mode?",28        answer:29          "They use semantic surfaces and text, so light and dark both work without a second stylesheet.",30      },31      {32        value: "p3",33        question: "Can I mix blocks freely?",34        answer:35          "They’re independent sections. Drop heroes, pricing, and FAQs in any order on a page.",36      },37    ],38  },39  {40    title: "Billing",41    items: [42      {43        value: "b1",44        question: "Is there a free plan?",45        answer:46          "Hobby covers side projects. Upgrade when you need more seats, SSO, or priority support.",47      },48      {49        value: "b2",50        question: "Can I change plans later?",51        answer:52          "Anytime. Upgrades apply immediately; downgrades take effect on the next billing cycle.",53      },54      {55        value: "b3",56        question: "Do you offer invoices?",57        answer:58          "Business and Enterprise plans support invoicing and custom contracts. Talk to us if you need one.",59      },60    ],61  },62] as const;6364export function Faq03({ className }: Faq03Props) {65  return (66    <section className={cn("@container w-full bg-background", className)}>67      <div className="mx-auto w-full max-w-4xl px-4 py-10 @[32rem]:px-6 @[32rem]:py-14">68        <div className="mx-auto max-w-md text-center">69          <h2 className="text-xl font-medium tracking-wide text-foreground @[32rem]:text-2xl">70            FAQ by topic71          </h2>72          <p className="mt-2 text-sm tracking-wide text-muted-foreground">73            Product and billing answers side by side.74          </p>75        </div>76        <div className="mt-8 grid grid-cols-1 gap-3 @[40rem]:grid-cols-2">77          {GROUPS.map((group) => (78            <div79              key={group.title}80              className="min-w-0 rounded-xl bg-muted p-5 @[32rem]:p-6"81            >82              <h3 className="text-xs font-medium tracking-wide text-muted-foreground">83                {group.title}84              </h3>85              <Accordion type="single" collapsible className="mt-3">86                {group.items.map((faq) => (87                  <AccordionItem key={faq.value} value={faq.value}>88                    <AccordionTrigger indicator="plus">89                      {faq.question}90                    </AccordionTrigger>91                    <AccordionContent>{faq.answer}</AccordionContent>92                  </AccordionItem>93                ))}94              </Accordion>95            </div>96          ))}97        </div>98      </div>99    </section>100  );101}