Finn/talk-pro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
b8103ea072a111acedb62493b41b5a52b5d6ad4e
talk-pro/docs/superpowers/plans/2026-05-12-talk-pro-landing.md
TerryM 906eb5c763 Add Talk Pro landing page implementation plan 
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>
2026-05-12 16:07:42 +08:00

25 KiB
Raw Blame History

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

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

npx astro add tailwind --yes

This creates tailwind.config.mjs and updates astro.config.mjs.

  • Step 3: Verify build works
npm run build

Expected: dist/ folder created, no errors.

  • Step 4: Commit scaffold
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

/** @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
@tailwind base;
@tailwind components;
@tailwind utilities;
  • Step 3: Verify build
npm run build

Expected: No errors.

  • Step 4: Commit
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:

#!/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
chmod +x scripts/download-assets.sh && bash scripts/download-assets.sh

Expected output: Done. 13 assets downloaded.

  • Step 3: Verify
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
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

---
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
---
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
npm run dev

Open http://localhost:4321. Expected: "Talk Pro — scaffold works" in #2e2a28 on cream #f8f3ee background, Inter font.

  • Step 4: Commit
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

---
---

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

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

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

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

---
---

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

---
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
---
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
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
npm run build

Expected: dist/ folder created, zero errors, zero TypeScript errors.

  • Step 2: Preview the production build
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

git add -A
git commit -m "feat: complete Talk Pro landing page"
Reference in New Issue View Git Blame Copy Permalink