446 lines
17 KiB
TypeScript
446 lines
17 KiB
TypeScript
// app/services/page.tsx
|
|
import type { Metadata } from "next";
|
|
import Link from "next/link";
|
|
import JsonLd from "@/components/JsonLd";
|
|
import { site } from "@/lib/site";
|
|
|
|
export const revalidate = 86400;
|
|
|
|
export const metadata: Metadata = {
|
|
title: "Services — Managed Hosting, Websites & Minecraft | Van Hunen IT",
|
|
description:
|
|
"Managed or Owned VPS hosting, Managed Website hosting & care, Website development, and Minecraft hosting & plugins. Clear outcomes, flat pricing, SLAs, and before/after proof.",
|
|
alternates: { canonical: "/services" },
|
|
};
|
|
|
|
type Card = {
|
|
title: string;
|
|
body: string;
|
|
href: string;
|
|
cta: string;
|
|
};
|
|
|
|
type Category = {
|
|
id:
|
|
| "web-dev"
|
|
| "web-performance"
|
|
| "minecraft"
|
|
| "infrastructure-devops"
|
|
| "migrations"
|
|
| "dev-platforms";
|
|
anchor: string;
|
|
label: string;
|
|
lead: string;
|
|
cards: Card[];
|
|
};
|
|
|
|
const CATEGORIES: Category[] = [
|
|
{
|
|
id: "web-dev",
|
|
anchor: "web-dev",
|
|
label: "Website Development",
|
|
lead:
|
|
"Fast, SEO-ready websites with modern tooling and clean deployments. We build for reliability first.",
|
|
cards: [
|
|
{
|
|
title: "Next.js Website Build",
|
|
body:
|
|
"Design system, content structure, analytics, basic SEO, and production deployment. Optimized for Core Web Vitals.",
|
|
href: "/contact?type=development",
|
|
cta: "Build My Website →",
|
|
},
|
|
{
|
|
title: "Landing Pages & Microsites",
|
|
body:
|
|
"High-converting pages with performance and tracking baked in. Perfect for campaigns and product launches.",
|
|
href: "/contact?type=development",
|
|
cta: "Start a Landing Page →",
|
|
},
|
|
{
|
|
title: "Headless CMS Setup",
|
|
body:
|
|
"Content modeling, editor workflows, preview, and safe publishing. Optional migration from legacy CMS.",
|
|
href: "/contact?type=development",
|
|
cta: "Discuss CMS →",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
id: "web-performance",
|
|
anchor: "web-performance",
|
|
label: "Web Reliability & Performance (incl. Website Hosting)",
|
|
lead:
|
|
"We make sites dependable: faster TTFB, verified backups, uptime & SSL watch, and incident notes you can share.",
|
|
cards: [
|
|
{
|
|
title: "Managed Website Hosting & Care",
|
|
body:
|
|
"Updates, uptime, security checks, and monthly restore-tested backups. Real SLAs and incident credits.",
|
|
href: "/pricing#care",
|
|
cta: "Start Website Care →",
|
|
},
|
|
{
|
|
title: "Cloudflare Edge Hardening",
|
|
body:
|
|
"WAF & bot rules, cache & HTTP/3 tuning, origin shields, and fewer attacks for faster pages.",
|
|
href: "/contact?type=website-care",
|
|
cta: "Harden My Edge →",
|
|
},
|
|
{
|
|
title: "Email Deliverability (SPF/DKIM/DMARC)",
|
|
body:
|
|
"Block spoofing, align auth, and fix lead-loss from junk folders. Monitoring and reports included.",
|
|
href: "/contact?type=website-care",
|
|
cta: "Fix My Email →",
|
|
},
|
|
{
|
|
title: "Backups + Restore Drills",
|
|
body:
|
|
"Automated backups plus timed restore tests with notes. Know recovery is proven—not just configured.",
|
|
href: "/contact?type=website-care",
|
|
cta: "Verify My Backups →",
|
|
},
|
|
{
|
|
title: "Performance & Web Vitals",
|
|
body:
|
|
"TTFB improvements, image/CDN strategy, and Core Web Vitals uplift with before/after proof.",
|
|
href: "/contact?type=website-care",
|
|
cta: "Boost My Speed →",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
id: "minecraft",
|
|
anchor: "minecraft",
|
|
label: "Minecraft Services",
|
|
lead:
|
|
"Lag-free servers on a hardened VPS with backups, monitoring, and tuning. Need features? We build custom plugins.",
|
|
cards: [
|
|
{
|
|
title: "Managed Minecraft Hosting",
|
|
body:
|
|
"Java (Paper/Spigot/Velocity) and Bedrock (Geyser) supported. Backups with restore tests and incident notes.",
|
|
href: "/minecraft#deploy",
|
|
cta: "Deploy a Server →",
|
|
},
|
|
{
|
|
title: "Minecraft Plugin Development",
|
|
body:
|
|
"Custom plugins with tests, config, permissions, and docs. Private repo and handover on completion.",
|
|
href: "/contact?type=plugin",
|
|
cta: "Request Plugin Quote →",
|
|
},
|
|
{
|
|
title: "Migrations & Tuning",
|
|
body:
|
|
"Move worlds and plugins safely, clean up timings, and stabilize TPS. Optional network (Velocity/Bungee).",
|
|
href: "/contact?type=minecraft-hosting",
|
|
cta: "Plan My Migration →",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
id: "infrastructure-devops",
|
|
anchor: "infrastructure-devops",
|
|
label: "Infrastructure & DevOps",
|
|
lead:
|
|
"Managed or Owned VPS, monitoring, and incident response—plus safe automation for deploys and updates.",
|
|
cards: [
|
|
{
|
|
title: "Managed VPS Hosting",
|
|
body:
|
|
"CIS-style hardening, updates, monitoring, and restore-tested backups. SLA-backed response.",
|
|
href: "/vps#deploy",
|
|
cta: "Provision (Managed) →",
|
|
},
|
|
{
|
|
title: "Owned VPS (Your Account)",
|
|
body:
|
|
"We provision into your cloud via secure connect. You retain ownership; we still manage and monitor.",
|
|
href: "/vps#deploy",
|
|
cta: "Provision (Owned) →",
|
|
},
|
|
{
|
|
title: "Monitoring & Incident Notes",
|
|
body:
|
|
"Uptime, resource alerts, clear incident write-ups, and post-mortems that drive improvements.",
|
|
href: "/contact?type=vps",
|
|
cta: "Set Up Monitoring →",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
id: "migrations",
|
|
anchor: "migrations",
|
|
label: "Migrations & Refreshes",
|
|
lead:
|
|
"Safer cutovers with rollback plans. Move hosting, upgrade stacks, and modernize without downtime surprises.",
|
|
cards: [
|
|
{
|
|
title: "Hosting & DNS Migration",
|
|
body:
|
|
"Plan, test, and cut over with a rollback path. Documented steps and after-action report.",
|
|
href: "/contact?type=website-care",
|
|
cta: "Migrate Hosting →",
|
|
},
|
|
{
|
|
title: "WordPress → Next.js",
|
|
body:
|
|
"Modern rebuilds with headless options and faster delivery. SEO preservation and redirects included.",
|
|
href: "/contact?type=development",
|
|
cta: "Discuss Rebuild →",
|
|
},
|
|
{
|
|
title: "Platform Upgrades",
|
|
body:
|
|
"PHP/Node/OpenSSL updates, TLS/HTTP versions, and dependency hygiene without breaking the app.",
|
|
href: "/contact?type=vps",
|
|
cta: "Plan My Upgrade →",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
id: "dev-platforms",
|
|
anchor: "dev-platforms",
|
|
label: "Developer Platforms & Tooling",
|
|
lead:
|
|
"Make shipping easier: pipelines, environments, and guardrails that keep production stable.",
|
|
cards: [
|
|
{
|
|
title: "CI/CD & Environments",
|
|
body:
|
|
"Staging, previews, and blue/green deployment workflows. Safer changes, faster feedback.",
|
|
href: "/contact?type=development",
|
|
cta: "Improve Deploys →",
|
|
},
|
|
{
|
|
title: "Observability Basics",
|
|
body:
|
|
"Structured logs, metrics, and health checks that find issues before users do.",
|
|
href: "/contact?type=vps",
|
|
cta: "Add Observability →",
|
|
},
|
|
{
|
|
title: "Runbooks & Readiness",
|
|
body:
|
|
"Clear runbooks and checklists for on-call, upgrades, and incident handling.",
|
|
href: "/contact?type=website-care",
|
|
cta: "Create Runbooks →",
|
|
},
|
|
],
|
|
},
|
|
] as const;
|
|
|
|
// JSON-LD OfferCatalog: top-level sections surfaced for SEO
|
|
const servicesLd = {
|
|
"@context": "https://schema.org",
|
|
"@type": "OfferCatalog",
|
|
name: "Van Hunen IT — Service Catalog",
|
|
url: `${site.url}/services`,
|
|
itemListElement: CATEGORIES.map((cat) => ({
|
|
"@type": "OfferCatalog",
|
|
name: cat.label,
|
|
url: `${site.url}/services#${cat.anchor}`,
|
|
itemListElement: cat.cards.map((c) => ({
|
|
"@type": "Offer",
|
|
name: c.title,
|
|
description: c.body,
|
|
url: `${site.url}${c.href.startsWith("/") ? c.href : `/${c.href}`}`,
|
|
priceCurrency: "EUR",
|
|
})),
|
|
})),
|
|
};
|
|
|
|
export default function ServicesPage() {
|
|
const chips = CATEGORIES.map((c) => ({ id: c.id, label: c.label, anchor: c.anchor }));
|
|
|
|
return (
|
|
<main
|
|
id="top"
|
|
className="relative isolate min-h-screen 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 */}
|
|
<section className="relative overflow-hidden border-b border-neutral-200 dark:border-neutral-800">
|
|
<div className="absolute inset-0 pointer-events-none opacity-60 bg-[radial-gradient(50%_50%_at_50%_0%,rgba(99,102,241,0.20),rgba(168,85,247,0.15)_40%,transparent_70%)]" />
|
|
<div className="container mx-auto max-w-6xl px-4 py-20 text-center">
|
|
<h1 className="text-4xl font-bold tracking-tight sm:text-5xl bg-gradient-to-r from-blue-600 via-purple-600 to-blue-600 bg-clip-text text-transparent">
|
|
Services: Managed Hosting, Websites & Minecraft
|
|
</h1>
|
|
<p className="mt-5 text-lg text-neutral-700 dark:text-neutral-300 max-w-3xl mx-auto">
|
|
Managed or Owned VPS, Managed Website hosting & care, Website development, and Minecraft hosting & plugins.
|
|
Clear outcomes, flat pricing, real SLAs—and before/after proof.
|
|
</p>
|
|
|
|
{/* Category chips */}
|
|
<div className="mt-8 flex flex-wrap justify-center gap-3">
|
|
{chips.map((c) => (
|
|
<a
|
|
key={c.id}
|
|
href={`#${c.anchor}`}
|
|
className="rounded-full border border-neutral-300 dark:border-neutral-700 px-4 py-1.5 text-sm font-medium text-neutral-700 dark:text-neutral-300 hover:border-blue-500 hover:text-blue-600 dark:hover:text-blue-400 transition"
|
|
>
|
|
{c.label}
|
|
</a>
|
|
))}
|
|
</div>
|
|
|
|
{/* Quick actions */}
|
|
<div className="mt-8 grid grid-cols-1 sm:grid-cols-2 gap-3 max-w-2xl mx-auto">
|
|
<Link
|
|
href="/vps#deploy"
|
|
className="inline-flex items-center justify-center rounded-lg bg-neutral-900 dark:bg-white text-white dark:text-neutral-900 px-5 py-3 font-semibold hover:opacity-90 transition"
|
|
>
|
|
Provision a VPS
|
|
</Link>
|
|
<Link
|
|
href="/minecraft#deploy"
|
|
className="inline-flex items-center justify-center rounded-lg border border-neutral-300 dark:border-neutral-700 px-5 py-3 font-semibold text-neutral-900 dark:text-white hover:bg-neutral-50 dark:hover:bg-neutral-800 transition"
|
|
>
|
|
Deploy Minecraft
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* FEATURED TILES */}
|
|
<section className="container mx-auto max-w-6xl px-4 py-12">
|
|
<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
|
|
{[
|
|
{
|
|
id: "vps",
|
|
title: "Managed VPS (Managed or Owned)",
|
|
body: "Hardened & monitored VPS with restore-tested backups.",
|
|
href: "/vps#deploy",
|
|
cta: "Provision VPS →",
|
|
},
|
|
{
|
|
id: "website-care",
|
|
title: "Managed Website Hosting & Care",
|
|
body: "Updates, uptime, security checks & monthly restore tests.",
|
|
href: "/pricing#care",
|
|
cta: "Start Website Care →",
|
|
},
|
|
{
|
|
id: "development",
|
|
title: "Website Development (Next.js)",
|
|
body: "Fast, SEO-ready sites with analytics & deployment.",
|
|
href: "/contact?type=development",
|
|
cta: "Build My Website →",
|
|
},
|
|
{
|
|
id: "minecraft",
|
|
title: "Minecraft Hosting & Plugins",
|
|
body: "Lag-free servers on a hardened VPS + custom plugins.",
|
|
href: "/minecraft#deploy",
|
|
cta: "Deploy a Server →",
|
|
},
|
|
].map((card) => (
|
|
<article
|
|
id={card.id}
|
|
key={card.id}
|
|
className="group relative overflow-hidden rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white/60 dark:bg-neutral-900/60 p-6 shadow-sm hover:shadow-lg transition-all duration-300 backdrop-blur"
|
|
>
|
|
<div className="absolute inset-0 bg-gradient-to-br from-blue-50/0 via-transparent to-purple-100/0 dark:from-blue-900/10 dark:to-purple-900/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
|
|
<h3 className="text-lg font-semibold tracking-tight text-neutral-900 dark:text-white">
|
|
{card.title}
|
|
</h3>
|
|
<p className="mt-2 text-sm text-neutral-700 dark:text-neutral-300">{card.body}</p>
|
|
<Link
|
|
href={card.href}
|
|
className="mt-4 inline-flex items-center text-sm font-medium text-blue-600 hover:underline"
|
|
>
|
|
{card.cta}
|
|
</Link>
|
|
</article>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
{/* SECTIONS */}
|
|
<div className="container mx-auto max-w-6xl px-4 py-8">
|
|
{CATEGORIES.map((cat, index) => (
|
|
<section
|
|
key={cat.id}
|
|
id={cat.anchor}
|
|
className={`relative py-16 scroll-mt-24 rounded-2xl mb-12 shadow-sm ${
|
|
index % 2 === 0
|
|
? "bg-white dark:bg-neutral-900/50"
|
|
: "bg-neutral-50 dark:bg-neutral-900/30"
|
|
}`}
|
|
aria-labelledby={`${cat.anchor}-heading`}
|
|
>
|
|
<div className="absolute inset-0 -z-10 bg-gradient-to-br from-blue-50/10 via-transparent to-purple-50/10 dark:from-blue-950/10 dark:to-purple-950/10 rounded-2xl" />
|
|
|
|
<div className="px-4 sm:px-8">
|
|
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-8">
|
|
<h2
|
|
id={`${cat.anchor}-heading`}
|
|
className="text-2xl sm:text-3xl font-bold tracking-tight bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent"
|
|
>
|
|
{cat.label}
|
|
</h2>
|
|
<Link
|
|
href="#top"
|
|
className="mt-3 sm:mt-0 inline-flex items-center text-sm font-medium text-blue-600 hover:underline dark:text-blue-400"
|
|
>
|
|
Jump to top ↑
|
|
</Link>
|
|
</div>
|
|
|
|
<p className="max-w-3xl text-neutral-700 dark:text-neutral-300">
|
|
{cat.lead}
|
|
</p>
|
|
|
|
<div className="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
|
{cat.cards.map((card, i) => (
|
|
<article
|
|
key={`${cat.id}-${i}`}
|
|
className="rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white/60 dark:bg-neutral-900/60 p-6 hover:shadow-md transition"
|
|
>
|
|
<h3 className="text-lg font-semibold">{card.title}</h3>
|
|
<p className="mt-2 text-sm text-neutral-700 dark:text-neutral-300">{card.body}</p>
|
|
<Link
|
|
href={card.href}
|
|
className="mt-4 inline-flex items-center text-sm font-medium text-blue-600 hover:underline"
|
|
>
|
|
{card.cta}
|
|
</Link>
|
|
</article>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
))}
|
|
</div>
|
|
|
|
{/* CTA FOOTER */}
|
|
<section className="relative py-24 text-center bg-gradient-to-r from-blue-600 via-purple-600 to-blue-600 text-white">
|
|
<div className="container mx-auto max-w-4xl px-6">
|
|
<h2 className="text-3xl sm:text-4xl font-bold tracking-tight">
|
|
Power, Performance & Peace of Mind — Managed for You.
|
|
</h2>
|
|
<p className="mt-4 text-lg text-blue-100">
|
|
Provision a VPS, manage your site, or deploy a Minecraft server—backed by real SLAs and restore-tested backups.
|
|
</p>
|
|
<div className="mt-8 flex items-center justify-center gap-3">
|
|
<Link
|
|
href="/pricing"
|
|
className="inline-flex items-center rounded-lg bg-white text-blue-700 font-semibold px-6 py-3 hover:bg-blue-50 transition"
|
|
>
|
|
Compare Plans
|
|
</Link>
|
|
<Link
|
|
href="/contact?plan=recommendation"
|
|
className="inline-flex items-center rounded-lg border border-white/80 text-white font-semibold px-6 py-3 hover:bg-white/10 transition"
|
|
>
|
|
Get My Recommendation
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<JsonLd data={servicesLd} />
|
|
</main>
|
|
);
|
|
}
|