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
TapTrack — Marketing Website
Official marketing and product website for TapTrack, a smart NFC-based student attendance management system built for Philippine schools.
About TapTrack
TapTrack automates student attendance tracking with:
- NFC tap-in for instant, paperless attendance
- Real-time SMS alerts to parents
- Cloud-based dashboards for administrators and principals
- Automated monthly billing and reports
Project Structure
TapTrack Website/
├── src/
│ ├── components/ # Reusable UI components
│ ├── pages/ # Page components
│ ├── assets/ # Images, icons, fonts
│ └── styles/ # Global styles & Tailwind config
├── public/ # Static assets
└── index.html
Tech Stack (Planned)
- Framework: Vue 3 + TypeScript
- Styling: Tailwind CSS v4
- Build: Vite
- Deployment: Vercel / Netlify
Design
Mock design created in Pencil. Pending approval before development begins.
Pages
/— Landing page (hero, features, pricing, testimonials)/features— Full features breakdown/pricing— Detailed pricing & comparison/about— Company story/contact— Contact & demo request form/blog— News & updates
Getting Started
npm install
npm run dev
Status
Design phase — awaiting approval before development begins.