シンプルFAQ

1"use client";
2
3export function FaqSimple001() {
4  const faqs = [
5    {
6      question: "What is your refund policy?",
7      answer:
8        "We offer a 30-day money-back guarantee. If you're not satisfied with our product, contact us within 30 days for a full refund.",
9    },
10    {
11      question: "How do I upgrade my plan?",
12      answer:
13        "You can upgrade your plan at any time from your account settings. The new features will be available immediately, and we'll prorate the difference.",
14    },
15    {
16      question: "Do you offer custom enterprise plans?",
17      answer:
18        "Yes, we offer custom enterprise solutions tailored to your organization's needs. Contact our sales team for a personalized quote.",
19    },
20    {
21      question: "Is technical support included?",
22      answer:
23        "All plans include email support. Pro and Enterprise plans include priority support with faster response times and dedicated account managers.",
24    },
25    {
26      question: "Can I export my data?",
27      answer:
28        "Yes, you can export all your data at any time in various formats including CSV, JSON, and PDF. Data portability is important to us.",
29    },
30    {
31      question: "What happens when my trial ends?",
32      answer:
33        "When your trial ends, you'll be automatically moved to the free plan. No charges will occur unless you explicitly choose to upgrade.",
34    },
35  ];
36
37  return (
38    <section className="bg-background py-24">
39      <div className="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8">
40        {/* ヘッダー */}
41        <div className="mb-16 text-center">
42          <p className="mb-4 text-sm font-medium uppercase tracking-[0.2em] text-muted-foreground">
43            FAQ
44          </p>
45          <h2 className="text-3xl font-light tracking-wide text-foreground sm:text-4xl">
46            Questions & Answers
47          </h2>
48        </div>
49
50        {/* FAQ リスト */}
51        <div className="space-y-12">
52          {faqs.map((faq, index) => (
53            <div
54              key={index}
55              className="border-b border-border pb-12 last:border-b-0"
56            >
57              <h3 className="mb-4 text-lg font-light tracking-wide text-foreground">
58                {faq.question}
59              </h3>
60              <p className="text-muted-foreground leading-relaxed tracking-wide">
61                {faq.answer}
62              </p>
63            </div>
64          ))}
65        </div>
66
67        {/* CTA */}
68        <div className="mt-16 text-center">
69          <p className="mb-6 text-muted-foreground tracking-wide">
70            Have more questions?
71          </p>
72          <a
73            href="#"
74            className="inline-flex items-center gap-2 text-sm font-medium uppercase tracking-[0.15em] text-foreground transition-colors hover:text-muted-foreground"
75          >
76            Get in touch
77            <svg
78              className="h-4 w-4"
79              fill="none"
80              stroke="currentColor"
81              viewBox="0 0 24 24"
82            >
83              <path
84                strokeLinecap="round"
85                strokeLinejoin="round"
86                strokeWidth={1.5}
87                d="M14 5l7 7m0 0l-7 7m7-7H3"
88              />
89            </svg>
90          </a>
91        </div>
92      </div>
93    </section>
94  );
95}