95 lines
4.6 KiB
TypeScript
95 lines
4.6 KiB
TypeScript
import Link from "next/link";
|
|
import { ShieldHalf, QrCode, BarChart3, CheckCircle2 } from "lucide-react";
|
|
import { inr } from "@/lib/utils";
|
|
|
|
const PLANS = [
|
|
{ name: "Free", price: 0, products: "1 product", users: "1 user" },
|
|
{ name: "Starter", price: 999, products: "100 products", users: "3 users", popular: true },
|
|
{ name: "Growth", price: 2999, products: "1,000 products", users: "15 users" },
|
|
{ name: "Business", price: 5999, products: "Unlimited products", users: "50 users" },
|
|
];
|
|
|
|
export default function Landing() {
|
|
return (
|
|
<div className="min-h-screen bg-white">
|
|
<header className="flex items-center justify-between px-6 md:px-12 py-5 border-b border-slate-100">
|
|
<div className="flex items-center gap-2 font-extrabold text-xl">
|
|
<ShieldHalf className="h-6 w-6 text-brand-600" /> VerifyPack
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<Link href="/login" className="text-sm font-medium text-slate-600">Login</Link>
|
|
<Link href="/signup" className="text-sm font-semibold bg-brand-600 text-white px-4 py-2 rounded-lg">
|
|
Get Started
|
|
</Link>
|
|
</div>
|
|
</header>
|
|
|
|
<section className="max-w-5xl mx-auto text-center px-6 py-20">
|
|
<span className="inline-block text-xs font-semibold text-brand-600 bg-brand-50 px-3 py-1 rounded-full">
|
|
Digital Trust for Every Product
|
|
</span>
|
|
<h1 className="text-4xl md:text-6xl font-extrabold mt-6 leading-tight">
|
|
Verify product authenticity<br />with a single scan
|
|
</h1>
|
|
<p className="text-slate-500 text-lg mt-5 max-w-2xl mx-auto">
|
|
Generate unlimited QR codes for your product batches. Let consumers verify
|
|
authenticity instantly — no app, no login.
|
|
</p>
|
|
<div className="flex gap-3 justify-center mt-8">
|
|
<Link href="/signup" className="bg-brand-600 text-white px-6 py-3 rounded-xl font-semibold">
|
|
Start free
|
|
</Link>
|
|
<Link href="/v/demo" className="border border-slate-200 px-6 py-3 rounded-xl font-semibold">
|
|
See a verification page
|
|
</Link>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="max-w-6xl mx-auto grid md:grid-cols-3 gap-6 px-6 pb-16">
|
|
{[
|
|
{ icon: QrCode, t: "Unlimited QR codes", d: "Batch QR or unique per-pack serialized QRs. Zero per-code cost." },
|
|
{ icon: ShieldHalf, t: "Anti-counterfeit", d: "Consumers scan to confirm genuine, recalled, or unverified status." },
|
|
{ icon: BarChart3, t: "Live analytics", d: "Track scans by location, device and time across every product." },
|
|
].map(({ icon: Icon, t, d }) => (
|
|
<div key={t} className="card p-6">
|
|
<Icon className="h-8 w-8 text-brand-600" />
|
|
<h3 className="font-bold mt-4">{t}</h3>
|
|
<p className="text-slate-500 text-sm mt-2">{d}</p>
|
|
</div>
|
|
))}
|
|
</section>
|
|
|
|
<section className="max-w-6xl mx-auto px-6 py-16">
|
|
<h2 className="text-3xl font-extrabold text-center">Simple, transparent pricing</h2>
|
|
<p className="text-center text-slate-500 mt-2">QR generation is always unlimited & free. You only pay for product capacity.</p>
|
|
<div className="grid md:grid-cols-4 gap-5 mt-10">
|
|
{PLANS.map((p) => (
|
|
<div key={p.name}
|
|
className={`card p-6 ${p.popular ? "ring-2 ring-brand-500" : ""}`}>
|
|
{p.popular && <span className="text-xs font-bold text-brand-600">MOST POPULAR</span>}
|
|
<h3 className="font-bold text-lg mt-1">{p.name}</h3>
|
|
<div className="text-3xl font-extrabold mt-2">
|
|
{p.price === 0 ? "Free" : inr(p.price)}
|
|
{p.price > 0 && <span className="text-sm font-normal text-slate-400">/mo</span>}
|
|
</div>
|
|
<ul className="mt-4 space-y-2 text-sm text-slate-600">
|
|
<li className="flex gap-2"><CheckCircle2 className="h-4 w-4 text-emerald-500" />{p.products}</li>
|
|
<li className="flex gap-2"><CheckCircle2 className="h-4 w-4 text-emerald-500" />{p.users}</li>
|
|
<li className="flex gap-2"><CheckCircle2 className="h-4 w-4 text-emerald-500" />Unlimited QR codes</li>
|
|
</ul>
|
|
<Link href="/signup"
|
|
className="block text-center mt-6 py-2 rounded-lg bg-brand-600 text-white text-sm font-semibold">
|
|
Choose {p.name}
|
|
</Link>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
<footer className="border-t border-slate-100 py-8 text-center text-sm text-slate-400">
|
|
© {new Date().getFullYear()} VerifyPack. All rights reserved.
|
|
</footer>
|
|
</div>
|
|
);
|
|
}
|