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
47 lines
1.8 KiB
Vue
47 lines
1.8 KiB
Vue
<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>
|