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
51 lines
2.0 KiB
Vue
51 lines
2.0 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>
|
|
<!-- Design: padding [56, 100], gap 80, alignItems center -->
|
|
<section class="bg-[#0F172A]">
|
|
<div class="page-container flex flex-col lg:flex-row items-start lg:items-center gap-20 py-14">
|
|
|
|
<!-- Left: gap 12 -->
|
|
<div v-reveal class="flex-1 flex flex-col gap-3 min-w-0">
|
|
<!-- Label: fill #1E3A5F, cornerRadius 4, padding [4,10] -->
|
|
<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>
|
|
<!-- Title: 28px bold, lineHeight 1.2, max-w 500 -->
|
|
<h2 class="text-white font-bold text-[28px] leading-[1.2] max-w-[500px]">
|
|
Student data never leaves your school.
|
|
</h2>
|
|
<!-- Sub: 15px, lineHeight 1.6, max-w 500 -->
|
|
<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: gap 40, stat items centered -->
|
|
<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-[100px]"
|
|
>
|
|
<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>
|