From b3b737cf26cc13333d68408e65c24fec9a38ca19 Mon Sep 17 00:00:00 2001 From: Pulkit Pareek Date: Tue, 12 May 2026 17:34:33 +0530 Subject: [PATCH] Marketing site: product-led landing with dashboard CTAs and Quickstart MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Replaces the pilot-form-only navigation with the standard auth-provider pattern: Sign in + Get started in the top-right, a product-led hero that points at /dashboard/signup, and a Quickstart code-tabs block (curl / Node / Python) showing a real `/v1/users/register` + `/v1/verifications` flow. The pilot section moves down and is reframed as "Enterprise" — SOC 2, SSO, on-prem — with self-serve as the primary path. Footer expands into a four-column SaaS layout with Product / Developers / Resources / Company links plus a status pill and social row. Co-Authored-By: Claude Opus 4.7 (1M context) --- public/index.html | 594 +++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 537 insertions(+), 57 deletions(-) diff --git a/public/index.html b/public/index.html index ef9a287..fe50cb7 100644 --- a/public/index.html +++ b/public/index.html @@ -64,22 +64,39 @@ font-size: 1.125rem; font-weight: 700; letter-spacing: -0.02em; } .logo svg { width: 28px; height: 28px; } - .nav-links { display: flex; align-items: center; gap: 2rem; } - .nav-links a:not(.btn-nav) { + .nav-links { display: flex; align-items: center; gap: 1.75rem; } + .nav-center { + display: flex; align-items: center; gap: 1.75rem; + } + .nav-cta { + display: flex; align-items: center; gap: 0.5rem; + } + .nav-links a:not(.btn-nav):not(.btn-nav-ghost) { color: var(--text-secondary); text-decoration: none; font-size: 0.8125rem; font-weight: 500; transition: color 0.15s; } - .nav-links a:not(.btn-nav):hover { color: var(--text); } + .nav-links a:not(.btn-nav):not(.btn-nav-ghost):hover { color: var(--text); } .btn-nav { padding: 0.4375rem 1.125rem; background: var(--blue); color: #fff; - border: none; border-radius: 6px; + border: 1px solid var(--blue); + border-radius: 6px; font-size: 0.8125rem; font-weight: 600; cursor: pointer; text-decoration: none; - transition: background 0.15s; + transition: background 0.15s, border-color 0.15s; + } + .btn-nav:hover { background: var(--blue-dark); border-color: var(--blue-dark); color: #fff; } + .btn-nav-ghost { + padding: 0.4375rem 1rem; + background: transparent; color: var(--text); + border: 1px solid var(--border); + border-radius: 6px; + font-size: 0.8125rem; font-weight: 600; + cursor: pointer; text-decoration: none; + transition: border-color 0.15s, color 0.15s, background 0.15s; } - .btn-nav:hover { background: var(--blue-dark); color: #fff; } + .btn-nav-ghost:hover { border-color: var(--text-dim); background: var(--bg-raised); color: var(--text); } /* ------------------------------------------------------------------ */ /* LAYOUT */ @@ -391,6 +408,138 @@ font-size: 0.75rem; color: var(--text-dim); } + /* ------------------------------------------------------------------ */ + /* QUICKSTART */ + /* ------------------------------------------------------------------ */ + .quickstart-section { background: var(--bg); } + .quickstart-grid { + display: grid; + grid-template-columns: 1fr 1.4fr; + gap: 3rem; + margin-top: 2.75rem; + align-items: start; + } + .quickstart-copy h3 { + font-size: 1.0625rem; font-weight: 600; + margin-bottom: 0.5rem; letter-spacing: -0.01em; + } + .quickstart-copy p { + font-size: 0.875rem; color: var(--text-secondary); + line-height: 1.7; margin-bottom: 1.25rem; + } + .quickstart-list { list-style: none; padding: 0; } + .quickstart-list li { + display: flex; gap: 0.625rem; align-items: flex-start; + font-size: 0.8125rem; color: var(--text-secondary); + margin-bottom: 0.5rem; + } + .quickstart-list li::before { + content: ''; + width: 5px; height: 5px; + background: var(--blue); + border-radius: 50%; + margin-top: 0.5rem; + flex-shrink: 0; + } + .quickstart-actions { + display: flex; gap: 0.625rem; margin-top: 1.5rem; flex-wrap: wrap; + } + .code-card { + background: var(--bg-raised); + border: 1px solid var(--border); + border-radius: 12px; + overflow: hidden; + } + .code-tabs { + display: flex; + background: var(--bg-surface); + border-bottom: 1px solid var(--border); + padding: 0 0.5rem; + gap: 0.125rem; + align-items: center; + } + .code-tab { + padding: 0.75rem 0.875rem; + background: transparent; + border: none; border-bottom: 2px solid transparent; + color: var(--text-dim); + font-family: var(--mono); + font-size: 0.75rem; font-weight: 500; + cursor: pointer; + transition: color 0.15s, border-color 0.15s; + } + .code-tab:hover { color: var(--text-secondary); } + .code-tab.active { + color: var(--text); + border-bottom-color: var(--blue); + } + .code-copy { + margin-left: auto; + padding: 0.375rem 0.625rem; + background: transparent; + border: 1px solid var(--border); + border-radius: 6px; + color: var(--text-secondary); + font-family: var(--mono); + font-size: 0.6875rem; font-weight: 500; + cursor: pointer; + transition: all 0.15s; + } + .code-copy:hover { color: var(--text); border-color: var(--text-dim); } + .code-copy.copied { color: var(--green); border-color: var(--green-muted); } + .code-body { + padding: 1.25rem 1.5rem; + font-family: var(--mono); + font-size: 0.8125rem; + line-height: 1.75; + color: var(--text); + overflow-x: auto; + white-space: pre; + } + .code-body .cmt { color: #555770; } + .code-body .kw { color: #c792ea; } + .code-body .fn { color: var(--blue); } + .code-body .str { color: var(--green); } + .code-body .var { color: #f8b56e; } + .code-pane { display: none; } + .code-pane.active { display: block; } + + /* ------------------------------------------------------------------ */ + /* DEVELOPER FEATURES */ + /* ------------------------------------------------------------------ */ + .feature-section { background: var(--bg-raised); } + .feature-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1.25rem; + margin-top: 3rem; + } + .feature-card { + background: var(--bg-surface); + border: 1px solid var(--border); + border-radius: 12px; + padding: 1.75rem 1.5rem; + transition: border-color 0.2s, transform 0.2s; + } + .feature-card:hover { border-color: var(--blue); transform: translateY(-2px); } + .feature-icon-sm { + width: 32px; height: 32px; + background: var(--bg); + border: 1px solid var(--border); + border-radius: 8px; + display: flex; align-items: center; justify-content: center; + margin-bottom: 1rem; + } + .feature-icon-sm svg { width: 16px; height: 16px; color: var(--blue); } + .feature-card h3 { + font-size: 0.9375rem; font-weight: 600; + margin-bottom: 0.375rem; letter-spacing: -0.01em; + } + .feature-card p { + font-size: 0.8125rem; color: var(--text-secondary); + line-height: 1.65; + } + /* ------------------------------------------------------------------ */ /* PILOT FORM */ /* ------------------------------------------------------------------ */ @@ -548,27 +697,96 @@ /* FOOTER */ /* ------------------------------------------------------------------ */ footer { - padding: 2.5rem 2rem; + padding: 4rem 2rem 2.5rem; border-top: 1px solid var(--border-subtle); - text-align: center; + background: var(--bg); } .footer-inner { max-width: 1120px; margin: 0 auto; - display: flex; flex-direction: column; align-items: center; gap: 0.875rem; } - .footer-brand { + .footer-grid { + display: grid; + grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; + gap: 2.5rem; + padding-bottom: 3rem; + border-bottom: 1px solid var(--border-subtle); + } + .footer-brand-col .footer-brand { display: flex; align-items: center; gap: 0.5rem; - font-size: 0.9375rem; font-weight: 600; + font-size: 1rem; font-weight: 600; color: var(--text); + margin-bottom: 0.75rem; } - .footer-brand svg { width: 20px; height: 20px; } - .footer-links { display: flex; gap: 1.5rem; } - .footer-links a { - color: var(--text-dim); text-decoration: none; - font-size: 0.8125rem; transition: color 0.15s; + .footer-brand-col .footer-brand svg { width: 22px; height: 22px; } + .footer-tagline { + font-size: 0.8125rem; + color: var(--text-secondary); + line-height: 1.6; + max-width: 240px; + } + .footer-status { + display: inline-flex; align-items: center; gap: 0.4375rem; + margin-top: 1rem; + padding: 0.3125rem 0.6875rem; + background: var(--bg-raised); + border: 1px solid var(--border); + border-radius: 100px; + font-size: 0.75rem; + color: var(--text-secondary); + text-decoration: none; + transition: border-color 0.15s, color 0.15s; + } + .footer-status:hover { border-color: var(--text-dim); color: var(--text); } + .footer-status-dot { + width: 6px; height: 6px; + background: var(--green); border-radius: 50%; + } + .footer-col h4 { + font-size: 0.75rem; font-weight: 600; + color: var(--text); + text-transform: uppercase; + letter-spacing: 0.08em; + margin-bottom: 1rem; + } + .footer-col ul { list-style: none; padding: 0; } + .footer-col li { margin-bottom: 0.625rem; } + .footer-col a { + color: var(--text-secondary); + text-decoration: none; + font-size: 0.8125rem; + transition: color 0.15s; + } + .footer-col a:hover { color: var(--text); } + .footer-bottom { + display: flex; justify-content: space-between; align-items: center; + padding-top: 1.5rem; + flex-wrap: wrap; + gap: 1rem; + } + .footer-copy { + font-size: 0.75rem; + color: var(--text-dim); + } + .footer-social { + display: flex; gap: 0.75rem; + } + .footer-social a { + width: 32px; height: 32px; + display: inline-flex; align-items: center; justify-content: center; + color: var(--text-dim); + border: 1px solid var(--border-subtle); + border-radius: 6px; + transition: color 0.15s, border-color 0.15s; + } + .footer-social a:hover { color: var(--text); border-color: var(--text-dim); } + .footer-social svg { width: 14px; height: 14px; } + @media (max-width: 900px) { + .footer-grid { grid-template-columns: 1fr 1fr 1fr; gap: 2rem; } + .footer-brand-col { grid-column: 1 / -1; } + } + @media (max-width: 540px) { + .footer-grid { grid-template-columns: 1fr 1fr; } } - .footer-links a:hover { color: var(--text-secondary); } - .footer-copy { font-size: 0.75rem; color: var(--text-dim); } /* ------------------------------------------------------------------ */ /* SUCCESS STATES */ @@ -647,11 +865,16 @@ .metric-card { max-width: 100%; width: 100%; } .patent-grid { flex-direction: column; align-items: center; } } + @media (max-width: 820px) { + .nav-center { display: none; } + } @media (max-width: 600px) { section { padding: 5rem 1.25rem; } - .nav-links a:not(.btn-nav) { display: none; } + .nav-cta .btn-nav-ghost { display: none; } .form-card { padding: 1.5rem; } .wp-card { padding: 1.75rem; } + .quickstart-grid { grid-template-columns: 1fr; gap: 2rem; } + .feature-grid { grid-template-columns: 1fr; } } /* ------------------------------------------------------------------ */ @@ -673,7 +896,7 @@ @@ -696,17 +924,22 @@
+
+ + Auth API for developers · v1 live on zeroauth.dev +

- The Only Enterprise Authentication Where A Breach Exposes Nothing.
- Because There Is Nothing To Steal. + Authentication where a breach exposes nothing.
+ Drop-in API. Zero-knowledge proofs.

- ZeroAuth replaces stored credentials with zero-knowledge proofs. No passwords in your database. No secrets on the wire. Mathematically impossible to breach. + ZeroAuth is an auth API that replaces stored credentials with zero-knowledge proofs. + Ship signup, login, and device attestation in minutes — with no passwords in your database and no secrets on the wire.

- Get Started - Watch Live Demo - Request Pilot Access + Start building free + Read the docs + Live demo
@@ -725,6 +958,155 @@

+ +
+
+
Quickstart
+

Up and running in five lines.

+

+ Spin up a tenant from the dashboard, grab an API key, and start issuing zero-knowledge proofs from any backend. +

+
+
+

1. Get an API key

+

+ Sign up to create a tenant. You’ll get a za_test_… key for development and a separate za_live_… key for production. +

+

2. Register a user

+

+ POST a commitment from the client SDK. ZeroAuth stores the commitment — never the underlying secret. +

+

3. Verify the proof

+

+ On every login, send the Groth16 proof to /v1/verifications. Get back a verified principal in <100 ms. +

+
+ Create free account + Quickstart guide +
+
+
+
+ + + + +
+ 
# 1. Register a user with a commitment
+curl -X POST https://api.zeroauth.dev/v1/users/register \
+  -H "Authorization: Bearer $ZEROAUTH_API_KEY" \
+  -H "Content-Type: application/json" \
+  -d '{
+    "external_id": "user_42",
+    "commitment": "0x1f3c…"
+  }'
+
+# 2. Verify a Groth16 proof at login
+curl -X POST https://api.zeroauth.dev/v1/verifications \
+  -H "Authorization: Bearer $ZEROAUTH_API_KEY" \
+  -H "Content-Type: application/json" \
+  -d '{
+    "external_id": "user_42",
+    "proof": { "a": [...], "b": [...], "c": [...] },
+    "public_signals": ["0x1f3c…"]
+  }'
+ 
import { ZeroAuth } from '@zeroauth/sdk';
+
+const za = new ZeroAuth({ apiKey: process.env.ZEROAUTH_API_KEY });
+
+// 1. Register a user from your backend
+await za.users.register({
+  externalId: 'user_42',
+  commitment,                       // from client SDK
+});
+
+// 2. Verify a proof on login
+const { verified, principal } = await za.verifications.create({
+  externalId: 'user_42',
+  proof,
+  publicSignals,
+});
+
+if (verified) issueSession(principal);
+ 
from zeroauth import ZeroAuth
+
+za = ZeroAuth(api_key=os.environ["ZEROAUTH_API_KEY"])
+
+# 1. Register a user
+za.users.register(
+    external_id="user_42",
+    commitment=commitment,
+)
+
+# 2. Verify a proof
+result = za.verifications.create(
+    external_id="user_42",
+    proof=proof,
+    public_signals=public_signals,
+)
+
+if result.verified:
+    issue_session(result.principal)
+
+
+
+
+ + +
+
+
Built for developers
+

Everything you expect from a modern auth API.

+

+ A typed REST API, a developer console, granular audit logs, and a separation between live and test environments — so you can ship without flying blind. +

+
+
+
+ +
+

REST & SDKs

+

A typed REST API with first-party SDKs for Node and Python. Predictable error codes and idempotent writes.

+
+
+
+ +
+

Live + Test keys

+

Two isolated environments per tenant. Mint, rotate, and revoke za_live_ / za_test_ keys from the dashboard.

+
+
+
+ +
+

Audit log

+

Every signup, verification, key rotation, and device event — searchable, exportable, and tamper-evident.

+
+
+
+ +
+

Devices & attestation

+

Register hardware devices, attach battery + location telemetry, and tie verifications back to a specific endpoint.

+
+
+
+ +
+

Verify in <100 ms

+

Groth16 verification on a single core. Run it inside our API or self-host the verifier — the math is the same.

+
+
+
+ +
+

Open source

+

API, dashboard, circuits, and docs are all on GitHub. Audit it. Self-host it. Fork it.

+
+
+
+
+
@@ -900,13 +1282,13 @@

Patent-Protected Technology

- +
-
Get Started
-

Request Pilot Access

+
Enterprise
+

Need SOC 2, SSO, or a private deployment?

- We work directly with your security team to deploy ZeroAuth in your environment. No rip-and-replace required. + Self-serve gets you to production for most workloads. For regulated industries or on-prem requirements, our team works directly with your security org — no rip-and-replace required.

@@ -949,8 +1331,8 @@

Mathematically Proven

-

Start Your Pilot

-

We will reach out within one business day to schedule a technical walkthrough.

+

Talk to our team

+

For SOC 2, SSO, on-prem, or pilot deployments. We’ll reach out within one business day.

@@ -975,9 +1357,9 @@

Start Your Pilot

- +
-

No credit card required. Free 30-day pilot.

+

For self-serve: create an account →

@@ -1029,23 +1411,81 @@

ZeroAuth: Zero-Knowledge Authentication for the Enterprise

@@ -1086,6 +1526,46 @@

ZeroAuth: Zero-Knowledge Authentication for the Enterprise

const heroMetrics = document.querySelector('.hero-metrics'); if (heroMetrics) metricObserver.observe(heroMetrics); + // Quickstart: tab switching + copy-to-clipboard + (function () { + const card = document.querySelector('.code-card'); + if (!card) return; + + const tabs = card.querySelectorAll('.code-tab'); + const panes = card.querySelectorAll('.code-pane'); + const copyBtn = card.querySelector('.code-copy'); + + function activate(name) { + tabs.forEach((t) => t.classList.toggle('active', t.dataset.tab === name)); + panes.forEach((p) => p.classList.toggle('active', p.dataset.pane === name)); + if (copyBtn) copyBtn.dataset.copy = name; + } + + tabs.forEach((tab) => { + tab.addEventListener('click', () => activate(tab.dataset.tab)); + }); + + if (copyBtn) { + copyBtn.addEventListener('click', async () => { + const which = copyBtn.dataset.copy || 'curl'; + const pane = card.querySelector('.code-pane[data-pane="' + which + '"] .code-body'); + if (!pane) return; + try { + await navigator.clipboard.writeText(pane.innerText); + const original = copyBtn.textContent; + copyBtn.textContent = 'Copied'; + copyBtn.classList.add('copied'); + setTimeout(() => { + copyBtn.textContent = original; + copyBtn.classList.remove('copied'); + }, 1400); + } catch (_) { + // Clipboard unavailable (insecure context, etc.) — silently no-op. + } + }); + } + })(); + // Pilot form document.getElementById('pilotForm')?.addEventListener('submit', handlePilotSubmit); document.getElementById('wpForm')?.addEventListener('submit', handleWpSubmit); @@ -1117,7 +1597,7 @@

ZeroAuth: Zero-Knowledge Authentication for the Enterprise

document.getElementById('pilotSuccess').classList.add('show'); } catch (err) { btn.disabled = false; - btn.textContent = 'Request Pilot Access'; + btn.textContent = 'Contact sales'; alert(err.message); } }