Files

TerryM d49e276973 Add Talk Pro landing page design spec

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>

2026-05-12 16:02:47 +08:00

4.4 KiB

Raw Blame History

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

4.4 KiB Raw Blame History Unescape Escape