2026-05-12 16:40:16 +08:00
|
|
|
# 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 |
|
|
|
|
|
|
|
|
|
|
## 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
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## Design Source
|
|
|
|
|
|
2026-05-12 16:48:14 +08:00
|
|
|
Figma: [Talk Pro — Home Page Desktop](https://www.figma.com/design/Gb8WMJ2RLlcZ0bigoiOQx9/Talk-Pro?node-id=9505-537&m=dev)
|
