Updated CSS styles

2026-05-01 14:32:31 +05:30
parent cc65a42f89
commit 071180acff
25 changed files with 877 additions and 745 deletions
@@ -0,0 +1,98 @@
+'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">Frequently Asked Questions</h1>
+          <p className="ux-project-subtitle">
+            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" : ""}`}
+              >
+                <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>
+    </>
+  );
+}