259 lines
9.7 KiB
TypeScript
259 lines
9.7 KiB
TypeScript
// app/pricing/page.tsx
|
||
import type { Metadata } from "next";
|
||
import Link from "next/link";
|
||
import { site } from "@/lib/site";
|
||
import JsonLd from "@/components/JsonLd";
|
||
import PricingConfigurator from "./PricingConfigurator";
|
||
|
||
export const metadata: Metadata = {
|
||
title: "Plans, SLAs & Self-Service — Managed VPS, Websites & Minecraft | Van Hunen IT",
|
||
description:
|
||
"Choose Managed Hosting & Care, provision a VPS (managed or owned), or deploy a Minecraft server. SLAs, restore-tested backups, monitoring. Month-to-month.",
|
||
};
|
||
|
||
// ---- Server-safe plan data (also used for JSON-LD) ---- //
|
||
const carePlans = [
|
||
{
|
||
id: "essential",
|
||
name: "Essential Managed Hosting",
|
||
bestFor: "Websites & VPS that need reliable care",
|
||
monthlyPrice: 149,
|
||
yearlyDiscount: 0.1,
|
||
outcomes: ["Reliable care & monitoring", "99.9% uptime target"],
|
||
inclusions: [
|
||
"DNS & email monitoring (SPF/DKIM/DMARC)",
|
||
"Automated backups + quarterly restore test",
|
||
"Managed updates (WordPress/Next.js)",
|
||
"Uptime & SSL watch",
|
||
"Incident credits",
|
||
"Business-hours support (8×5)",
|
||
],
|
||
sla: "Next-business-day first response (8×5)",
|
||
cta: { label: "Start Essential", href: "/contact?type=website-care" },
|
||
popular: false,
|
||
},
|
||
{
|
||
id: "growth",
|
||
name: "Growth Managed Hosting",
|
||
bestFor: "Teams & growing sites",
|
||
monthlyPrice: 299,
|
||
yearlyDiscount: 0.1,
|
||
outcomes: ["99.95% uptime target", "Faster performance"],
|
||
inclusions: [
|
||
"Everything in Essential",
|
||
"Cloudflare WAF & bot tuning",
|
||
"Monthly Web Vitals report",
|
||
"Priority incident handling",
|
||
],
|
||
sla: "4-hour first response (8×5)",
|
||
cta: { label: "Start Growth", href: "/contact?type=website-care" },
|
||
popular: true,
|
||
},
|
||
{
|
||
id: "mission",
|
||
name: "Mission-Critical Managed Hosting",
|
||
bestFor: "High-traffic & 24/7 operations",
|
||
monthlyPrice: 649,
|
||
yearlyDiscount: 0.1,
|
||
outcomes: ["99.99% uptime target", "24/7 on-call"],
|
||
inclusions: ["Everything in Growth", "24/7 paging", "Weekly checks", "DR runbook & drills"],
|
||
sla: "1-hour first response (24/7)",
|
||
cta: { label: "Talk to Us", href: "/contact?type=website-care" },
|
||
popular: false,
|
||
contactOnly: true,
|
||
},
|
||
] as const;
|
||
|
||
const vpsPlans = [
|
||
{
|
||
id: "solo",
|
||
name: "Solo VPS",
|
||
price: 24, // €/mo
|
||
specs: "2 vCPU • 4 GB RAM • 50 GB NVMe",
|
||
bestFor: "Small apps, staging, low-traffic services",
|
||
},
|
||
{
|
||
id: "team",
|
||
name: "Team VPS",
|
||
price: 49,
|
||
specs: "4 vCPU • 8 GB RAM • 100 GB NVMe",
|
||
bestFor: "Production apps, WordPress/Next.js, APIs",
|
||
},
|
||
{
|
||
id: "dedicated",
|
||
name: "Dedicated / Custom",
|
||
price: null, // custom
|
||
specs: "Dedicated VPS/metal — tailored",
|
||
bestFor: "High traffic, networks, or compliance",
|
||
},
|
||
] as const;
|
||
|
||
const minecraftPlans = [
|
||
{
|
||
id: "starter",
|
||
name: "Starter",
|
||
price: 19,
|
||
specs: "2 vCPU • 4 GB RAM • 40 GB SSD",
|
||
typical: "Up to ~20 players (optimized)",
|
||
features: ["Paper/Spigot or Bedrock", "Daily backups + restore test", "Basic tuning & monitoring"],
|
||
},
|
||
{
|
||
id: "pro",
|
||
name: "Pro",
|
||
price: 39,
|
||
specs: "3 vCPU • 8 GB RAM • 80 GB SSD",
|
||
typical: "Up to ~60 players (optimized)",
|
||
features: [
|
||
"Paper/Velocity or Bedrock + Geyser",
|
||
"Backups (2x/day) + restore test",
|
||
"Advanced tuning & monitoring",
|
||
],
|
||
},
|
||
{
|
||
id: "network",
|
||
name: "Network",
|
||
price: null,
|
||
specs: "Dedicated VPS spec",
|
||
typical: "Networks & modpacks",
|
||
features: ["Velocity/Bungee multi-server", "Backups (hourly) + restore test", "Custom tuning & SLA"],
|
||
},
|
||
] as const;
|
||
|
||
// ---- JSON-LD (Offers for three catalogs) ---- //
|
||
const pricingLd = {
|
||
"@context": "https://schema.org",
|
||
"@type": "OfferCatalog",
|
||
name: "Van Hunen IT — Plans & Catalog",
|
||
url: `${site.url}/pricing`,
|
||
itemListElement: [
|
||
{
|
||
"@type": "OfferCatalog",
|
||
name: "Managed Hosting & Care",
|
||
itemListElement: carePlans.map((p) => ({
|
||
"@type": "Offer",
|
||
name: p.name,
|
||
price: `€${p.monthlyPrice}/mo`,
|
||
priceCurrency: "EUR",
|
||
url: `${site.url}/pricing`,
|
||
description: `${p.bestFor} — SLA: ${p.sla}`,
|
||
})),
|
||
},
|
||
{
|
||
"@type": "OfferCatalog",
|
||
name: "VPS (Managed or Owned)",
|
||
itemListElement: vpsPlans.map((p) => ({
|
||
"@type": "Offer",
|
||
name: p.name,
|
||
price: p.price ? `€${p.price}/mo` : "Custom",
|
||
priceCurrency: "EUR",
|
||
url: `${site.url}/vps#deploy`,
|
||
description: `${p.specs} — ${p.bestFor}`,
|
||
})),
|
||
},
|
||
{
|
||
"@type": "OfferCatalog",
|
||
name: "Minecraft Hosting",
|
||
itemListElement: minecraftPlans.map((p) => ({
|
||
"@type": "Offer",
|
||
name: p.name,
|
||
price: p.price ? `€${p.price}/mo` : "Custom",
|
||
priceCurrency: "EUR",
|
||
url: `${site.url}/minecraft#deploy`,
|
||
description: `${p.specs} — ${p.typical}`,
|
||
})),
|
||
},
|
||
],
|
||
};
|
||
|
||
export default function PricingPage() {
|
||
return (
|
||
<main className="relative isolate bg-gradient-to-b from-neutral-50 via-white to-neutral-100 dark:from-neutral-950 dark:via-neutral-900 dark:to-neutral-950">
|
||
{/* HERO */}
|
||
<header className="container mx-auto max-w-6xl px-6 pt-16 pb-10 text-center">
|
||
<h1 className="text-4xl sm:text-5xl font-bold tracking-tight">
|
||
Plans, SLAs & Self-Service
|
||
</h1>
|
||
<p className="mt-4 text-lg text-neutral-700 dark:text-neutral-300">
|
||
Pick **Managed Hosting & Care**, provision a **VPS (managed or owned)**, or **deploy a Minecraft server**.
|
||
Month-to-month, 30-day cancel, restore-tested backups, real SLAs.
|
||
</p>
|
||
<div className="mt-8 flex flex-col sm:flex-row gap-3 justify-center">
|
||
<Link href="/vps#deploy" className="rounded-lg bg-neutral-900 dark:bg-white text-white dark:text-neutral-900 px-5 py-2 font-semibold hover:opacity-90 transition">
|
||
Provision a VPS
|
||
</Link>
|
||
<Link href="/minecraft#deploy" className="rounded-lg border border-neutral-300 dark:border-neutral-700 px-5 py-2 font-semibold text-neutral-900 dark:text-white hover:bg-neutral-50 dark:hover:bg-neutral-800 transition">
|
||
Deploy Minecraft
|
||
</Link>
|
||
</div>
|
||
</header>
|
||
|
||
{/* NEW PRICING EXPERIENCE */}
|
||
<section className="container mx-auto max-w-6xl px-6 pb-20">
|
||
<PricingConfigurator carePlans={carePlans} vpsPlans={vpsPlans} minecraftPlans={minecraftPlans} />
|
||
|
||
<p className="mt-6 text-center text-sm text-neutral-500">
|
||
Prices exclude VAT. Annual billing saves 10% on Managed Hosting & Care. VPS and Minecraft prices shown are base infrastructure fees; management is included on our platform. Owned VPS incurs provider charges in your account.
|
||
</p>
|
||
</section>
|
||
|
||
{/* TRUST / GUARANTEE */}
|
||
<section className="border-t border-neutral-200 dark:border-neutral-800 bg-white/60 dark:bg-neutral-900/60">
|
||
<div className="container mx-auto max-w-6xl px-6 py-14 grid gap-6 sm:grid-cols-3">
|
||
{[
|
||
{ t: "Restore-Tested Backups", s: "We time drills and keep notes." },
|
||
{ t: "SLA-Backed Response", s: "Credits per plan. 24/7 available." },
|
||
{ t: "Month-to-Month", s: "30-day cancel. No lock-in." },
|
||
].map((i) => (
|
||
<div key={i.t} className="rounded-xl border border-neutral-200 dark:border-neutral-800 p-5">
|
||
<div className="text-base font-semibold">{i.t}</div>
|
||
<div className="text-sm text-neutral-600 dark:text-neutral-400">{i.s}</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</section>
|
||
|
||
{/* FAQ */}
|
||
<section className="container mx-auto max-w-5xl px-6 py-16">
|
||
<h2 className="text-2xl sm:text-3xl font-bold tracking-tight text-center">FAQ</h2>
|
||
<div className="mt-8 grid gap-6">
|
||
{[
|
||
{
|
||
q: "What’s the difference between Managed and Owned VPS?",
|
||
a: "Managed = we host & bill the VPS on our platform (backups, monitoring, SLAs included). Owned = we provision into your cloud account via a secure connect; you retain ownership. Both include management.",
|
||
},
|
||
{
|
||
q: "Can I migrate my current site or server?",
|
||
a: "Yes. We handle data transfer, DNS cutover, and rollback. We also tune performance and verify backups with a restore drill.",
|
||
},
|
||
{
|
||
q: "Do you support modpacks and networks for Minecraft?",
|
||
a: "Yes—Forge/Fabric and Velocity/Bungee networks are supported, sized to resources. Use the Network/Custom option or contact us.",
|
||
},
|
||
{
|
||
q: "How do incident credits work?",
|
||
a: "If we miss your SLA, we credit according to your plan’s policy. Details are included in your agreement.",
|
||
},
|
||
{
|
||
q: "Do you offer NDAs and least-privilege access?",
|
||
a: "Yes—mutual NDA available; we only request the credentials needed for the task.",
|
||
},
|
||
].map((i) => (
|
||
<article key={i.q} className="rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white/60 dark:bg-neutral-900/60 p-6">
|
||
<h3 className="text-lg font-semibold">{i.q}</h3>
|
||
<p className="mt-2 text-sm text-neutral-700 dark:text-neutral-300">{i.a}</p>
|
||
</article>
|
||
))}
|
||
</div>
|
||
|
||
<div className="mt-10 text-center">
|
||
<Link href="/contact?plan=recommendation" className="inline-flex items-center rounded-lg bg-gradient-to-r from-blue-600 via-purple-600 to-blue-600 text-white px-6 py-3 text-sm font-semibold hover:opacity-90 transition">
|
||
Get My Recommendation
|
||
</Link>
|
||
</div>
|
||
</section>
|
||
|
||
<JsonLd data={pricingLd} />
|
||
</main>
|
||
);
|
||
}
|