From d49e2769737a47c505e6514f4f8a14a9bf61af1d Mon Sep 17 00:00:00 2001 From: TerryM Date: Tue, 12 May 2026 16:02:47 +0800 Subject: [PATCH] Add Talk Pro landing page design spec Documents the Astro + Tailwind architecture, component breakdown, design tokens, and asset strategy for the Talk Pro marketing landing page. Co-Authored-By: Claude Sonnet 4.6 --- .../2026-05-12-talk-pro-landing-design.md | 133 ++++++++++++++++++ 1 file changed, 133 insertions(+) create mode 100644 docs/superpowers/specs/2026-05-12-talk-pro-landing-design.md diff --git a/docs/superpowers/specs/2026-05-12-talk-pro-landing-design.md b/docs/superpowers/specs/2026-05-12-talk-pro-landing-design.md new file mode 100644 index 0000000..c41e0b0 --- /dev/null +++ b/docs/superpowers/specs/2026-05-12-talk-pro-landing-design.md @@ -0,0 +1,133 @@ +# 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