2カラムFAQ

1"use client";
2
3import { useState } from "react";
4
5export function FaqTwoColumn001() {
6  const [openIndex, setOpenIndex] = useState<number | null>(0);
7
8  const faqs = [
9    {
10      question: "How do I get started?",
11      answer:
12        "Getting started is easy! Simply create a free account, and you'll have access to our starter plan immediately. No credit card required.",
13    },
14    {
15      question: "What payment methods do you accept?",
16      answer:
17        "We accept all major credit cards (Visa, MasterCard, American Express), PayPal, and bank transfers for annual plans.",
18    },
19    {
20      question: "Can I change my plan later?",
21      answer:
22        "Yes, you can upgrade or downgrade your plan at any time. Changes will be reflected in your next billing cycle.",
23    },
24    {
25      question: "Is there a free trial?",
26      answer:
27        "Yes! All paid plans come with a 14-day free trial. You can explore all features before committing.",
28    },
29    {
30      question: "What kind of support do you offer?",
31      answer:
32        "We offer 24/7 email support for all plans. Pro and Enterprise plans also include priority support and dedicated account managers.",
33    },
34    {
35      question: "Can I cancel anytime?",
36      answer:
37        "Absolutely. You can cancel your subscription at any time. If you cancel, you'll still have access until the end of your billing period.",
38    },
39  ];
40
41  return (
42    <section className="bg-white py-24 dark:bg-zinc-950">
43      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
44        <div className="grid grid-cols-1 gap-16 lg:grid-cols-2">
45          {/* Left Column - Header */}
46          <div className="lg:sticky lg:top-24 lg:self-start">
47            <span className="text-sm font-semibold uppercase tracking-wide text-indigo-600 dark:text-indigo-400">
48              Support
49            </span>
50            <h2 className="mt-2 text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl md:text-4xl dark:text-white">
51              Frequently Asked Questions
52            </h2>
53            <p className="mt-4 text-lg text-gray-600 dark:text-gray-400">
54              Can&apos;t find the answer you&apos;re looking for? Reach out to
55              our customer support team.
56            </p>
57            <a
58              href="#"
59              className="mt-8 inline-flex items-center gap-2 rounded-lg bg-indigo-600 px-6 py-3 font-medium text-white transition-all hover:bg-indigo-700"
60            >
61              Contact Support
62              <svg
63                className="h-4 w-4"
64                fill="none"
65                stroke="currentColor"
66                viewBox="0 0 24 24"
67              >
68                <path
69                  strokeLinecap="round"
70                  strokeLinejoin="round"
71                  strokeWidth={2}
72                  d="M14 5l7 7m0 0l-7 7m7-7H3"
73                />
74              </svg>
75            </a>
76          </div>
77
78          {/* Right Column - FAQ Items */}
79          <div className="space-y-4">
80            {faqs.map((faq, index) => (
81              <div
82                key={index}
83                className="rounded-xl border border-gray-200 bg-white dark:border-zinc-800 dark:bg-zinc-900"
84              >
85                <button
86                  className="flex w-full items-center justify-between px-6 py-5 text-left"
87                  onClick={() =>
88                    setOpenIndex(openIndex === index ? null : index)
89                  }
90                >
91                  <span className="font-medium text-gray-900 dark:text-white">
92                    {faq.question}
93                  </span>
94                  <span
95                    className={`ml-4 flex-shrink-0 rounded-full bg-gray-100 p-1 transition-transform dark:bg-zinc-800 ${
96                      openIndex === index ? "rotate-180" : ""
97                    }`}
98                  >
99                    <svg
100                      className="h-5 w-5 text-gray-500 dark:text-gray-400"
101                      fill="none"
102                      stroke="currentColor"
103                      viewBox="0 0 24 24"
104                    >
105                      <path
106                        strokeLinecap="round"
107                        strokeLinejoin="round"
108                        strokeWidth={2}
109                        d="M19 9l-7 7-7-7"
110                      />
111                    </svg>
112                  </span>
113                </button>
114                {openIndex === index && (
115                  <div className="px-6 pb-5">
116                    <p className="text-gray-600 dark:text-gray-400">
117                      {faq.answer}
118                    </p>
119                  </div>
120                )}
121              </div>
122            ))}
123          </div>
124        </div>
125      </div>
126    </section>
127  );
128}