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

Open http://localhost:4321

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 cinpm run buildrsync 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

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:

  1. Add the locale code to the languages array at the top of translations.ts.
  2. Add its label to languageLabels and languageNames.
  3. Add a translation object under translations (only the keys you want to override are required).
  4. Create the page route: copy src/pages/[lang]/index.astro if it doesn't exist.

Design Source

Figma: Talk Pro — Home Page Desktop

Description
No description provided
Readme 65 MiB
Languages
TypeScript 63.1%
CSS 19.5%
Astro 11.6%
JavaScript 4.2%
Shell 1.6%