extract site footer

frontend/rabbi_gerzi/src/components/SiteFooter.vue

@@ -0,0 +1,166 @@
+<script setup lang="ts">
+import { RouterLink } from 'vue-router'
+
+interface FooterLink {
+  label: string
+  to: string
+}
+
+interface SocialLink {
+  label: string
+  href: string
+  glyph: string
+}
+
+const signatureImage = {
+  src: '/assets/signature.png',
+  alt: "R' Yehoshua Gerzi",
+}
+
+const socialLinks: SocialLink[] = [
+  {
+    label: 'YouTube',
+    href: '#',
+    glyph: '▶',
+  },
+  {
+    label: 'Spotify',
+    href: '#',
+    glyph: '♫',
+  },
+]
+
+const footerLinkColumns: FooterLink[][] = [
+  [
+    { label: 'Torah Media', to: '/media' },
+    { label: 'About', to: '/about' },
+  ],
+  [
+    { label: 'Donate', to: '/donate' },
+    { label: 'Contact', to: '/contact' },
+  ],
+]
+</script>
+
+<template>
+  <footer class="site-footer" data-cy="footer">
+    <div class="site-footer__inner">
+      <div class="site-footer__brand">
+        <img v-bind="signatureImage" class="site-footer__signature" />
+        <div class="site-footer__social">
+          <a
+            v-for="socialLink in socialLinks"
+            :key="socialLink.label"
+            :href="socialLink.href"
+            class="site-footer__social-link"
+            :aria-label="socialLink.label"
+          >
+            {{ socialLink.glyph }}
+          </a>
+        </div>
+      </div>
+      <nav class="site-footer__links" aria-label="Footer navigation">
+        <ul
+          v-for="(footerLinkColumn, footerLinkColumnIndex) in footerLinkColumns"
+          :key="footerLinkColumnIndex"
+          class="site-footer__link-column"
+        >
+          <li v-for="footerLink in footerLinkColumn" :key="footerLink.to">
+            <RouterLink :to="footerLink.to">
+              {{ footerLink.label }}
+            </RouterLink>
+          </li>
+        </ul>
+      </nav>
+    </div>
+    <p class="site-footer__copyright">&copy; Rabbi Gerzi 2025</p>
+  </footer>
+</template>
+
+<style scoped>
+.site-footer {
+  padding: 4rem 2rem 2rem;
+  background: var(--color-white);
+  border-top: 1px solid var(--color-border);
+}
+
+.site-footer__inner {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  align-items: start;
+  max-width: 1100px;
+  margin: 0 auto 2rem;
+  gap: 2rem;
+}
+
+.site-footer__brand {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.site-footer__signature {
+  width: auto;
+  height: 40px;
+}
+
+.site-footer__social {
+  display: flex;
+  gap: 0.75rem;
+}
+
+.site-footer__social-link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  color: var(--color-text-muted);
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+}
+
+.site-footer__social-link:hover {
+  background: var(--color-cream);
+}
+
+.site-footer__links {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+}
+
+.site-footer__link-column {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  gap: 0.6rem;
+  list-style: none;
+}
+
+.site-footer__link-column a {
+  color: var(--color-text);
+  font-family: var(--font-sans);
+  font-size: 0.95rem;
+}
+
+.site-footer__link-column a:hover {
+  color: var(--color-slate);
+}
+
+.site-footer__copyright {
+  margin: 0;
+  color: var(--color-text-muted);
+  font-family: var(--font-sans);
+  font-size: 0.85rem;
+  text-align: center;
+}
+
+@media (max-width: 860px) {
+  .site-footer__inner,
+  .site-footer__links {
+    grid-template-columns: 1fr;
+  }
+}
+</style>