- 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
40 lines
2.0 KiB
HTML
40 lines
2.0 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
|
<!-- Primary SEO -->
|
|
<title>TapTrack — Attendance That Runs Itself</title>
|
|
<meta name="description" content="TapTrack is an on-premises NFC student attendance system built for Philippine schools. Students tap their ID card, parents get an SMS, records update instantly. No cloud. No subscription." />
|
|
<meta name="keywords" content="NFC attendance, student attendance Philippines, RFID attendance system, DepEd attendance, school attendance automation, SMS parent notification" />
|
|
<meta name="author" content="TapTrack" />
|
|
|
|
<!-- Open Graph / Facebook -->
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:url" content="https://taptrack.ph/" />
|
|
<meta property="og:title" content="TapTrack — Attendance That Runs Itself" />
|
|
<meta property="og:description" content="On-premises NFC attendance for Philippine schools. Students tap, parents get SMS, records update automatically." />
|
|
<meta property="og:image" content="/screenshots/58IBI.png" />
|
|
|
|
<!-- Twitter Card -->
|
|
<meta name="twitter:card" content="summary_large_image" />
|
|
<meta name="twitter:title" content="TapTrack — Attendance That Runs Itself" />
|
|
<meta name="twitter:description" content="On-premises NFC attendance for Philippine schools. Students tap, parents get SMS, records update automatically." />
|
|
<meta name="twitter:image" content="/screenshots/58IBI.png" />
|
|
|
|
<!-- Inter Font -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
|
|
rel="stylesheet"
|
|
/>
|
|
</head>
|
|
<body>
|
|
<div id="app"></div>
|
|
<script type="module" src="/src/main.ts"></script>
|
|
</body>
|
|
</html>
|