Implement about page

app/components/cards/Stat/Stat.container.tsx

@@ -0,0 +1,15 @@
+"use client";
+
+import { memo } from "react";
+import StatView from "./Stat.view";
+import type { StatProps } from "./Stat.types";
+
+const StatContainer = memo<StatProps>(
+  ({ shapeVariant: shapeVariantProp = "yellow", ...props }) => {
+    return <StatView {...props} shapeVariant={shapeVariantProp} />;
+  },
+);
+
+StatContainer.displayName = "Stat";
+
+export default StatContainer;

app/components/cards/Stat/Stat.types.ts

@@ -0,0 +1,13 @@
+import type { StatShapeVariant } from "../../asset/Shapes";
+
+export interface StatProps {
+  value: string;
+  label: string;
+  asOf?: string;
+  shapeVariant?: StatShapeVariant;
+  className?: string;
+}
+
+export interface StatViewProps extends StatProps {
+  shapeVariant: StatShapeVariant;
+}

app/components/cards/Stat/Stat.view.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { memo } from "react";
+import Shapes from "../../asset/Shapes";
+import type { StatViewProps } from "./Stat.types";
+
+/**
+ * Figma: "Card / Stat" (21598-18215). Full width of grid column at desktop.
+ */
+function StatView({
+  value,
+  label,
+  asOf,
+  shapeVariant,
+  className = "",
+}: StatViewProps) {
+  return (
+    <article
+      className={`relative flex h-auto min-h-[182px] w-full flex-col items-start justify-between rounded-[var(--radius-measures-radius-xlarge,20px)] bg-[var(--color-surface-invert-primary,white)] px-[var(--spacing-scale-024)] py-[var(--spacing-scale-032)] sm:h-[170px] sm:min-h-0 sm:p-[var(--spacing-scale-024)] ${className}`.trim()}
+    >
+      <div className="relative flex w-full flex-col items-start">
+        <div className="relative flex items-center">
+          <Shapes
+            variant={shapeVariant}
+            className="absolute -left-[11px] -top-[21px] size-[80px] rotate-[15deg] opacity-90"
+          />
+          <p className="relative font-bricolage-grotesque text-[40px] font-bold leading-[52px] text-[var(--color-content-invert-primary,black)]">
+            {value}
+          </p>
+        </div>
+        <p className="font-inter text-[14px] font-normal leading-5 text-[var(--color-content-invert-primary,black)]">
+          {label}
+        </p>
+      </div>
+      {asOf ? (
+        <p className="w-full font-inter text-[10px] font-normal leading-[14px] text-[var(--color-content-invert-tertiary,#2d2d2d)]">
+          {asOf}
+        </p>
+      ) : null}
+    </article>
+  );
+}
+
+StatView.displayName = "StatView";
+
+export default memo(StatView);

app/components/cards/Stat/index.tsx

@@ -0,0 +1,2 @@
+export { default } from "./Stat.container";
+export type { StatProps } from "./Stat.types";