# 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 # , , 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