Leon-in
97db9ee8c7
Add cli/code/office/platform/pricing pages, new home sections (Ecosystem, FeatureGrid, Faq, WorkflowSteps, BottomCta, ProductEcosystem), ScrollReveal and PixelTextReveal animation components, brand assets, and expanded site-content. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
77 lines
2.6 KiB
TypeScript
77 lines
2.6 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
import { HOME_FAQS } from "@/lib/site-content"
|
|
|
|
export default function FaqSection() {
|
|
const [openIndex, setOpenIndex] = useState<number | null>(null)
|
|
|
|
return (
|
|
<section className="section overflow-hidden">
|
|
<div className="w-layout-blockcontainer container-default w-container">
|
|
<div
|
|
data-w-id="faq-wrapper"
|
|
style={{ opacity: "0", filter: "blur(8px)" }}
|
|
className="w-layout-grid faqs-v1-wrapper"
|
|
>
|
|
<div>
|
|
<div className="subtitle">FAQ</div>
|
|
<div className="mg-top-4x-extra-small">
|
|
<h2>常见问题</h2>
|
|
</div>
|
|
</div>
|
|
<div className="w-layout-grid faqs-v1-grid" role="list">
|
|
{HOME_FAQS.map((faq, i) => (
|
|
<div
|
|
key={faq.question}
|
|
className="card accordion-card-v1"
|
|
role="listitem"
|
|
style={{ cursor: "pointer" }}
|
|
onClick={() => setOpenIndex(openIndex === i ? null : i)}
|
|
>
|
|
<div className="accordion-number">
|
|
{String(i + 1).padStart(2, "0")}
|
|
</div>
|
|
<div className="accordion-body">
|
|
<div className="accordion-title">{faq.question}</div>
|
|
<div
|
|
className="accordion-content"
|
|
style={{
|
|
maxHeight: openIndex === i ? "200px" : "0",
|
|
overflow: "hidden",
|
|
transition: "max-height 0.3s ease-out",
|
|
opacity: openIndex === i ? 1 : 0,
|
|
}}
|
|
>
|
|
<p>{faq.answer}</p>
|
|
</div>
|
|
</div>
|
|
<div className="accordion-arrow">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="100%"
|
|
viewBox="0 0 16 16"
|
|
fill="none"
|
|
style={{
|
|
transform: openIndex === i ? "rotate(180deg)" : "rotate(0deg)",
|
|
transition: "transform 0.3s ease-out",
|
|
}}
|
|
>
|
|
<path
|
|
d="M4 6L8 10L12 6"
|
|
stroke="currentColor"
|
|
strokeWidth="1.5"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|