The marketing surface for the Vowena protocol.
Landing, pricing, and a blog about building trustless recurring payments on Stellar.

vowena.xyz  ·  Blog  ·  Pricing  ·  Protocol

What is this?

The public marketing site for Vowena, the recurring payments protocol on Stellar. It explains what the protocol does, publishes pricing for the hosted dashboard, and hosts a technical blog about subscription billing, the Stellar ecosystem, and what we are building. Live at vowena.xyz.

The protocol lives in vowena/protocol. The dashboard lives in vowena/dashboard. This repo is the storefront.

Stack

Layer	Choice
Framework	Next.js 16 (App Router, React 19, TypeScript)
Styling	Tailwind CSS v4 with custom design tokens, DM Sans + Space Mono
Content	MDX via next-mdx-remote v6, gray-matter
Highlighting	highlight.js with custom violet syntax theme
Theme	next-themes, light-first with dark toggle
Deployment	Vercel
SEO	Dynamic OG and Twitter card images per route, sitemap.xml, robots.txt
Analytics	Umami (privacy-friendly, cookie-free)

Features

• Landing page with hero, how-it-works, dashboard preview, dev SDK integration, and pricing tease
• Pricing page with Free, Pro, and Enterprise tiers and a structured FAQ
• MDX blog with frontmatter-driven routing, syntax highlighting, copy-to-clipboard buttons, and cover images
• Custom MDX components for callouts, install tabs, and embedded video
• Dynamic OG and Twitter card images generated per route from JSX
• Dark mode with system preference detection and manual toggle
• sitemap.xml and robots.txt generated from the route tree
• Brand-consistent typography using DM Sans and Space Mono
• Legal pages for privacy and terms

Local development

Requires Node.js 22 or later.

git clone https://github.com/vowena/site.git
cd site
npm install
cp .env.example .env.local
npm run dev

The site runs at http://localhost:3000.

Scripts

Command	Purpose
npm run dev	Start the dev server with HMR
npm run build	Production build
npm run start	Run the production build locally
npm run lint	ESLint (Next.js config)
npm run typecheck	TypeScript no-emit check

Writing a blog post

Posts live in content/blog/ as .mdx files. The slug of the URL is the filename: content/blog/my-post.mdx ships at /blog/my-post.

1. Create the file

touch content/blog/your-post-slug.mdx

2. Add frontmatter

Every post needs the following fields. They are parsed by gray-matter and used for routing, listing, and OG images.

---
title: "Your post title"
description: "A short summary used for SEO and social cards."
date: "2026-04-21"
author: "Your Name"
cover: "https://images.unsplash.com/photo-example?w=1200&h=630&fit=crop"
---

Field	Type	Notes
title	string	Used for <h1>, page title, and OG cards
description	string	Used for meta description and social cards
date	ISO date	Drives chronological ordering on /blog
author	string	Shown on the post and the index. Falls back to "Vowena"
cover	URL	Optional. Shown on the index card and the post hero

3. Write the body

Standard markdown plus GFM tables, task lists, and fenced code blocks. Code blocks render through highlight.js using the brand violet syntax theme.

```rust
fn approve(from: Address, spender: Address, amount: i128) {
    // Highlighted in violet, with a copy button.
}
```

4. Use custom MDX components

These are available in any post without importing them:

Component	Purpose
<Callout type="info | warning | tip">…</Callout>	Highlighted aside, color-coded by type
<Video src="https://..." title="Demo" />	Responsive 16:9 iframe embed
<InstallTabs />	Tabbed install instructions per package manager

That is the entire authoring surface. Save the file and the post is live on the next build.

SEO

• Per-route OG and Twitter images. Every page (and every blog post) ships an opengraph-image.tsx and twitter-image.tsx rendered with the Next.js Image Response API. Brand colors and typography are baked in.
• Sitemap. src/app/sitemap.ts walks the route tree and the MDX blog index to produce /sitemap.xml.
• Robots. src/app/robots.ts emits /robots.txt and points at the sitemap.
• Canonical URLs and structured metadata. Every page exports generateMetadata with a canonical URL, OG, and Twitter tags.

Project layout

src/
  app/
    blog/                  MDX-powered blog index and dynamic routes
    pricing/               Plan comparison and FAQ
    privacy/  terms/       Legal pages
    opengraph-image.tsx    Root OG image
    sitemap.ts robots.ts   SEO surface
  components/              UI primitives, MDX components, theme provider
  lib/                     blog loader, syntax highlighting, config
content/
  blog/                    MDX source files (one per post)
public/                    Logos, favicons, static assets
.github/                   Banner, workflows, issue templates

Related projects

Repo	Description
vowena/protocol	Soroban smart contracts. The recurring payments protocol.
vowena/sdk	TypeScript SDK for integrating Vowena into your app.
vowena/dashboard	Merchant and subscriber dashboard at dashboard.vowena.xyz.
vowena/docs	Developer documentation at vowena.xyz/docs.

Contributing

Issues and pull requests are welcome. Please read CONTRIBUTING.md, CODE_OF_CONDUCT.md, and SECURITY.md before opening one.

License

Licensed under the Apache License 2.0.

_{Built by the Vowena team. Quiet confidence, protocol-grade permanence.}