A calm 500 server-error page with an oversized heading, recovery action buttons, an image tile with a live uptime status indicator, and a hairline table of incident reference details.
import Error35 from "@/components/ui/error35";
import { Indicator14 } from "@/components/ui/error35-utils/indicator14";
export default function Error35Demo() {
return (
<Error35
code="Error 500"
heading="That one is ours, not yours"
description="Something on our side failed while loading this page. Nothing you were working on has been lost, and the request has already been reported to the engineer on call."
buttons={[
{ label: "Try again", href: "https://beste.co" },
{ label: "Back to the workspace", href: "https://beste.co" },
]}
references={[
{ label: "Reference", value: "SIR-9F4C-2201" },
{ label: "Time", value: "14 May 2026, 09:41 UK" },
{ label: "Reported", value: "Automatically, no action needed" },
]}
media={
<Indicator14
title="Booking service"
uptime="99.98%"
range="Last 45 days"
bars={[
"up",
"up",
"up",
"up",
"up",
"up",
"partial",
"up",
"up",
"up",
"up",
"up",
"up",
"up",
"up",
"up",
"up",
"down",
"up",
"up",
"up",
"up",
"up",
"up",
"up",
"up",
"up",
"up",
"partial",
"up",
"up",
"up",
"up",
"up",
"up",
"up",
"up",
"up",
"up",
"up",
"up",
"up",
"up",
"up",
"up",
]}
/>
}
image={{
src: "https://cdn.21st.dev/assets/mirror/3c/3c0a90b5699b413143f49e61b33601d0d113cbbf56c927ccce83f05b0ed00689.jpg",
alt: "Soft blue gradient backdrop",
}}
footnote="Quote the reference above if you write to us and we can pull the exact request out of the log."
/>
);
}