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/PrivacyBanner.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { Server, Shield, WifiOff } from 'lucide-vue-next'
+
+const stats = [
+  { icon: Server, label: 'On-Premises', sub: 'Your server only' },
+  { icon: Shield, label: 'DepEd Aligned', sub: 'Data privacy ready' },
+  { icon: WifiOff, label: 'Works Offline', sub: 'No internet required' },
+]
+</script>
+
+<template>
+  <section class="bg-[#0F172A]">
+    <div class="page-container flex flex-col lg:flex-row items-start lg:items-center gap-12 lg:gap-20 py-14">
+
+      <!-- Left: Text content -->
+      <div v-reveal class="flex-1 flex flex-col gap-3 min-w-0">
+        <div class="w-fit bg-[#1E3A5F] rounded px-[10px] py-1">
+          <span class="text-[#60A5FA] font-semibold text-[11px] tracking-[1px] uppercase">
+            Data Privacy
+          </span>
+        </div>
+        <h2 class="text-white font-bold text-[28px] leading-[1.2] max-w-[500px]">
+          Student data never leaves your school.
+        </h2>
+        <p class="text-[#94A3B8] text-[15px] leading-[1.6] max-w-[500px]">
+          TapTrack runs entirely on your own server. No student records, attendance logs, or personal data are ever uploaded to a third-party cloud.
+        </p>
+      </div>
+
+      <!-- Right: Stat items -->
+      <div class="flex flex-row flex-wrap gap-10 shrink-0">
+        <div
+          v-for="(stat, i) in stats"
+          :key="stat.label"
+          v-reveal="{ delay: i * 100 }"
+          class="flex flex-col items-center gap-1.5 min-w-[90px]"
+        >
+          <component :is="stat.icon" class="text-[#60A5FA]" :size="28" :stroke-width="1.75" />
+          <span class="text-white font-semibold text-[13px]">{{ stat.label }}</span>
+          <span class="text-[#64748B] text-[12px]">{{ stat.sub }}</span>
+        </div>
+      </div>
+
+    </div>
+  </section>
+</template>