Initial Commit

src/components/layout/Footer.astro

@@ -0,0 +1,49 @@
+---
+/**
+ * Footer.astro
+ * ---------------------------------------------------------------------------
+ * Minimal footer: social links (mdi icons), copyright, and the spec microcopy
+ * "Built with intention. Powered by caffeine." No emojis per spec.
+ */
+import Icon from '@components/Icon.astro';
+import { socials, footerMicrocopy, siteIdentity } from '@lib/site';
+const year = new Date().getFullYear();
+const socialList = Object.values(socials);
+---
+
+<footer
+  class="border-t"
+  style="border-color: var(--color-border); background: var(--color-surface-sunken);"
+>
+  <div class="container-prose flex flex-col items-center gap-6 py-10 text-center sm:flex-row sm:justify-between sm:text-left">
+    <div class="flex flex-col gap-1">
+      <p class="font-sans text-sm font-semibold" style="color: var(--color-text);">
+        {siteIdentity.name}
+      </p>
+      <p class="font-mono text-xs italic" style="color: var(--color-text-subtle);">
+        {footerMicrocopy}
+      </p>
+    </div>
+
+    <ul class="flex items-center gap-2">
+      {socialList.map((s) => (
+        <li>
+          <a
+            href={s.href}
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-label={s.label}
+            title={s.label}
+            class="inline-flex h-10 w-10 items-center justify-center rounded-lg border transition-colors hover:bg-[color-mix(in_srgb,var(--color-accent)_15%,transparent)]"
+            style="color: var(--color-text-muted); border-color: var(--color-border);"
+          >
+            <Icon name={s.icon} class="h-5 w-5" />
+          </a>
+        </li>
+      ))}
+    </ul>
+  </div>
+  <div class="container-prose pb-8 text-center text-xs" style="color: var(--color-text-subtle);">
+    &copy; {year} {siteIdentity.name}. All rights reserved.
+  </div>
+</footer>