Pin the review card description under the sections and tint the card from the uploaded logo.

Co-authored-by: Cursor <cursoragent@cursor.com>

app/(app)/create/hooks/usePreviewSurfaceColor.ts

@@ -0,0 +1,41 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import {
+  dominantColorFromImageUrl,
+  randomPreviewSurfaceColor,
+} from "../../../../lib/create/previewSurfaceColor";
+
+/**
+ * Fill for the review preview card. An uploaded logo contributes its most
+ * common color; no image uses a random light color. Unset until mount so the
+ * server and client share the fallback class.
+ *
+ * @param imageUrl Uploaded logo URL, or `null` when the user skipped the photo.
+ * @returns A CSS color, or `undefined` before the client picks one.
+ */
+export function usePreviewSurfaceColor(
+  imageUrl: string | null,
+): string | undefined {
+  const [color, setColor] = useState<string | undefined>(undefined);
+
+  useEffect(() => {
+    if (!imageUrl) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect -- random fill is client-only; first paint stays on the fallback class
+      setColor(randomPreviewSurfaceColor());
+      return;
+    }
+
+    let cancelled = false;
+    void dominantColorFromImageUrl(imageUrl).then((next) => {
+      if (cancelled) return;
+      setColor(next ?? randomPreviewSurfaceColor());
+    });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [imageUrl]);
+
+  return color;
+}