# Talk Pro Landing Page — Design Spec

**Date:** 2026-05-12  
**Stack:** Astro + Tailwind CSS + TypeScript  
**Source:** Figma — Talk Pro, node `9333:31390` (Home Page — Desktop)

---

## Goal

Build the Talk Pro marketing landing page as a fully static website. The design is taken directly from Figma and implemented pixel-faithfully using Astro components and Tailwind CSS.

---

## Architecture

**Framework:** Astro (static output, zero client-side JS)  
**Styling:** Tailwind CSS with custom design token extensions  
**Language:** TypeScript in Astro frontmatter  
**Assets:** Figma images downloaded to `public/assets/` to avoid URL expiry

### Project Structure

```
talk-pro/
├── public/
│   └── assets/              # Downloaded Figma images (logo, phone mockup, icons)
├── src/
│   ├── layouts/
│   │   └── Base.astro       # <html>, <head>, font imports, meta tags
│   ├── components/
│   │   ├── Header.astro
│   │   ├── Hero.astro
│   │   ├── CoreSystem.astro
│   │   ├── UseCases.astro
│   │   ├── DownloadCTA.astro
│   │   └── Footer.astro
│   ├── pages/
│   │   └── index.astro      # Composes all sections in order
│   └── styles/
│       └── global.css       # Tailwind base directives + any global overrides
├── astro.config.mjs
├── tailwind.config.mjs
└── tsconfig.json
```

---

## Components

Each component maps to one Figma section.

### Header.astro
- Sticky, frosted-glass background (`rgba(248,243,238,0.84)`, border `#e3d9d1`)
- Left: Talk Pro logo (image + wordmark)
- Center: Nav links — Home, Features, Product, Privacy, About
- Right: "Download" CTA button (bg `#f28a4b`, rounded-[17px])

### Hero.astro
- Full-width section with background image from Figma
- Left column (600px): availability pill, headline "One User. Multiple Worlds.", description, two CTA buttons, three feature tags
- Right column: phone mockup with three floating info cards (Work/Private/Protected, AI Summary Ready, Protected Hidden Space)

### CoreSystem.astro
- Section label "CORE SYSTEM" in brand orange
- Headline: "Built for how modern communication actually works."
- 2 rows × 3 cards: Private Messaging, Group Chats, Channels, Voice Calls, Video Calls, Media Sharing
- Each card: icon image (240×240), title, description; bg `rgba(255,255,255,0.78)`, rounded-[30px]

### UseCases.astro
- Section label "USE CASES"
- Headline: "Designed for the worlds you already live in."
- 1 row × 3 cards: Work Identity, Private Identity, Protected Space
- Cards: fixed height 245px, text only (no icon images)

### DownloadCTA.astro
- Centered rounded panel (bg `rgba(255,255,255,0.78)`, rounded-[34px])
- Headline, description text
- Two store badges: Android (APK download, orange bg) + iOS (Coming on App Store, dark bg)

### Footer.astro
- Brand column: logo square, "Talk Pro" name, tagline
- Link columns: Product, Privacy, Company
- Horizontal divider line
- Bottom bar: copyright left, Terms · Privacy · Support right

---

## Design Tokens

Defined in `tailwind.config.mjs` under `theme.extend.colors`:

| Token | Value |
|---|---|
| `brand` | `#f28a4b` |
| `text-primary` | `#2e2a28` |
| `text-secondary` | `#7a726d` |
| `surface` | `#f8f3ee` |
| `card` | `rgba(255,255,255,0.78)` |
| `border-light` | `#e3d9d1` |

**Typography:** Inter (Google Fonts) — Regular (400) and Bold (700)

---

## Assets Strategy

Figma asset URLs expire after 7 days. All images must be downloaded to `public/assets/` at scaffold time:

| Asset | Usage |
|---|---|
| `logo-icon.png` | Header + Footer logo square |
| `logo-wordmark.svg` | Header wordmark |
| `hero-bg.png` | Hero section background |
| `hero-phone.png` | Phone mockup in Hero |
| `icon-messaging.png` | Core System card — Private Messaging |
| `icon-groups.png` | Core System card — Group Chats |
| `icon-channels.png` | Core System card — Channels |
| `icon-voice.png` | Core System card — Voice Calls |
| `icon-video.png` | Core System card — Video Calls |
| `icon-media.png` | Core System card — Media Sharing |
| `badge-android.svg` | Download CTA — Android icon |
| `badge-ios.svg` | Download CTA — Apple icon |
| `footer-divider.png` | Footer divider line |

---

## Out of Scope

- Mobile responsive layout (desktop-only, matching Figma 1440px width)
- Navigation interactions (no mobile hamburger menu)
- Actual download links (buttons are visual only)
- Any backend, CMS, or dynamic data
