/* ========================================================= Section 8 — Quickstart. Fork, install, deploy. Three steps. ========================================================= */ const QUICKSTART_STEPS = [ { n: "01", title: "Install the skill", note: "A Claude skill packaged with the Kit. The docs walk through the install.", mode: "link", code: "https://docs.aztec.network/escrow-kit/install-skill", }, { n: "02", title: "Describe the escrow", note: "In Claude, run the skill on a use-case sentence. You get phase definitions, transition triggers, and an Aztec.nr project to edit.", mode: "prompt", code: "Design a private bug-bounty escrow that\nreleases when a maintainer's GitHub merges\nthe fix PR", }, { n: "03", title: "Deploy from Claude", note: "Ask Claude to deploy the project to Aztec. The skill knows the toolchain.", mode: "prompt", code: "Deploy this project to Aztec", docsLink: { label: "or deploy manually →", href: "https://docs.aztec.network/developers/getting_started_on_testnet#step-4-deploy-a-contract", }, }, ]; function CopyableLine({ children, mode = "shell" }) { const [copied, setCopied] = useState(false); const onCopy = () => { if (!navigator.clipboard) return; navigator.clipboard.writeText(children).then(() => { setCopied(true); setTimeout(() => setCopied(false), 1400); }); }; const isPrompt = mode === "prompt"; const isLink = mode === "link"; if (isLink) { return ( → {children} Open ); } return ( 
        
          {isPrompt ? ">" : "$"}
        
        {children}
); } function QuickstartSection({ asSubsection = false }) { const Wrapper = asSubsection ? "div" : "section"; const wrapperProps = asSubsection ? { style: { padding: "56px 0 24px" } } : { id: "quickstart", "data-screen-label": "Quickstart", style: { background: "var(--az-parchment)", padding: "120px 40px", borderTop: "1px solid rgba(26,20,0,0.12)", }, }; const innerStyle = asSubsection ? {} : { maxWidth: 1280, margin: "0 auto" }; return (
{QUICKSTART_STEPS.map((s, i) => (
{s.n} {s.mode === "prompt" && ( Claude prompt )}

{s.title}

{s.note}

{s.docsLink && ( {s.docsLink.label} )}
{s.code}
))}
); } /* ========================================================= Section 9 — What you can build. Quiet 9-card grid, one line + short paragraph. ========================================================= */ const USE_CASES = [ { t: "Bug-bounty escrow", b: "Release on a zkTLS proof that the maintainer's PR landed and the issue is closed." }, { t: "Freelance milestone escrow", b: "Release on verified delivery: signed acceptance, signed Git commit, posted artifact." }, { t: "Subscription with refund-on-failure", b: "Release tranches when uptime feeds verify service-level guarantees." }, { t: "Private prediction settlement", b: "Release on a verified outcome from a trusted feed; the order book stays private until resolution." }, { t: "Coordination games", b: "Funded commitments that release when a group hits a verifiable threshold off-chain." }, { t: "Conditional grants", b: "Release tranches on verified milestones: preprint posted, repo MIT-licensed, AZIP merged." }, ]; function UseCasesSection({ asSubsection = false, dark = false, featuredIdx = -1 }) { const Wrapper = asSubsection ? "div" : "section"; const wrapperProps = asSubsection ? { style: { padding: "8px 0 24px" } } : { id: "use-cases", "data-screen-label": "What you can build", style: { background: "var(--az-parchment-2)", padding: "120px 40px", borderTop: "1px solid rgba(26,20,0,0.12)", }, }; const innerStyle = asSubsection ? {} : { maxWidth: 1280, margin: "0 auto" }; return (
{USE_CASES.map((u, i) => ( ))}
); } function UseCard({ u, idx, total, dark = false, featured = false }) { const col = idx % 3; const row = Math.floor(idx / 3); const lastRow = Math.ceil(total / 3) - 1; const borderColor = dark ? "rgba(242,238,225,0.18)" : "var(--az-ink)"; const bg = featured ? "var(--az-chartreuse-tint)" : "var(--az-parchment)"; return (
{String(idx + 1).padStart(2, "0")}

{u.t}

{u.b}

); } /* ========================================================= Section 10 — FAQ. ========================================================= */ const FAQ_ITEMS = [ { q: "Why Aztec, not an EVM L2?", a: "Aztec extends Ethereum with native private state. EVM L2s expose every transition publicly; a private escrow on a transparent rollup is private only at the application layer, which leaks every change in account balance. On Aztec the encrypted state tree is the default; selective disclosure is opt-in.", }, { q: "What does zkTLS actually prove?", a: "Primus zkTLS proves the content of an HTTPS response without revealing the session key. The verifier on-chain accepts a proof that says, in effect, this URL, signed by this TLS cert, returned this byte range. Useful for verifying off-chain state without trusting a single oracle operator.", }, { q: "What happens if the trigger never fires?", a: "Every phase has an exit. The Kit's reference flows pair the primary trigger with a TimeLock fallback (48h in BAZaar), so funds either release on the verified fact or refund on the deadline. Your fork can compose other fallbacks: arbiter signature, partial refund, escalation to a second proof type.", }, { q: "Can I use signatures or oracles instead of zkTLS?", a: "Yes. The Kit doesn't bind to a trigger type. The TriggerCardRow on this page shows the supported families today: zkTLS, signature, oracle, time lock, on-chain event. Add your own by implementing the trigger interface.", }, { q: "Does the skill write the smart contract?", a: "Yes. From a use-case sentence, the skill produces an Aztec.nr implementation of the escrow you described, with the phases and triggers from your prompt wired into the contract. Treat the output as the basis to work from: the application logic, the trigger predicates, and the privacy decisions are yours to refine before deploying.", }, { q: "Is BAZaar audited?", a: "No. BAZaar is a best-effort proof of concept and will not be audited. It's labeled as such in the app and the repo. Don't lock funds you can't afford to lose. The Kit itself goes through its own review track; BAZaar is the demo.", }, ]; function FAQSection() { const [open, setOpen] = useState(0); return (
    {FAQ_ITEMS.map((it, i) => { const isOpen = open === i; return (

  • {it.a}

    • ); })}
); } /* ========================================================= Section 11 — Footer CTA. ========================================================= */ function FooterCTASection() { return ( ); } window.QuickstartSection = QuickstartSection; window.UseCasesSection = UseCasesSection; window.FAQSection = FAQSection; window.FooterCTASection = FooterCTASection;