Reviewed-on: #11
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
Design Source
Figma: Talk Pro — Home Page Desktop