350 lines
15 KiB
TypeScript
350 lines
15 KiB
TypeScript
import type { Metadata } from "next";
|
||
import Pricing from "@/components/Pricing";
|
||
import Testimonials from "@/components/Testimonials";
|
||
import FAQ from "@/components/FAQ";
|
||
import { plans } from "@/lib/pricing";
|
||
import { site } from "@/lib/site";
|
||
import JsonLd from "@/components/JsonLd";
|
||
import Link from "next/link";
|
||
|
||
export const metadata: Metadata = {
|
||
title: "Managed Hosting & Development — VPS, Websites & Minecraft | Van Hunen IT",
|
||
description:
|
||
"Managed VPS hosting (managed or owned), Managed Website hosting & care, Website development, and Managed Minecraft hosting & plugins. Self-service provisioning, SLAs, restore-tested backups, expert support.",
|
||
};
|
||
|
||
export default function HomePage() {
|
||
const orgLd = {
|
||
"@context": "https://schema.org",
|
||
"@type": "Organization",
|
||
name: site.name,
|
||
url: site.url,
|
||
logo: site.org.logo,
|
||
sameAs: site.org.sameAs,
|
||
};
|
||
|
||
const faqItems = [
|
||
{
|
||
q: "How fast can you start?",
|
||
a: "Most projects start within 2–3 business days after scope confirmation.",
|
||
},
|
||
{
|
||
q: "Can I own the VPS through your platform?",
|
||
a: "Yes. Choose Owned mode on the VPS page. We provision into your cloud account via a secure connect flow. You keep full ownership; we still manage it.",
|
||
},
|
||
{
|
||
q: "Do you support self-service deploys?",
|
||
a: "Yes. You can self-provision a VPS or deploy a Minecraft server in minutes—both include backups and monitoring by default.",
|
||
},
|
||
{
|
||
q: "Do you work under NDA?",
|
||
a: "Yes—mutual NDA available on request; we keep credentials least-privilege.",
|
||
},
|
||
{
|
||
q: "What’s your guarantee?",
|
||
a: "We show proof of outcomes. If the agreed scope isn’t met, we make it right or refund the sprint fee.",
|
||
},
|
||
{
|
||
q: "Do you offer 24/7?",
|
||
a: "Yes—Mission-Critical includes 24/7 paging with a 1-hour first response. Essential and Growth cover business hours.",
|
||
},
|
||
];
|
||
|
||
const faqLd = {
|
||
"@context": "https://schema.org",
|
||
"@type": "FAQPage",
|
||
mainEntity: faqItems.map((i) => ({
|
||
"@type": "Question",
|
||
name: i.q,
|
||
acceptedAnswer: { "@type": "Answer", text: i.a },
|
||
})),
|
||
};
|
||
|
||
const heroBullets = [
|
||
{
|
||
title: "Managed or Owned VPS hosting",
|
||
body: "Hardened servers, monitoring, and verified backups—hosted by us or owned in your account.",
|
||
href: "/vps",
|
||
},
|
||
{
|
||
title: "Managed Website hosting & care",
|
||
body: "Updates, uptime, security checks, and monthly restore-tested backups.",
|
||
href: "/services#website-care",
|
||
},
|
||
{
|
||
title: "Website development",
|
||
body: "Fast Next.js sites, SEO-ready with deployment included.",
|
||
href: "/services#development",
|
||
},
|
||
{
|
||
title: "Minecraft hosting & plugins",
|
||
body: "Self-service deploys, tuned performance, backups, and custom features.",
|
||
href: "/minecraft",
|
||
},
|
||
];
|
||
|
||
const services = [
|
||
{
|
||
title: "Managed VPS Hosting (Managed or Owned)",
|
||
body:
|
||
"Secure, fast VPS hosting—server management, monitoring, and restore-tested backups. Provision on our platform or own it in your cloud.",
|
||
href: "/vps",
|
||
cta: "Provision a VPS →",
|
||
},
|
||
{
|
||
title: "Managed Website Hosting & Care",
|
||
body:
|
||
"Fully managed website hosting & maintenance—updates, uptime, security checks, and monthly restore tests.",
|
||
href: "/services#website-care",
|
||
cta: "Start Managed Website Hosting →",
|
||
},
|
||
{
|
||
title: "Website Development (Next.js)",
|
||
body:
|
||
"Launch a fast, SEO-ready site with modern tech, analytics, and deployment to your managed hosting.",
|
||
href: "/services#development",
|
||
cta: "Build My Website →",
|
||
},
|
||
{
|
||
title: "Managed Minecraft Server Hosting & Plugins",
|
||
body:
|
||
"Lag-free, stable Minecraft hosting on a hardened VPS, plus custom Paper/Spigot plugins when you need them.",
|
||
href: "/minecraft",
|
||
cta: "Deploy a Server →",
|
||
},
|
||
];
|
||
|
||
return (
|
||
<main 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">
|
||
<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-28 text-center">
|
||
<h1 className="text-4xl sm:text-6xl font-extrabold tracking-tight">
|
||
<span className="bg-gradient-to-r from-blue-600 via-purple-600 to-blue-600 bg-clip-text text-transparent">
|
||
Managed Hosting & Development — Fast, Secure, Done-for-You
|
||
</span>
|
||
</h1>
|
||
<p className="mx-auto mt-6 max-w-3xl text-lg sm:text-xl text-neutral-700 dark:text-neutral-300">
|
||
Get reliable <strong>Managed or Owned VPS hosting</strong>,{" "}
|
||
<strong>Managed Website hosting & care</strong>,{" "}
|
||
<strong>Website development</strong>, and{" "}
|
||
<strong>Minecraft server hosting & plugins</strong>. Self-service provisioning with{" "}
|
||
restore-tested backups and real SLAs—so you can focus on creating and growing.
|
||
</p>
|
||
|
||
{/* Hero bullets */}
|
||
<div className="mx-auto mt-8 grid max-w-4xl grid-cols-1 gap-4 sm:grid-cols-2">
|
||
{heroBullets.map((b) => (
|
||
<Link
|
||
href={b.href}
|
||
key={b.title}
|
||
className="rounded-xl border border-neutral-200 dark:border-neutral-800 bg-white/70 dark:bg-neutral-900/70 p-4 text-left hover:shadow-md transition"
|
||
>
|
||
<div className="text-base font-semibold">{b.title}</div>
|
||
<div className="mt-1 text-sm text-neutral-700 dark:text-neutral-300">{b.body}</div>
|
||
</Link>
|
||
))}
|
||
</div>
|
||
|
||
{/* Primary CTAs */}
|
||
<div className="mt-8 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-3 justify-center">
|
||
<Link
|
||
href="/vps#deploy"
|
||
className="inline-flex items-center justify-center rounded-lg bg-gradient-to-r from-blue-600 via-purple-600 to-blue-600 px-6 py-3 text-white font-semibold hover:opacity-90 transition"
|
||
>
|
||
Provision a VPS
|
||
</Link>
|
||
<Link
|
||
href="/services#website-care"
|
||
className="inline-flex items-center justify-center rounded-lg border border-neutral-300 dark:border-neutral-700 px-6 py-3 text-neutral-900 dark:text-white font-semibold hover:bg-neutral-50 dark:hover:bg-neutral-800 transition"
|
||
>
|
||
Manage My Website
|
||
</Link>
|
||
<Link
|
||
href="/services#development"
|
||
className="inline-flex items-center justify-center rounded-lg border border-neutral-300 dark:border-neutral-700 px-6 py-3 text-neutral-900 dark:text-white font-semibold hover:bg-neutral-50 dark:hover:bg-neutral-800 transition"
|
||
>
|
||
Build My Website
|
||
</Link>
|
||
<Link
|
||
href="/minecraft#deploy"
|
||
className="inline-flex items-center justify-center rounded-lg border border-neutral-300 dark:border-neutral-700 px-6 py-3 text-neutral-900 dark:text-white font-semibold hover:bg-neutral-50 dark:hover:bg-neutral-800 transition"
|
||
>
|
||
Deploy Minecraft
|
||
</Link>
|
||
</div>
|
||
|
||
{/* Proof badges */}
|
||
<div className="mt-10 grid grid-cols-1 sm:grid-cols-3 gap-4 max-w-4xl mx-auto">
|
||
<div className="rounded-xl border border-neutral-200 dark:border-neutral-800 bg-white/70 dark:bg-neutral-900/70 p-4">
|
||
<p className="text-2xl font-bold">+38% faster TTFB</p>
|
||
<p className="text-sm text-neutral-600 dark:text-neutral-400">after edge & cache tuning</p>
|
||
</div>
|
||
<div className="rounded-xl border border-neutral-200 dark:border-neutral-800 bg-white/70 dark:bg-neutral-900/70 p-4">
|
||
<p className="text-2xl font-bold">DMARC p=reject</p>
|
||
<p className="text-sm text-neutral-600 dark:text-neutral-400">spoofing blocked in 48 hours</p>
|
||
</div>
|
||
<div className="rounded-xl border border-neutral-200 dark:border-neutral-800 bg-white/70 dark:bg-neutral-900/70 p-4">
|
||
<p className="text-2xl font-bold">7m 12s restore</p>
|
||
<p className="text-sm text-neutral-600 dark:text-neutral-400">backup drill to full recovery</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* --- SERVICES --- */}
|
||
<section className="relative overflow-hidden border-y border-neutral-200 dark:border-neutral-800">
|
||
<div className="container mx-auto max-w-6xl px-4 py-20 text-center">
|
||
<h2 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">
|
||
Hosting & Development Services
|
||
</h2>
|
||
<p className="mt-5 text-lg text-neutral-700 dark:text-neutral-300 max-w-3xl mx-auto">
|
||
Clear outcomes, flat pricing, and real SLAs—plus before/after proof on every engagement.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="container mx-auto max-w-6xl px-4 pb-20">
|
||
<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
|
||
{services.map((card) => (
|
||
<article
|
||
key={card.title}
|
||
className="group relative overflow-hidden rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white/60 dark:bg-neutral-900/60 p-8 shadow-sm hover:shadow-lg transition-all duration-300 backdrop-blur text-left"
|
||
>
|
||
<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-xl font-semibold tracking-tight text-neutral-900 dark:text-white">
|
||
{card.title}
|
||
</h3>
|
||
<p className="mt-3 text-sm text-neutral-700 dark:text-neutral-300">{card.body}</p>
|
||
<Link
|
||
href={card.href}
|
||
className="mt-5 inline-flex items-center text-sm font-medium text-blue-600 hover:underline"
|
||
>
|
||
{card.cta}
|
||
</Link>
|
||
</article>
|
||
))}
|
||
</div>
|
||
|
||
<div className="mt-14 text-center">
|
||
<Link
|
||
href="/services"
|
||
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-medium hover:opacity-90 transition"
|
||
>
|
||
View all services
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* --- HOW IT WORKS --- */}
|
||
<section className="relative py-24">
|
||
<div className="container mx-auto max-w-6xl px-4">
|
||
<div className="text-center">
|
||
<h2 className="text-3xl sm:text-5xl font-bold tracking-tight">
|
||
From plan to live in days
|
||
</h2>
|
||
<p className="mt-4 text-lg text-neutral-700 dark:text-neutral-300 max-w-2xl mx-auto">
|
||
Self-service provisioning or white-glove setup. We scope, set up, and verify—then hand you clear reporting and an SLA-backed care plan.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="mt-10 grid gap-6 sm:grid-cols-3">
|
||
{[
|
||
{
|
||
step: "1",
|
||
title: "Plan",
|
||
body: "Technical review and goals—or use the wizard to self-provision.",
|
||
},
|
||
{
|
||
step: "2",
|
||
title: "Set up",
|
||
body: "Provision VPS/hosting, deploy site or server, configure monitoring and backups.",
|
||
},
|
||
{
|
||
step: "3",
|
||
title: "Verify",
|
||
body: "Before/after metrics, restore test timer, and next-step plan you can share internally.",
|
||
},
|
||
].map((s) => (
|
||
<div
|
||
key={s.step}
|
||
className="rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white/60 dark:bg-neutral-900/60 p-6"
|
||
>
|
||
<div className="text-sm font-semibold text-blue-600">Step {s.step}</div>
|
||
<h3 className="mt-2 text-xl font-semibold">{s.title}</h3>
|
||
<p className="mt-2 text-sm text-neutral-700 dark:text-neutral-300">{s.body}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
<div className="mt-10 flex justify-center">
|
||
<Link
|
||
href="/contact?plan=recommendation"
|
||
className="inline-flex items-center rounded-lg bg-neutral-900 dark:bg-white text-white dark:text-neutral-900 px-6 py-3 font-semibold hover:opacity-90 transition"
|
||
>
|
||
Get My Recommendation
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* --- PRICING --- */}
|
||
<section className="relative py-24 bg-gradient-to-br from-blue-50/40 via-white to-purple-50/40 dark:from-blue-950/10 dark:to-purple-950/10">
|
||
<div className="container mx-auto max-w-6xl px-4">
|
||
<Pricing plans={plans} />
|
||
<div className="mt-8 text-center">
|
||
<p className="text-sm text-neutral-600 dark:text-neutral-400">
|
||
Every plan includes monitoring, automated backups with restore verification, uptime & SSL
|
||
watch, and a quarterly health summary.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* --- TESTIMONIALS --- */}
|
||
<section className="relative py-24 border-t border-neutral-200 dark:border-neutral-800">
|
||
<div className="container mx-auto max-w-6xl px-4">
|
||
<Testimonials />
|
||
</div>
|
||
</section>
|
||
|
||
{/* --- FAQ --- */}
|
||
<section className="relative py-24 bg-gradient-to-b from-neutral-50 via-white to-neutral-100 dark:from-neutral-950 dark:via-neutral-900 dark:to-neutral-950">
|
||
<div className="container mx-auto max-w-4xl px-4">
|
||
<FAQ items={faqItems} />
|
||
</div>
|
||
</section>
|
||
|
||
{/* --- CTA --- */}
|
||
<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 flex-col sm:flex-row gap-3 justify-center">
|
||
<Link
|
||
href="/vps#deploy"
|
||
className="inline-flex items-center rounded-lg bg-white text-blue-700 font-semibold px-6 py-3 hover:bg-blue-50 transition"
|
||
>
|
||
Provision a VPS
|
||
</Link>
|
||
<Link
|
||
href="/minecraft#deploy"
|
||
className="inline-flex items-center rounded-lg border border-white/70 text-white font-semibold px-6 py-3 hover:bg-white/10 transition"
|
||
>
|
||
Deploy Minecraft
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<JsonLd data={orgLd} />
|
||
<JsonLd data={faqLd} />
|
||
</main>
|
||
);
|
||
}
|