101 lines
2.7 KiB
TypeScript
101 lines
2.7 KiB
TypeScript
'use client';
|
||
|
||
import { useState } from "react";
|
||
import Link from "next/link";
|
||
|
||
const faqData = [
|
||
{
|
||
question: "How do projects start?",
|
||
answer: (
|
||
<>
|
||
Begin with our{" "}
|
||
<Link href="/start_project" className="ux-link">
|
||
project intake form
|
||
</Link>
|
||
. We respond within one business day with next steps.
|
||
</>
|
||
),
|
||
},
|
||
{
|
||
question: "What does pricing look like?",
|
||
answer:
|
||
"Engagements are scoped per project. Typical builds start in the $25K range.",
|
||
},
|
||
{
|
||
question: "Do you work with international clients?",
|
||
answer:
|
||
"Yes. We operate across US, EU, and APAC time zones.",
|
||
},
|
||
{
|
||
question: "Can I see your process?",
|
||
answer: (
|
||
<>
|
||
Check our{" "}
|
||
<Link href="/process" className="ux-link">
|
||
Absorb → Amplify → Activate
|
||
</Link>{" "}
|
||
workflow.
|
||
</>
|
||
),
|
||
},
|
||
];
|
||
|
||
export default function FAQ() {
|
||
const [activeIndex, setActiveIndex] = useState<number | null>(null);
|
||
|
||
const toggle = (index: number) => {
|
||
setActiveIndex(activeIndex === index ? null : index);
|
||
};
|
||
|
||
return (
|
||
<>
|
||
{/* HERO */}
|
||
<section className="ux-project-hero">
|
||
<div className="container text-center">
|
||
<h1 className="ux-project-title" data-aos="fade-up" data-aos-duration="1000">Frequently Asked Questions</h1>
|
||
<p className="ux-project-subtitle" data-aos="fade-up" data-aos-delay="200" data-aos-duration="1000">
|
||
Everything you need to know before working with us.
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ACCORDION */}
|
||
<section className="ux-about-section">
|
||
<div className="container">
|
||
<div className="faq-wrapper">
|
||
|
||
{faqData.map((item, index) => (
|
||
<div
|
||
key={index}
|
||
className={`faq-item ${activeIndex === index ? "active" : ""}`}
|
||
data-aos="fade-up"
|
||
data-aos-delay={100 + index * 120}
|
||
data-aos-duration="900"
|
||
>
|
||
<button
|
||
className="faq-question"
|
||
onClick={() => toggle(index)}
|
||
>
|
||
<span>{item.question}</span>
|
||
<span className="faq-icon">
|
||
{activeIndex === index ? "−" : "+"}
|
||
</span>
|
||
</button>
|
||
|
||
<div
|
||
className="faq-answer"
|
||
style={{
|
||
maxHeight: activeIndex === index ? "200px" : "0px",
|
||
}}
|
||
>
|
||
<p>{item.answer}</p>
|
||
</div>
|
||
</div>
|
||
))}
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</>
|
||
);
|
||
} |