diff --git a/docs/superpowers/plans/2026-05-12-talk-pro-landing.md b/docs/superpowers/plans/2026-05-12-talk-pro-landing.md new file mode 100644 index 0000000..3ed8cba --- /dev/null +++ b/docs/superpowers/plans/2026-05-12-talk-pro-landing.md @@ -0,0 +1,782 @@ +# 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' +--- + + +
+ + + + +