Template
Rami Bitar
6376bb3d82
Use remote logos and avatars, refine landing copy, and document the template structure.
36 lines
1.6 KiB
TypeScript
36 lines
1.6 KiB
TypeScript
import { LockKeyhole } from "lucide-react"
|
|
|
|
import { Ripple } from "@/components/ui/ripple"
|
|
import { cn } from "@/lib/utils"
|
|
|
|
export function ReliabilitySection() {
|
|
return (
|
|
<section className="relative overflow-hidden border-b px-6 py-20 text-center sm:px-12 sm:py-24">
|
|
<Ripple className="opacity-40" mainCircleSize={180} numCircles={9} />
|
|
<div className="relative z-10 mx-auto max-w-3xl">
|
|
<div className="mx-auto flex size-12 items-center justify-center rounded-2xl border bg-background shadow-sm">
|
|
<LockKeyhole className="size-5 text-blue-600" />
|
|
</div>
|
|
<h2 className="mt-6 text-balance text-3xl font-medium tracking-[-0.045em] sm:text-4xl">
|
|
Reliability built into every request.
|
|
</h2>
|
|
<p className="mx-auto mt-4 max-w-xl text-sm leading-6 text-muted-foreground sm:text-base">
|
|
Production-grade controls keep your workloads available, observable, and protected as they scale.
|
|
</p>
|
|
<div className="mt-10 grid grid-cols-3 overflow-hidden rounded-2xl border bg-background/80 backdrop-blur">
|
|
{[
|
|
["99.99%", "Gateway uptime"],
|
|
["8", "Global regions"],
|
|
["< 20ms", "Routing overhead"],
|
|
].map(([value, label], index) => (
|
|
<div key={label} className={cn("px-2 py-5 sm:px-6", index < 2 && "border-r")}>
|
|
<strong className="block text-lg font-medium tracking-tight sm:text-2xl">{value}</strong>
|
|
<span className="mt-1 block text-[10px] text-muted-foreground sm:text-xs">{label}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|