<div class="section-head"><div class="eyebrow">Capabilities</div><h2>Native on every screen <em>you already carry.</em></h2><p class="lede">Approvals on iPhone. Tap-to-auth via NFC. Lock-screen actions on Apple Watch. The same identity, one tap away on any device.</p></div>
<div class="bento">
<div class="tile col-3 tall"><div class="tile-tag">Push approvals</div><h3>Approve or deny <em>in one tap.</em></h3><p>Every login, OAuth grant, and sensitive action triggers a real-time approval.</p><div class="approval-stack">${['GitHub OAuth|repo:read - 2 min ago|approved|ok','CLI login - MacBook Pro|Berlin - just now|pending|accent','Unknown device|Lagos - 1 hr ago|denied|error','NFC tap - door 4F|HQ - 12 min ago|approved|ok'].map((rowArg)=>{constrow=rowArg.split('|');returnhtml`<div class="approval-row"><div class="avatar">${row[0].slice(0,2).toUpperCase()}</div><div><strong>${row[0]}</strong><span class="meta">${row[1]}</span></div><idp-badge variant=${row[3]asany}>${row[2]}</idp-badge></div>`;})}</div></div>
<div class="tile col-3"><div class="tile-tag">NFC tap-to-auth</div><h3>Tap to <em>authenticate.</em></h3><p>Hold your phone to any compatible reader. Identity token exchanges in under a second.</p><div class="identity-card"><h3>Alex Mercer</h3><div class="mono">@alexmercer - Personal</div><div class="chip"></div><div class="mono">did:idp:0x4a3f...c819</div></div></div>
<div class="tile col-3"><div class="tile-tag">Four platforms</div><h3>iPhone, Watch, iPad, Mac.</h3><p>Every device you carry is a trusted authenticator.</p><div class="devices-row">${[
<div class="tile col-2"><div class="tile-tag">Average approval</div><h3>Sub-second auth.</h3><p>Push delivery, biometric prompt, and signed response under a second.</p><div class="metric">0.8<span>sec</span></div></div>
<div class="tile col-2"><div class="tile-tag">Audit-grade</div><h3>Every action, <em>on the record.</em></h3><p>Tamper-evident audit trail per identity and organization.</p></div>
<div class="tile col-2"><div class="tile-tag">Recovery</div><h3>Lose a phone? Not your identity.</h3><p>Multi-device recovery or social-recovery quorum. No vendor lockout.</p></div>
</div>
</div>
</section>
`;
}
privaterenderChain() {
returnhtml`
<section class="section alt" id="chain"><div class="wrap"><div class="section-head"><div class="eyebrow">Cardano-anchored</div><h2>Your identity outlives <em>any single server.</em></h2><p class="lede">Every identity is anchored to the Cardano mainnet, independently verifiable and recoverable.</p></div><div class="chain-grid"><div class="chain-steps">${[['01 / 03','Immutable record','Your identity hash is written to Cardano at creation and on every key rotation.'],['02 / 03','Synced on every change','Profile updates, device additions, and revocations are anchored to the chain.'],['03 / 03','Independently verifiable','Any compatible resolver can verify your identity directly against the public ledger.']].map((stepArg)=>html`<div class="chain-step"><div>${stepArg[0]}</div><section><h3>${stepArg[1]}</h3><p>${stepArg[2]}</p></section></div>`)}</div><div class="chain-panel"><div class="chain-head"><span>Cardano mainnet</span><idp-badge variant="accent">live</idp-badge></div>${['#9 841 220','#9 841 221','#9 841 222','#9 841 223'].map((blockArg,indexArg)=>html`<div class="chain-block ${indexArg===1||indexArg===2?'idp':''}"><span>${blockArg}</span><span>${indexArg===1?'did:idp:0x4a3f...c819':indexArg===2?'did:idp:0x9b12...f034':'confirmed block'}</span><strong>${indexArg===1||indexArg===2?'idp.global':'confirmed'}</strong></div>`)}</div></div></div></section>
`;
}
privaterenderPricing() {
consttiers=[
['Personal','For one person.','$0',['One portable identity','Push approval on devices','NFC tap-to-authenticate','Anchored on Cardano'],'Claim your identity'],
['Family & Org','For teams under 1,000.','$0',['Multi-member organization','Role-based access control','Shared OAuth client registry','Full audit trail'],'Start an organization'],
['Enterprise','Above $1M ARR.','Fair',['Self-hosted and air-gap deployable','Compliance and audit support','Global admin across orgs','Priority SLA'],'Talk to us'],
];
returnhtml`<section class="section" id="pricing"><div class="wrap"><div class="section-head"><div class="eyebrow">Pricing</div><h2>The same identity, <em>at every scale.</em></h2><p class="lede">Free for the first thousand users. Fair contribution above that. No hard paywalls.</p></div><div class="tiers">${tiers.map((tierArg,indexArg)=>html`<div class="tier ${indexArg===1?'featured':''}"><div class="tier-name">${tierArg[0]}</div><h3>${tierArg[1]}</h3><div class="price">${tierArg[2]}</div><ul>${(tierArg[3]asstring[]).map((itemArg)=>html`<li>${itemArg}</li>`)}</ul><idp-button variant=${indexArg===1?'accent':'ghost'}>${tierArg[4]}</idp-button></div>`)}</div></div></section>`;
}
privaterenderDevelopers() {
returnhtml`
<section class="section alt" id="developers"><div class="wrap dev-grid"><div class="dev-text"><div class="eyebrow">For developers</div><h2>No black boxes <em>in your identity stack.</em></h2><p>idp.global is fully open source and MIT licensed. Read the cryptography. Verify the Cardano sync. Run it on your own metal.</p><div class="tags">${['MIT licensed','OAuth 2 / OIDC','Self-hostable','Air-gappable','Cardano native','SOC 2'].map((tagArg)=>html`<span>${tagArg}</span>`)}</div><idp-button variant="accent">View source</idp-button></div><div class="terminal"><div class="term-bar"><span class="tdot red"></span><span class="tdot yellow"></span><span class="tdot green"></span></div><pre><code>$ idp identity create
OK Identity created - did:idp:0x4a3f...c819
OK Confirmed on-chain - permanent
$ idp login github.com
OK Push sent - iPhone 15 Pro
OK Approved - Watch - 0.8s</code></pre></div></div></section>
`;
}
publicrender():TemplateResult{
returnhtml`
<div class="page">
${this.renderNav()}
<idp-landing-hero></idp-landing-hero>
<section class="proof"><div class="wrap"><div class="proof-label">Built for identity at every scale</div><div class="proof-row">${['Open Source','Self-hostable','Cardano anchored','OIDC ready','Passkey first','Free for everyone'].map((nameArg)=>html`<div class="proof-name">${nameArg}</div>`)}</div></div></section>
<section class="manifesto"><div class="wrap"><div class="eyebrow">Why we built this</div><q>Identity should not be a product the user is sold.<br/>It should be a permanent <em>fact</em>, owned by the person it describes.</q></div></section>
<section class="cta"><div class="wrap"><h2>Claim your identity.<br/><em>Free, forever.</em></h2><p>Sixty seconds to claim, anchored to Cardano on submission. No credit card. No vendor lock-in.</p><idp-button variant="accent" size="lg">Claim your identity</idp-button></div></section>
