Talk Pro
Marketing landing page for Talk Pro — a modern messaging app designed for clear, simple, and reliable communication.
Stack
- Astro 6 — static site generator, zero client-side JS
- UnoCSS — atomic CSS engine (Tailwind-compatible, faster HMR)
- TypeScript (strict)
- Inter — Google Fonts
Getting Started
npm install
npm run dev
Commands
| Command | Description |
|---|---|
npm run dev |
Start dev server at localhost:4321 |
npm run build |
Build for production into dist/ |
npm run preview |
Preview production build locally |
Deploy (Gitea Actions → talkpro.info)
Pushes to main or master run .gitea/workflows/deploy-talkpro.yml: npm ci → npm run build → rsync dist/ to the marketing server (/home/ubuntu/talkpro).
Repository secret (Gitea → Settings → Secrets → Actions) — required:
| Secret | Value |
|---|---|
TALKPRO_SSH_PRIVATE_KEY |
Full PEM text of the ubuntu@talkpro deploy key |
Host (13.214.179.69), user (ubuntu), and web root (/home/ubuntu/talkpro) are set in the workflow. Optional secrets TALKPRO_HOST, TALKPRO_USER, TALKPRO_REMOTE_ROOT override those defaults.
Manual deploy from this repo:
cp .env.deploy.example .env.deploy # edit paths
set -a && source .env.deploy && set +a
bash scripts/deploy-talkpro.sh
/api/site-links (APK / App Store URLs) is still updated via the parent talkpro repo: ./scripts/post-talkpro-site-links.sh on your laptop.
Project Structure
talk-pro/
├── public/
│ └── assets/ # Images downloaded from Figma
├── src/
│ ├── layouts/
│ │ └── Base.astro # HTML shell, Inter font, meta
│ ├── components/
│ │ ├── Header.astro # Sticky frosted-glass nav
│ │ ├── Hero.astro # Hero with phone mockup
│ │ ├── CoreSystem.astro # 6-feature card grid
│ │ ├── UseCases.astro # 3 identity cards
│ │ ├── DownloadCTA.astro # Store badges
│ │ └── Footer.astro # Links + copyright
│ ├── pages/
│ │ └── index.astro # Composes all sections
│ └── styles/
│ └── global.css
├── uno.config.ts # Design tokens + UnoCSS config
└── astro.config.mjs
Design Tokens
Defined in uno.config.ts:
| Token | Value |
|---|---|
brand |
#f28a4b |
text-primary |
#2e2a28 |
text-secondary |
#7a726d |
surface |
#f8f3ee |
surface-alt |
#f2eae3 |
surface-footer |
#efe6de |
border-light |
#e3d9d1 |
Assets
Figma assets are stored in public/assets/. To re-download them (valid for 7 days from Figma export):
bash scripts/download-assets.sh
Cloudflare Cache & the site-links-client.js Version Flag
The site is proxied through Cloudflare, which aggressively caches static files. Astro's built CSS/JS bundles are safe because they get content-hashed filenames on every build (e.g. _astro/index.Bx3kF9.js) — Cloudflare never has an old copy because the filename itself changes.
public/site-links-client.js is the exception. It lives in public/ so it always deploys to the same URL (/site-links-client.js). Cloudflare caches this URL and will keep serving the old version until either:
- The Cloudflare cache is purged (Caching → Purge Everything in the dashboard), or
- The script URL is versioned so Cloudflare treats it as a new file.
The URL is versioned in src/layouts/Base.astro:
<script src="/site-links-client.js?v=2" defer></script>
Every time you change site-links-client.js, bump this number (?v=2 → ?v=3, etc.) and redeploy. Cloudflare will fetch the latest file immediately without needing a cache purge.
| Change type | Cache action needed |
|---|---|
| CSS / Astro component change | None — hashed filename handles it |
site-links-client.js change |
Bump ?v=N in Base.astro and redeploy |
| Emergency full reset | Cloudflare dashboard → Caching → Purge Everything |
i18n — Adding or Updating Translations
All page copy lives in src/i18n/translations.ts. The English (en) entry is the base — every other language only needs to override the keys it wants to change; missing keys fall back to English automatically.
Supported languages: en, zh-cn, zh-tw, es, vi, pt, de, fr, hi, ar, ru, id, ur, ja, ko, ms.
To add a new language:
- Add the locale code to the
languagesarray at the top oftranslations.ts. - Add its label to
languageLabelsandlanguageNames. - Add a translation object under
translations(only the keys you want to override are required). - Create the page route: copy
src/pages/[lang]/index.astroif it doesn't exist.
Design Source
Figma: Talk Pro — Home Page Desktop