# PatinaTab Landing Page

## Overview
PatinaTab is a highly customizable new tab dashboard browser extension built with React, TypeScript, and WXT framework. The landing page showcases the product's features, pricing, and provides multilingual support.

## Tech Stack
- **Framework**: React 19 with TypeScript
- **Routing**: Wouter (lightweight routing library)
- **Styling**: Tailwind CSS v4 with custom Nothing Design system
- **Build Tool**: Vite
- **Browser Extension Framework**: WXT
- **Icons**: Lucide React
- **Internationalization**: Custom i18n implementation

## Pages & Routes
- `/` - Main landing page with hero, features, pricing, FAQ, and contact sections
- `/try` - Try Mode (demo without installation)
- `/changelog` - Version history and updates
- `/contact` - Contact form for bug reports, feature requests, and general inquiries
- `/privacy` - Privacy policy
- `/terms` - Terms of service
- `/thank-you` - Post-purchase thank you page
- `/redirect` - Payment redirect handler

## Core Features

### Hero Section
- Product tagline and value proposition
- Chrome Web Store installation CTA
- Try Mode link (no-install demo)
- Animated floating app icon with ambient glow effect

### Feature Showcase (Bento Grid Layout)
- **Dynamic Layouts**: Drag-and-drop widget system with 5 preset modes (default, productivity, design, focused, relaxation)
- **13+ Widget Library**: Clock, Weather, Stock Ticker, RSS Feed, Countdown, Links, Website Blocker, Tasks, Habits, Timer, Search, AI Launchpad, Notes
- **Widget Interactive Preview**: Real-time widget demonstration with active state management
- **Local Storage & Privacy**: All data stored locally in IndexedDB, no tracking or servers
- **Multi-Language Support**: English, Traditional Chinese (繁體中文), Simplified Chinese (简体中文)

### Pricing Section
#### Free Plan ($0)
- 13+ core widgets
- 1 saved custom layout
- Local storage & privacy
- Multi-language support

#### Pro Plan
- **Monthly**: $4.99/month
- **Yearly**: $49.99/year ($4.16/month, save 33%)
- Everything in Free
- Unlimited custom layouts
- Calendar widget with Google Calendar/ICS integration (Pro exclusive)
- Meeting Optimizer (Pro exclusive)
- Priority support
- 30-day money-back guarantee
- Powered by Stripe with 256-bit SSL encryption

### FAQ Section
- Is PatinaTab free?
- What is included in Pro?
- Where is my data stored?

## Widget Types
1. **Clock** - Local system time display
2. **Weather** - Atmospheric sensors and weather data
3. **Stock Ticker** - Stock price tracking
4. **RSS Feed** - News and content feeds
5. **Countdown** - Event countdown timers
6. **Links** - Quick access bookmarks
7. **Website Blocker** - Distraction blocking
8. **Tasks** - Task management
9. **Habits** - Habit tracking
10. **Timer** - Countdown timer
11. **Search** - Quick search functionality
12. **AI Launchpad** - AI tools access
13. **Notes** - Quick notes (Free)
14. **Calendar** - Google Calendar/ICS integration (Pro)
15. **Meeting Optimizer** - Meeting management (Pro)

## Design System
- **Theme**: Nothing Design aesthetic with dark mode
- **Colors**: 
  - Background: nd-black (#1A1412)
  - Accent: nd-accent (turquoise/teal)
  - Text: Primary, secondary, disabled states
  - Surface: Raised elements with borders
- **Typography**: 
  - Headings: Extra bold, large scale (up to 9xl)
  - Body: Light weight, high readability
  - Mono: Technical elements, version badges, navigation
- **Components**: Bento cards, ghost buttons, CTA buttons, scroll-reveal animations

## Internationalization
Supported languages with full translation coverage:
- `en` - English
- `zh-TW` - Traditional Chinese (繁體中文)
- `zh-CN` - Simplified Chinese (简体中文)

Automatic browser language detection with manual override via language switcher in navigation.

## Pro Widgets
Pro-exclusive features locked behind payment:
- `calendar` - Full Google Calendar and ICS file integration
- `meeting_optimizer` - AI-powered meeting optimization tools

## Social Proof
- 60+ users on Chrome Web Store
- 5-star rating display with user avatars
- Links to Chrome Web Store reviews

## Technical Implementation
- **Scroll Reveal**: IntersectionObserver-based animations with delay classes
- **State Management**: React hooks (useState, useCallback, useEffect)
- **Widget Preview System**: Dynamic component mapping with fallback UI
- **Responsive Design**: Mobile-first with lg breakpoints for desktop enhancements
- **Performance**: Lazy loading, optimized images, minimal bundle size

## Development Commands
```bash
npm run dev:landing        # Start development server
npm run build:landing      # Build for production (includes pre/post build scripts)
```

## Company Information
- **Company**: Silicon Heart Limited
- **Copyright**: © 2026
- **Chrome Web Store**: https://chromewebstore.google.com/detail/patinatab/dhcdkjfilgbpgfpcbcbpjebkgpmapbbc
- **Current Version**: v6.0.0

## Privacy & Data
- All user data stored exclusively in browser's local storage
- No external servers, tracking, or data collection
- No credit card required for free tier
- Privacy-first architecture by design