グリッドFAQ

1"use client";
2
3export function FaqGrid001() {
4  const faqs = [
5    {
6      question: "How do I create an account?",
7      answer:
8        "Click the Sign Up button and follow the simple registration process. You'll be up and running in under a minute.",
9    },
10    {
11      question: "Is there a free plan available?",
12      answer:
13        "Yes, we offer a generous free plan that includes all core features. Perfect for individuals and small teams getting started.",
14    },
15    {
16      question: "What payment methods do you accept?",
17      answer:
18        "We accept all major credit cards, PayPal, and wire transfers for enterprise customers.",
19    },
20    {
21      question: "Can I cancel my subscription?",
22      answer:
23        "You can cancel anytime with no questions asked. Your data remains accessible until the end of your billing period.",
24    },
25    {
26      question: "Do you offer discounts for nonprofits?",
27      answer:
28        "Yes, we offer 50% off for registered nonprofits and educational institutions. Contact us for verification.",
29    },
30    {
31      question: "How secure is my data?",
32      answer:
33        "We use industry-standard encryption and are SOC 2 Type II certified. Your data security is our top priority.",
34    },
35    {
36      question: "Can I invite team members?",
37      answer:
38        "Yes, you can invite unlimited team members on Pro and Enterprise plans. Collaborate seamlessly with your entire organization.",
39    },
40    {
41      question: "Do you have an API?",
42      answer:
43        "Yes, we provide a comprehensive REST API with detailed documentation. Available on Pro plans and above.",
44    },
45  ];
46
47  return (
48    <section className="bg-background py-24">
49      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
50        {/* ヘッダー */}
51        <div className="mb-16 text-center">
52          <p className="mb-4 text-sm font-medium uppercase tracking-[0.2em] text-muted-foreground">
53            Help Center
54          </p>
55          <h2 className="mb-6 text-3xl font-light tracking-wide text-foreground sm:text-4xl">
56            Frequently Asked Questions
57          </h2>
58          <p className="mx-auto max-w-2xl text-lg tracking-wide text-muted-foreground">
59            Find answers to common questions about our platform, pricing, and features.
60          </p>
61        </div>
62
63        {/* FAQ グリッド */}
64        <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
65          {faqs.map((faq, index) => (
66            <div
67              key={index}
68              className="border border-border p-8 transition-colors hover:border-muted-foreground/50"
69            >
70              <h3 className="mb-4 text-lg font-light tracking-wide text-foreground">
71                {faq.question}
72              </h3>
73              <p className="text-muted-foreground leading-relaxed tracking-wide">
74                {faq.answer}
75              </p>
76            </div>
77          ))}
78        </div>
79
80        {/* サポートバナー */}
81        <div className="mt-16 flex flex-col items-center justify-between gap-6 border border-border p-8 sm:flex-row">
82          <div>
83            <h3 className="mb-2 text-lg font-light tracking-wide text-foreground">
84              Need more help?
85            </h3>
86            <p className="text-muted-foreground tracking-wide">
87              Our support team is available 24/7 to assist you.
88            </p>
89          </div>
90          <a
91            href="#"
92            className="inline-flex h-11 items-center justify-center border border-border px-8 text-sm font-medium uppercase tracking-[0.15em] text-foreground transition-all hover:border-foreground hover:bg-foreground hover:text-background"
93          >
94            Contact Support
95          </a>
96        </div>
97      </div>
98    </section>
99  );
100}