From c2909b4d20d3d03acade103ef364704e0b41f9e1 Mon Sep 17 00:00:00 2001 From: marks Date: Sun, 1 Mar 2026 20:30:37 -0600 Subject: [PATCH] Redesign proof page with marketing content, flow diagram, and CTAs Add data flow diagram, privacy spectrum comparison cards, security team facts section, FAQ, contact modal with copyable fields, and AI agent introduction modal with llms-full.txt integration. --- frontend/src/routes/proof.tsx | 652 +++++++++++++++++++++++++++++++++- 1 file changed, 635 insertions(+), 17 deletions(-) diff --git a/frontend/src/routes/proof.tsx b/frontend/src/routes/proof.tsx index 4959273e..894fd0c0 100644 --- a/frontend/src/routes/proof.tsx +++ b/frontend/src/routes/proof.tsx @@ -1,10 +1,34 @@ import { createFileRoute } from "@tanstack/react-router"; -import { Loader2 } from "lucide-react"; +import { useState } from "react"; +import { + Shield, + Lock, + Eye, + EyeOff, + Server, + Cpu, + Code, + CheckCircle, + Loader2, + ArrowRight, + ArrowDown, + Copy, + Check, + Bot +} from "lucide-react"; import { useQuery } from "@tanstack/react-query"; import { ParsedAttestationView, useOpenSecret } from "@opensecret/react"; import { TopNav } from "@/components/TopNav"; import { FullPageMain } from "@/components/FullPageMain"; import { MarketingHeader } from "@/components/MarketingHeader"; +import { + Dialog, + DialogContent, + DialogHeader, + DialogTitle, + DialogDescription, + DialogTrigger +} from "@/components/ui/dialog"; function MatchIndicator({ isMatch, text = "It's a match!" }: { isMatch: boolean; text?: string }) { return ( @@ -160,6 +184,412 @@ function ProofDisplay({ ); } +const DATA_FLOW_STEPS = [ + { + icon: Lock, + title: "Encrypted on Device", + description: "Messages encrypted locally before leaving your device" + }, + { + icon: Server, + title: "Secure Enclave", + description: "Decrypted only inside a hardware-isolated enclave" + }, + { + icon: Cpu, + title: "GPU TEE", + description: "AI inference inside a trusted execution environment" + }, + { + icon: Code, + title: "Open Source", + description: "Verifiable code with reproducible builds" + } +]; + +function DataFlowDiagram() { + return ( +
+ {DATA_FLOW_STEPS.map((step, i) => ( +
+ {/* Step */} +
+
+ +
+

{step.title}

+

+ {step.description} +

+
+ {/* Arrow between steps */} + {i < DATA_FLOW_STEPS.length - 1 && ( + <> +
+ +
+
+ +
+ + )} +
+ ))} +
+ ); +} + +const CONTACT_EMAIL = "team@trymaple.ai"; +const CONTACT_SUBJECT = "Security Evaluation of Maple"; +const CONTACT_BODY = `Hi Maple team, + +I'd like to connect you with our security team to discuss Maple's architecture and security model. + +Company: +Contact: +`; + +function CopyButton({ text, label }: { text: string; label: string }) { + const [copied, setCopied] = useState(false); + + const handleCopy = async () => { + await navigator.clipboard.writeText(text); + setCopied(true); + setTimeout(() => setCopied(false), 2000); + }; + + return ( + + ); +} + +function ContactModal() { + return ( + + + + + + + + + Get in Touch + + + Send us an email to start a security review conversation. + + + +
+ {/* To field */} +
+ +
+ {CONTACT_EMAIL} + +
+
+ + {/* Subject field */} +
+ +
+ {CONTACT_SUBJECT} + +
+
+ + {/* Body field */} +
+
+ + +
+
+ 
+                {CONTACT_BODY}
+
+
+
+ + {/* Copy all */} +
+ +
+
+ + + ); +} + +function AgentModal() { + return ( + + + + + + + + + Point Your AI Agent at Maple + + + Our site is ready for AI agents with machine-readable documentation. + + + +
+ {/* Step 1 */} +
+
+ 1 +
+
+

Give your agent this URL

+
+ + https://trymaple.ai/llms-full.txt + + +
+
+
+ + {/* Step 2 */} +
+
+ 2 +
+
+

Ask it something like

+
+
+

+ "Read trymaple.ai/llms-full.txt and give me a summary of Maple's + security architecture. How does their encryption work, what are the trust + assumptions, and how does it compare to using ChatGPT or Claude directly?" +

+
+ +
+
+
+ + {/* Step 3 */} +
+
+ 3 +
+
+

+ Works with any web-capable agent +

+

+ Claude Code, 🦞 OpenClaw, Codex, OpenCode, Devin, Cursor, Droid, or any agent that + can fetch URLs. +

+
+
+
+ + + ); +} + +function ApproachCard({ + icon: Icon, + title, + bullets, + highlight = false, + badge +}: { + icon: React.ElementType; + title: string; + bullets: string[]; + highlight?: boolean; + badge?: string; +}) { + return ( +
+ {badge && ( +
+ {badge} +
+ )} +
+ +
+

{title}

+ +
+ ); +} + +function SecurityFact({ title, description }: { title: string; description: string }) { + return ( +
+ +
+ {title}: + {description} +
+
+ ); +} + +function ProofFAQ() { + return ( +
+

FAQ

+ +
+
+ + What is a Trusted Execution Environment (TEE)? + +

+ A TEE is a hardware-isolated area of a processor that runs code in a secure enclave. + Even the server operator cannot access data inside the enclave. AWS Nitro Enclaves, + which Maple uses, strip away all external access: no SSH, no admin console, no + persistent storage outside the enclave. The only way in or out is through a narrow, + measured communication channel. +

+
+ +
+ + Is this the same technology Apple uses for iCloud? + +

+ Similar concept, different implementation. Apple's Private Cloud Compute uses + custom silicon with Secure Enclave. Maple uses AWS Nitro Enclaves with + attestation-verified code. Both approaches use hardware isolation to ensure that even + the service operator cannot access user data during processing. +

+
+ +
+ + How does cross-device sync work if everything is encrypted? + +

+ Your account has its own private key derived from your credentials. Chat history is + encrypted with this key before leaving your device and stored in encrypted form on our + servers. When you log in on another device, your key is re-derived and used to decrypt + your data locally. +

+
+ +
+ + Who do I actually have to trust? + +
+

Your trust assumptions are minimal and verifiable:

+
    +
  • + Hardware: AWS Nitro hardware performs as documented (independently + audited) +
    • +
  • + Code: The open-source code running in the enclave does what it says + (you can audit it) +
    • +
  • + Attestation: The cryptographic proof on this page confirms the + running code matches the published source +
    • +
+
+
+ +
+ + Can I verify all of this myself? + +

+ Yes. Our{" "} + + server code is open source + + . The attestation document on this page is fetched live from our enclave and verified + against AWS's root certificate. You can independently reproduce the build, compare + the PCR0 hash, and confirm that the code running in production matches the published + source. +

+
+
+
+ ); +} + function Verify() { const os = useOpenSecret(); const { @@ -174,8 +604,6 @@ function Verify() { retry: false }); - console.log("Query state:", { isLoading, error, parsedDocument }); - return ( <> @@ -183,33 +611,223 @@ function Verify() { - Proof{" "} - of Security + Your AI conversations are private. +
+ + Verify it yourself. + } subtitle={

- Cryptographic proof that you're talking with a secure server. + Cryptographic verification, not just promises. Hardware-enforced privacy you can audit + yourself.

} /> - {isLoading && ( -
- + {/* Section 2: How Maple Protects Your Data (flow diagram) */} +
+
+

+ How Maple{" "} + Protects Your Data +

+

+ Four layers of protection, from your device to the AI model. +

- )} - {error && ( -
- Failed to validate attestation document:{" "} - {error instanceof Error ? error.message : "Unknown error"} + + +

+ Both our{" "} + + client + {" "} + and{" "} + + server + {" "} + code are public. Reproducible builds and attestation let you confirm what's + actually running. +

+
+ + {/* Section 3: Live Attestation */} +
+
+

+ Live{" "} + + Cryptographic Attestation + +

+

+ This attestation document is fetched live from our enclave. Verify it yourself. +

- )} - {parsedDocument && } + {isLoading && ( +
+ +
+ )} + + {error && ( +
+ Failed to validate attestation document:{" "} + {error instanceof Error ? error.message : "Unknown error"} +
+ )} + + {parsedDocument && } - {/*
*/} +

+ Our code is open source:{" "} + + Maple client + + {" and "} + + OpenSecret server + +

+
+ + {/* Section 4: The Spectrum of AI Privacy */} +
+
+

+ The Spectrum of{" "} + AI Privacy +

+

+ Not all privacy claims are created equal. Here's how the approaches compare. +

+
+ +
+ + + +
+
+ + {/* Section 5: For Your Security Team */} +
+
+

+ For Your Security Team +

+

+ Technical facts for evaluating Maple's security architecture. +

+
+ +
+
+ + + + + + +
+

+ Questions? Reach us at{" "} + + team@trymaple.ai + +

+
+ +
+ + +
+
+ + {/* Section 6: FAQ */} +
+
+

+ Frequently Asked{" "} + Questions +

+
+ +
);