190 lines
7.6 KiB
TypeScript
190 lines
7.6 KiB
TypeScript
import type { Metadata } from "next";
|
||
import Hero from "@/components/Hero";
|
||
import Process from "@/components/Process";
|
||
import Pricing from "@/components/Pricing";
|
||
import Testimonials from "@/components/Testimonials";
|
||
import FAQ from "@/components/FAQ";
|
||
import CTA from "@/components/CTA";
|
||
import { SERVICE_CATEGORIES } from "@/lib/services";
|
||
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: "Productized IT for SMBs",
|
||
description: site.description,
|
||
};
|
||
|
||
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 faqLd = {
|
||
"@context": "https://schema.org",
|
||
"@type": "FAQPage",
|
||
mainEntity: [
|
||
{
|
||
"@type": "Question",
|
||
name: "How fast can you start?",
|
||
acceptedAnswer: {
|
||
"@type": "Answer",
|
||
text: "Most sprints start within 2–3 business days after scope confirmation.",
|
||
},
|
||
},
|
||
{
|
||
"@type": "Question",
|
||
name: "Do you work under NDA?",
|
||
acceptedAnswer: {
|
||
"@type": "Answer",
|
||
text: "Yes—mutual NDA available on request; we keep credentials least-privilege.",
|
||
},
|
||
},
|
||
{
|
||
"@type": "Question",
|
||
name: "Can we switch providers later?",
|
||
acceptedAnswer: {
|
||
"@type": "Answer",
|
||
text: "Yes. Everything is documented; you own the accounts and artifacts.",
|
||
},
|
||
},
|
||
],
|
||
};
|
||
|
||
// Service category summaries
|
||
const categoryDescriptions: Record<string, string> = {
|
||
"infrastructure-devops":
|
||
"Reliable servers, containers, and automation—Docker, Kubernetes, Cloudflare, and backups that just work.",
|
||
"web-performance":
|
||
"Make your website fast, secure, and consistently available. Core Web Vitals, deliverability, and uptime care.",
|
||
"dev-platforms":
|
||
"Private Git hosting, CI/CD, staging environments, and secrets management—developer efficiency built in.",
|
||
"migrations":
|
||
"Move from legacy hosting or apps to modern, containerized infrastructure with zero-to-minimal downtime.",
|
||
"minecraft":
|
||
"Managed Minecraft servers, plugin development, and performance tuning for creators and communities.",
|
||
"web-dev":
|
||
"Modern websites and headless CMS setups designed for speed, SEO, and maintainability.",
|
||
};
|
||
|
||
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 />
|
||
|
||
{/* --- Service Areas --- */}
|
||
<section className="relative overflow-hidden border-b 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">
|
||
Service Areas
|
||
</h2>
|
||
<p className="mt-5 text-lg text-neutral-700 dark:text-neutral-300 max-w-2xl mx-auto">
|
||
Fixed-scope sprints and managed plans for infrastructure, performance, and development.
|
||
Each category leads to specialized services tailored to small and mid-sized teams.
|
||
</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-3">
|
||
{Object.entries(SERVICE_CATEGORIES).map(([id, cat], i) => (
|
||
<article
|
||
key={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-8 shadow-sm hover:shadow-lg transition-all duration-300 backdrop-blur"
|
||
style={{ animation: `fadeInUp 0.6s ease forwards`, animationDelay: `${i * 80}ms` }}
|
||
>
|
||
<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">
|
||
{cat.label}
|
||
</h3>
|
||
<p className="mt-3 text-sm text-neutral-700 dark:text-neutral-300">
|
||
{categoryDescriptions[id] ?? ""}
|
||
</p>
|
||
<Link
|
||
href={`/services#${cat.anchor}`}
|
||
className="mt-5 inline-flex items-center text-sm font-medium text-blue-600 hover:underline"
|
||
>
|
||
Explore services →
|
||
</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>
|
||
|
||
{/* --- Process --- */}
|
||
<Process />
|
||
|
||
{/* --- 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>
|
||
</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={[
|
||
{
|
||
q: "How fast can you start?",
|
||
a: "Most sprints start within 2–3 business days after scope confirmation.",
|
||
},
|
||
{
|
||
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 scope isn’t met, we make it right or refund the sprint fee.",
|
||
},
|
||
]}
|
||
/>
|
||
</div>
|
||
</section>
|
||
|
||
{/* --- Call to Action --- */}
|
||
<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">
|
||
Ready to make your IT infrastructure reliable and scalable?
|
||
</h2>
|
||
<p className="mt-4 text-lg text-blue-100">
|
||
Talk with Van Hunen IT — get a fixed-scope sprint or managed plan that fits your business.
|
||
</p>
|
||
<Link
|
||
href="/contact"
|
||
className="mt-8 inline-flex items-center rounded-lg bg-white text-blue-700 font-semibold px-6 py-3 hover:bg-blue-50 transition"
|
||
>
|
||
Contact Us
|
||
</Link>
|
||
</div>
|
||
</section>
|
||
|
||
<JsonLd data={orgLd} />
|
||
<JsonLd data={faqLd} />
|
||
</main>
|
||
);
|
||
}
|