8-bit FAQ1

1import { cn } from "@/lib/utils";
2 
3import {
4  Accordion,
5  AccordionContent,
6  AccordionItem,
7  AccordionTrigger,
8} from "@/components/ui/8bit/accordion";
9 
10import "@/components/ui/8bit/styles/retro.css";
11 
12export interface FAQItem {
13  answer: string;
14  question: string;
15}
16 
17interface FAQ1Props {
18  className?: string;
19  description?: string;
20  items?: FAQItem[];
21  title?: string;
22}
23 
24const defaultItems: FAQItem[] = [
25  {
26    question: "What platforms do you support?",
27    answer:
28      "We support all major platforms: Windows, macOS, Linux, and even your grandma's old CRT monitor. If it has pixels, we got you.",
29  },
30  {
31    question: "Is there a free tier?",
32    answer:
33      "Yes! The Squire tier is completely free. You get 3 dungeon runs per day, basic gear, and access to community chat. No credit card required.",
34  },
35  {
36    question: "Can I cancel anytime?",
37    answer:
38      "Absolutely. No contracts, no exit fees, no guilt trips. Cancel from your settings page and your subscription ends at the billing period.",
39  },
40  {
41    question: "Do you offer refunds?",
42    answer:
43      "We offer a 14-day money-back guarantee. If the game isn't for you, just reach out and we'll refund your gold — no questions asked.",
44  },
45  {
46    question: "How do I upgrade my plan?",
47    answer:
48      "Head to Settings and pick a new tier. The upgrade takes effect immediately and we'll prorate the difference. No downtime, no lost progress.",
49  },
50];
51 
52export default function FAQ1({
53  title = "Frequently Asked Questions",
54  description = "Got questions? We've got answers.",
55  items = defaultItems,
56  className,
57}: FAQ1Props) {
58  return (
59    <section className={cn("w-full px-4 py-16", className)}>
60      <div className="mx-auto max-w-2xl">
61        {(title || description) && (
62          <div className="mb-10 text-center">
63            {title && (
64              <h2 className="retro mb-3 font-bold text-2xl tracking-tight md:text-3xl">
65                {title}
66              </h2>
67            )}
68            {description && (
69              <p className="retro mx-auto max-w-xl text-muted-foreground text-[9px]">
70                {description}
71              </p>
72            )}
73          </div>
74        )}
75 
76        <Accordion type="single" collapsible>
77          {items.map((item, idx) => (
78            <AccordionItem key={item.question} value={`faq-${idx}`}>
79              <AccordionTrigger className="retro text-left text-xs">
80                {item.question}
81              </AccordionTrigger>
82// … truncated