talk-pro/README.md

# Talk Pro

Marketing landing page for Talk Pro — a modern messaging app designed for clear, simple, and reliable communication.

## Stack

- [Astro 6](https://astro.build) — static site generator, zero client-side JS
- [UnoCSS](https://unocss.dev) — atomic CSS engine (Tailwind-compatible, faster HMR)
- TypeScript (strict)
- Inter — Google Fonts

## Getting Started

```bash
npm install
npm run dev
```

Open [http://localhost:4321](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`](.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:

```bash
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
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`:

```html
<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](https://www.figma.com/design/Gb8WMJ2RLlcZ0bigoiOQx9/Talk-Pro?node-id=9505-537&m=dev)