// The structured brief for Claude Code / Cursor / any chat that scaffolds a project.
// Lives here (in Nav, loaded on every page) so any surface — top-right CTA, inline
// callouts in the playbook — can reference window.BOOTH_BUILD_PROMPT and copy it.
const BUILD_PROMPT = `Build a conference booth gamification web app.
Visitors land on the app from a QR poster at the booth. First screen: "Who are you playing with?" — they pick a staff member from a list of who's on shift (photo + name). From that pick on, every quest they complete is silently attributed to that staff member.
The quest tree, in order:
1. play_game — a 30-second mini-game (spin the wheel or 1v1 trivia with the staff member). +50 pts, unlocks Tier 1.
2. save_vcard — one-tap download of the chosen staff member's .vcf contact. +100 pts.
3. follow_instagram (or LinkedIn / X) — verified via OAuth. +100 pts.
4. booth_selfie — visitor uploads a selfie with the staff member, photo verified. +200 pts, unlocks Tier 2.
5. ig_story_post — visitor posts the selfie as an Instagram Story tagging the company. Verified via Instagram Graph API after OAuth. +400 pts.
6. feed_post — visitor posts the selfie to their LinkedIn or IG feed, tagging. +600 pts.
7. mascot_selfie_story — visitor finds the roaming mascot on the conference floor, posts a selfie with them to their Instagram Story. Photo + post verified. +1000 pts, unlocks Tier 3.
Tier rewards (configurable per booth):
- Tier 1: sticker, pen, branded notebook
- Tier 2: t-shirt, tote bag, branded socks
- Tier 3: 15-minute founder Zoom, year of the product on the house, VIP after-party pass — i.e. ACCESS, not consumer electronics
Three surfaces, all the same app, role-detected:
1. Visitor PWA — single-page mobile-first. Big buttons. Live point counter. Quest list with checkmarks. Tier ribbon at the top showing how close they are to the next unlock.
2. Staff dashboard — for the team. Their personal rank, plays today, attributed leads, conversion percentage. They open it between visitors. No QR codes — attribution comes from the visitor's pick on the visitor side.
3. Admin TV view — castable to a screen behind the booth. Live staff leaderboard, mascot status (last Story posted X minutes ago), top quests, Tier 3 claims today, total pipeline.
Data model: tables for staff, visitors, quests (tree), completions (visitor_id, staff_id, quest_id, verified_at, points). Tier unlocks via a "sum of completed-quest points crosses a threshold" rule, configurable per booth.
Integrations:
- Instagram Basic Display + Graph API (verify follow, fetch recent stories/posts to confirm tag)
- LinkedIn OAuth (verify follow + feed post)
- vCard download (per-staff .vcf)
- Photo verification via an LLM vision call ("does this photo contain two people, one wearing the [mascot] suit?")
- CRM export endpoint that emits attributed leads with quest progression
Brand: clean, calm, B2B. No emoji. Olive newsprint neutrals, Instrument Serif for headlines, Geist for everything else, squircle buttons, no shadows.
Build it as a Next.js app with a Postgres database. Start with the schema, the quest engine, and the visitor PWA. Then the staff dashboard. Then the admin TV view. Then the integrations one verifier at a time.`;
window.BOOTH_BUILD_PROMPT = BUILD_PROMPT;
function CopyPromptButton({ className = 'btn btn-primary', label = 'Copy for agent' }) {
const [copied, setCopied] = React.useState(false);
const handleCopy = async () => {
try {
if (navigator.clipboard && navigator.clipboard.writeText) {
await navigator.clipboard.writeText(BUILD_PROMPT);
} else {
const ta = document.createElement('textarea');
ta.value = BUILD_PROMPT;
ta.style.position = 'fixed'; ta.style.opacity = '0'; ta.style.pointerEvents = 'none';
document.body.appendChild(ta);
ta.select();
document.execCommand('copy');
document.body.removeChild(ta);
}
setCopied(true);
setTimeout(() => setCopied(false), 2000);
} catch (e) {}
};
return (
);
}
window.CopyPromptButton = CopyPromptButton;
function Nav() {
return (
