55 lines
1.9 KiB
TypeScript
55 lines
1.9 KiB
TypeScript
import Link from "next/link";
|
|
|
|
import { getLabSummaries } from "~/lib/labs";
|
|
|
|
export default function HomePage() {
|
|
const labs = getLabSummaries();
|
|
|
|
return (
|
|
<main className="mx-auto w-full max-w-5xl px-6 py-10">
|
|
<section className="rounded-xl border border-[#f6d5a5] bg-white p-8 shadow-sm">
|
|
<h1 className="mb-3 text-3xl font-bold text-[#004E78]">
|
|
Open Security Labs
|
|
</h1>
|
|
<p className="max-w-3xl text-slate-700">
|
|
Markdown-first lab workspace for Open Security notebook conversions.
|
|
</p>
|
|
<div className="mt-6 flex flex-wrap gap-3">
|
|
<Link
|
|
href="/labs"
|
|
className="inline-flex items-center rounded-md bg-[#004E78] px-4 py-2 text-sm font-semibold text-white hover:bg-[#003a5a]"
|
|
>
|
|
Browse all labs
|
|
</Link>
|
|
<Link
|
|
href="https://discord.gg/Ma9UZNBxvh"
|
|
className="inline-flex items-center rounded-md border border-[#F89C27] px-4 py-2 text-sm font-semibold text-[#004E78] hover:bg-[#F89C27] hover:text-white"
|
|
>
|
|
Open Security Discord
|
|
</Link>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="mt-8">
|
|
<h2 className="mb-4 text-xl font-semibold text-[#004E78]">All Labs</h2>
|
|
<div className="grid gap-4 md:grid-cols-2">
|
|
{labs.map((lab) => (
|
|
<Link
|
|
key={lab.slug}
|
|
href={`/labs/${lab.slug}`}
|
|
className="block rounded-lg border border-slate-200 bg-white p-5 transition hover:border-[#F89C27] hover:shadow-sm"
|
|
>
|
|
<h3 className="text-lg font-semibold text-[#004E78]">
|
|
{lab.title}
|
|
</h3>
|
|
{lab.description ? (
|
|
<p className="mt-2 text-sm text-slate-600">{lab.description}</p>
|
|
) : null}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</section>
|
|
</main>
|
|
);
|
|
}
|