d49e276973
Documents the Astro + Tailwind architecture, component breakdown, design tokens, and asset strategy for the Talk Pro marketing landing page. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
134 lines
4.4 KiB
Markdown
134 lines
4.4 KiB
Markdown
# 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
|