Implement about page

2026-05-13 23:08:36 -06:00
parent d2dfa099a2
commit b6b9b63608
69 changed files with 1834 additions and 28 deletions
@@ -0,0 +1,53 @@
+"use client";
+
+import { memo } from "react";
+import LayoutAccordion from "../../layout/Accordion";
+import type { FaqAccordionViewProps } from "./Accordion.types";
+
+/**
+ * Figma: "Sections / Accordion" (22130-889248; mobile FAQ 22132-889380). **xl** rows **Large** via `xlSize` (22135:890328).
+ * Section title: Large Heading (32px, lh 40) below `lg`; X Large Heading (36px, lh 44) at `lg`; XX Large Heading (40px, lh 52) at `xl` (Figma desktop frame 22135:890398).
+ */
+function FaqAccordionView({
+  title,
+  items,
+  size,
+  lgSize,
+  xlSize,
+  headingId,
+  className = "",
+}: FaqAccordionViewProps) {
+  return (
+    <section
+      aria-labelledby={headingId}
+      className={`bg-[#141414] px-[var(--spacing-scale-004)] py-[var(--spacing-scale-032)] md:px-[var(--spacing-scale-160)] md:py-[var(--spacing-scale-096)] ${className}`.trim()}
+    >
+      <div className="mx-auto flex w-full max-w-[1440px] flex-col items-center gap-[var(--spacing-scale-096)] md:gap-[var(--spacing-scale-040)]">
+        <h2
+          id={headingId}
+          className="w-full px-[var(--spacing-scale-016)] text-center font-bricolage-grotesque text-[length:var(--text-large-heading)] font-bold leading-[length:var(--text-large-heading--line-height)] text-[var(--color-content-default-brand-primary,#fefcc9)] md:px-0 lg:text-[length:var(--text-x-large-heading)] lg:leading-[length:var(--text-x-large-heading--line-height)] xl:text-[length:var(--text-xx-large-heading)] xl:leading-[length:var(--text-xx-large-heading--line-height)] xl:tracking-[var(--text-xx-large-heading--letter-spacing)]"
+        >
+          {title}
+        </h2>
+        <div className="w-full md:px-0">
+          {items.map((item, index) => (
+            <LayoutAccordion
+              key={`${item.title}-${index}`}
+              title={item.title}
+              subhead={item.subhead}
+              size={size}
+              lgSize={lgSize}
+              xlSize={xlSize}
+            >
+              {item.answer}
+            </LayoutAccordion>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+FaqAccordionView.displayName = "FaqAccordionView";
+
+export default memo(FaqAccordionView);