# Talk Pro Landing Page Implementation Plan > **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking. **Goal:** Build the Talk Pro marketing landing page as a fully static website using Astro + Tailwind CSS + TypeScript, pixel-faithful to the Figma design. **Architecture:** One Astro component per Figma section (Header, Hero, CoreSystem, UseCases, DownloadCTA, Footer), composed in `src/pages/index.astro`. All Figma assets downloaded to `public/assets/` at setup time. Zero client-side JavaScript. **Tech Stack:** Astro 4.x, Tailwind CSS 3.x, TypeScript (strict), Inter via Google Fonts --- ### Task 1: Scaffold Astro project **Files:** - Create: `package.json`, `astro.config.mjs`, `tsconfig.json`, `src/env.d.ts` - [ ] **Step 1: Initialize Astro in the existing repo** ```bash cd /Users/terry/finn/talk-pro npm create astro@latest . --template minimal --no-git ``` When prompted: - TypeScript: **Yes, strict** - Install dependencies: **Yes** - Initialize git: **No** (already a git repo) - [ ] **Step 2: Add Tailwind integration** ```bash npx astro add tailwind --yes ``` This creates `tailwind.config.mjs` and updates `astro.config.mjs`. - [ ] **Step 3: Verify build works** ```bash npm run build ``` Expected: `dist/` folder created, no errors. - [ ] **Step 4: Commit scaffold** ```bash git add -A git commit -m "feat: scaffold Astro + Tailwind project" ``` --- ### Task 2: Configure design tokens and global styles **Files:** - Modify: `tailwind.config.mjs` - Create: `src/styles/global.css` - [ ] **Step 1: Replace `tailwind.config.mjs` with Talk Pro tokens** ```js /** @type {import('tailwindcss').Config} */ export default { content: ['./src/**/*.{astro,html,js,jsx,md,mdx,ts,tsx}'], theme: { extend: { colors: { brand: '#f28a4b', 'text-primary': '#2e2a28', 'text-secondary': '#7a726d', surface: '#f8f3ee', 'surface-alt': '#f2eae3', 'surface-footer': '#efe6de', 'border-light': '#e3d9d1', }, fontFamily: { sans: ['Inter', 'sans-serif'], }, }, }, plugins: [], } ``` - [ ] **Step 2: Create `src/styles/global.css`** ```css @tailwind base; @tailwind components; @tailwind utilities; ``` - [ ] **Step 3: Verify build** ```bash npm run build ``` Expected: No errors. - [ ] **Step 4: Commit** ```bash git add tailwind.config.mjs src/styles/global.css git commit -m "feat: configure Tailwind design tokens" ``` --- ### Task 3: Download Figma assets **Files:** - Create: `scripts/download-assets.sh` - Create: `public/assets/` (13 image files) - [ ] **Step 1: Create download script** Create `scripts/download-assets.sh`: ```bash #!/bin/bash set -e mkdir -p public/assets curl -sL "https://www.figma.com/api/mcp/asset/81b107f5-6e2b-4877-9cd6-d2af7b9fc4e4" -o public/assets/logo-icon.png curl -sL "https://www.figma.com/api/mcp/asset/642480ed-2bdc-40f0-8b34-4d868443be3a" -o public/assets/logo-wordmark.png curl -sL "https://www.figma.com/api/mcp/asset/92f03ea0-0710-41ca-a84c-eff4af034455" -o public/assets/hero-bg.png curl -sL "https://www.figma.com/api/mcp/asset/9e59170a-ac6c-48fd-a869-34bcd7beec0c" -o public/assets/hero-phone.png curl -sL "https://www.figma.com/api/mcp/asset/86a3a493-f756-4e82-a055-2857ad1bb127" -o public/assets/icon-messaging.png curl -sL "https://www.figma.com/api/mcp/asset/d8131626-0de4-4be3-98a0-d01c310c7e2d" -o public/assets/icon-groups.png curl -sL "https://www.figma.com/api/mcp/asset/e9d23aa1-7e10-4382-b1bd-b9ac755e2a5f" -o public/assets/icon-channels.png curl -sL "https://www.figma.com/api/mcp/asset/ac45f93c-45ed-464a-8a9c-c389ba20555f" -o public/assets/icon-voice.png curl -sL "https://www.figma.com/api/mcp/asset/67edb5de-858a-4a14-86bf-ac815f6681d1" -o public/assets/icon-video.png curl -sL "https://www.figma.com/api/mcp/asset/c54dcf64-c5ff-4e2e-9573-c80e3946d1fc" -o public/assets/icon-media.png curl -sL "https://www.figma.com/api/mcp/asset/295181b7-7046-42dc-a5f2-234957c85c27" -o public/assets/badge-android-icon.png curl -sL "https://www.figma.com/api/mcp/asset/c1b2603d-7e44-4235-ba42-5ca5983bd926" -o public/assets/badge-ios-icon.png curl -sL "https://www.figma.com/api/mcp/asset/62960bde-f21e-494f-8e9d-f2f0b7a55547" -o public/assets/footer-divider.png echo "Done. $(ls public/assets | wc -l) assets downloaded." ``` - [ ] **Step 2: Run the script** ```bash chmod +x scripts/download-assets.sh && bash scripts/download-assets.sh ``` Expected output: `Done. 13 assets downloaded.` - [ ] **Step 3: Verify** ```bash ls public/assets/ ``` Expected: `badge-android-icon.png badge-ios-icon.png footer-divider.png hero-bg.png hero-phone.png icon-channels.png icon-groups.png icon-media.png icon-messaging.png icon-voice.png icon-video.png logo-icon.png logo-wordmark.png` - [ ] **Step 4: Commit** ```bash git add public/assets/ scripts/download-assets.sh git commit -m "feat: download Figma assets to public/assets" ``` --- ### Task 4: Base layout **Files:** - Create: `src/layouts/Base.astro` - Modify: `src/pages/index.astro` - [ ] **Step 1: Create `src/layouts/Base.astro`** ```astro --- import '../styles/global.css' export interface Props { title?: string } const { title = 'Talk Pro — One User. Multiple Worlds.' } = Astro.props --- {title} ``` - [ ] **Step 2: Replace `src/pages/index.astro`** ```astro --- import Base from '../layouts/Base.astro' ---

Talk Pro — scaffold works

``` - [ ] **Step 3: Start dev server and verify** ```bash npm run dev ``` Open http://localhost:4321. Expected: "Talk Pro — scaffold works" in `#2e2a28` on cream `#f8f3ee` background, Inter font. - [ ] **Step 4: Commit** ```bash git add src/layouts/Base.astro src/pages/index.astro git commit -m "feat: add Base layout with Inter font and Tailwind" ``` --- ### Task 5: Header component **Files:** - Create: `src/components/Header.astro` - Modify: `src/pages/index.astro` - [ ] **Step 1: Create `src/components/Header.astro`** ```astro --- ---
Talk Pro icon Talk Pro
``` - [ ] **Step 2: Update `src/pages/index.astro`** ```astro --- import Base from '../layouts/Base.astro' import Header from '../components/Header.astro' ---
``` - [ ] **Step 3: Verify in dev server** Open http://localhost:4321. Expected: Sticky frosted-glass header, logo left, nav center, orange Download button right. - [ ] **Step 4: Commit** ```bash git add src/components/Header.astro src/pages/index.astro git commit -m "feat: add Header component" ``` --- ### Task 6: Hero section **Files:** - Create: `src/components/Hero.astro` - Modify: `src/pages/index.astro` - [ ] **Step 1: Create `src/components/Hero.astro`** ```astro --- const floatCards = [ { icon: '☷', title: 'Work / Private / Protected', desc: 'One account, multiple communication worlds.', pos: 'left-[-40px] top-[75.5px]', }, { icon: '✦', title: 'AI Summary Ready', desc: 'Long conversations and group highlights organized automatically.', pos: 'left-[180px] top-[270px]', }, { icon: '◌', title: 'Protected Hidden Space', desc: 'When privacy needs more, enter a protected space.', pos: 'left-[20px] top-[540px]', }, ] ---

✦ Available on iOS and Android

One User.

Multiple Worlds.

Talk Pro is a modern messaging app designed for clear, simple, and reliable communication. From private chats to group conversations, channels, voice calls, and video calls, Talk Pro helps people stay connected in one familiar experience.

{['Identity Layer', 'AI Native Messaging', 'Adaptive Privacy'].map((tag) => (

{tag}

))}
Talk Pro app
{floatCards.map((card) => (
{card.icon}

{card.title}

{card.desc}

))}
``` - [ ] **Step 2: Update `src/pages/index.astro`** ```astro --- import Base from '../layouts/Base.astro' import Header from '../components/Header.astro' import Hero from '../components/Hero.astro' ---
``` - [ ] **Step 3: Verify in dev server** Open http://localhost:4321. Expected: Hero with "One User. Multiple Worlds." headline, two CTA buttons, phone mockup with three floating info cards. - [ ] **Step 4: Commit** ```bash git add src/components/Hero.astro src/pages/index.astro git commit -m "feat: add Hero section" ``` --- ### Task 7: Core System section **Files:** - Create: `src/components/CoreSystem.astro` - Modify: `src/pages/index.astro` - [ ] **Step 1: Create `src/components/CoreSystem.astro`** ```astro --- const cards = [ { img: '/assets/icon-messaging.png', title: 'Private Messaging', desc: 'Stay connected through fast and familiar one-on-one conversations.' }, { img: '/assets/icon-groups.png', title: 'Group Chats', desc: 'Create spaces for friends, teams, communities, and shared discussions.' }, { img: '/assets/icon-channels.png', title: 'Channels', desc: 'Follow updates, announcements, and content from the people or communities you care about.' }, { img: '/assets/icon-voice.png', title: 'Voice Calls', desc: 'Talk in real time whenever messages are not enough.' }, { img: '/assets/icon-video.png', title: 'Video Calls', desc: 'Connect face-to-face with a simple and reliable video call experience.' }, { img: '/assets/icon-media.png', title: 'Media Sharing', desc: 'Share photos, videos, files, and updates in your conversations.' }, ] const rows = [cards.slice(0, 3), cards.slice(3)] ---

CORE SYSTEM

Built for how modern

communication actually works.

Different identities, different conversations, and different privacy levels should not be forced into one flat interface. Talk Pro lets them exist in order inside one platform.

{rows.map((row) => (
{row.map((card) => (
{card.title}

{card.title}

{card.desc}

))}
))}
``` - [ ] **Step 2: Update `src/pages/index.astro`** ```astro --- import Base from '../layouts/Base.astro' import Header from '../components/Header.astro' import Hero from '../components/Hero.astro' import CoreSystem from '../components/CoreSystem.astro' ---
``` - [ ] **Step 3: Verify in dev server** Scroll down. Expected: "CORE SYSTEM" label, headline, 2 rows × 3 cards with icon images, titles, descriptions. - [ ] **Step 4: Commit** ```bash git add src/components/CoreSystem.astro src/pages/index.astro git commit -m "feat: add Core System section" ``` --- ### Task 8: Use Cases section **Files:** - Create: `src/components/UseCases.astro` - Modify: `src/pages/index.astro` - [ ] **Step 1: Create `src/components/UseCases.astro`** ```astro --- const cases = [ { title: 'Work Identity', desc: 'Keep work communication clear, organized, and easier to review.' }, { title: 'Private Identity', desc: 'Keep personal conversations natural, focused, and separate from work noise.' }, { title: 'Protected Space', desc: 'Some conversations are not only private. They require stronger boundaries and another layer of protection.' }, ] ---

USE CASES

Designed for the worlds you already live in.

Work, private life, and protected conversations should not interfere with each other inside one identity.

{cases.map((c) => (

{c.title}

{c.desc}

))}
``` - [ ] **Step 2: Update `src/pages/index.astro`** ```astro --- import Base from '../layouts/Base.astro' import Header from '../components/Header.astro' import Hero from '../components/Hero.astro' import CoreSystem from '../components/CoreSystem.astro' import UseCases from '../components/UseCases.astro' ---
``` - [ ] **Step 3: Verify in dev server** Scroll down. Expected: "USE CASES" label, headline, 3 cards (Work Identity, Private Identity, Protected Space). - [ ] **Step 4: Commit** ```bash git add src/components/UseCases.astro src/pages/index.astro git commit -m "feat: add Use Cases section" ``` --- ### Task 9: Download CTA section **Files:** - Create: `src/components/DownloadCTA.astro` - Modify: `src/pages/index.astro` - [ ] **Step 1: Create `src/components/DownloadCTA.astro`** ```astro --- ---

DOWNLOAD

Start with one conversation.

Build your own communication space.

Talk Pro supports iOS and Android. Official store links, QR codes, version information, and compatibility notes are reserved on the download page.

Android

ANDROID

Download APK

Apple

IOS

Coming on App Store

``` - [ ] **Step 2: Update `src/pages/index.astro`** ```astro --- import Base from '../layouts/Base.astro' import Header from '../components/Header.astro' import Hero from '../components/Hero.astro' import CoreSystem from '../components/CoreSystem.astro' import UseCases from '../components/UseCases.astro' import DownloadCTA from '../components/DownloadCTA.astro' ---
``` - [ ] **Step 3: Verify in dev server** Scroll to bottom. Expected: Centered white panel with headline, description, orange Android badge and dark iOS badge. - [ ] **Step 4: Commit** ```bash git add src/components/DownloadCTA.astro src/pages/index.astro git commit -m "feat: add Download CTA section" ``` --- ### Task 10: Footer **Files:** - Create: `src/components/Footer.astro` - Modify: `src/pages/index.astro` - [ ] **Step 1: Create `src/components/Footer.astro`** ```astro --- const columns: Record = { Product: ['Features', 'Product', 'Download'], Privacy: ['Privacy Policy', 'Protected Space', 'Security'], Company: ['About', 'Support', 'Contact'], } ---

Talk Pro

Designed for modern communication,

privacy, and intelligent connection.

{Object.entries(columns).map(([heading, items]) => (

{heading}

{items.map((item) => ( {item} ))}
))}

© 2026 Talk Pro. All rights reserved.

Terms of Use · Privacy Policy · Support

``` - [ ] **Step 2: Update `src/pages/index.astro`** ```astro --- import Base from '../layouts/Base.astro' import Header from '../components/Header.astro' import Hero from '../components/Hero.astro' import CoreSystem from '../components/CoreSystem.astro' import UseCases from '../components/UseCases.astro' import DownloadCTA from '../components/DownloadCTA.astro' import Footer from '../components/Footer.astro' ---