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

src/components/FeatureCard.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { Component } from 'vue'
+
+defineProps<{
+  icon: Component
+  iconColor: string
+  iconBg: string
+  title: string
+  description: string
+}>()
+</script>
+
+<template>
+  <div class="flex flex-col gap-3.5 bg-[#F8FAFC] border border-[#E2E8F0] rounded-[14px] p-7 pt-8">
+    <!-- Icon box -->
+    <div
+      class="w-11 h-11 rounded-[10px] flex items-center justify-center shrink-0"
+      :style="{ backgroundColor: iconBg }"
+    >
+      <component :is="icon" :size="22" :stroke-width="1.75" :style="{ color: iconColor }" />
+    </div>
+
+    <!-- Title -->
+    <h3 class="text-[#0F172A] font-semibold text-base leading-snug">{{ title }}</h3>
+
+    <!-- Description -->
+    <p class="text-[#64748B] text-[13px] leading-[1.65]">{{ description }}</p>
+  </div>
+</template>