Decentralized VPN powered by the x402 protocol. Earn USDC by running light nodes. Built on Polygon/Base.
X4PN is the first decentralized VPN where users earn real USDC by sharing bandwidth through light nodes. This repository contains the waitlist website and marketing pages featuring a retro pixel-art Web3 aesthetic with Framer Motion animations.
Live site: x4pn.xyz
| Layer | Technology |
|---|---|
| Framework | Next.js 16 (App Router, React 19) |
| Styling | Tailwind CSS v4, custom pixel-art design system |
| Animations | Framer Motion 12 |
| UI Components | shadcn/ui (Radix primitives) |
| Forms | React Hook Form + Zod validation |
| Fonts | Press Start 2P, Pixelify Sans, Space Mono, JetBrains Mono |
| Deployment | Vercel |
| Analytics | Vercel Analytics |
| Route | Description |
|---|---|
/ |
Landing page -- hero, problem/solution, how-it-works, benefits, waitlist form, FAQ |
/docs |
Technical documentation -- architecture, payments, security, API reference |
/roadmap |
Project timeline with milestones and progress tracking |
/about |
Team, mission, values, and investor information |
app/
layout.tsx # Root layout -- fonts, metadata, JSON-LD structured data
page.tsx # Home / landing page
globals.css # Design tokens, pixel utilities, custom animations
api/
waitlist/
route.ts # POST: join waitlist / GET: current count
docs/
page.tsx # Documentation page
roadmap/
page.tsx # Roadmap timeline page
about/
page.tsx # About / team page
components/
header.tsx # Sticky nav with page links + animated join CTA
hero.tsx # Hero section -- stats, trust bar, CTAs
problem-statement.tsx # VPN industry pain points
solution.tsx # X4PN feature highlights
how-it-works.tsx # 3-step onboarding flow
early-adopter-benefits.tsx # Waitlist perks
waitlist-form.tsx # Email + wallet waitlist form with validation
faq.tsx # Accordion FAQ section
footer.tsx # Site footer with links and socials
join-modal.tsx # Animated multi-step join popup (Framer Motion)
live-counter.tsx # Real-time waitlist counter
Minimal pixel-art Web3 aesthetic.
| Token | Value | Usage |
|---|---|---|
| Black | #000000 |
Background |
| Cyan | #00FFFF |
Primary accent, CTAs |
| Green | #00FF00 |
Secondary accent, stats |
| White | #FFFFFF |
Text, borders |
| Grays | #0A0A0A -- #CCCCCC |
Cards, muted text |
| Font | Purpose |
|---|---|
| Press Start 2P | Headings, buttons, badges |
| Pixelify Sans | Body text, descriptions |
| Space Mono | Stats, numbers, terminal output |
| JetBrains Mono | Code blocks, technical content |
| Class | Description |
|---|---|
.pixel-btn |
Primary CTA button |
.pixel-btn-outline |
Outlined variant |
.pixel-border |
Cyan border + 4px box shadow |
.pixel-card |
Dark card with border |
.text-cyan |
Cyan accent text |
.text-green |
Green accent text |
.grid-bg |
Grid pattern background |
.scanlines |
CRT scanline overlay |
.cursor-blink |
Terminal cursor animation |
Submit a new waitlist entry.
Request:
{
"email": "user@example.com",
"walletAddress": "0x1234...abcd",
"referralCode": "OPTIONAL_REF"
}Response (200):
{
"success": true,
"waitlistPosition": 5128,
"referralLink": "https://x4pn.io/?ref=ABC12345"
}Errors:
| Status | Reason |
|---|---|
| 400 | Invalid email or wallet address |
| 409 | Duplicate email or wallet |
| 500 | Internal server error |
Returns the current waitlist count. Cached for 60 seconds.
{
"count": 5247
}The current API uses in-memory storage for demo purposes. Connect a database (Supabase, Neon, etc.) for production.
- Node.js 18+
- pnpm (recommended) or npm
pnpm installpnpm devOpen http://localhost:3000.
pnpm build
pnpm start| Variable | Description | Default |
|---|---|---|
NEXT_PUBLIC_BASE_URL |
Site URL for referral links | https://x4pn.io |
Push to the connected Git branch and Vercel deploys automatically. You can also continue building at v0.app/chat/p6qKjLGmrJv -- changes sync to this repository.
- Open Graph and Twitter Card metadata
- JSON-LD structured data (
WebApplicationschema) - Keyword-optimized meta tags for decentralized VPN, DePIN, Web3
- Robots configuration for search engine indexing
- Skip-to-content link for accessibility
Proprietary. All rights reserved by X4PN / ShahiTechnovation.