ミニマルFAQ

1"use client";
2
3import { useState } from "react";
4
5export function FaqMinimal001() {
6  const [openIndex, setOpenIndex] = useState<number | null>(null);
7
8  const faqs = [
9    {
10      question: "What is included in the starter plan?",
11      answer:
12        "The starter plan includes all essential features: 5 projects, 10GB storage, basic analytics, and email support. Perfect for individuals and small teams.",
13    },
14    {
15      question: "How does billing work?",
16      answer:
17        "We bill monthly or annually (save 20% with annual billing). You can change your plan or cancel at any time with no hidden fees.",
18    },
19    {
20      question: "Can I try before I buy?",
21      answer:
22        "Absolutely. Start with our free plan or take advantage of the 14-day trial on any paid plan. No credit card required.",
23    },
24    {
25      question: "What integrations are available?",
26      answer:
27        "We integrate with 50+ popular tools including Slack, GitHub, Figma, Notion, and more. Custom integrations available for Enterprise.",
28    },
29    {
30      question: "Is there a learning curve?",
31      answer:
32        "Our platform is designed to be intuitive. Most users are productive within minutes. We also offer documentation and video tutorials.",
33    },
34  ];
35
36  return (
37    <section className="bg-background py-24">
38      <div className="mx-auto max-w-2xl px-4 sm:px-6 lg:px-8">
39        {/* ヘッダー */}
40        <div className="mb-16">
41          <h2 className="text-2xl font-light tracking-wide text-foreground sm:text-3xl">
42            FAQ
43          </h2>
44        </div>
45
46        {/* FAQ リスト */}
47        <div className="divide-y divide-border">
48          {faqs.map((faq, index) => (
49            <div key={index} className="py-6">
50              <button
51                className="flex w-full items-start justify-between text-left"
52                onClick={() =>
53                  setOpenIndex(openIndex === index ? null : index)
54                }
55              >
56                <span className="pr-8 font-light tracking-wide text-foreground">
57                  {faq.question}
58                </span>
59                <span className="mt-1 flex-shrink-0 text-muted-foreground">
60                  {openIndex === index ? (
61                    <svg
62                      className="h-4 w-4"
63                      fill="none"
64                      stroke="currentColor"
65                      viewBox="0 0 24 24"
66                    >
67                      <path
68                        strokeLinecap="round"
69                        strokeLinejoin="round"
70                        strokeWidth={1.5}
71                        d="M20 12H4"
72                      />
73                    </svg>
74                  ) : (
75                    <svg
76                      className="h-4 w-4"
77                      fill="none"
78                      stroke="currentColor"
79                      viewBox="0 0 24 24"
80                    >
81                      <path
82                        strokeLinecap="round"
83                        strokeLinejoin="round"
84                        strokeWidth={1.5}
85                        d="M12 4v16m8-8H4"
86                      />
87                    </svg>
88                  )}
89                </span>
90              </button>
91              <div
92                className={`overflow-hidden transition-all duration-300 ${
93                  openIndex === index ? "max-h-96 pt-4" : "max-h-0"
94                }`}
95              >
96                <p className="text-muted-foreground leading-relaxed tracking-wide">
97                  {faq.answer}
98                </p>
99              </div>
100            </div>
101          ))}
102        </div>
103      </div>
104    </section>
105  );
106}