1import { For } from "solid-js";2import { PeachMark } from "../components/PeachMark";3import { silenceProNudge, snoozeProNudge } from "../../shared/pro-nudge";45const PRO_HIGHLIGHTS = [6 ["Peach Sync", "Encrypted, peer-to-peer, across every device"],7 ["Peach Codex", "Your whole vault, restorable from paper"],8 ["Passkeys", "Zero-knowledge WebAuthn, built in"],9 ["Duress vault", "A convincing decoy under coercion"],10] as const;1112export function ProNudgeView(props: { onSeePro: () => void; onDismiss: () => void }) {13 async function dismiss(record: () => Promise<void>) {14 await record().catch(() => {15 16 });17 props.onDismiss();18 }1920 return (21 <section class="peach-pro-nudge peach-theme" aria-labelledby="pro-nudge-title">22 <div class="peach-pro-nudge-inner">23 <PeachMark class="peach-pro-nudge-mark" />24 <p class="peach-pro-eyebrow">PEACH PRO · $39 ONCE</p>25 <h1 id="pro-nudge-title" class="peach-pro-headline peach-pro-nudge-headline">26 Peach stays free.<br />Pro keeps it <em>growing.</em>27 </h1>28 <p class="peach-pro-subtitle">29 No subscription, no account. One purchase supports an independent30 password manager and unlocks the extras, forever.31 </p>3233 <ol class="peach-pro-nudge-list">34 <For each={PRO_HIGHLIGHTS}>35 {([name, description], index) => (36 <li class="peach-pro-nudge-item">37 <span class="peach-pro-grid-num">{String(index() + 1).padStart(2, "0")}</span>38 <span class="peach-pro-grid-name">{name}</span>39 <span class="peach-pro-grid-desc">{description}</span>40 </li>41 )}42 </For>43 </ol>4445 <div class="peach-pro-nudge-actions">46 <button type="button" class="peach-pro-upgrade-cta" onClick={props.onSeePro}>47 See Peach Pro48 </button>49 <div class="peach-pro-nudge-dismissals">50 <button type="button" class="peach-pro-nudge-quiet" onClick={() => void dismiss(snoozeProNudge)}>51 Remind me in 90 days52 </button>53 <span aria-hidden="true">·</span>54 <button type="button" class="peach-pro-nudge-quiet" onClick={() => void dismiss(silenceProNudge)}>55 Don't show again56 </button>57 </div>58 </div>59 </div>60 </section>61 );62}