4134aec1f8
- Store badges: w-full on mobile, sm:w-[260px] on larger screens - AppPreview phone: w-full with aspect-ratio on mobile - UseCases rows: stack vertically on mobile (flex-col sm:flex-row) - Footer/DownloadCTA: responsive padding and container widths Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
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 |
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