zk402 Landing Page

Landing page for zk402 - Privacy-preserving HTTP payments with zero-knowledge proofs.

Overview

Modern Next.js landing page that explains zk402 to developers. The page highlights:

• Zero-knowledge privacy for HTTP payments
• Single round-trip request architecture
• No user accounts or KYC databases
• Integration with the Everything Protocol

Tech Stack

• Next.js 15 - React framework with App Router
• TypeScript - Type-safe development
• Tailwind CSS - Utility-first styling with custom web3 theme
• Static Export - No server required

Getting Started

Install Dependencies

npm install

Development Server

npm run dev

Open http://localhost:3000 to view the site.

Build for Production

npm run build

This generates a static export in the out/ directory that can be deployed anywhere.

Deployment

Deploy to any static hosting service:

• Vercel: vercel --prod
• Netlify: Drag and drop the out/ folder
• GitHub Pages: Copy out/ contents to gh-pages branch
• Cloudflare Pages: Connect your repo

Project Structure

├── app/
│   ├── layout.tsx       # Root layout with metadata
│   ├── page.tsx         # Home page composition
│   └── globals.css      # Tailwind directives
├── components/
│   ├── Header.tsx       # Navigation header
│   ├── Hero.tsx         # Hero section
│   ├── Features.tsx     # Feature cards
│   ├── HowItWorks.tsx   # Step-by-step guide
│   ├── CodeExample.tsx  # Code snippet showcase
│   ├── UseCases.tsx     # Use case grid
│   ├── CTAFooter.tsx    # Call-to-action section
│   └── Footer.tsx       # Footer with attribution
├── tailwind.config.ts   # Tailwind theme customization
└── next.config.ts       # Next.js configuration

Customization

Colors

Edit tailwind.config.ts to customize the color scheme:

colors: {
  bg: {
    primary: '#0a0a0f',    // Main background
    secondary: '#141419',   // Secondary background
    card: '#1a1a24',       // Card backgrounds
  },
  accent: {
    primary: '#00ffaa',     // Primary accent (cyan-green)
    secondary: '#00ccff',   // Secondary accent (blue)
  },
}

Content

All content is in the components/ directory. Each section is a separate component for easy editing.

License

MIT