5376d1b1d5
- 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
218 lines
6.5 KiB
Markdown
218 lines
6.5 KiB
Markdown
# 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 |
|