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
|