292 lines
13 KiB
TypeScript
292 lines
13 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: "SMB Website Reliability & Deliverability",
|
||
description:
|
||
"DMARC-aligned email, Cloudflare edge security & speed, tested backups, and uptime watch for SMB sites. Fixed-scope sprints and care plans with real SLAs and before/after proof.",
|
||
};
|
||
|
||
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 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: "Can we switch providers later?",
|
||
a: "Yes. Everything is documented; you own the accounts and artifacts. Month-to-month plans with a 30-day cancel policy.",
|
||
},
|
||
{
|
||
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 },
|
||
})),
|
||
};
|
||
|
||
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">
|
||
Fixes in days. Uptime for months.
|
||
</span>
|
||
</h1>
|
||
<p className="mx-auto mt-6 max-w-3xl text-lg sm:text-xl text-neutral-700 dark:text-neutral-300">
|
||
SMB website reliability and deliverability—implemented with the{" "}
|
||
<span className="font-semibold">Reliability Stack™</span>: DMARC-aligned email, Cloudflare edge
|
||
security & speed, tested backups, and uptime watch. Flat pricing. Before/after proof.
|
||
</p>
|
||
|
||
<div className="mt-8 flex flex-col sm:flex-row gap-3 justify-center">
|
||
<Link
|
||
href="/free"
|
||
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"
|
||
>
|
||
Start a Free Reliability Check
|
||
</Link>
|
||
<Link
|
||
href="/contact"
|
||
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"
|
||
>
|
||
Book a 15-min Fit Call
|
||
</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 Cloudflare 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">in 48 hours, spoofing blocked</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>
|
||
|
||
{/* --- RELIABILITY STACK --- */}
|
||
<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">
|
||
The Reliability Stack™
|
||
</h2>
|
||
<p className="mt-5 text-lg text-neutral-700 dark:text-neutral-300 max-w-3xl mx-auto">
|
||
Four layers that make websites dependable. Implemented in a 1–3 day sprint, proven with before/after data.
|
||
</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">
|
||
{[
|
||
{
|
||
title: "Email Deliverability",
|
||
body:
|
||
"Inbox-ready email with SPF/DKIM/DMARC alignment, monitoring, and reports. Stop spoofing and missing leads.",
|
||
href: "/services#email-deliverability",
|
||
},
|
||
{
|
||
title: "Cloudflare Edge",
|
||
body:
|
||
"WAF & bot mitigation, HTTP/3, cache tuning, and origin shields for fewer attacks and faster TTFB.",
|
||
href: "/services#cloudflare",
|
||
},
|
||
{
|
||
title: "Backups & Restore",
|
||
body:
|
||
"Automated backups with scheduled restore tests and a recovery runbook. Know you can recover, fast.",
|
||
href: "/services#backups",
|
||
},
|
||
{
|
||
title: "Uptime & Incidents",
|
||
body:
|
||
"Monitors and SSL watch with clear incident notes and post-mortems. Reduce surprises and MTTR.",
|
||
href: "/services#uptime",
|
||
},
|
||
].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"
|
||
>
|
||
Explore →
|
||
</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 (3 STEPS) --- */}
|
||
<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 audit to outcomes in 72 hours
|
||
</h2>
|
||
<p className="mt-4 text-lg text-neutral-700 dark:text-neutral-300 max-w-2xl mx-auto">
|
||
Diagnose the risks, implement the fixes, and prove the results—then choose the right Care plan.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="mt-10 grid gap-6 sm:grid-cols-3">
|
||
{[
|
||
{
|
||
step: "1",
|
||
title: "Diagnose",
|
||
body:
|
||
"DNS/email/edge scan, backup checks, and uptime review. Clear scope and fixed price before we start.",
|
||
},
|
||
{
|
||
step: "2",
|
||
title: "Implement",
|
||
body:
|
||
"DMARC + Cloudflare + backups + monitors. Least-privilege access, change log, and rollback plan.",
|
||
},
|
||
{
|
||
step: "3",
|
||
title: "Prove",
|
||
body:
|
||
"Before/after report, restore test timer, incident notes, 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?sprint=fix"
|
||
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"
|
||
>
|
||
Book a Fix Sprint (€490)
|
||
</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 DNS/email 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">
|
||
Ready to make your website reliable and inbox-ready?
|
||
</h2>
|
||
<p className="mt-4 text-lg text-blue-100">
|
||
Start with a Fix Sprint or choose a Care plan that fits your business. We’ll prove the results.
|
||
</p>
|
||
<div className="mt-8 flex flex-col sm:flex-row gap-3 justify-center">
|
||
<Link
|
||
href="/free"
|
||
className="inline-flex items-center rounded-lg bg-white text-blue-700 font-semibold px-6 py-3 hover:bg-blue-50 transition"
|
||
>
|
||
Start Free Check
|
||
</Link>
|
||
<Link
|
||
href="/pricing"
|
||
className="inline-flex items-center rounded-lg border border-white/70 text-white font-semibold px-6 py-3 hover:bg-white/10 transition"
|
||
>
|
||
See Pricing & SLA
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<JsonLd data={orgLd} />
|
||
<JsonLd data={faqLd} />
|
||
</main>
|
||
);
|
||
}
|