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,32 @@
+"use client";
+
+import { memo, useId } from "react";
+import FaqAccordionView from "./Accordion.view";
+import type { FaqAccordionProps, FaqAccordionViewProps } from "./Accordion.types";
+import type { AccordionSizeValue } from "../../layout/Accordion";
+
+/**
+ * Figma: "Sections / Accordion" (22130-889248). Rows: **s** / **m** at `lg` (22135-890258); **Large** (`l`) at `xl` (22135:890328).
+ */
+const FaqAccordionContainer = memo<FaqAccordionProps>(
+  ({ size: sizeProp = "s", lgSize: lgSizeProp = "m", xlSize: xlSizeProp = "l", ...props }) => {
+    const headingId = useId();
+    const size: AccordionSizeValue = sizeProp;
+    const lgSize: AccordionSizeValue = lgSizeProp;
+    const xlSize: AccordionSizeValue = xlSizeProp;
+
+    const viewProps: FaqAccordionViewProps = {
+      ...props,
+      size,
+      lgSize,
+      xlSize,
+      headingId,
+    };
+
+    return <FaqAccordionView {...viewProps} />;
+  },
+);
+
+FaqAccordionContainer.displayName = "FaqAccordion";
+
+export default FaqAccordionContainer;
@@ -0,0 +1,25 @@
+import type { AccordionSizeValue } from "../../layout/Accordion";
+
+export interface FaqAccordionItem {
+  title: string;
+  answer: string;
+  subhead?: string;
+}
+
+export interface FaqAccordionProps {
+  title: string;
+  items: FaqAccordionItem[];
+  size?: AccordionSizeValue;
+  /** Layout accordion size from `lg` (default **m**, Figma 22135-890258). */
+  lgSize?: AccordionSizeValue;
+  /** Layout accordion size from `xl` (default **l**, Figma 22135:890328 Large). */
+  xlSize?: AccordionSizeValue;
+  className?: string;
+}
+
+export interface FaqAccordionViewProps extends FaqAccordionProps {
+  headingId: string;
+  size: AccordionSizeValue;
+  lgSize: AccordionSizeValue;
+  xlSize: AccordionSizeValue;
+}
@@ -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);
@@ -0,0 +1,2 @@
+export { default } from "./Accordion.container";
+export type { FaqAccordionProps, FaqAccordionItem } from "./Accordion.types";