# TapTrack Website — Development Plan

**Stack:** Vue 3 + TypeScript · Tailwind CSS v4 · Vite  
**Deployment:** Vercel / Netlify  
**Design source:** `pencil-new.pen`

---

## Phase 1 — Project Scaffold & Foundation
**Goal:** Runnable dev server with global styles, fonts, and design tokens in place.

### Tasks
1. Scaffold project with `npm create vite@latest` (Vue + TypeScript)
2. Install and configure Tailwind CSS v4
3. Install `lucide-vue-next` for icons
4. Add Inter font via Google Fonts (`index.html`)
5. Define global CSS variables (colors, spacing) from design tokens
6. Set up base `App.vue` shell with router placeholder
7. Move `public/screenshots/` and `Reports.jpg` into `public/` asset tree
8. Verify `npm run dev` runs clean with blank page

### Deliverable
Clean Vite + Vue 3 + Tailwind v4 dev server at `localhost:5173`

---

## Phase 2 — Layout Shell & Navigation
**Goal:** Full-width page shell with sticky nav and footer wired up.

### Tasks
1. Create `AppNavbar.vue`
   - TapTrack logo mark (blue "T" box) + wordmark
   - Nav links: Features, How It Works, Services, Contact
   - "Request a Demo" CTA button (scrolls to contact section)
   - Sticky on scroll, white background, bottom border
2. Create `AppFooter.vue`
   - Brand column with logo + tagline
   - 3 link columns: Product, Company, Legal
   - Bottom bar with copyright
3. Wire `App.vue` → `AppNavbar` + `<router-view>` + `AppFooter`
4. Create `LandingPage.vue` as the `/` route

### Deliverable
Navigable page shell with working sticky header and footer

---

## Phase 3 — Hero Section
**Goal:** Above-the-fold hero with real screenshot mockup.

### Tasks
1. Create `HeroSection.vue`
   - "Built for Philippine Schools" pill badge
   - H1: "Attendance That Runs Itself."
   - Subtitle paragraph
   - Two CTA buttons ("Request a Demo" + "See How It Works")
   - Trust row (two checkmark lines)
   - Right column: screenshot of Live Attendance (`public/screenshots/58IBI.png`) in a rounded frame with border
   - Caption below screenshot
2. Responsive: stack to single column on mobile

### Deliverable
Pixel-faithful hero section matching the Pencil design

---

## Phase 4 — Privacy Banner & "See It Live" Section
**Goal:** Two full-width sections between Hero and Features.

### Tasks
1. Create `PrivacyBanner.vue`
   - Dark navy background
   - Left: "DATA PRIVACY" label + headline + subtitle
   - Right: 3 stat items (On-Premises, DepEd Aligned, Works Offline) with Lucide icons
2. Create `SeeItLiveSection.vue`
   - Light blue background
   - Centered headline + subtitle
   - Gate View screenshot (`public/screenshots/gE861.png`) in rounded frame
   - Caption below

### Deliverable
Two polished full-width sections

---

## Phase 5 — Features Section
**Goal:** 6-card features grid.

### Tasks
1. Create reusable `FeatureCard.vue` component
   - Props: icon name, icon bg color, icon color, title, description
2. Create `FeaturesSection.vue`
   - "WHAT TAPTRACK DOES" label + headline + subtitle
   - 2 rows × 3 cards using `FeatureCard`
   - Cards: NFC Tap-In, Parent SMS, Live Dashboard, Reports, Student Mgmt, SMS Credits

### Deliverable
Full features grid, pixel-faithful to design

---

## Phase 6 — App Screenshots Section
**Goal:** 2-column screenshot showcase with labels.

### Tasks
1. Create `ScreenshotsSection.vue`
   - "INSIDE TAPTRACK" label + headline + subtitle
   - 2-column grid:
     - Student Directory card (`public/screenshots/4frZA.png`)
     - Reports & Analytics card (`Reports.jpg`)
   - Each card: screenshot image + title + description below
2. Responsive: stack to single column on mobile

### Deliverable
Screenshot showcase section

---

## Phase 7 — How It Works Section
**Goal:** 3-step explainer + billing card side panel.

### Tasks
1. Create `HowItWorksSection.vue`
   - Left column: "HOW IT WORKS" label + headline + subtitle + 3 numbered steps
   - Right column: "How billing works" white card
     - One-Time Implementation Fee item
     - Prepaid SMS Credits item
     - "No subscription fee" green note

### Deliverable
How It Works section with billing breakdown

---

## Phase 8 — Support Section
**Goal:** 5 support cards + 1 quote card.

### Tasks
1. Reuse `FeatureCard.vue` or create `SupportCard.vue`
2. Create `SupportSection.vue`
   - "AFTER-SALES SUPPORT" label + headline + subtitle
   - Row 1: Dedicated Support, System Updates, Staff Re-training
   - Row 2: Remote Troubleshooting, Data Backup, Quote card (blue tint)

### Deliverable
Full support section

---

## Phase 9 — Contact / CTA Section
**Goal:** Dark contact section with embedded demo request form.

### Tasks
1. Create `ContactSection.vue`
   - Dark navy background
   - Left: "GET IN TOUCH" label + headline + subtitle + 3 bullet points
   - Right: dark "Request a Demo" form card
     - Fields: School Name, Contact Person, Phone / Email
     - "Send Request" blue button
2. Wire up basic form validation (required fields)
3. Optional: integrate with Formspree or EmailJS for real submissions

### Deliverable
Working contact/demo request form

---

## Phase 10 — Polish, Responsiveness & Deployment
**Goal:** Production-ready site, fully responsive, deployed.

### Tasks
1. Mobile responsiveness pass for all sections (breakpoints: sm, md, lg)
2. Smooth scroll behavior for anchor nav links
3. Scroll-triggered fade-in animations (Intersection Observer)
4. Add `<meta>` SEO tags (title, description, og:image)
5. Favicon using the TapTrack "T" blue mark
6. Run `npm run build` — fix any TypeScript or Tailwind errors
7. Deploy to Vercel (connect GitHub repo → auto deploy)
8. Verify live URL renders correctly

### Deliverable
Live production URL on Vercel/Netlify

---

## Section → Component Map

| Section | Component | Screenshot / Asset |
|---|---|---|
| Navigation | `AppNavbar.vue` | — |
| Hero | `HeroSection.vue` | `58IBI.png` |
| Privacy Banner | `PrivacyBanner.vue` | — |
| See It Live | `SeeItLiveSection.vue` | `gE861.png` |
| Features | `FeaturesSection.vue` + `FeatureCard.vue` | — |
| App Screenshots | `ScreenshotsSection.vue` | `4frZA.png` + `Reports.jpg` |
| How It Works | `HowItWorksSection.vue` | — |
| Support | `SupportSection.vue` | — |
| Contact / CTA | `ContactSection.vue` | — |
| Footer | `AppFooter.vue` | — |

---

## Design Tokens

| Token | Value |
|---|---|
| Primary blue | `#1D4ED8` |
| Dark navy | `#0F172A` |
| Body text | `#475569` |
| Muted text | `#64748B` |
| Subtle text | `#94A3B8` |
| Background alt | `#F8FAFF` |
| Card background | `#F8FAFC` |
| Border | `#E2E8F0` |
| Font | Inter |
| Icons | Lucide (lucide-vue-next) |
| Page width | 1440px max, 100px padding |