Finn/talk-pro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Talk Pro landing page implementation plan

Browse Source 
11-task plan covering Astro scaffold, Tailwind tokens, Figma asset download, and all 6 page components (Header, Hero, CoreSystem, UseCases, DownloadCTA, Footer).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
TerryM
2026-05-12 16:07:42 +08:00
parent d49e276973
commit 906eb5c763
1 changed files with 782 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

782
docs/superpowers/plans/2026-05-12-talk-pro-landing.md Normal file
View File

@@ -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
---
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Talk Pro is a modern messaging app for private chats, group conversations, channels, voice and video calls." />
<title>{title}</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet" />
</head>
<body class="bg-surface font-sans overflow-x-hidden">
<slot />
</body>
</html>
```
- [ ] **Step 2: Replace `src/pages/index.astro`**
```astro
---
import Base from '../layouts/Base.astro'
---
<Base>
<p class="text-text-primary text-4xl font-bold p-8">Talk Pro — scaffold works</p>
</Base>
```
- [ ] **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
---
---
<header class="fixed top-0 left-0 w-full h-[78px] bg-[rgba(248,243,238,0.84)] border-b border-border-light backdrop-blur-sm z-50 flex items-center justify-center">
<div class="w-[1280px] flex items-center">
<div class="flex-1">
<a href="/" class="flex items-center gap-2 w-fit">
<img src="/assets/logo-icon.png" alt="Talk Pro icon" class="h-[42px] w-[53px] object-cover" />
<img src="/assets/logo-wordmark.png" alt="Talk Pro" class="h-6" />
</a>
</div>
<nav class="flex items-center gap-7 font-bold text-[14px] text-text-secondary tracking-[-0.09px]">
<a href="#" class="hover:text-text-primary transition-colors">Home</a>
<a href="#" class="hover:text-text-primary transition-colors">Features</a>
<a href="#" class="hover:text-text-primary transition-colors">Product</a>
<a href="#" class="hover:text-text-primary transition-colors">Privacy</a>
<a href="#" class="hover:text-text-primary transition-colors">About</a>
</nav>
<div class="flex-1 flex justify-end">
<button class="bg-brand text-white font-bold text-[14px] px-[22px] py-[13px] rounded-[17px] hover:opacity-90 transition-opacity">
Download
</button>
</div>
</div>
</header>
<div class="h-[78px]"></div>
```
- [ ] **Step 2: Update `src/pages/index.astro`**
```astro
---
import Base from '../layouts/Base.astro'
import Header from '../components/Header.astro'
---
<Base>
<Header />
</Base>
```
- [ ] **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]',
},
]
---
<section class="relative w-full overflow-hidden">
<img src="/assets/hero-bg.png" alt="" class="absolute inset-0 w-full h-full object-cover pointer-events-none" aria-hidden="true" />
<div class="relative flex items-center gap-[70px] h-[683px] px-[130px] py-[80px] max-w-[1440px] mx-auto">
<!-- Left column -->
<div class="flex flex-col gap-[30px] items-start w-[600px] shrink-0">
<div class="flex flex-col gap-6">
<div class="bg-[rgba(255,255,255,0.62)] border border-white px-[14px] py-[9px] rounded-full w-fit">
<p class="font-bold text-text-secondary text-[14px] tracking-[-0.09px] whitespace-pre">✦ Available on iOS and Android</p>
</div>
<div class="font-bold text-text-primary text-[72px] tracking-[-1.61px] leading-[0.96] w-[560px]">
<p>One User.</p>
<p>Multiple Worlds.</p>
</div>
<p class="text-text-secondary text-[20px] font-normal leading-[1.5] tracking-[-0.33px]">
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.
</p>
</div>
<div class="flex items-center gap-[14px]">
<button class="bg-brand text-white font-bold text-[15px] px-6 py-[14px] rounded-[17px] tracking-[-0.13px] hover:opacity-90 transition-opacity whitespace-pre">
Download Talk Pro ↓
</button>
<button class="bg-[rgba(255,255,255,0.55)] border border-border-light text-text-primary font-bold text-[15px] px-6 py-[14px] rounded-[17px] tracking-[-0.13px] hover:bg-white transition-colors whitespace-pre">
Explore Features →
</button>
</div>
<div class="flex items-center gap-[10px]">
{['Identity Layer', 'AI Native Messaging', 'Adaptive Privacy'].map((tag) => (
<div class="bg-[rgba(255,255,255,0.68)] border border-white px-[14px] py-[9px] rounded-full">
<p class="font-bold text-text-secondary text-[14px] tracking-[-0.09px] whitespace-nowrap">{tag}</p>
</div>
))}
</div>
</div>
<!-- Phone mockup -->
<div class="relative h-[690px] w-[430px] shrink-0">
<div class="absolute bg-text-primary h-[620px] left-[63px] rounded-[44px] top-[35px] w-[304px] overflow-hidden">
<img src="/assets/hero-phone.png" alt="Talk Pro app" class="absolute left-3 top-3 w-[280px] h-[596px] rounded-[34px] object-cover" />
</div>
{floatCards.map((card) => (
<div class={`absolute ${card.pos} flex items-start gap-3 bg-[rgba(255,255,255,0.86)] border border-white backdrop-blur-[3.7px] rounded-[24px] pl-4 pr-[18px] py-4`}>
<div class="bg-[#fff0e5] rounded-[14px] size-[38px] flex items-center justify-center shrink-0">
<span class="text-brand font-bold text-[18px]">{card.icon}</span>
</div>
<div class="flex flex-col gap-1">
<p class="font-bold text-text-primary text-[14px] tracking-[-0.09px] whitespace-nowrap">{card.title}</p>
<p class="text-text-secondary text-[12px] font-normal leading-[1.45] tracking-[0.01px] w-[185px]">{card.desc}</p>
</div>
</div>
))}
</div>
</div>
</section>
```
- [ ] **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'
---
<Base>
<Header />
<Hero />
</Base>
```
- [ ] **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)]
---
<section class="flex flex-col items-center px-[130px] py-[110px] max-w-[1440px] mx-auto">
<div class="flex flex-col items-center pb-[60px] w-full">
<p class="font-bold text-brand text-[13px] tracking-[-0.04px]">CORE SYSTEM</p>
<div class="h-[15px]"></div>
<div class="font-bold text-text-primary text-[52px] text-center tracking-[-1.16px] leading-[0.96]">
<p>Built for how modern</p>
<p>communication actually works.</p>
</div>
<div class="h-5"></div>
<p class="text-text-secondary text-[18px] font-normal leading-[1.5] text-center tracking-[-0.26px] max-w-[900px]">
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.
</p>
</div>
<div class="flex flex-col gap-[22px] w-[1280px]">
{rows.map((row) => (
<div class="flex gap-[22px]">
{row.map((card) => (
<div class="flex-1 flex flex-col items-center bg-[rgba(255,255,255,0.78)] border border-white rounded-[30px] p-8">
<div class="size-[240px] shrink-0 overflow-hidden rounded-2xl">
<img src={card.img} alt={card.title} class="w-full h-full object-cover" />
</div>
<div class="h-[22px]"></div>
<p class="font-bold text-text-primary text-[25px] tracking-[-0.5px] w-full">{card.title}</p>
<div class="h-[14px]"></div>
<p class="text-text-secondary text-[15px] font-normal leading-[1.5] tracking-[-0.13px] w-full">{card.desc}</p>
</div>
))}
</div>
))}
</div>
</section>
```
- [ ] **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'
---
<Base>
<Header />
<Hero />
<CoreSystem />
</Base>
```
- [ ] **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.' },
]
---
<section class="flex flex-col items-center bg-surface px-[130px] py-[110px] w-full">
<div class="flex flex-col items-center pb-[60px] max-w-[1180px] w-full">
<p class="font-bold text-brand text-[13px] tracking-[2.86px]">USE CASES</p>
<div class="h-[15px]"></div>
<p class="font-bold text-text-primary text-[52px] text-center tracking-[-2.6px] leading-[1.04]">
Designed for the worlds you already live in.
</p>
<div class="h-5"></div>
<p class="text-text-secondary text-[18px] font-normal leading-[1.75] text-center max-w-[900px]">
Work, private life, and protected conversations should not interfere with each other inside one identity.
</p>
</div>
<div class="flex gap-[22px]">
{cases.map((c) => (
<div class="bg-[rgba(255,255,255,0.78)] border border-white rounded-[30px] p-8 h-[245px] w-[378px] flex flex-col">
<p class="font-bold text-text-primary text-[25px] tracking-[-0.75px]">{c.title}</p>
<div class="h-4"></div>
<p class="text-text-secondary text-[15px] font-normal leading-[1.72]">{c.desc}</p>
</div>
))}
</div>
</section>
```
- [ ] **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'
---
<Base>
<Header />
<Hero />
<CoreSystem />
<UseCases />
</Base>
```
- [ ] **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
---
---
<section class="flex flex-col items-center bg-surface-alt px-[130px] py-[110px] w-full">
<div class="bg-[rgba(255,255,255,0.78)] rounded-[34px] p-[52px] flex flex-col items-center max-w-[1180px] w-full">
<p class="font-bold text-brand text-[13px] tracking-[2.86px]">DOWNLOAD</p>
<div class="h-[15px]"></div>
<div class="font-bold text-text-primary text-[44px] text-center tracking-[-2.2px] leading-[1.04] max-w-[1076px]">
<p>Start with one conversation.</p>
<p>Build your own communication space.</p>
</div>
<div class="h-5"></div>
<p class="text-text-secondary text-[18px] font-normal leading-[1.75] text-center max-w-[800px]">
Talk Pro supports iOS and Android. Official store links, QR codes, version information, and compatibility notes are reserved on the download page.
</p>
<div class="h-8"></div>
<div class="flex gap-2 items-center">
<!-- Android badge -->
<div class="bg-brand border border-border-light rounded-[20px] flex items-center gap-2 h-[70px] px-4 py-3">
<img src="/assets/badge-android-icon.png" alt="Android" class="size-[44px]" />
<div class="flex flex-col gap-[3px]">
<p class="font-bold text-[#ffd6bc] text-[11px] tracking-[0.66px]">ANDROID</p>
<p class="font-bold text-white text-[15px]">Download APK</p>
</div>
</div>
<!-- iOS badge -->
<div class="bg-[rgba(18,18,18,0.94)] border border-border-light rounded-[20px] flex items-center gap-2 h-[70px] px-4 py-3">
<div class="bg-[#323232] rounded-[12px] size-[44px] flex items-center justify-center">
<img src="/assets/badge-ios-icon.png" alt="Apple" class="w-[22px] h-[27px]" />
</div>
<div class="flex flex-col gap-[3px]">
<p class="font-bold text-[#ccc] text-[11px] tracking-[0.66px]">IOS</p>
<p class="font-bold text-white text-[15px]">Coming on App Store</p>
</div>
</div>
</div>
</div>
</section>
```
- [ ] **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'
---
<Base>
<Header />
<Hero />
<CoreSystem />
<UseCases />
<DownloadCTA />
</Base>
```
- [ ] **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<string, string[]> = {
Product: ['Features', 'Product', 'Download'],
Privacy: ['Privacy Policy', 'Protected Space', 'Security'],
Company: ['About', 'Support', 'Contact'],
}
---
<footer class="bg-surface-footer px-[130px] pt-[58px] pb-[30px] w-full">
<div class="flex gap-[42px] items-start max-w-[1180px]">
<!-- Brand -->
<div class="flex flex-col gap-[14px] w-[280px]">
<div class="bg-brand rounded-[12px] size-9"></div>
<p class="font-bold text-text-primary text-[18px] tracking-[-0.54px]">Talk Pro</p>
<div class="text-text-secondary text-[14px] font-normal leading-[1.7]">
<p>Designed for modern communication,</p>
<p>privacy, and intelligent connection.</p>
</div>
</div>
<div class="flex-1"></div>
{Object.entries(columns).map(([heading, items]) => (
<div class="flex flex-col gap-3">
<p class="font-bold text-text-primary text-[15px]">{heading}</p>
{items.map((item) => (
<a href="#" class="text-text-secondary text-[14px] font-normal hover:text-text-primary transition-colors whitespace-nowrap">{item}</a>
))}
</div>
))}
</div>
<div class="h-11"></div>
<div class="max-w-[1180px] border-t border-border-light"></div>
<div class="h-6"></div>
<div class="flex items-center gap-5 max-w-[1180px]">
<p class="text-text-secondary text-[14px] font-normal">© 2026 Talk Pro. All rights reserved.</p>
<div class="flex-1"></div>
<p class="text-text-secondary text-[14px] font-normal">Terms of Use · Privacy Policy · Support</p>
</div>
</footer>
```
- [ ] **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'
---
<Base>
<Header />
<Hero />
<CoreSystem />
<UseCases />
<DownloadCTA />
<Footer />
</Base>
```
- [ ] **Step 3: Verify in dev server**
Scroll to the very bottom. Expected: Warm beige footer with Talk Pro brand, three link columns (Product, Privacy, Company), divider line, copyright and legal links.
- [ ] **Step 4: Commit**
```bash
git add src/components/Footer.astro src/pages/index.astro
git commit -m "feat: add Footer component"
```
---
### Task 11: Production build verification
**Files:** None new
- [ ] **Step 1: Stop the dev server (Ctrl+C), then run a production build**
```bash
npm run build
```
Expected: `dist/` folder created, zero errors, zero TypeScript errors.
- [ ] **Step 2: Preview the production build**
```bash
npm run preview
```
Open http://localhost:4321. Scroll through the full page and verify:
- All 6 sections render (Header, Hero, CoreSystem, UseCases, DownloadCTA, Footer)
- All images load (no broken image icons)
- Inter font displays correctly
- Orange brand color `#f28a4b` is visible on buttons and labels
- Cream background `#f8f3ee` throughout
- [ ] **Step 3: Final commit**
```bash
git add -A
git commit -m "feat: complete Talk Pro landing page"
```