TapTrack-Website/PLAN.md

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