119 lines
3.4 KiB
TypeScript
119 lines
3.4 KiB
TypeScript
// app/pricing/page.tsx
|
||
import type { Metadata } from "next";
|
||
import PricingTable from "@/components/pricing/PricingTable";
|
||
import ComparisonTable from "@/components/pricing/ComparisonTable";
|
||
import PlanRecommender from "@/components/pricing/PlanRecommender";
|
||
import ROICalculator from "@/components/pricing/ROICalculator";
|
||
import FAQ from "@/components/pricing/FAQ";
|
||
import Guarantee from "@/components/pricing/Guarantee";
|
||
import { Plan } from "@/components/pricing/types";
|
||
|
||
export const metadata: Metadata = {
|
||
title: "Pricing & SLAs — Van Hunen IT",
|
||
description:
|
||
"Simple plans with real SLAs. Essential, Growth, Mission-Critical. Month-to-month, 30-day cancel, incident credits.",
|
||
};
|
||
|
||
const plans: Plan[] = [
|
||
{
|
||
id: "essential",
|
||
name: "Essential Care",
|
||
bestFor: "Solo & micro businesses",
|
||
monthlyPrice: 149,
|
||
yearlyDiscount: 0.1,
|
||
outcomes: ["Inbox-ready email", "99.9% uptime"],
|
||
inclusions: [
|
||
"SPF/DKIM/DMARC monitoring",
|
||
"Automated backups + quarterly restore test",
|
||
"Uptime & SSL watch",
|
||
"Incident credits",
|
||
"Business-hours support (8×5)",
|
||
],
|
||
sla: "Next-business-day first response (8×5)",
|
||
ctaLabel: "Start Essential",
|
||
popular: false,
|
||
},
|
||
{
|
||
id: "growth",
|
||
name: "Growth Care",
|
||
bestFor: "SMB team sites",
|
||
monthlyPrice: 299,
|
||
yearlyDiscount: 0.1,
|
||
outcomes: ["99.95% uptime", "Faster TTFB"],
|
||
inclusions: [
|
||
"Everything in Essential",
|
||
"Cloudflare WAF & bot tuning",
|
||
"Monthly Web Vitals report",
|
||
"Priority incident handling",
|
||
],
|
||
sla: "4-hour first response (8×5)",
|
||
ctaLabel: "Start Growth",
|
||
popular: true,
|
||
},
|
||
{
|
||
id: "mission",
|
||
name: "Mission-Critical",
|
||
bestFor: "High-traffic & 24/7",
|
||
monthlyPrice: 649,
|
||
yearlyDiscount: 0.1,
|
||
outcomes: ["99.99% uptime", "24/7 on-call"],
|
||
inclusions: [
|
||
"Everything in Growth",
|
||
"24/7 paging",
|
||
"Weekly checks",
|
||
"DR runbook & drills",
|
||
],
|
||
sla: "1-hour first response (24/7)",
|
||
ctaLabel: "Talk to us",
|
||
popular: false,
|
||
contactOnly: true,
|
||
},
|
||
];
|
||
|
||
export default function PricingPage() {
|
||
return (
|
||
<main className="mx-auto max-w-7xl px-6 py-16">
|
||
<header className="mx-auto max-w-3xl text-center">
|
||
<h1 className="text-4xl font-bold tracking-tight sm:text-5xl">
|
||
Simple plans with real SLAs
|
||
</h1>
|
||
<p className="mt-4 text-lg text-gray-600">
|
||
Pick the care level that matches your traffic and risk. Month-to-month, 30-day
|
||
cancel. Fix Sprint available for urgent issues.
|
||
</p>
|
||
</header>
|
||
|
||
{/* Engaging element #1: Billing toggle inside table */}
|
||
<section className="mt-12">
|
||
<PricingTable plans={plans} />
|
||
<p className="mt-3 text-center text-sm text-gray-500">
|
||
Prices exclude VAT. Annual billing saves 10%.
|
||
</p>
|
||
</section>
|
||
|
||
{/* Engaging element #2: Plan recommender */}
|
||
<section className="mt-24">
|
||
<PlanRecommender plans={plans} />
|
||
</section>
|
||
|
||
{/* Comparison matrix */}
|
||
<section className="mt-24">
|
||
<ComparisonTable plans={plans} />
|
||
</section>
|
||
|
||
{/* Engaging element #3: ROI calculator */}
|
||
<section className="mt-24">
|
||
<ROICalculator plans={plans} />
|
||
</section>
|
||
|
||
<section className="mt-24">
|
||
<Guarantee />
|
||
</section>
|
||
|
||
<section className="mt-24">
|
||
<FAQ />
|
||
</section>
|
||
</main>
|
||
);
|
||
}
|