Skip to content

Commit b273e83

Browse files
guanzhousongmicrosoftCopilot
guanzhousongmicrosoft
and
Copilot
committed
Add Kubernetes operator promotion page
Create a dedicated DocumentDB Kubernetes Operator landing page, add homepage and docs entry points, and align the copy and styling with the rest of the site while highlighting local, hybrid, and multi-cloud workflows. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
1 parent 97897d2 commit b273e83

File tree

5 files changed

+437
-5
lines changed

5 files changed

+437
-5
lines changed

‎app/kubernetes-operator/page.tsx‎

Lines changed: 343 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,343 @@
1+
import Link from "next/link";
2+
import { getMetadata } from "../services/metadataService";
3+
import {
4+
documentdbKubernetesOperatorDocsUrl,
5+
documentdbKubernetesOperatorGitHubUrl,
6+
} from "../services/externalLinks";
7+
8+
const operatorBenefits = [
9+
{
10+
title: "Local to cloud",
11+
description:
12+
"Start on kind or minikube, then move to managed or self-managed Kubernetes with the same operator model.",
13+
},
14+
{
15+
title: "Hybrid and multi-cloud",
16+
description:
17+
"The docs include concrete AKS, EKS, GKE, and on-prem deployment patterns for teams spanning more than one environment.",
18+
},
19+
{
20+
title: "Cross-cluster replication",
21+
description:
22+
"Use documented multi-cluster replication and failover patterns when one cluster is not enough.",
23+
},
24+
{
25+
title: "HA, backup, and TLS",
26+
description:
27+
"Add automatic failover, backup resources, and TLS to operate DocumentDB as a real service.",
28+
},
29+
{
30+
title: "Day-2 operations",
31+
description:
32+
"Use the kubectl plugin for status, events, and promotion workflows.",
33+
},
34+
] as const;
35+
36+
const setupSteps = [
37+
{
38+
step: "01",
39+
title: "Prepare the cluster",
40+
description:
41+
"Use kind or minikube locally, or a Kubernetes 1.35+ cluster such as AKS, EKS, or GKE.",
42+
},
43+
{
44+
step: "02",
45+
title: "Install the operator",
46+
description:
47+
"Deploy the operator so it can reconcile DocumentDB resources and manage cluster lifecycle operations.",
48+
},
49+
{
50+
step: "03",
51+
title: "Create a DocumentDB resource",
52+
description:
53+
"Apply a DocumentDB custom resource to start locally or grow into replicated topologies as your environment expands.",
54+
},
55+
] as const;
56+
57+
const operatorHighlights = [
58+
"kind + minikube quickstart",
59+
"AKS / EKS / GKE",
60+
"Hybrid / on-prem guide",
61+
"Cross-cluster replication",
62+
"Backup + ScheduledBackup resources",
63+
"kubectl plugin for operator workflows",
64+
"TLS-aware deployment model",
65+
] as const;
66+
67+
const bestFitScenarios = [
68+
"Teams starting on local clusters and growing toward managed Kubernetes.",
69+
"Platform teams spanning cloud and on-prem Kubernetes environments.",
70+
"Operators that need cross-cluster replication and promotion workflows.",
71+
] as const;
72+
73+
export const metadata = getMetadata({
74+
title: "DocumentDB Kubernetes Operator",
75+
description:
76+
"Learn how the DocumentDB Kubernetes Operator takes DocumentDB from local Kubernetes clusters to hybrid and multi-cloud topologies with replication, HA, backups, and TLS.",
77+
extraKeywords: [
78+
"Kubernetes",
79+
"operator",
80+
"Helm",
81+
"multi-cloud",
82+
"hybrid",
83+
"on-prem",
84+
"cross-cluster replication",
85+
"high availability",
86+
"backup",
87+
"TLS",
88+
],
89+
});
90+
91+
export default function KubernetesOperatorPage() {
92+
return (
93+
<div className="min-h-screen bg-neutral-900">
94+
<section className="relative overflow-hidden border-b border-neutral-800 bg-gradient-to-b from-neutral-800 via-neutral-900 to-black">
95+
<div className="absolute inset-0 bg-[radial-gradient(circle_at_top_right,_rgba(16,185,129,0.22),_transparent_38%),radial-gradient(circle_at_bottom_left,_rgba(59,130,246,0.16),_transparent_40%)]" />
96+
<div className="relative mx-auto max-w-7xl px-4 py-14 sm:px-6 sm:py-20 lg:px-8 lg:py-24">
97+
<div className="grid items-center gap-8 lg:gap-10 xl:grid-cols-[1.15fr_0.85fr]">
98+
<div className="min-w-0">
99+
<p className="mb-3 text-xs font-semibold uppercase tracking-[0.24em] text-emerald-300">
100+
Operator preview
101+
</p>
102+
<h1 className="mb-5 text-4xl font-extrabold tracking-tight text-white sm:text-6xl lg:text-7xl">
103+
DocumentDB Kubernetes Operator
104+
</h1>
105+
<p className="mb-4 max-w-3xl text-2xl font-semibold tracking-tight text-white sm:text-3xl">
106+
Start on kind or minikube. Expand to{" "}
107+
<span className="inline-block">hybrid and multi-cloud Kubernetes.</span>
108+
</p>
109+
<p className="mb-7 max-w-xl text-base leading-7 text-gray-300 sm:text-lg">
110+
Install with Helm, manage with custom resources, and extend to
111+
documented cross-cluster replication, failover, backups, and
112+
TLS.
113+
</p>
114+
<div className="flex flex-col gap-3 sm:flex-row sm:flex-wrap">
115+
<a
116+
href={documentdbKubernetesOperatorDocsUrl}
117+
className="inline-flex w-full items-center justify-center rounded-md bg-emerald-500 px-6 py-3 text-sm font-semibold text-white transition-colors hover:bg-emerald-400 sm:w-auto"
118+
>
119+
Open quick start
120+
</a>
121+
<a
122+
href={documentdbKubernetesOperatorGitHubUrl}
123+
className="inline-flex w-full items-center justify-center rounded-md border border-emerald-400/30 bg-emerald-500/10 px-6 py-3 text-sm font-semibold text-emerald-200 transition-colors hover:bg-emerald-500/20 sm:w-auto"
124+
>
125+
GitHub repository
126+
</a>
127+
<Link
128+
href="/docs/getting-started"
129+
className="inline-flex w-full items-center justify-center rounded-md border border-neutral-600 bg-neutral-800/40 px-6 py-3 text-sm font-semibold text-gray-200 transition-colors hover:border-neutral-500 hover:bg-neutral-800 sm:w-auto"
130+
>
131+
View local install guides
132+
</Link>
133+
</div>
134+
</div>
135+
136+
<div className="min-w-0 rounded-2xl border border-white/10 bg-neutral-900/90 p-5 shadow-[0_24px_80px_-40px_rgba(16,185,129,0.45)] sm:rounded-3xl sm:p-6">
137+
<div className="mb-4">
138+
<span className="inline-flex rounded-full border border-emerald-400/30 bg-emerald-500/10 px-3 py-1 text-xs font-semibold uppercase tracking-[0.18em] text-emerald-200">
139+
Where it fits
140+
</span>
141+
<h2 className="mt-4 text-xl font-semibold text-white sm:text-2xl">
142+
Built for local, hybrid, and multi-cluster paths
143+
</h2>
144+
<p className="mt-2 text-sm leading-6 text-gray-400">
145+
Use the operator when one cluster is not enough and you want a
146+
consistent Kubernetes operating model.
147+
</p>
148+
</div>
149+
150+
<ul className="overflow-hidden rounded-2xl border border-neutral-800/80 bg-neutral-900/50">
151+
{bestFitScenarios.map((item) => (
152+
<li
153+
key={item}
154+
className="grid grid-cols-[auto_1fr] gap-3 border-t border-neutral-800/80 px-4 py-3.5 first:border-t-0"
155+
>
156+
<span className="mt-0.5 inline-flex h-7 w-7 items-center justify-center rounded-full border border-emerald-400/30 bg-emerald-500/10 text-emerald-200">
157+
<svg
158+
className="h-3.5 w-3.5"
159+
fill="none"
160+
stroke="currentColor"
161+
viewBox="0 0 24 24"
162+
>
163+
<path
164+
strokeLinecap="round"
165+
strokeLinejoin="round"
166+
strokeWidth={2}
167+
d="m5 13 4 4L19 7"
168+
/>
169+
</svg>
170+
</span>
171+
<p className="text-sm leading-6 text-gray-300">{item}</p>
172+
</li>
173+
))}
174+
</ul>
175+
176+
<div className="mt-5 rounded-2xl border border-neutral-800 bg-neutral-950/70 p-5">
177+
<p className="text-sm font-semibold text-white">
178+
Operator highlights
179+
</p>
180+
<div className="mt-4 flex flex-wrap gap-2">
181+
{operatorHighlights.map((item) => (
182+
<span
183+
key={item}
184+
className="rounded-full border border-neutral-700 bg-neutral-900 px-3 py-1 text-xs text-gray-200"
185+
>
186+
{item}
187+
</span>
188+
))}
189+
</div>
190+
<p className="mt-5 text-xs font-semibold uppercase tracking-[0.18em] text-amber-300">
191+
Preview status
192+
</p>
193+
<p className="mt-2 text-sm leading-6 text-gray-300">
194+
The operator is still in preview. Use this page to assess the
195+
fit, then follow the quick start or multi-cluster guides.
196+
</p>
197+
</div>
198+
</div>
199+
</div>
200+
</div>
201+
</section>
202+
203+
<section className="border-b border-neutral-800 bg-neutral-900 py-14 sm:py-20">
204+
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
205+
<div className="mb-10 max-w-3xl">
206+
<p className="mb-3 text-xs font-semibold uppercase tracking-[0.24em] text-emerald-300">
207+
What the operator adds
208+
</p>
209+
<h2 className="text-3xl font-bold text-white sm:text-4xl">
210+
A better fit for Kubernetes-based DocumentDB environments
211+
</h2>
212+
<p className="mt-4 text-base leading-7 text-gray-400 sm:text-lg">
213+
Choose the operator when one cluster is not enough and you want
214+
the same operating model across local, hybrid, and multi-cloud
215+
environments.
216+
</p>
217+
</div>
218+
219+
<div className="grid gap-4 md:grid-cols-2 xl:grid-cols-5">
220+
{operatorBenefits.map((item) => (
221+
<article
222+
key={item.title}
223+
className="rounded-2xl border border-neutral-800 bg-neutral-900/80 p-5 transition hover:-translate-y-0.5 hover:border-emerald-400/30 hover:bg-neutral-900 sm:p-6"
224+
>
225+
<div className="mb-4 inline-flex h-11 w-11 items-center justify-center rounded-xl border border-emerald-400/20 bg-emerald-500/10 text-emerald-300">
226+
<svg
227+
className="h-5 w-5"
228+
fill="none"
229+
stroke="currentColor"
230+
viewBox="0 0 24 24"
231+
>
232+
<path
233+
strokeLinecap="round"
234+
strokeLinejoin="round"
235+
strokeWidth={1.8}
236+
d="M12 6v12M6 12h12"
237+
/>
238+
</svg>
239+
</div>
240+
<h3 className="text-xl font-semibold text-white">{item.title}</h3>
241+
<p className="mt-3 text-sm leading-6 text-gray-400">
242+
{item.description}
243+
</p>
244+
</article>
245+
))}
246+
</div>
247+
</div>
248+
</section>
249+
250+
<section className="border-b border-neutral-800 bg-neutral-900/60 py-14 sm:py-16 lg:py-20">
251+
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
252+
<div className="mb-10 max-w-3xl">
253+
<p className="mb-3 text-xs font-semibold uppercase tracking-[0.24em] text-emerald-300">
254+
Setup at a glance
255+
</p>
256+
<h2 className="text-3xl font-bold text-white sm:text-4xl">
257+
The operator flow in three steps
258+
</h2>
259+
<p className="mt-4 text-base leading-7 text-gray-400 sm:text-lg">
260+
Use this page to understand the path. Use the docs for commands,
261+
topology setup, and current support details.
262+
</p>
263+
</div>
264+
265+
<div className="grid gap-4 lg:grid-cols-3">
266+
{setupSteps.map((item) => (
267+
<article
268+
key={item.step}
269+
className="rounded-2xl border border-neutral-800 bg-neutral-900/85 p-6"
270+
>
271+
<span className="inline-flex h-9 w-9 items-center justify-center rounded-full border border-emerald-400/30 bg-emerald-500/10 text-sm font-semibold text-emerald-200">
272+
{item.step}
273+
</span>
274+
<h3 className="mt-4 text-xl font-semibold text-white">
275+
{item.title}
276+
</h3>
277+
<p className="mt-3 text-sm leading-6 text-gray-400">
278+
{item.description}
279+
</p>
280+
</article>
281+
))}
282+
</div>
283+
284+
<div className="mt-8 rounded-2xl border border-neutral-800 bg-neutral-900/80 p-6">
285+
<div className="grid gap-6 lg:grid-cols-[1fr_auto] lg:items-center">
286+
<div>
287+
<p className="text-sm font-semibold text-white">
288+
What to expect before you start
289+
</p>
290+
<p className="mt-2 max-w-3xl text-sm leading-6 text-gray-400">
291+
The operator currently targets Kubernetes 1.35+ and depends on
292+
cert-manager and CloudNativePG. Cross-cluster topologies also
293+
require network connectivity between clusters.
294+
</p>
295+
</div>
296+
<a
297+
href={documentdbKubernetesOperatorDocsUrl}
298+
className="inline-flex items-center justify-center rounded-md bg-emerald-500 px-5 py-3 text-sm font-semibold text-white transition-colors hover:bg-emerald-400"
299+
>
300+
Open quick start
301+
</a>
302+
</div>
303+
</div>
304+
</div>
305+
</section>
306+
307+
<section className="border-t border-neutral-800 bg-black py-12 sm:py-14">
308+
<div className="mx-auto max-w-3xl px-4 text-center sm:px-6 lg:px-8">
309+
<p className="mb-3 text-xs font-semibold uppercase tracking-[0.24em] text-emerald-300">
310+
Next step
311+
</p>
312+
<h2 className="mb-3 text-2xl font-bold text-white sm:text-3xl">
313+
Start local, then expand
314+
</h2>
315+
<p className="mb-6 text-sm text-gray-400 sm:text-base">
316+
Use the quick start for a local cluster. Then continue with the
317+
hybrid and multi-cloud guides.
318+
</p>
319+
<div className="flex flex-col justify-center gap-3 sm:flex-row sm:flex-wrap">
320+
<a
321+
href={documentdbKubernetesOperatorDocsUrl}
322+
className="inline-flex w-full items-center justify-center rounded-md bg-emerald-500 px-5 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-emerald-400 sm:w-auto"
323+
>
324+
Open quick start
325+
</a>
326+
<a
327+
href={documentdbKubernetesOperatorGitHubUrl}
328+
className="inline-flex w-full items-center justify-center rounded-md border border-neutral-600 px-5 py-2.5 text-sm font-semibold text-gray-200 transition-colors hover:border-neutral-500 hover:bg-neutral-800 sm:w-auto"
329+
>
330+
GitHub repository
331+
</a>
332+
<Link
333+
href="/docs/getting-started"
334+
className="inline-flex w-full items-center justify-center rounded-md border border-neutral-600 px-5 py-2.5 text-sm font-semibold text-gray-200 transition-colors hover:border-neutral-500 hover:bg-neutral-800 sm:w-auto"
335+
>
336+
View local install guides
337+
</Link>
338+
</div>
339+
</div>
340+
</section>
341+
</div>
342+
);
343+
}

0 commit comments

Comments
 (0)