feat(loops): Add Rafa's geometric hero background to promo card

[charlesvien]

Problem

The Introducing Loops promo card and dialog sit on a flat gray panel, which reads as placeholder next to the product push cards in the PostHog app.

Rafa made a cool thing that looked similar to what I built so I wanted to use his geometric background from his design https://posthog.slack.com/archives/C09G8Q32R6F/p1784806145720579

Changes

Copies the hero background Rafa built for the product push cards in PostHog/posthog#67968: a solid product color with scattered white geometric shapes and a gradient fade into the card body. Both the sidebar mini card and the announcement dialog use it, on the product analytics blue. The card hover switches from a background tint to a shadow lift and the dismiss button adopts the same white-on-scrim style as the source cards.

How did you test this?

• Biome and turbo run typecheck --filter=@posthog/ui, both clean
• vitest run src/features/loops in packages/ui, 89 tests pass
• Drove the dev app over CDP: reset onboarding, the card renders with the new hero in the sidebar and clicking it opens the dialog with the same background (screenshots above are from the live app)

Automatic notifications

• Publish to changelog?
• Alert Sales and Marketing teams?

[trunk-io]

😎 This pull request was merged.

[github-actions]

React Doctor found no issues in the changed files. 🎉

_{Reviewed by React Doctor for commit 44e6336.}

[greptile-apps]

Prompt To Fix All With AI

Fix the following 1 code review issue. Work through them one at a time, proposing concise fixes.

---

### Issue 1 of 1
packages/ui/src/features/loops/components/LoopsPromoCard.tsx:228
**Dialog fade uses undefined token**

When the Loops dialog opens, this gradient targets `--background`, but the shared light and dark themes define `--color-background`; the invalid endpoint leaves the intended fade absent and the blue hero ends abruptly against the dialog body.

_{Reviews (1): Last reviewed commit: "add geometric hero background to loops p..." | Re-trigger Greptile}

[github-actions]

Purely presentational change to a single UI promo card (SVG background, hover/dismiss styling) with no business logic, API, auth, billing, or dependency surface touched; author has STRONG familiarity with this exact file. The one open concern is a minor CSS variable typo affecting a decorative gradient, not a showstopper.

• Author wrote 100% of the modified lines and has 7 merged PRs in these paths (familiarity STRONG).
• greptile-apps[bot] reviewed the current head.
• Dialog gradient uses to-(--background), but only --color-background is defined in globals.css — the fade likely renders as a hard cutoff instead of blending into the dialog body. Cosmetic only (Greptile's inline comment on this, marked resolved, doesn't appear actually fixed in the diff) — not a functional or security issue.

Gate mechanics and policy version

Gate		Result
prerequisites	✓	all clear
deny-list	✓	no deny categories matched
size	✓	98L, 1F substantive — within ceiling
tier	✓	T1-agent / T1b-small (98L, 1F, single-area, feat)
stamphog 2.0.0b3		.stamphog/policy.yml @ 883dc3f · reviewed head 44e6336