Space-Banane
40 lines
1.6 KiB
TypeScript
40 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
export function Uptime() {
|
|
return (
|
|
<section className="w-full max-w-6xl mx-auto space-y-8 px-4 sm:space-y-10">
|
|
<div className="text-center space-y-4">
|
|
<h2 className="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-500 sm:text-3xl">
|
|
Downtime
|
|
</h2>
|
|
<p className="mx-auto max-w-2xl text-sm text-gray-400 sm:text-base">
|
|
I love selfhosting stuff, can you tell?
|
|
</p>
|
|
</div>
|
|
|
|
<div className="mx-auto max-w-3xl">
|
|
<div className="w-full rounded-2xl border border-white/6 bg-gradient-to-br from-gray-800/20 to-transparent p-5 backdrop-blur-sm sm:p-6">
|
|
<h3 className="mb-4 text-center text-xl font-semibold text-white sm:text-2xl">
|
|
Github vs HomeLab Uptime
|
|
</h3>
|
|
<div className="flex flex-col items-center justify-between gap-6 sm:flex-row">
|
|
<div className="flex-1 text-center">
|
|
<img src="/gh_down.png" alt="GitHub downtime" className="mx-auto h-24 object-contain sm:h-28" />
|
|
<h4 className="mt-3 font-medium text-white">GitHub</h4>
|
|
<p className="text-gray-400 mt-1">Goes down more.</p>
|
|
</div>
|
|
|
|
<div className="h-px w-24 bg-white/6 sm:h-24 sm:w-px" />
|
|
|
|
<div className="flex-1 text-center">
|
|
<img src="/homelab_down.png" alt="HomeLab" className="mx-auto h-24 object-contain sm:h-28" />
|
|
<h4 className="mt-3 font-medium text-white">HomeLab</h4>
|
|
<p className="text-gray-400 mt-1">Goes down less.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|