Implement about page

app/components/asset/Shapes/Shapes.container.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import { memo } from "react";
+import ShapesView from "./Shapes.view";
+import type { ShapesProps } from "./Shapes.types";
+
+/**
+ * Figma: "Shapes" (22851-36508) — **Card / Stat** decorative shapes (`assets/shapes/stat-shape-*.svg`).
+ */
+const ShapesContainer = memo<ShapesProps>((props) => {
+  return <ShapesView {...props} />;
+});
+
+ShapesContainer.displayName = "Shapes";
+
+export default ShapesContainer;

app/components/asset/Shapes/Shapes.types.ts

@@ -0,0 +1,6 @@
+export type StatShapeVariant = "yellow" | "purple" | "green" | "orange";
+
+export interface ShapesProps {
+  variant?: StatShapeVariant;
+  className?: string;
+}

app/components/asset/Shapes/Shapes.view.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { memo } from "react";
+import { getAssetPath, statShapeAssetPath } from "../../../../lib/assetUtils";
+import type { ShapesProps, StatShapeVariant } from "./Shapes.types";
+
+/** Figma **Card / Stat** color variants → `stat-shape-{1..4}.svg`. */
+const SHAPE_INDEX_BY_VARIANT: Record<StatShapeVariant, 1 | 2 | 3 | 4> = {
+  yellow: 1,
+  purple: 2,
+  green: 3,
+  orange: 4,
+};
+
+/**
+ * Figma: "Shapes" (22851-36508) — decorative stat card art (SVG under `assets/shapes/`).
+ */
+function ShapesView({ variant = "yellow", className = "" }: ShapesProps) {
+  const src = getAssetPath(statShapeAssetPath(SHAPE_INDEX_BY_VARIANT[variant]));
+
+  return (
+    /* eslint-disable-next-line @next/next/no-img-element -- dynamic path from getAssetPath */
+    <img
+      src={src}
+      alt=""
+      aria-hidden
+      className={`pointer-events-none object-contain ${className}`.trim()}
+    />
+  );
+}
+
+ShapesView.displayName = "ShapesView";
+
+export default memo(ShapesView);

app/components/asset/Shapes/index.tsx

@@ -0,0 +1,2 @@
+export { default } from "./Shapes.container";
+export type { ShapesProps, StatShapeVariant } from "./Shapes.types";