landingpage
Marketing landing page for Absolute Pitch Trainer (iOS). Next.js 16 + React 19 +
Tailwind 4, fully prerendered, deployable to Vercel out of the box.
Locales
Six localised routes, mirroring the in-app language set:
/en /de /fr /es /ja /zh-Hans
Each route is statically generated via generateStaticParams. The root
path / redirects to /en. Visitors can switch language from the chip
in the top-right of every page.
Dictionaries live in src/app/[locale]/_dictionaries/<locale>.ts and are
keyed against the schema in types.ts. Headlines for the screenshot
strip are sourced from /MARKETING.md so the landing page stays in sync
with the App Store screenshot captions.
Design
- Palette: Jukebox Chrome from
/color_palettes/jukebox-chrome.json,
set as Tailwind 4 design tokens in src/app/globals.css.
- Typography: Plus Jakarta Sans (300–800), display-weight headlines with
tight tracking.
- Iconography: inline SVG (see
_components/Icons.tsx) — no extra deps.
- 2026 idiom: aurora gradient hero, glassmorphic chips, generous
whitespace, subtle film grain, drift animation on the hero phone.
Screenshots
The /public/screens/<locale>/ directory holds the four App Store
screenshots used in the hero and showcase grid. They're populated by
running:
pnpm copy:screens
That script copies the 1125×2436 PNGs out of
/marketing-screenshots/exports/<asc-locale>/ and renames them to
{01-hero,02-onfire,03-progress,04-rank}.png. Re-run it whenever the
master screenshot set in /marketing-screenshots/exports/ changes.
Develop
pnpm install
pnpm dev # http://localhost:3000 → redirects to /en
pnpm build # static prerender all 6 locales
Deploy to Vercel
The directory is a standalone Next.js project. Either:
- Set the project root to
landingpage/ in the Vercel dashboard,
and Vercel auto-detects Next.js 16 with no extra config.
- Or run
vercel --cwd landingpage from this repo's root.
Add a pnpm-workspace.yaml entry if you want to share dependencies with
/marketing-screenshots. As shipped, landingpage/ is self-contained.
