diff --git a/src/components/organizations/VerifyTutorial.tsx b/src/components/organizations/VerifyTutorial.tsx index 689909bc..68fe81a3 100644 --- a/src/components/organizations/VerifyTutorial.tsx +++ b/src/components/organizations/VerifyTutorial.tsx @@ -7,6 +7,7 @@ import { } from 'lucide-react'; import { cn } from '@/lib/utils'; +import { sanitizeUrl } from '@/lib/sanitizeUrl'; import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'; /** @@ -247,6 +248,23 @@ export function VerifyTutorial({ // ── The animated mock card ─────────────────────────────────────────────── +/** + * A real published campaign (kind 33863) used as the demo subject so the + * tutorial mirrors an actual card rather than invented placeholder copy. + * Static by design — the tutorial is purely illustrative, so we read the + * fields directly instead of fetching the event. + */ +const DEMO_CAMPAIGN = { + title: 'Agora App Development Fund', + organizer: 'Team Soapbox', + story: 'Help fund the development of Agora!', + banner: + 'https://blossom.primal.net/aade02e86584a7ab269550992d0266bae31059a34e6e08fddba1f6f5acb6e7d6.jpg', + goalLabel: '$1,000', + raisedLabel: '$670', + pct: 67, +} as const; + interface DemoStageProps { phaseIndex: number; menuVisible: boolean; @@ -270,11 +288,16 @@ function DemoStage({ }: DemoStageProps) { const { t } = useTranslation(); - // When a verifier identity is supplied, the badge mirrors the live - // verification badge (org avatar + name); otherwise it falls back to the - // generic "Verified by you" label. - const hasVerifier = !!verifierName?.trim(); - const verifierInitial = verifierName?.trim()?.[0]?.toUpperCase() ?? '?'; + // The badge replicates the live overlay `CampaignVerificationBadge` + // (dark translucent pill, single ring-bordered avatar, sky check) so the + // preview matches exactly how a verification surfaces on a real card. + const badgePicture = sanitizeUrl(verifierPicture); + const verifierInitials = + (verifierName?.trim() || '') + .slice(0, 2) + .toUpperCase() || '?'; + + const bannerUrl = sanitizeUrl(DEMO_CAMPAIGN.banner); return (