Landing Page

The public landing page at /portal showcases the platform's capabilities and converts visitors to registered developers.

Page Sections

1. Hero Section

Purpose: Primary value proposition

Content:

• Headline: "Add identity verification in 15 lines of code"
• SDK install command badge: npm install @trustgate/react-sdk
• Subtitle describing document capture, liveness, and face matching
• CTAs: "Get Started Free" and "Quickstart"

File: PortalLanding.jsx lines 246-269

2. SDK Code Preview

Purpose: Show integration simplicity

Content:

• Mock code editor with VerifyPage.tsx filename
• 15-line React component example using <VerificationFlow>
• Feature badges: Document capture, Selfie + face match, Liveness detection, White-label theming

File: PortalLanding.jsx lines 271-313

3. Industry Use Cases

Purpose: Show industry-specific solutions

Content: 6 template cards

Template	Description	Steps
Fintech KYC	Banking, lending, payments	Document OCR, Identity Match, Sanctions Screening
Crypto Onramp	Regulatory-compliant crypto	Face Liveness, Document OCR, AML Screening
Gaming Age Gate	Age verification, payouts	Age Estimate, Identity Match
Marketplace Seller	Seller verification	Document OCR, Face Match, Risk Summary
Healthcare Patient ID	Patient identity	Document OCR, Face Match
HR Right-to-Work	Employment eligibility	Document OCR, Identity Match, Address Verify
Gov E-Signature	Identity-verified government e-signatures	Document OCR, Face Match, Liveness, Risk Summary

Behavior: Clicking "Try Flow" navigates to /portal/explorer?template={id}

Data Source:

• Primary: useTemplates() hook fetching from /api/v1/templates
• Fallback: FALLBACK_TEMPLATES constant

File: PortalLanding.jsx lines 315-383

4. Pricing Section

Purpose: Transparent pricing display

Components:

Volume Slider

• Range: 0 to 200k+ monthly calls
• Displays current volume and applicable discount tier
• Updates pricing display in real-time

Free Features List

• Fetched from /api/v1/pricing endpoint
• Shows features included at no cost (e.g., ID Verification, NFC Verification)

Paid Features List

• Per-call pricing for premium add-ons
• Prices adjust based on volume slider (discount applied)
• Original and discounted prices shown when applicable

Volume Discount Tiers

• Visual tier cards showing discount percentages
• Active tier highlighted based on slider position

Data Source: usePricing() hook

File: PortalLanding.jsx lines 385-517

5. How It Works

Purpose: Three-step integration overview

Step	Title	Description
1	Install the SDK	npm install command
2	Add 15 lines of code	Drop in component, handle callback
3	Go live	Get API key, add billing, start verifying

File: PortalLanding.jsx lines 519-538

6. CTA Banner

Purpose: Final conversion prompt

Content:

• Headline: "Start building for free"
• Subtitle: "No setup fees. No contracts. No monthly minimums."
• CTA button to signup

File: PortalLanding.jsx lines 540-550

7. Footer

Purpose: Navigation and company info

Columns:

• Product: Explorer, Quickstart, API Docs (external link)
• SDKs: React SDK, Python SDK (GitHub links)
• Company: About, Contact, Security (placeholder links)

File: PortalLanding.jsx lines 552-585

Styling

CSS File: portal.css

Key Classes:

• .portal-landing - Page wrapper
• .portal-hero - Hero section with gradient text
• .portal-section - Standard section (max-width: 1280px, centered)
• .portal-section-dark - Full-width dark background section
• .portal-template-card - Industry use case cards
• .portal-pricing-table - Pricing display (max-width: 900px)
• .portal-volume-slider - Interactive slider component

Theme Support

The landing page supports light/dark mode:

• Toggle in header (Sun/Moon icon)
• Persisted to localStorage as portal-theme
• Default: System preference via prefers-color-scheme

Data Hooks Used

Hook	Purpose
useTemplates()	Fetch industry templates
usePricing()	Fetch pricing structure
useTheme()	Local theme management