Superspeech Web

Marketing site and help center for Superspeech — the voice-to-text platform for macOS.

Stack

• Next.js 16
• React 19
• Tailwind CSS v4
• TypeScript 5
• Inter (body), Instrument Serif (display), JetBrains Mono (data) — Google Fonts

Prerequisites

• Node.js 22+ (see .nvmrc)

Setup

# Install dependencies
npm install

Run

# Development (port 7072)
npm run dev

# Production build
npm run build
npm start

# Lint
npm run lint

Listens on http://localhost:7072.

Pages

• / — Landing page (Hero, How it works, Modes, Features, FAQ, CTA)
• /help — Help center with sidebar navigation

Structure

app/
├── page.tsx          # Landing page
├── layout.tsx        # Root layout, fonts, metadata
├── globals.css       # Tailwind + design system tokens
└── help/
    └── page.tsx      # Help center with sidebar nav
components/
├── Hero.tsx          # Two-column hero with live demo card + typing animation
├── HowItWorks.tsx    # Three-step guide with serif step numbers
├── Modes.tsx         # Flash / Smart / Precise cards with animated bar fills
├── Features.tsx      # 3-column feature grid with icon tiles
├── FAQ.tsx           # Accordion with rotating plus icons
├── FinalCTA.tsx      # Final download call-to-action
├── Navbar.tsx        # Sticky frosted-glass navbar with wordmark
└── Footer.tsx        # Brand + copyright + links
public/
├── logo.svg          # Superspeech logo
├── favicon.ico
└── apple-touch-icon.png

Design System

Colors, typography, spacing, and motion are defined as CSS custom properties in globals.css, sourced from the shared design system (design_handoff_superspeech/design-files/shared/tokens.css).

• Accent: Terracotta oklch(0.58 0.14 40)
• Background: Warm paper oklch(0.975 0.008 75)
• Typography: Instrument Serif italic for display headings, Inter for body, JetBrains Mono for data/kbd
• Mode colors: Flash #C89434, Smart #C5553D, Precise #4E3A5C

Deployment

Deploy to Vercel — zero config for Next.js:

vercel deploy