From 1ce408cdb6bbf9a7adfdc7d41c9edf347dd1dc4f Mon Sep 17 00:00:00 2001
From: Yisroel Baum <yisroel.d.baum@gmail.com>
Date: Sun, 14 Jun 2026 22:02:53 +0300
Subject: [PATCH] extract site footer

---
 .../rabbi_gerzi/src/components/SiteFooter.vue | 166 ++++++++++++++++++
 frontend/rabbi_gerzi/src/views/AboutPage.vue  | 110 +-----------
 .../rabbi_gerzi/src/views/ContactPage.vue     | 110 +-----------
 frontend/rabbi_gerzi/src/views/HomePage.vue   | 107 +----------
 4 files changed, 174 insertions(+), 319 deletions(-)
 create mode 100644 frontend/rabbi_gerzi/src/components/SiteFooter.vue

diff --git a/frontend/rabbi_gerzi/src/components/SiteFooter.vue b/frontend/rabbi_gerzi/src/components/SiteFooter.vue
new file mode 100644
index 0000000..5e3e5fe
--- /dev/null
+++ b/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>
diff --git a/frontend/rabbi_gerzi/src/views/AboutPage.vue b/frontend/rabbi_gerzi/src/views/AboutPage.vue
index ce6e915..d25a7f4 100644
--- a/frontend/rabbi_gerzi/src/views/AboutPage.vue
+++ b/frontend/rabbi_gerzi/src/views/AboutPage.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import SiteHeader from '@/components/SiteHeader.vue'
+import SiteFooter from '@/components/SiteFooter.vue'
 
 interface MissionPoint {
   title: string
@@ -426,28 +427,7 @@ function submitNewsletter(submitEvent: Event): void {
       </section>
     </main>
 
-    <footer class="site-footer" data-cy="footer">
-      <div class="site-footer__inner">
-        <div class="site-footer__brand">
-          <img src="/assets/signature.png" alt="R' Yehoshua Gerzi" class="site-footer__signature" />
-          <div class="site-footer__social">
-            <a href="#" class="site-footer__social-link" aria-label="YouTube"> &#9654; </a>
-            <a href="#" class="site-footer__social-link" aria-label="Spotify"> &#9835; </a>
-          </div>
-        </div>
-        <nav class="site-footer__links">
-          <ul class="site-footer__link-column">
-            <li><a href="/media">Torah Media</a></li>
-            <li><a href="/about">About</a></li>
-          </ul>
-          <ul class="site-footer__link-column">
-            <li><a href="/donate">Donate</a></li>
-            <li><a href="/contact">Contact</a></li>
-          </ul>
-        </nav>
-      </div>
-      <p class="site-footer__copyright">&copy; Rabbi Gerzi 2025</p>
-    </footer>
+    <SiteFooter />
   </div>
 </template>
 
@@ -802,90 +782,10 @@ function submitNewsletter(submitEvent: Event): void {
   background: var(--color-slate);
 }
 
-.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) {
   .about-hero__inner,
   .about-section__inner--split,
-  .get-involved__card,
-  .site-footer__inner {
+  .get-involved__card {
     grid-template-columns: 1fr;
   }
 
@@ -924,9 +824,5 @@ function submitNewsletter(submitEvent: Event): void {
     padding: 2rem;
     gap: 2rem;
   }
-
-  .site-footer__links {
-    grid-template-columns: 1fr;
-  }
 }
 </style>
diff --git a/frontend/rabbi_gerzi/src/views/ContactPage.vue b/frontend/rabbi_gerzi/src/views/ContactPage.vue
index b1e2e1c..f355af7 100644
--- a/frontend/rabbi_gerzi/src/views/ContactPage.vue
+++ b/frontend/rabbi_gerzi/src/views/ContactPage.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import SiteHeader from '@/components/SiteHeader.vue'
+import SiteFooter from '@/components/SiteFooter.vue'
 
 interface SocialLink {
   label: string
@@ -187,28 +188,7 @@ function submitNewsletter(submitEvent: Event): void {
       </section>
     </main>
 
-    <footer class="site-footer" data-cy="footer">
-      <div class="site-footer__inner">
-        <div class="site-footer__brand">
-          <img src="/assets/signature.png" alt="R' Yehoshua Gerzi" class="site-footer__signature" />
-          <div class="site-footer__social">
-            <a href="#" class="site-footer__social-link" aria-label="YouTube"> &#9654; </a>
-            <a href="#" class="site-footer__social-link" aria-label="Spotify"> &#9835; </a>
-          </div>
-        </div>
-        <nav class="site-footer__links">
-          <ul class="site-footer__link-column">
-            <li><a href="/media">Torah Media</a></li>
-            <li><a href="/about">About</a></li>
-          </ul>
-          <ul class="site-footer__link-column">
-            <li><a href="/donate">Donate</a></li>
-            <li><a href="/contact">Contact</a></li>
-          </ul>
-        </nav>
-      </div>
-      <p class="site-footer__copyright">&copy; Rabbi Gerzi 2025</p>
-    </footer>
+    <SiteFooter />
   </div>
 </template>
 
@@ -440,85 +420,6 @@ function submitNewsletter(submitEvent: Event): void {
   margin-top: 0.5rem;
 }
 
-.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) {
   .contact-hero {
     padding: 3rem 1rem;
@@ -530,8 +431,7 @@ function submitNewsletter(submitEvent: Event): void {
 
   .contact-main__inner,
   .contact-form__grid,
-  .get-involved__card,
-  .site-footer__inner {
+  .get-involved__card {
     grid-template-columns: 1fr;
   }
 
@@ -543,9 +443,5 @@ function submitNewsletter(submitEvent: Event): void {
     padding: 2rem;
     gap: 2rem;
   }
-
-  .site-footer__links {
-    grid-template-columns: 1fr;
-  }
 }
 </style>
diff --git a/frontend/rabbi_gerzi/src/views/HomePage.vue b/frontend/rabbi_gerzi/src/views/HomePage.vue
index 26cc7df..3f4684a 100644
--- a/frontend/rabbi_gerzi/src/views/HomePage.vue
+++ b/frontend/rabbi_gerzi/src/views/HomePage.vue
@@ -2,6 +2,7 @@
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import SiteHeader from '@/components/SiteHeader.vue'
+import SiteFooter from '@/components/SiteFooter.vue'
 
 const router = useRouter()
 
@@ -498,28 +499,7 @@ function projectCardStyle(project: Project): string {
       </div>
     </section>
 
-    <footer class="site-footer" data-cy="footer">
-      <div class="site-footer__inner">
-        <div class="site-footer__brand">
-          <img src="/assets/signature.png" alt="R' Yehoshua Gerzi" class="site-footer__signature" />
-          <div class="site-footer__social">
-            <a href="#" class="site-footer__social-link" aria-label="YouTube">▶</a>
-            <a href="#" class="site-footer__social-link" aria-label="Spotify">♫</a>
-          </div>
-        </div>
-        <nav class="site-footer__links">
-          <ul class="site-footer__link-column">
-            <li><a href="/media">Torah Media</a></li>
-            <li><a href="/about">About</a></li>
-          </ul>
-          <ul class="site-footer__link-column">
-            <li><a href="/donate">Donate</a></li>
-            <li><a href="/contact">Contact</a></li>
-          </ul>
-        </nav>
-      </div>
-      <p class="site-footer__copyright">© Rabbi Gerzi 2025</p>
-    </footer>
+    <SiteFooter />
   </div>
 </template>
 
@@ -1200,85 +1180,6 @@ function projectCardStyle(project: Project): string {
   background: var(--color-slate);
 }
 
-.site-footer {
-  background: var(--color-white);
-  padding: 4rem 2rem 2rem;
-  border-top: 1px solid var(--color-border);
-}
-
-.site-footer__inner {
-  max-width: 1100px;
-  margin: 0 auto 2rem;
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 2rem;
-  align-items: start;
-}
-
-.site-footer__brand {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.site-footer__signature {
-  height: 40px;
-  width: auto;
-}
-
-.site-footer__social {
-  display: flex;
-  gap: 0.75rem;
-}
-
-.site-footer__social-link {
-  width: 2rem;
-  height: 2rem;
-  border-radius: 6px;
-  border: 1px solid var(--color-border);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--color-text-muted);
-}
-
-.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 {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 0.6rem;
-}
-
-.site-footer__link-column a {
-  font-family: var(--font-sans);
-  font-size: 0.95rem;
-  color: var(--color-text);
-}
-
-.site-footer__link-column a:hover {
-  color: var(--color-slate);
-}
-
-.site-footer__copyright {
-  text-align: center;
-  font-family: var(--font-sans);
-  font-size: 0.85rem;
-  color: var(--color-text-muted);
-  margin: 0;
-}
-
 @media (max-width: 768px) {
   .testimonials {
     --testimonials-card-height: 320px;
@@ -1346,10 +1247,6 @@ function projectCardStyle(project: Project): string {
     padding: 2rem;
     gap: 2rem;
   }
-
-  .site-footer__inner {
-    grid-template-columns: 1fr;
-  }
 }
 
 @media (max-width: 480px) {