Clip content-template ornaments at the frame so they do not overlap copy.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-08-18 22:11:02 -06:00
parent 63842b31c8
commit 6820315aaa
6 changed files with 143 additions and 112 deletions
@@ -0,0 +1,72 @@
+/**
+ * Figma: Content page Template body ornaments (19003:23305).
+ * Hidden below md (640). From md, shapes sit in the side gutters and the
+ * page frame clips anything that bleeds past the viewport.
+ *
+ * - 19003:23575 / 19000:23008 — right
+ * - 19003:23576 / 19000:23009 — left
+ */
+import {
+  ASSETS,
+  getAssetPath,
+  howItWorksOrnamentLeftPath,
+  howItWorksOrnamentRightPath,
+} from "../../../lib/assetUtils";
+
+type ContentTemplateDecorativeShapesVariant = "guide" | "article";
+
+type ContentTemplateDecorativeShapesProps = {
+  variant: ContentTemplateDecorativeShapesVariant;
+};
+
+const RIGHT_GUIDE_CLASS =
+  "pointer-events-none absolute z-0 hidden aspect-[155/250] md:block left-[87.19%] right-0 top-[266px] lg:left-[84.86%] lg:top-[255px]";
+const LEFT_GUIDE_CLASS =
+  "pointer-events-none absolute z-0 hidden aspect-[119/136] md:block left-0 right-[88.38%] top-[811px]";
+const RIGHT_ARTICLE_CLASS =
+  "pointer-events-none absolute z-0 hidden aspect-square md:block left-[87.19%] right-[-8.13%] top-[266px] lg:left-[84.86%] lg:right-[-9.28%] lg:top-[255px]";
+const LEFT_ARTICLE_CLASS =
+  "pointer-events-none absolute z-0 hidden aspect-square md:block left-[-1.66%] right-[88.38%] top-[811px]";
+
+export default function ContentTemplateDecorativeShapes({
+  variant,
+}: ContentTemplateDecorativeShapesProps) {
+  const isArticle = variant === "article";
+
+  return (
+    <>
+      <div
+        aria-hidden
+        className={isArticle ? RIGHT_ARTICLE_CLASS : RIGHT_GUIDE_CLASS}
+        data-node-id="19003:23575"
+      >
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img
+          src={
+            isArticle
+              ? getAssetPath(ASSETS.CONTENT_SHAPE_1)
+              : getAssetPath(howItWorksOrnamentRightPath())
+          }
+          alt=""
+          className="pointer-events-none size-full max-w-none object-contain"
+        />
+      </div>
+      <div
+        aria-hidden
+        className={isArticle ? LEFT_ARTICLE_CLASS : LEFT_GUIDE_CLASS}
+        data-node-id="19003:23576"
+      >
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img
+          src={
+            isArticle
+              ? getAssetPath(ASSETS.CONTENT_SHAPE_2)
+              : getAssetPath(howItWorksOrnamentLeftPath())
+          }
+          alt=""
+          className="pointer-events-none size-full max-w-none object-contain"
+        />
+      </div>
+    </>
+  );
+}