62:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 63:T4f2,

CTA with what-happens-next checklist

ctachecklistprocess

React ↗

What happens after you send it

A short reply confirming we received it
A call to talk through scope and fit
A written plan, priced, for you to review

Say: "give me a CTA with a next-steps checklist" — a short numbered list of what happens after someone clicks, then the button; reach for it when the ask is unfamiliar and the visitor needs to see the path before they'll commit.

64:T942,.card { border: 1px solid var(--line); border-radius: 14px; background: var(--card); overflow: hidden; display: flex; flex-direction: column; } .card > header { display: flex; align-items: baseline; gap: .8rem; padding: 1.1rem 1.2rem .9rem; border-bottom: 1px solid var(--line); } .card .num { font-family: var(--mono); color: var(--acc); font-size: 1.05rem; } .card h3 { font-size: 1.02rem; font-weight: 600; letter-spacing: -0.01em; flex: 1; } .tags { display: flex; gap: .35rem; } .tags i { font: 400 .62rem/1 var(--mono); font-style: normal; color: var(--dim); border: 1px solid var(--line); border-radius: 99px; padding: .28em .6em; white-space: nowrap; } .demo { min-height: 250px; position: relative; display: flex; align-items: center; justify-content: center; background: var(--bg2); overflow: hidden; flex: 1; } .order { padding: .85rem 1.2rem; font-family: var(--mono); font-size: .72rem; color: var(--dim); border-top: 1px solid var(--line); } .order b { color: var(--txt); font-weight: 500; } .demo .btn.corner { position: absolute; top: 12px; right: 12px; padding: .55em 1em; font-size: .68rem; z-index: 5; } .ai-card .num { color: var(--acc2) !important; } .demo:has(.hascheck input:checked) .hasbtn { border-color: var(--acc); color: var(--acc); pointer-events: auto; opacity: 1; } /* ---------- 446 · CTA with what-happens-next checklist ---------- */ .ccn { width: 100%; min-height: 220px; display: flex; flex-direction: column; align-items: center; gap: .9rem; padding: 1.3rem 1.2rem; box-sizing: border-box; } .ccn-h { margin: 0; font: 700 1rem/1.25 var(--sans); letter-spacing: -.01em; color: var(--txt); text-align: center; } .ccn-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .5rem; width: 100%; max-width: 280px; } .ccn-item { display: flex; align-items: baseline; gap: .6rem; font: 400 .68rem/1.4 var(--sans); color: var(--dim); } .ccn-mark { flex: none; font: 600 .58rem/1 var(--mono); color: var(--acc); } .ccn-btn { font: 600 .7rem/1 var(--mono); color: var(--bg); background: var(--acc); border: none; border-radius: 99px; padding: .68em 1.3em; cursor: pointer; transition: filter .2s; } .ccn-btn:hover { filter: brightness(1.08); } .ccn-btn:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; } .ccn-btn { transition: none; }65:T918,// @ts-nocheck — generated wrapper; inlined pattern JS is imperative DOM code, not authored TS. "use client"; // CTA with what-happens-next checklist — Motion Menu import { useEffect, useRef } from "react"; const MARKUP = "

446

CTA with what-happens-next checklist

ctachecklistprocess

React \u2197

What happens after you send it

01A short reply confirming we received it
02A call to talk through scope and fit
03A written plan, priced, for you to review

\n \n

Say: "give me a CTA with a next-steps checklist" \u2014 a short numbered list of what happens after someone clicks, then the button; reach for it when the ask is unfamiliar and the visitor needs to see the path before they'll commit.

"; export function CtaWhatHappensNextChecklist() { const hostRef = useRef(null); useEffect(() => { const host = hostRef.current; if (!host) return; const $ = (s: string) => host.querySelector(s) as HTMLElement | null; let disposed = false; const cleanup: Array<() => void> = []; (async () => { if (disposed) return; try { } catch (err: any) { console.warn("[motion-menu] cta-what-happens-next-checklist failed to start:", err); } })(); return () => { disposed = true; cleanup.forEach((fn) => { try { fn(); } catch (_) {} }); }; }, []); return

; } export default CtaWhatHappensNextChecklist; 61:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L62",null,{"files":[{"path":"motion-menu/cta-what-happens-next-checklist.html","content":"$63","type":"registry:file","target":"motion-menu/cta-what-happens-next-checklist.html"},{"path":"motion-menu/cta-what-happens-next-checklist.css","content":"$64","type":"registry:file","target":"motion-menu/cta-what-happens-next-checklist.css"},{"path":"components/motion-menu/cta-what-happens-next-checklist.tsx","content":"$65","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]