feat: 10.10线上最新代码提交

src/templates/PricingPage/Faq/index.js

@@ -0,0 +1,78 @@
+import { useState } from "react";
+import Section from "@/components/Section";
+import Heading from "@/components/Heading";
+
+import { faq } from "@/mocks/faq";
+
+type FaqProps = {};
+
+const Faq = ({}: FaqProps) => {
+    const [activeId, setActiveId] = useState<string | null>(faq[0].id);
+
+    return (
+        <Section>
+            <div className="container lg:flex">
+                <Heading
+                    className="lg:min-w-[22.75rem] lg:mr-12 lg:pt-8 xl:min-w-[32.75rem]"
+                    textAlignClassName="md:text-center lg:text-left"
+                    title="Frequently asked questions"
+                    text={
+                        <>
+                            Haven’t found what you’re looking for?{" "}
+                            <a
+                                className="text-n-1 hover:text-color-2"
+                                href="mailto:info@ui8.net"
+                            >
+                                Contact us
+                            </a>
+                        </>
+                    }
+                />
+                <div className="-mt-8 lg:mt-0">
+                    {faq.map((item) => (
+                        <div
+                            className="py-8 border-b border-n-1/5"
+                            key={item.id}
+                        >
+                            <div
+                                className="flex items-start justify-between cursor-pointer"
+                                onClick={() =>
+                                    setActiveId(
+                                        activeId === item.id ? null : item.id
+                                    )
+                                }
+                            >
+                                <div className="text-[1.25rem] leading-8">
+                                    {item.title}
+                                </div>
+                                <div className="relative w-6 h-6 mt-1 ml-10">
+                                    <div className="absolute top-[0.6875rem] left-1 w-4 h-0.5 bg-n-1 rounded-sm"></div>
+                                    <div
+                                        className={`absolute top-[0.6875rem] left-1 w-4 h-0.5 bg-n-1 rounded-sm transition-transform ${
+                                            item.id === activeId
+                                                ? ""
+                                                : "rotate-90"
+                                        }`}
+                                    ></div>
+                                </div>
+                            </div>
+                            <div
+                                className={`grid grid-rows-[0fr] transition-all ${
+                                    item.id === activeId
+                                        ? "grid-rows-[1fr]"
+                                        : ""
+                                }`}
+                            >
+                                <div className="body-2 text-n-3 overflow-hidden">
+                                    <div className="pt-6">{item.text}</div>
+                                </div>
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </Section>
+    );
+};
+
+export default Faq;