Add new font dependencies and refactor landing page to use components for improved structure

src/layouts/LegalLayout.astro

@@ -0,0 +1,49 @@
+---
+import BaseLayout from "./BaseLayout.astro";
+import { site } from "../data/landing-content";
+import "@fontsource/syne/700.css";
+import "@fontsource/ibm-plex-sans/400.css";
+import "@fontsource/ibm-plex-sans/600.css";
+import "@fontsource/ibm-plex-mono/400.css";
+import "@fontsource/ibm-plex-mono/500.css";
+import "../styles/site.css";
+
+interface Props {
+  title: string;
+  description: string;
+}
+
+const { title, description } = Astro.props;
+---
+
+<BaseLayout title={title} description={description}>
+  <div class="v2">
+    <div class="v2__shell v2__shell--legal">
+      <header class="v2__header v2__header--legal">
+        <p class="v2__site-mark">
+          <a href="/" class="v2__home-link">
+            <span class="v2__prompt" aria-hidden="true">~</span>
+            matthias-meister
+          </a>
+        </p>
+        <nav class="v2__legal-nav" aria-label="Rechtliches">
+          <a href="/impressum">Impressum</a>
+          <a href="/datenschutz">Datenschutz</a>
+        </nav>
+      </header>
+
+      <main class="v2__legal">
+        <slot />
+      </main>
+
+      <footer class="v2__footer v2__footer--legal">
+        <p>
+          <span class="v2__comment" aria-hidden="true">// </span>
+          © {new Date().getFullYear()} {site.name} ·
+          <a href="/impressum">Impressum</a> ·
+          <a href="/datenschutz">Datenschutz</a>
+        </p>
+      </footer>
+    </div>
+  </div>
+</BaseLayout>