"use client"; import { useEffect, useMemo, useRef, useState } from "react"; import Link from "next/link"; import { useLang } from "@/context/LanguageContext"; import { LanguageSwitcher } from "@/components/LanguageSwitcher"; import { IncrelogLogo } from "@/components/IncrelogLogo"; import { Alert, Button, Input, Select, Spinner, EmptyState, Skeleton, Textarea, } from "@/components/ui"; import { INSTITUTION_TYPES } from "@/lib/constants"; import { PricingCategory, yearlyEffectiveMonthly } from "@/lib/pricing"; import { formatBDT, formatNumber } from "@/lib/utils"; import { api, useApi } from "@/lib/client"; import { IconAcademic, IconArrowRight, IconAward, IconBell, IconBook, IconBriefcase, IconBuilding, IconCard, IconCheck, IconClipboard, IconDashboard, IconHome, IconLayers, IconMessageCircle, IconPackage, IconSparkle, IconTrend, IconUserCheck, IconUsers, IconWallet, } from "@/components/icons"; /** One student-count slab inside a pricing card (DB-backed, admin-managed). */ interface PricingTierView { id: number; minStudents: number; maxStudents: number | null; monthlyPrice: number; yearlyDiscount: number; } type PricingCategoryView = PricingCategory & { tiers: PricingTierView[] }; /* Premium hero illustration — a layered EMS dashboard collage: main window, floating result & attendance cards, soft blobs and a dotted grid. */ function HeroArt() { const white = "#ffffff"; const bar = "#d7dfe6"; const barSoft = "#e8eef2"; const green = "#2f9e6b"; const greenTint = "#e2f4ea"; const gold = "#c9a227"; return ( ); function txtSafe() { return ( 96% ); } } /* Animated SVG emblem for each pricing tier — light stroke scenes that replace the static icon chip. Shares the feature-card motion classes. */ function PriceArt({ kind }: { kind: string }) { const st = { fill: "none", stroke: "currentColor", strokeWidth: 2.2, strokeLinecap: "round" as const, strokeLinejoin: "round" as const, }; const scenes: Record = { GOVT_SCHOOL: ( <> ), PRIMARY: ( <> ), HIGH_SCHOOL: ( <> ), PRIMARY_HIGH: ( <> ), GOVT_COLLEGE: ( <> ), COLLEGE_UNIV: ( <> ), COACHING: ( <> ), MADRASHA: ( <> ), }; return ( ); } export default function LandingPage() { const { t, locale } = useLang(); const { data, loading } = useApi<{ categories: PricingCategoryView[] }>("/api/public/pricing"); const [typeFilter, setTypeFilter] = useState("ALL"); const [faqOpen, setFaqOpen] = useState(0); // billing cycle toggle + per-card selected student range (pricing reference layout) const [cycle, setCycle] = useState<"MONTHLY" | "YEARLY">("MONTHLY"); const [selectedTier, setSelectedTier] = useState>({}); const tierFor = (cat: PricingCategoryView): PricingTierView => cat.tiers.find((x) => x.id === selectedTier[cat.code]) ?? cat.tiers[0]; const selectTier = (code: string, id: number) => setSelectedTier((m) => ({ ...m, [code]: id })); // Referral program — the offer is advertised on the pricing cards to every // visitor; a visitor arriving via a subscriber's invite link (/ ?ref=CODE) // — or typing a code in — sees the discount applied to the prices live, // and the code rides along into registration. const [refCode, setRefCode] = useState(""); const [refInput, setRefInput] = useState(""); const [referral, setReferral] = useState<{ valid: boolean; discountPct: number; referrerName?: string } | null>(null); const [refProgramPct, setRefProgramPct] = useState(0); useEffect(() => { api<{ discountPct: number }>("/api/public/referral") .then((d) => setRefProgramPct(d.discountPct)) .catch(() => undefined); const code = (new URLSearchParams(window.location.search).get("ref") ?? "").trim().toUpperCase(); if (code) { setRefInput(code); validateReferral(code); } // eslint-disable-next-line react-hooks/exhaustive-deps }, []); async function validateReferral(code: string) { const c = code.trim().toUpperCase(); if (!c) { setRefCode(""); setRefInput(""); setReferral(null); return; } setRefCode(c); setRefInput(c); try { const d = await api<{ valid: boolean; discountPct: number; referrerName?: string }>( `/api/public/referral?code=${encodeURIComponent(c)}` ); setReferral(d); } catch { setReferral({ valid: false, discountPct: 0 }); } } const refPct = referral?.valid ? referral.discountPct : 0; const registerHref = refCode && referral?.valid ? `/register?ref=${encodeURIComponent(refCode)}` : "/register"; /** price of the selected range with the referral discount applied */ const withRef = (base: number) => refPct > 0 ? Math.round(base * (1 - refPct / 100) * 100) / 100 : base; // demo request form const demoTypeOptions = [ { value: "KG_PRIMARY", label: t.landing.demoTypeKgPrimary }, { value: "HIGH_SCHOOL", label: t.landing.demoTypeHighSchool }, { value: "PRIMARY_HIGH", label: t.landing.demoTypePrimaryHigh }, { value: "COLLEGE_UNI", label: t.landing.demoTypeCollegeUni }, { value: "COACHING", label: t.landing.demoTypeCoaching }, { value: "MADRASHA", label: t.landing.demoTypeMadrasha }, ]; const [demoForm, setDemoForm] = useState({ name: "", email: "", phone: "", institutionName: "", institutionType: "KG_PRIMARY", message: "", }); const [demoSending, setDemoSending] = useState(false); const [demoDone, setDemoDone] = useState(false); const [demoError, setDemoError] = useState(null); async function submitDemo(e: React.FormEvent) { e.preventDefault(); setDemoSending(true); setDemoError(null); try { await api("/api/demo-request", { method: "POST", body: JSON.stringify(demoForm) }); setDemoDone(true); setDemoForm({ name: "", email: "", phone: "", institutionName: "", institutionType: "KG_PRIMARY", message: "", }); } catch (err) { setDemoError(err instanceof Error ? err.message : t.landing.demoError); } finally { setDemoSending(false); } } // Premium header behavior — static at the top of the page; hides while // scrolling down, slides back with an animated glass effect on scroll-up. const [headerHidden, setHeaderHidden] = useState(false); const [headerScrolled, setHeaderScrolled] = useState(false); const lastScrollY = useRef(0); useEffect(() => { const onScroll = () => { const y = window.scrollY; setHeaderScrolled(y > 10); // hide only when genuinely scrolling down past the hero's start if (y > lastScrollY.current && y > 140) { setHeaderHidden(true); } else if (y < lastScrollY.current || y <= 140) { setHeaderHidden(false); } lastScrollY.current = y; }; window.addEventListener("scroll", onScroll, { passive: true }); onScroll(); return () => window.removeEventListener("scroll", onScroll); }, []); // Scroll reveal — sections fade/slide in as they enter the viewport. // Re-arms on language change: switching locale remounts the reveal // elements (new text, new keys), so they must be observed again. useEffect(() => { const els = Array.from(document.querySelectorAll("[data-reveal]:not(.revealed)")); if (!("IntersectionObserver" in window)) { els.forEach((el) => el.classList.add("revealed")); return; } const io = new IntersectionObserver( (entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { entry.target.classList.add("revealed"); io.unobserve(entry.target); } }); }, { threshold: 0.12, rootMargin: "0px 0px -40px 0px" } ); els.forEach((el) => io.observe(el)); return () => io.disconnect(); }, [locale]); const categories = useMemo(() => { if (!data) return []; if (typeFilter === "ALL") return data.categories; return data.categories.filter((c) => c.types.includes(typeFilter as never)); }, [data, typeFilter]); return (
{/* ---------------- Navbar (static at top; animated hide/show on scroll) ---------------- */}
IncrelogEMS

{t.common.tagline}

{/* reserves the fixed header's space so the page starts below it */}