From 09b97b88eaf73720a9384fd900563ff7bb3726d6 Mon Sep 17 00:00:00 2001
From: Yisroel Baum <yisroel.d.baum@gmail.com>
Date: Sun, 14 Jun 2026 21:58:35 +0300
Subject: [PATCH 1/6] test footer navigation

---
 frontend/rabbi_gerzi/cypress/e2e/home.cy.ts | 26 +++++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/frontend/rabbi_gerzi/cypress/e2e/home.cy.ts b/frontend/rabbi_gerzi/cypress/e2e/home.cy.ts
index 9af2c43..527f743 100644
--- a/frontend/rabbi_gerzi/cypress/e2e/home.cy.ts
+++ b/frontend/rabbi_gerzi/cypress/e2e/home.cy.ts
@@ -572,4 +572,30 @@ describe('homepage get involved and footer', () => {
       cy.contains(/Rabbi Gerzi 2025/).should('be.visible')
     })
   })
+
+  it('navigates footer links without reloading the app', () => {
+    const footerNavigationMarker = 'client-navigation'
+
+    cy.window().then((applicationWindow) => {
+      const markedWindow = applicationWindow as Window & {
+        footerNavigationMarker?: string
+      }
+
+      markedWindow.footerNavigationMarker = footerNavigationMarker
+    })
+
+    cy.contains('[data-cy="footer"] a', 'About').click()
+
+    cy.location('pathname').should('eq', '/about')
+    cy.window().then((applicationWindow) => {
+      const markedWindow = applicationWindow as Window & {
+        footerNavigationMarker?: string
+      }
+
+      expect(markedWindow.footerNavigationMarker).to.equal(
+        footerNavigationMarker,
+      )
+    })
+    cy.contains('h1', 'About Rabbi Gerzi').should('be.visible')
+  })
 })

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 2/6] 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) {

From 7b8d09a312f77f133acee1585d073d1afaf8fc6b Mon Sep 17 00:00:00 2001
From: Yisroel Baum <yisroel.d.baum@gmail.com>
Date: Sun, 14 Jun 2026 22:07:30 +0300
Subject: [PATCH 3/6] test footer social links

---
 frontend/rabbi_gerzi/cypress/e2e/home.cy.ts | 25 +++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/frontend/rabbi_gerzi/cypress/e2e/home.cy.ts b/frontend/rabbi_gerzi/cypress/e2e/home.cy.ts
index 527f743..59020d5 100644
--- a/frontend/rabbi_gerzi/cypress/e2e/home.cy.ts
+++ b/frontend/rabbi_gerzi/cypress/e2e/home.cy.ts
@@ -573,6 +573,31 @@ describe('homepage get involved and footer', () => {
     })
   })
 
+  it('links footer social icons to the contact social pages', () => {
+    const expectedSocialLinks = [
+      {
+        label: 'YouTube',
+        href: 'https://www.youtube.com/@rabbigerzi',
+      },
+      {
+        label: 'Spotify',
+        href:
+          'https://open.spotify.com/show/' +
+          '49H1X9A7KZWAnnIbcoQXQR?si=6253691f23be44ad',
+      },
+    ]
+
+    cy.get('[data-cy="footer"]').within(() => {
+      expectedSocialLinks.forEach((expectedSocialLink) => {
+        cy.get(`a[aria-label="${expectedSocialLink.label}"]`)
+          .should('be.visible')
+          .and('have.attr', 'href', expectedSocialLink.href)
+          .and('have.attr', 'target', '_blank')
+          .and('have.attr', 'rel', 'noopener')
+      })
+    })
+  })
+
   it('navigates footer links without reloading the app', () => {
     const footerNavigationMarker = 'client-navigation'
 

From 143fae9b935ac010759f978487e62fa4e99eea6c Mon Sep 17 00:00:00 2001
From: Yisroel Baum <yisroel.d.baum@gmail.com>
Date: Sun, 14 Jun 2026 22:12:49 +0300
Subject: [PATCH 4/6] share social links

---
 .../rabbi_gerzi/src/components/SiteFooter.vue | 35 +++++++++----------
 .../rabbi_gerzi/src/content/socialLinks.ts    | 19 ++++++++++
 .../rabbi_gerzi/src/views/ContactPage.vue     | 17 +--------
 3 files changed, 36 insertions(+), 35 deletions(-)
 create mode 100644 frontend/rabbi_gerzi/src/content/socialLinks.ts

diff --git a/frontend/rabbi_gerzi/src/components/SiteFooter.vue b/frontend/rabbi_gerzi/src/components/SiteFooter.vue
index 5e3e5fe..bf61bda 100644
--- a/frontend/rabbi_gerzi/src/components/SiteFooter.vue
+++ b/frontend/rabbi_gerzi/src/components/SiteFooter.vue
@@ -1,34 +1,29 @@
 <script setup lang="ts">
 import { RouterLink } from 'vue-router'
+import { socialLinks, type SocialLinkLabel } from '@/content/socialLinks'
 
 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 socialGlyphs: Record<SocialLinkLabel, string> = {
+  YouTube: '▶',
+  Spotify: '♫',
+}
+
+const footerSocialLinks = socialLinks.map((socialLink) => {
+  return {
+    label: socialLink.label,
+    href: socialLink.href,
+    glyph: socialGlyphs[socialLink.label],
+  }
+})
 
 const footerLinkColumns: FooterLink[][] = [
   [
@@ -49,11 +44,13 @@ const footerLinkColumns: FooterLink[][] = [
         <img v-bind="signatureImage" class="site-footer__signature" />
         <div class="site-footer__social">
           <a
-            v-for="socialLink in socialLinks"
+            v-for="socialLink in footerSocialLinks"
             :key="socialLink.label"
             :href="socialLink.href"
             class="site-footer__social-link"
             :aria-label="socialLink.label"
+            target="_blank"
+            rel="noopener"
           >
             {{ socialLink.glyph }}
           </a>
diff --git a/frontend/rabbi_gerzi/src/content/socialLinks.ts b/frontend/rabbi_gerzi/src/content/socialLinks.ts
new file mode 100644
index 0000000..f8318b7
--- /dev/null
+++ b/frontend/rabbi_gerzi/src/content/socialLinks.ts
@@ -0,0 +1,19 @@
+export type SocialLinkLabel = 'YouTube' | 'Spotify'
+
+export interface SocialLink {
+  label: SocialLinkLabel
+  href: string
+}
+
+const spotifyShowPath = '49H1X9A7KZWAnnIbcoQXQR?si=6253691f23be44ad'
+
+export const socialLinks: SocialLink[] = [
+  {
+    label: 'YouTube',
+    href: 'https://www.youtube.com/@rabbigerzi',
+  },
+  {
+    label: 'Spotify',
+    href: 'https://open.spotify.com/show/' + spotifyShowPath,
+  },
+]
diff --git a/frontend/rabbi_gerzi/src/views/ContactPage.vue b/frontend/rabbi_gerzi/src/views/ContactPage.vue
index f355af7..372dd29 100644
--- a/frontend/rabbi_gerzi/src/views/ContactPage.vue
+++ b/frontend/rabbi_gerzi/src/views/ContactPage.vue
@@ -2,11 +2,7 @@
 import { ref } from 'vue'
 import SiteHeader from '@/components/SiteHeader.vue'
 import SiteFooter from '@/components/SiteFooter.vue'
-
-interface SocialLink {
-  label: string
-  href: string
-}
+import { socialLinks } from '@/content/socialLinks'
 
 const contactFirstName = ref('')
 const contactLastName = ref('')
@@ -17,17 +13,6 @@ const contactMessage = ref('')
 const newsletterFullName = ref('')
 const newsletterEmail = ref('')
 
-const socialLinks: SocialLink[] = [
-  {
-    label: 'YouTube',
-    href: 'https://www.youtube.com/@rabbigerzi',
-  },
-  {
-    label: 'Spotify',
-    href: 'https://open.spotify.com/show/49H1X9A7KZWAnnIbcoQXQR?si=6253691f23be44ad',
-  },
-]
-
 function submitContact(submitEvent: Event): void {
   submitEvent.preventDefault()
   contactFirstName.value = ''

From 195c06417e65af72a747dee2bc63ec887c05b97d Mon Sep 17 00:00:00 2001
From: Yisroel Baum <yisroel.d.baum@gmail.com>
Date: Sun, 14 Jun 2026 22:18:08 +0300
Subject: [PATCH 5/6] test donate links

---
 frontend/rabbi_gerzi/cypress/e2e/home.cy.ts | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/frontend/rabbi_gerzi/cypress/e2e/home.cy.ts b/frontend/rabbi_gerzi/cypress/e2e/home.cy.ts
index 59020d5..e95938a 100644
--- a/frontend/rabbi_gerzi/cypress/e2e/home.cy.ts
+++ b/frontend/rabbi_gerzi/cypress/e2e/home.cy.ts
@@ -12,6 +12,16 @@ describe('homepage hero', () => {
     })
   })
 
+  it('links the navbar Donate item to Causematch', () => {
+    const donateHref = 'https://causematch.com/pilzno_donate'
+
+    cy.contains('header.site-header a', 'Donate')
+      .should('be.visible')
+      .and('have.attr', 'href', donateHref)
+      .and('have.attr', 'target', '_blank')
+      .and('have.attr', 'rel', 'noopener')
+  })
+
   it('opens the Torah Media page from the header navigation', () => {
     cy.contains('header.site-header a', 'Torah Media').click()
 
@@ -573,6 +583,16 @@ describe('homepage get involved and footer', () => {
     })
   })
 
+  it('links the footer Donate item to Causematch', () => {
+    const donateHref = 'https://causematch.com/pilzno_donate'
+
+    cy.contains('[data-cy="footer"] a', 'Donate')
+      .should('be.visible')
+      .and('have.attr', 'href', donateHref)
+      .and('have.attr', 'target', '_blank')
+      .and('have.attr', 'rel', 'noopener')
+  })
+
   it('links footer social icons to the contact social pages', () => {
     const expectedSocialLinks = [
       {

From 46fe32969f6aa7931364e7fb713e1192f52754cb Mon Sep 17 00:00:00 2001
From: Yisroel Baum <yisroel.d.baum@gmail.com>
Date: Sun, 14 Jun 2026 22:24:14 +0300
Subject: [PATCH 6/6] link donate externally

---
 .../rabbi_gerzi/src/components/SiteFooter.vue | 31 ++++++++++++++-----
 .../rabbi_gerzi/src/components/SiteHeader.vue | 24 ++++++++++++--
 .../rabbi_gerzi/src/content/donateLink.ts     |  7 +++++
 3 files changed, 53 insertions(+), 9 deletions(-)
 create mode 100644 frontend/rabbi_gerzi/src/content/donateLink.ts

diff --git a/frontend/rabbi_gerzi/src/components/SiteFooter.vue b/frontend/rabbi_gerzi/src/components/SiteFooter.vue
index bf61bda..f2ea224 100644
--- a/frontend/rabbi_gerzi/src/components/SiteFooter.vue
+++ b/frontend/rabbi_gerzi/src/components/SiteFooter.vue
@@ -1,12 +1,22 @@
 <script setup lang="ts">
 import { RouterLink } from 'vue-router'
+import { donateLinkAttributes } from '@/content/donateLink'
 import { socialLinks, type SocialLinkLabel } from '@/content/socialLinks'
 
-interface FooterLink {
+interface RouteFooterLink {
+  kind: 'route'
   label: string
   to: string
 }
 
+interface ExternalFooterLink {
+  kind: 'external'
+  label: string
+  linkAttributes: typeof donateLinkAttributes
+}
+
+type FooterLink = RouteFooterLink | ExternalFooterLink
+
 const signatureImage = {
   src: '/assets/signature.png',
   alt: "R' Yehoshua Gerzi",
@@ -27,12 +37,16 @@ const footerSocialLinks = socialLinks.map((socialLink) => {
 
 const footerLinkColumns: FooterLink[][] = [
   [
-    { label: 'Torah Media', to: '/media' },
-    { label: 'About', to: '/about' },
+    { kind: 'route', label: 'Torah Media', to: '/media' },
+    { kind: 'route', label: 'About', to: '/about' },
   ],
   [
-    { label: 'Donate', to: '/donate' },
-    { label: 'Contact', to: '/contact' },
+    {
+      kind: 'external',
+      label: 'Donate',
+      linkAttributes: donateLinkAttributes,
+    },
+    { kind: 'route', label: 'Contact', to: '/contact' },
   ],
 ]
 </script>
@@ -62,10 +76,13 @@ const footerLinkColumns: FooterLink[][] = [
           :key="footerLinkColumnIndex"
           class="site-footer__link-column"
         >
-          <li v-for="footerLink in footerLinkColumn" :key="footerLink.to">
-            <RouterLink :to="footerLink.to">
+          <li v-for="footerLink in footerLinkColumn" :key="footerLink.label">
+            <RouterLink v-if="footerLink.kind === 'route'" :to="footerLink.to">
               {{ footerLink.label }}
             </RouterLink>
+            <a v-else v-bind="footerLink.linkAttributes">
+              {{ footerLink.label }}
+            </a>
           </li>
         </ul>
       </nav>
diff --git a/frontend/rabbi_gerzi/src/components/SiteHeader.vue b/frontend/rabbi_gerzi/src/components/SiteHeader.vue
index 0ecdc90..34095b1 100644
--- a/frontend/rabbi_gerzi/src/components/SiteHeader.vue
+++ b/frontend/rabbi_gerzi/src/components/SiteHeader.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, onMounted } from 'vue'
 import { RouterLink, useRoute, type RouteLocationRaw } from 'vue-router'
+import { donateLinkAttributes } from '@/content/donateLink'
 import { useAuthStore } from '@/stores/auth'
 
 interface ContextualNavAction {
@@ -8,6 +9,15 @@ interface ContextualNavAction {
   to: RouteLocationRaw
 }
 
+interface HeaderNavItem {
+  label: string
+  icon: string
+}
+
+interface InternalHeaderNavItem extends HeaderNavItem {
+  href: string
+}
+
 const authStore = useAuthStore()
 const route = useRoute()
 
@@ -24,13 +34,17 @@ async function handleLogout(): Promise<void> {
   await authStore.logout()
 }
 
-const navItems = [
+const navItems: InternalHeaderNavItem[] = [
   { label: 'Torah Media', href: '/media', icon: '▶' },
   { label: 'About', href: '/about', icon: 'ⓘ' },
   { label: 'Contact', href: '/contact', icon: '➤' },
-  { label: 'Donate', href: '/donate', icon: '♡' },
 ]
 
+const donateNavItem: HeaderNavItem = {
+  label: 'Donate',
+  icon: '♡',
+}
+
 const routeElementId = computed(() => {
   const currentRouteElementId = route.params.id
 
@@ -85,6 +99,12 @@ const contextualNavAction = computed<ContextualNavAction | null>(() => {
         </span>
         <span>{{ item.label }}</span>
       </RouterLink>
+      <a v-bind="donateLinkAttributes" class="site-header__nav-link">
+        <span class="site-header__nav-icon" aria-hidden="true">
+          {{ donateNavItem.icon }}
+        </span>
+        <span>{{ donateNavItem.label }}</span>
+      </a>
       <RouterLink
         v-if="contextualNavAction !== null"
         :to="contextualNavAction.to"
diff --git a/frontend/rabbi_gerzi/src/content/donateLink.ts b/frontend/rabbi_gerzi/src/content/donateLink.ts
new file mode 100644
index 0000000..33cfb33
--- /dev/null
+++ b/frontend/rabbi_gerzi/src/content/donateLink.ts
@@ -0,0 +1,7 @@
+export const donateHref = 'https://causematch.com/pilzno_donate'
+
+export const donateLinkAttributes = {
+  href: donateHref,
+  target: '_blank',
+  rel: 'noopener',
+}