feat: complete TapTrack landing page — Phases 1-10
- Vite + Vue 3 + TypeScript + Tailwind CSS v4 scaffold - lucide-vue-next icons, Inter font, design tokens - AppNavbar: sticky, scroll shadow, mobile hamburger - AppFooter: dark navy, 3 link columns, copyright bar - HeroSection: pill badge, H1, CTAs, trust row, screenshot - PrivacyBanner: dark, 3 stat icons (Server/Shield/WifiOff) - SeeItLiveSection: gate kiosk screenshot showcase - FeaturesSection: 6-card grid with Lucide icons - ScreenshotsSection: Student Directory + Reports.jpg cards - HowItWorksSection: 3 steps + billing card - SupportSection: 5 support cards + quote card - ContactSection: form with Formspree, validation, success state - v-reveal directive: Intersection Observer scroll animations - SEO meta tags + Open Graph + Twitter Card - vercel.json SPA rewrite rule - Build: 100KB JS / 19KB CSS, 0 errors
This commit is contained in:
kevin-asprec
217
PLAN.md
Normal file
217
PLAN.md
Normal file
@@ -0,0 +1,217 @@
|
||||
# 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 |
|
||||
Reference in New Issue
Block a user