02102dd046
Complete redesign with 9 sections matching the updated 1920px layout: - Header: sticky nav with globe/language toggle and Download CTA - Hero: warm beige bg, iPhone mockup, "A Modern Way to Stay Connected" - WhyTalkPro: 2x2 card grid with SVG icons and illustration - CoreSystem: halftone bg, 6-card feature grid with 3D icons - Experience: 3 vertical screenshot cards with exact Figma clip positions - UseCases: split layout with 4 orange-header rows - Trust: 4-column reliability features with sprite clipping and SVG dividers - AppPreview: interactive phone carousel with prev/next fade transition - DownloadCTA: polka-dot bg, TalkPro logo script, store badges - Footer: logo, description, store badges, link columns All 35 Figma assets downloaded locally (SVGs correctly named .svg). 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