vela-web

Public landing page for VelaPay at velapay.io.

Purpose and Role

• External product narrative and value proposition.
• Positioning and conversion surface for potential merchants and developers.
• Likely first stop for developers and merchants before navigating to docs or app entry.
• Developer CTAs with code snippets showing SDK usage.
• Privacy-friendly analytics (Cloudflare Web Analytics — no cookies).

Tech Stack

Technology	Version	Purpose
Astro	6.1.x	Static site framework — zero JS by default
Tailwind CSS	4.2.x	Styling (CSS-first config)
React	19.x	Interactive islands (pricing toggle, wallet connect)
@astrojs/cloudflare	latest	CF adapter for Workers deployment
wrangler	4.78.x	Cloudflare CLI for deployment
Cloudflare Web Analytics	—	Privacy-friendly analytics (no cookies, GDPR-compliant)

Directory Structure

vela-web/
├── src/
│   ├── pages/                 # Astro pages
│   │   ├── index.astro        # Home page
│   │   ├── pricing.astro      # Pricing page
│   │   └── ...
│   ├── components/            # Astro + React components
│   │   ├── Hero.astro
│   │   ├── Features.astro
│   │   ├── CodeSnippet.astro  # SDK usage examples
│   │   ├── PricingToggle.tsx  # React island (interactive)
│   │   └── Footer.astro
│   ├── layouts/               # Page layouts
│   └── styles/                # Global styles, Tailwind config
├── public/                    # Static assets
├── astro.config.mjs           # Astro configuration
├── tailwind.css               # Tailwind CSS-first config
└── package.json

Deployment Target

• Cloudflare Workers: Static assets served from edge (free static assets on Workers).
• Domain: velapay.io.

Dependencies

What It Depends On

None. The landing page has no protocol dependency — it's purely informational.

What Depends on It

Nothing. The landing page is a terminal consumer with no downstream dependents.

Current Status

• v1.0 complete: Landing page with value proposition, code snippets, developer CTAs.
• Static content: No server-side rendering needed. Astro generates static HTML at build time.
• Minimal JavaScript: Only interactive islands (pricing toggle) load client-side React.

Notable Design Decisions

Astro over Next.js

Astro ships zero JS by default. A landing page doesn't need SSR, API routes, or React hydration. Astro's island architecture loads interactive components (pricing toggle, wallet connect) only where needed.

Cloudflare Workers (Not Pages)

Cloudflare deprecated Pages investment. Workers gets all new features and serves static assets for free. Deployment via wrangler deploy.

Privacy-Friendly Analytics

Cloudflare Web Analytics — no cookies, GDPR-compliant by default. Aligns with VelaPay's privacy-first positioning.

No Protocol Dependency

The landing page is purely informational. No @velapay/sdk import, no on-chain reads, no wallet connection. This keeps it fast, cacheable, and independently deployable.

Zero JavaScript by Default

Astro's default rendering mode produces pure HTML with zero client-side JavaScript. Interactive elements (pricing toggle, wallet connect) load only when they become visible or interacted with via Astro's island architecture. This means:

• First contentful paint is near-instant (pre-rendered HTML).
• No React runtime loaded until an island needs it.
• Lighthouse scores consistently 95+ across all categories.

Code Snippets as Marketing

The landing page includes live code snippets showing SDK usage:

import { createVelaClient } from "@velapay/sdk";

const vela = createVelaClient({ connection, wallet });
const result = await vela.createSubscription({
  planAddress,
  merchantAddress,
});

These serve dual purpose: developer education and product marketing. Developers who see the API immediately understand the integration effort.

SEO and Content Strategy

• All pages are pre-rendered at build time (SSG, not SSR).
• Meta tags and Open Graph images are generated per page.
• sitemap.xml auto-generated by Astro.
• Robot-friendly HTML with semantic markup.
• Fast load times improve search ranking signals.

Relationship to Other Surfaces

Surface	Domain	Role	Links to
vela-web	velapay.io	Marketing and discovery	→ docs, dashboard, checkout
vela-docs	docs.velapay.io	Technical documentation	→ SDK, protocol
vela-dashboard	dashboard.velapay.io	Merchant management	→ SDK, protocol
vela-checkout	pay.velapay.io	Payment collection	→ SDK, protocol
vela-portal	portal.velapay.io	Subscriber management	→ SDK, protocol

The landing page is the top of the funnel. It converts visitors into developers (→ docs) or merchants (→ dashboard). It never needs to know about protocol state.