Add $VOICEBOX token page, blog, and cloud/pricing pages

- /token: dedicated page with on-chain transparency (liquidity lock +
  buyback/burns), holder utility, official-token clarity, and FAQ. The
  landing now shows a teaser linking to it; navbar + footer repointed
  from pump.fun to /token.
- /blog: file-based markdown blog (gray-matter + marked) with per-post
  Open Graph images; first post "Why Voicebox has a token".
- /cloud: end-to-end encrypted backup & sync product page.
- /pricing: Local / Cloud / Studio tiers with a monthly/annual toggle;
  $VOICEBOX holders get Cloud free.
- Add Testimonials section to the landing.
- Navbar: remove API/Download, add Pricing/Blog, fix center-nav spacing.
- docker-compose: host port 17493->17600 for local dev coexistence.

landing/src/components/Footer.tsx

@@ -6,7 +6,6 @@ import {
   DONATE_URL,
   GITHUB_REPO,
   TOKEN_CONTRACT_ADDRESS,
-  TOKEN_PUMP_URL,
   TOKEN_TICKER,
 } from '@/lib/constants';
 
@@ -71,6 +70,16 @@ export function Footer() {
                   API
                 </a>
               </li>
+              <li>
+                <a href="/cloud" className="hover:text-foreground transition-colors">
+                  Cloud
+                </a>
+              </li>
+              <li>
+                <a href="/pricing" className="hover:text-foreground transition-colors">
+                  Pricing
+                </a>
+              </li>
               <li>
                 <a href="/download" className="hover:text-foreground transition-colors">
                   Download
@@ -83,6 +92,11 @@ export function Footer() {
           <div>
             <h4 className="text-sm font-semibold mb-3">Resources</h4>
             <ul className="space-y-2 text-sm text-muted-foreground">
+              <li>
+                <a href="/blog" className="hover:text-foreground transition-colors">
+                  Blog
+                </a>
+              </li>
               <li>
                 <Link
                   href="https://docs.voicebox.sh"
@@ -123,6 +137,11 @@ export function Footer() {
                   Issues
                 </Link>
               </li>
+              <li>
+                <a href="/sponsors" className="hover:text-foreground transition-colors">
+                  VIP Sponsor
+                </a>
+              </li>
             </ul>
           </div>
 
@@ -163,15 +182,13 @@ export function Footer() {
                 <span className="text-xs text-muted-foreground/60">Solana</span>
               </div>
               <CopyAddress address={TOKEN_CONTRACT_ADDRESS} />
-              <a
-                href={TOKEN_PUMP_URL}
-                target="_blank"
-                rel="noopener noreferrer"
+              <Link
+                href="/token"
                 className="inline-flex items-center gap-1.5 hover:text-foreground transition-colors"
               >
-                Buy on pump.fun
+                Token details
                 <ArrowUpRight className="h-3.5 w-3.5" />
-              </a>
+              </Link>
             </div>
           </div>
         </div>

landing/src/components/Navbar.tsx

@@ -3,7 +3,7 @@
 import { Coffee, Coins, Github } from 'lucide-react';
 import Image from 'next/image';
 import { useEffect, useState } from 'react';
-import { DONATE_URL, GITHUB_REPO, TOKEN_PUMP_URL, TOKEN_TICKER } from '@/lib/constants';
+import { DONATE_URL, GITHUB_REPO, TOKEN_TICKER } from '@/lib/constants';
 
 function formatStarCount(count: number): string {
   if (count >= 1000) {
@@ -32,7 +32,7 @@ export function Navbar() {
 
   return (
     <nav className="fixed inset-x-0 top-0 z-50 border-b border-border/50 bg-background/80 backdrop-blur-xl">
-      <div className="mx-auto flex max-w-7xl items-center justify-between px-6 py-3 sm:grid sm:grid-cols-3">
+      <div className="mx-auto flex max-w-7xl items-center justify-between px-6 py-3 sm:grid sm:grid-cols-[1fr_auto_1fr] sm:gap-x-6">
         {/* Logo + wordmark */}
         <a href="/" className="flex items-center gap-2.5 justify-self-start">
           <Image
@@ -74,6 +74,18 @@ export function Navbar() {
           >
             Models
           </a>
+          <a
+            href="/pricing"
+            className="rounded-md px-3 py-1.5 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground"
+          >
+            Pricing
+          </a>
+          <a
+            href="/blog"
+            className="rounded-md px-3 py-1.5 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground"
+          >
+            Blog
+          </a>
           <a
             href="https://docs.voicebox.sh"
             target="_blank"
@@ -87,11 +99,9 @@ export function Navbar() {
         {/* Token + Donate + GitHub star buttons */}
         <div className="flex items-center gap-2 justify-self-end">
           <a
-            href={TOKEN_PUMP_URL}
-            target="_blank"
-            rel="noopener noreferrer"
+            href="/token"
             className="hidden sm:flex items-center gap-2 rounded-lg border border-border/60 bg-card/60 px-3 py-1.5 text-sm text-muted-foreground transition-colors hover:text-foreground hover:border-accent/40"
-            aria-label={`${TOKEN_TICKER} token on pump.fun`}
+            aria-label={`${TOKEN_TICKER} token`}
           >
             <Coins className="h-4 w-4 text-accent" />
             <span className="text-[13px] font-semibold tracking-wide text-foreground">

landing/src/components/PricingTiers.tsx

@@ -0,0 +1,157 @@
+"use client";
+
+import {Check} from "lucide-react";
+import {useState} from "react";
+import {
+	annualSavingsPercent,
+	type BillingPeriod,
+	PRICING_TIERS,
+} from "@/lib/pricing";
+
+const MAX_ANNUAL_SAVINGS = Math.max(
+	...PRICING_TIERS.map((t) => annualSavingsPercent(t)),
+);
+
+export function PricingTiers() {
+	const [period, setPeriod] = useState<BillingPeriod>("annual");
+
+	return (
+		<div className="mx-auto max-w-6xl px-6">
+			{/* Billing toggle */}
+			<div className="mb-10 flex items-center justify-center">
+				<div className="inline-flex items-center gap-1 rounded-full border border-border bg-card/40 p-1">
+					<ToggleButton
+						active={period === "monthly"}
+						onClick={() => setPeriod("monthly")}
+					>
+						Monthly
+					</ToggleButton>
+					<ToggleButton
+						active={period === "annual"}
+						onClick={() => setPeriod("annual")}
+					>
+						Annual
+						{MAX_ANNUAL_SAVINGS > 0 ? (
+							<span
+								className={`ml-1.5 rounded-full px-1.5 py-0.5 text-[10px] font-semibold transition-colors ${
+									period === "annual"
+										? "bg-white/25 text-white"
+										: "bg-accent/15 text-accent"
+								}`}
+							>
+								Save {MAX_ANNUAL_SAVINGS}%
+							</span>
+						) : null}
+					</ToggleButton>
+				</div>
+			</div>
+
+			<div className="grid items-start gap-4 md:grid-cols-3">
+				{PRICING_TIERS.map((tier) => {
+					const isFree = tier.monthly === 0 && tier.annual === 0;
+					const amount = period === "monthly" ? tier.monthly : tier.annual;
+					const unit = period === "monthly" ? "/month" : "/year";
+					const isExternal = tier.cta.href.startsWith("http");
+
+					return (
+						<div
+							key={tier.id}
+							className={`flex flex-col rounded-2xl border bg-card/50 backdrop-blur-sm p-7 ${
+								tier.highlighted
+									? "border-2 border-accent/50 shadow-[0_8px_40px_hsl(43_60%_50%/0.1)] md:-mt-2"
+									: "border-border"
+							}`}
+						>
+							<div className="mb-1 flex items-center justify-between gap-2">
+								<h2 className="text-lg font-semibold text-foreground">
+									{tier.name}
+								</h2>
+								{tier.badge ? (
+									<span
+										className={`rounded-full px-2.5 py-0.5 text-[10px] font-semibold uppercase tracking-wider ${
+											tier.highlighted
+												? "bg-accent/15 text-accent"
+												: "border border-border/60 text-muted-foreground"
+										}`}
+									>
+										{tier.badge}
+									</span>
+								) : null}
+							</div>
+
+							<p className="mb-5 min-h-[2.5rem] text-sm text-muted-foreground">
+								{tier.tagline}
+							</p>
+
+							<div className="mb-1 flex items-baseline gap-1">
+								<span className="text-4xl font-bold tracking-tight text-foreground">
+									${amount}
+								</span>
+								{!isFree ? (
+									<span className="text-sm text-muted-foreground">{unit}</span>
+								) : null}
+							</div>
+							<p className="mb-6 min-h-[1rem] text-xs text-muted-foreground/70">
+								{isFree
+									? tier.priceNote
+									: period === "annual"
+										? tier.priceNote
+										: `Billed monthly · ${tier.priceNote ?? ""}`}
+							</p>
+
+							<a
+								href={tier.cta.href}
+								{...(isExternal
+									? {target: "_blank", rel: "noopener noreferrer"}
+									: {})}
+								className={`mb-7 inline-flex items-center justify-center rounded-full px-5 py-3 text-sm font-semibold transition-all ${
+									tier.highlighted
+										? "bg-accent text-white shadow-[0_4px_20px_hsl(43_60%_50%/0.3)] hover:bg-accent-faint"
+										: "border border-border/60 bg-card/40 text-foreground hover:border-accent/40"
+								}`}
+							>
+								{tier.cta.label}
+							</a>
+
+							<ul className="space-y-3">
+								{tier.features.map((feature) => (
+									<li
+										key={feature}
+										className="flex items-start gap-3 text-sm text-foreground/90"
+									>
+										<Check className="h-4 w-4 shrink-0 text-accent mt-0.5" />
+										<span>{feature}</span>
+									</li>
+								))}
+							</ul>
+						</div>
+					);
+				})}
+			</div>
+		</div>
+	);
+}
+
+function ToggleButton({
+	active,
+	onClick,
+	children,
+}: {
+	active: boolean;
+	onClick: () => void;
+	children: React.ReactNode;
+}) {
+	return (
+		<button
+			type="button"
+			onClick={onClick}
+			className={`flex items-center rounded-full px-4 py-1.5 text-sm font-medium transition-colors ${
+				active
+					? "bg-accent text-white"
+					: "text-muted-foreground hover:text-foreground"
+			}`}
+		>
+			{children}
+		</button>
+	);
+}

landing/src/components/Testimonials.tsx

@@ -0,0 +1,109 @@
+"use client";
+
+import {Heart, Quote} from "lucide-react";
+import {DONATE_URL} from "@/lib/constants";
+
+type Testimonial = {
+	quote: string;
+	author: string;
+};
+
+/** Verbatim supporter messages from Buy Me a Coffee. */
+const TESTIMONIALS: Testimonial[] = [
+	{
+		quote:
+			"Cloning my own voice was a snap — and now I can hear my reminders and to-dos from my digital doppelgänger. Very cool.",
+		author: "jimzip",
+	},
+	{
+		quote: "It's better than most other paid services.",
+		author: "Peiming Pai",
+	},
+	{
+		quote:
+			"I'm using this great tool for my multimedia course project — you made it into the classrooms!",
+		author: "theanoma.ly",
+	},
+	{
+		quote:
+			"This app is fantastic! I use it to learn languages and for my learning materials. Congratulations, it's great!",
+		author: "Kevin Serrano",
+	},
+	{
+		quote:
+			"Absolutely amazing! The learning curve was very short. Thank you for a great program and for making it free.",
+		author: "DJWhy",
+	},
+	{
+		quote: "First engine I tried, zero config. It worked! Amazing.",
+		author: "Fitz",
+	},
+	{
+		quote:
+			"This is great for people who are uncomfortable with advocating for themselves in public. Thanks for making it.",
+		author: "creativeaction.ca",
+	},
+	{
+		quote: "Thanks for this. It's a life-saver!",
+		author: "The Cowboy Movie Channel",
+	},
+	{
+		quote: "Fantastic open-source app!",
+		author: "Mitja",
+	},
+];
+
+export function Testimonials() {
+	return (
+		<section id="testimonials" className="border-t border-border py-24">
+			<div className="mx-auto max-w-6xl px-6">
+				{/* Header */}
+				<div className="text-center mb-14">
+					<div className="inline-flex items-center gap-2 rounded-full border border-border/60 bg-card/40 backdrop-blur-sm px-3 py-1 mb-4">
+						<Heart className="h-3 w-3 text-accent" />
+						<span className="text-[11px] font-medium uppercase tracking-wider text-muted-foreground">
+							Loved by users
+						</span>
+					</div>
+					<h2 className="text-3xl font-semibold tracking-tight text-foreground md:text-4xl mb-4">
+						What people are saying
+					</h2>
+					<p className="text-muted-foreground max-w-2xl mx-auto">
+						Voicebox has passed 1M+ downloads. Here's a handful of notes from
+						the people using it every day.
+					</p>
+				</div>
+
+				{/* Masonry-style columns so cards flow naturally regardless of length */}
+				<div className="columns-1 gap-4 sm:columns-2 lg:columns-3 [&>*]:mb-4">
+					{TESTIMONIALS.map((t) => (
+						<figure
+							key={t.author}
+							className="break-inside-avoid rounded-xl border border-border bg-card/60 backdrop-blur-sm p-5 transition-colors hover:border-accent/30"
+						>
+							<Quote className="h-4 w-4 text-accent/60 mb-3" />
+							<blockquote className="text-sm leading-relaxed text-foreground/90">
+								{t.quote}
+							</blockquote>
+							<figcaption className="mt-4 text-xs font-medium text-muted-foreground">
+								{t.author}
+							</figcaption>
+						</figure>
+					))}
+				</div>
+
+				{/* Attribution + soft CTA */}
+				<div className="mt-10 text-center">
+					<a
+						href={DONATE_URL}
+						target="_blank"
+						rel="noopener noreferrer"
+						className="text-xs text-muted-foreground/70 hover:text-foreground transition-colors"
+					>
+						From supporters on Buy Me a Coffee →
+					</a>
+				</div>
+			</div>
+		</section>
+	);
+}

landing/src/components/TokenTeaser.tsx

@@ -0,0 +1,48 @@
+import {ArrowUpRight, Coins} from "lucide-react";
+import {TOKEN_TICKER} from "@/lib/constants";
+
+/**
+ * Compact teaser shown near the bottom of the landing page. The full token
+ * details (contract address, buy CTA, disclaimers) live on the dedicated
+ * /token page — this just points there.
+ */
+export function TokenTeaser() {
+	return (
+		<section className="border-t border-border py-20">
+			<div className="mx-auto max-w-4xl px-6">
+				<div className="relative flex flex-col items-center gap-5 overflow-hidden rounded-2xl border border-border bg-card/40 backdrop-blur-sm px-6 py-10 text-center">
+					{/* Subtle accent glow */}
+					<div className="pointer-events-none absolute inset-0 -z-10 flex justify-center">
+						<div className="h-[200px] w-[420px] rounded-full bg-accent/10 blur-[130px]" />
+					</div>
+
+					<div className="inline-flex items-center gap-2 rounded-full border border-border/60 bg-card/40 px-3 py-1">
+						<Coins className="h-3 w-3 text-accent" />
+						<span className="text-[11px] font-medium uppercase tracking-wider text-muted-foreground">
+							Official token
+						</span>
+					</div>
+
+					<h2 className="text-2xl font-semibold tracking-tight text-foreground md:text-3xl">
+						{TOKEN_TICKER} on Solana
+					</h2>
+
+					<p className="max-w-xl text-muted-foreground">
+						An optional way to back the project and have some fun. Voicebox is and
+						always will be{" "}
+						<b className="text-foreground">free and open source</b> — the token is
+						not required to use anything here.
+					</p>
+
+					<a
+						href="/token"
+						className="inline-flex items-center gap-2 rounded-full bg-accent px-6 py-3 text-sm font-semibold text-white shadow-[0_4px_20px_hsl(43_60%_50%/0.3),inset_0_2px_0_rgba(255,255,255,0.2),inset_0_-2px_0_rgba(0,0,0,0.1)] transition-all hover:bg-accent-faint"
+					>
+						Learn about {TOKEN_TICKER}
+						<ArrowUpRight className="h-4 w-4" />
+					</a>
+				</div>
+			</div>
+		</section>
+	);
+}