6199f78cfb
- FeatureCard: px-7 pt-8 pb-8 (design: padding [32,28]), h-full for equal heights - HeroSection: py-20 on mobile, gap-20 between columns, screenshot 380px - PrivacyBanner: py-14, gap-20, stat items min-w-[100px] - SeeItLiveSection: py-24, max-w-[640px] header, block img - FeaturesSection: gap-[72px] section, flex wrapper for equal-height cards - ScreenshotsSection: lg:h-[340px] images, px-6 py-5 info, gap-2 - HowItWorksSection: gap-20 columns, gap-10 steps, divide-y billing items, p-10 card - SupportSection: py-24, gap-16, flex wrappers for equal-height cards - ContactSection: py-20, gap-20, p-9 form card, gap-5 fields - AppFooter: pt-14 pb-7, border-b [#1E293B], pt-5 bottom bar
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.