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,18 @@
+"use client";
+
+import { memo, useId } from "react";
+import BookView from "./Book.view";
+import type { BookProps } from "./Book.types";
+
+/**
+ * Figma: "Sections / Book" frame **22135:889706** (see Book.view.tsx).
+ */
+const BookContainer = memo<BookProps>((props) => {
+  const headingId = useId();
+
+  return <BookView {...props} headingId={headingId} />;
+});
+
+BookContainer.displayName = "Book";
+
+export default BookContainer;
@@ -0,0 +1,13 @@
+export interface BookProps {
+  title: string;
+  description: string;
+  buttonText: string;
+  buttonHref?: string;
+  imageSrc?: string;
+  imageAlt?: string;
+  className?: string;
+}
+
+export interface BookViewProps extends BookProps {
+  headingId: string;
+}
@@ -0,0 +1,65 @@
+"use client";
+
+import { memo } from "react";
+import { ASSETS, getAssetPath } from "../../../../lib/assetUtils";
+import Button from "../../buttons/Button";
+import ContentLockup from "../../type/ContentLockup";
+import type { BookViewProps } from "./Book.types";
+
+/**
+ * Figma: "Sections / Book" outer **22135:889706** (1440+: **Content Card Horizontal** 22135:890130): card `max-width` **1280px**, inner padding **scale/048**, gutter **scale/032** (`Content Lockup`: Small/Display 32 lh 1.1 Medium; body X Large / Paragraph **24 lh 32**). Section inset lg **scale/160** / **064** unchanged.
+ */
+function BookView({
+  title,
+  description,
+  buttonText,
+  buttonHref,
+  imageSrc,
+  imageAlt,
+  headingId,
+  className = "",
+}: BookViewProps) {
+  const coverSrc = imageSrc ?? getAssetPath(ASSETS.COMMUNITYRULES_COVER);
+
+  return (
+    <section
+      aria-labelledby={headingId}
+      className={`px-[var(--spacing-scale-008)] py-[var(--spacing-scale-064)] md:px-[var(--spacing-scale-064)] lg:px-[var(--spacing-scale-160)] lg:py-[var(--spacing-scale-064)] ${className}`.trim()}
+    >
+      <div className="mx-auto flex w-full max-w-[1440px] flex-col items-center">
+        <div className="flex w-full flex-col items-center gap-[var(--spacing-scale-032)] rounded-[var(--radius-measures-radius-xlarge,20px)] bg-[#171717] p-[var(--spacing-scale-048)] shadow-[0_0_48px_rgba(0,0,0,0.1)] md:flex-row md:items-center lg:gap-[var(--spacing-scale-040)] lg:p-[var(--spacing-scale-064)] xl:mx-auto xl:max-w-[1280px] xl:gap-[var(--spacing-scale-032)] xl:p-[var(--spacing-scale-048)]">
+          <div className="relative aspect-[375/580] w-full shrink-0 overflow-hidden rounded-[4px] shadow-[0_0_24px_rgba(0,0,0,0.25)] md:aspect-auto md:h-[495px] md:w-[320px]">
+            {/* eslint-disable-next-line @next/next/no-img-element -- marketing cover art */}
+            <img
+              src={coverSrc}
+              alt={imageAlt ?? ""}
+              className="size-full object-cover"
+            />
+          </div>
+          <div className="flex min-w-0 flex-1 flex-col gap-[var(--spacing-scale-016)] lg:gap-[var(--spacing-scale-024)] xl:gap-[var(--spacing-scale-020)]">
+            <ContentLockup
+              variant="book"
+              alignment="left"
+              titleId={headingId}
+              title={title}
+              description={description}
+            />
+            <Button
+              buttonType="filled"
+              palette="default"
+              size="small"
+              href={buttonHref}
+              className="self-start"
+            >
+              {buttonText}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+BookView.displayName = "BookView";
+
+export default memo(BookView);
@@ -0,0 +1,2 @@
+export { default } from "./Book.container";
+export type { BookProps } from "./Book.types";