Implement how it works page

2026-05-17 22:40:06 -06:00
parent 450da4d8ab
commit 40ce5064d6
35 changed files with 707 additions and 123 deletions
@@ -0,0 +1,128 @@
+"use client";
+
+import { memo } from "react";
+import ContentContainer from "../../content/ContentContainer";
+import {
+  getAssetPath,
+  guideBannerLogoArrowPath,
+} from "../../../../lib/assetUtils";
+import type { ContentBannerViewProps } from "./ContentBanner.types";
+
+/**
+ * Figma: ContentBanner on content page template (22078:791901) — left column
+ * title + description; logo mark (22078:806960) in right column.
+ */
+function ContentBannerGuideView({
+  post,
+}: Pick<ContentBannerViewProps, "post">) {
+  const { title, description } = post.frontmatter;
+
+  return (
+    <section
+      className="relative w-full overflow-clip px-[var(--spacing-scale-020)] py-[var(--spacing-scale-024)] sm:px-[var(--spacing-scale-032)] sm:py-[var(--spacing-scale-032)] lg:px-[var(--spacing-scale-048)] lg:py-[var(--spacing-scale-040)]"
+      aria-labelledby="content-banner-title"
+    >
+      <div
+        className="mx-auto flex w-full max-w-[1024px] flex-col items-start gap-[var(--spacing-scale-024)] md:flex-row md:items-center md:gap-[var(--spacing-scale-032)]"
+        data-node-id="19189:9358"
+      >
+        <div
+          className="flex w-full max-w-[365px] shrink-0 flex-col items-start justify-center gap-[var(--spacing-scale-024)]"
+          data-node-id="19189:9171"
+        >
+          <div className="flex w-full flex-col items-start gap-[var(--measures-spacing-016)]">
+            <div className="flex w-full flex-col items-start gap-[var(--measures-spacing-004)] text-left text-[var(--color-content-default-primary)]">
+              <h1
+                id="content-banner-title"
+                className="w-full font-bricolage font-medium text-[32px] leading-[110%] sm:text-[40px] lg:text-[44px]"
+              >
+                {title}
+              </h1>
+              {description ? (
+                <p className="w-full font-inter font-normal text-[16px] leading-[130%] sm:text-[18px]">
+                  {description}
+                </p>
+              ) : null}
+            </div>
+          </div>
+        </div>
+
+        <div
+          className="flex w-full shrink-0 items-center justify-center md:flex-1"
+          data-node-id="22078:806960"
+        >
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img
+            src={getAssetPath(guideBannerLogoArrowPath())}
+            alt=""
+            aria-hidden
+            className="h-[clamp(120px,20vw,171px)] w-[clamp(120px,20vw,172px)] max-w-none shrink-0 object-contain"
+          />
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function ContentBannerArticleView({
+  post,
+  leadingImageSrc,
+  leadingImageAlt,
+  backgroundImageSm,
+  backgroundImageMd,
+}: ContentBannerViewProps) {
+  if (!backgroundImageSm || !backgroundImageMd) {
+    return null;
+  }
+
+  return (
+    <div className="relative h-[275px] w-full pt-[var(--measures-spacing-016)] sm:h-[326px] sm:overflow-hidden md:h-[224px] md:pt-[var(--measures-spacing-008)] lg:h-[358.4px] lg:pt-[50px] xl:h-[504px] xl:pt-[112px]">
+      <div
+        className="absolute inset-0 aspect-[320/225.5] h-full w-full bg-cover bg-no-repeat"
+        style={{
+          backgroundImage: `url(${backgroundImageSm})`,
+          backgroundPosition: "center bottom",
+        }}
+      />
+
+      <div
+        className="absolute inset-0 hidden aspect-[640/224] h-full w-full bg-cover bg-no-repeat md:block"
+        style={{
+          backgroundImage: `url(${backgroundImageMd})`,
+          backgroundPosition: "center bottom",
+        }}
+      />
+
+      <div
+        className="
+          relative z-10 flex h-full flex-col
+          pl-[var(--measures-spacing-016)] pr-[96px]
+          justify-start
+          md:absolute md:inset-x-0 md:top-1/2 md:h-auto md:w-full md:-translate-y-1/2
+          md:pl-[var(--measures-spacing-024)] md:pr-[350px]
+          lg:static lg:top-auto lg:h-full lg:translate-y-0 lg:justify-start
+          lg:pl-[var(--measures-spacing-064)]
+        "
+      >
+        <ContentContainer
+          post={post}
+          size="responsive"
+          leadingImageSrc={leadingImageSrc}
+          leadingImageAlt={leadingImageAlt}
+        />
+      </div>
+    </div>
+  );
+}
+
+function ContentBannerView(props: ContentBannerViewProps) {
+  if (props.variant === "guide") {
+    return <ContentBannerGuideView post={props.post} />;
+  }
+
+  return <ContentBannerArticleView {...props} />;
+}
+
+ContentBannerView.displayName = "ContentBannerView";
+
+export default memo(ContentBannerView);