Add security page

src/content/menus/header.yaml

@@ -13,3 +13,5 @@ items:
     link: /blog
   - name: Donate
     link: /donate
+  - name: Security
+    link: /security

src/pages/security.astro

@@ -0,0 +1,61 @@
+---
+import { getEntry, getCollection } from "astro:content";
+
+import Layout from "../layouts/Layout.astro";
+import PageHeader from "../components/layout/PageHeader.astro";
+import Container from "../components/layout/Container.astro";
+import Divider from "../components/layout/Divider.astro";
+
+import Citation from "../components/ui/Citation.astro";
+import Quotation from "../components/ui/Quotation.astro";
+---
+
+<Layout title="Security">
+  <PageHeader text="Security" />
+  <div class="py-8">
+    <Container class="font-extralight leading-relaxed space-y-4 mt-16">
+      <h2 class="text-4xl font-bold font-heading text-nix-blue mt-4">
+        Introduction
+      </h2>
+
+      <p class="font-extralight leading-relaxed mt-2">Lorem ipsum</p>
+
+      <h3 class="text-3xl font-bold font-heading text-nix-blue mt-4">
+        How do I report an issue?
+      </h3>
+
+      <p class="font-extralight leading-relaxed mt-2">
+        <ol>
+          <li>1. Do this.</li>
+          <li>2. Then do this.</li>
+        </ol>
+      </p>
+
+      <h3 class="text-3xl font-bold font-heading text-nix-blue mt-4">
+        What happens once an issue is reported?
+      </h3>
+
+      <p class="font-extralight leading-relaxed mt-2">
+        <ol>
+          <li>1. This happens.</li>
+          <li>2. Then this happens.</li>
+          <li>3. Finally this happens.</li>
+        </ol>
+      </p>
+
+      <h3 class="text-3xl font-bold font-heading text-nix-blue mt-4">
+        Who handles security?
+      </h3>
+
+      <p class="font-extralight leading-relaxed mt-2">
+        Check out the <a href="/community/teams/security">security team</a> page.
+      </p>
+    </Container>
+  </div>
+</Layout>
+
+<style>
+  .bg-nix-blue a {
+    @apply text-white hover:text-gray-100;
+  }
+</style>