TalkPOS Website — Next.js 14 + Tailwind CSS

Production-ready marketing website for TalkPOS, built with Next.js 14 App Router and Tailwind CSS.

🚀 Quick Start

npm install
npm run dev

Open http://localhost:3000

📁 Project Structure

src/
├── app/
│   ├── layout.tsx          # Root layout + fonts (Be Vietnam Pro, Syne)
│   ├── page.tsx            # Page assembly
│   └── globals.css         # Tailwind base + custom animations
│
└── components/
    ├── ScrollReveal.tsx     # Client-side intersection observer for .reveal
    ├── Navbar.tsx           # Fixed top navigation
    ├── Hero.tsx             # Hero section (bg image + phone mockup)
    ├── PhoneMockup.tsx      # App UI phone illustration
    ├── StatsBar.tsx         # 4 key metrics bar
    ├── Templates.tsx        # 5 business template cards
    ├── VoiceSection.tsx     # AI voice demo section
    ├── Features.tsx         # 6-feature grid
    ├── Ledger.tsx           # Sổ sách demo section
    ├── TaxCalculator.tsx    # TaxCalculator section
    ├── Testimonials.tsx     # 3 customer testimonials
    ├── Pricing.tsx          # 3-tier pricing cards
    ├── CtaBanner.tsx        # Bottom CTA with bg photo
    └── Footer.tsx           # Footer with link columns

public/
└── images/
    ├── README.md            # ← Image replacement guide
    ├── hero-bg.jpg          # TODO: replace with your photo
    └── og-image.jpg         # TODO: replace with OG image

🖼️ Replacing Images

See public/images/README.md for the full list of images to replace.

Minimum required:

• public/images/hero-bg.jpg — your Vietnamese street market photo (used in Hero + CTA)

Just drop your file in and the site will use it automatically.

🎨 Design Tokens

Colors are defined in tailwind.config.ts under theme.extend.colors.brand:

brand: {
  red:   '#E8381A',   // Primary accent
  gold:  '#F5A623',   // Secondary / warnings
  green: '#1DB954',   // Success / positive
  ink:   '#0D0D0D',   // Background
  dark:  '#141414',   // Section background
  card:  '#1C1C1C',   // Card background
  cream: '#F5F0E8',   // Primary text
  muted: '#888888',   // Muted text
}

🌐 Deployment

Vercel (recommended)

npx vercel

Or connect your GitHub repo at vercel.com — zero config needed.

Static export

npm run build
npm run start

📦 Tech Stack

• Next.js 14 — App Router, Server Components
• Tailwind CSS 3 — Utility-first styling
• TypeScript — Full type safety
• next/font — Google Fonts (Be Vietnam Pro + Syne) with zero layout shift
• next/image — Automatic image optimization