From f50ea8707c2aab811cf8392b508310b42fe8c71f Mon Sep 17 00:00:00 2001
From: Yisroel Baum <yisroel.d.baum@gmail.com>
Date: Sat, 16 May 2026 21:56:14 +0300
Subject: [PATCH] add unique voice section

---
 frontend/rabbi_gerzi/cypress/e2e/home.cy.ts |  2 +-
 frontend/rabbi_gerzi/src/views/HomePage.vue | 91 +++++++++++++++++++++
 2 files changed, 92 insertions(+), 1 deletion(-)

diff --git a/frontend/rabbi_gerzi/cypress/e2e/home.cy.ts b/frontend/rabbi_gerzi/cypress/e2e/home.cy.ts
index 5cd32ab..59d4ea3 100644
--- a/frontend/rabbi_gerzi/cypress/e2e/home.cy.ts
+++ b/frontend/rabbi_gerzi/cypress/e2e/home.cy.ts
@@ -81,7 +81,7 @@ describe('homepage unique voice section', () => {
       cy.contains('wholly unique and much needed perspective')
         .should('be.visible')
       cy.contains('practically engaged positivity').should('be.visible')
-      cy.contains('button', "Learn about Rabbi Gerzi's Approach")
+      cy.contains('button', /Learn about Rabbi Gerzi.s Approach/)
         .should('be.visible')
     })
   })
diff --git a/frontend/rabbi_gerzi/src/views/HomePage.vue b/frontend/rabbi_gerzi/src/views/HomePage.vue
index cc83690..7e0848d 100644
--- a/frontend/rabbi_gerzi/src/views/HomePage.vue
+++ b/frontend/rabbi_gerzi/src/views/HomePage.vue
@@ -1,4 +1,12 @@
 <script setup lang="ts">
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+function goToAbout(): void {
+  router.push('/about')
+}
+
 const navItems = [
   { label: 'Torah Media', href: '/media', icon: '▶' },
   { label: 'About', href: '/about', icon: 'ⓘ' },
@@ -108,6 +116,37 @@ const coreTeachings = [
         </div>
       </div>
     </section>
+
+    <section class="unique-voice" data-cy="unique-voice">
+      <div class="unique-voice__inner">
+        <svg
+          class="unique-voice__icon"
+          viewBox="0 0 140 60"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+        >
+          <path d="M5 35 Q35 5 70 35 Q105 5 135 35" />
+          <line x1="70" y1="5" x2="70" y2="40" />
+          <path d="M55 40 Q70 45 85 40" />
+          <path d="M15 50 Q45 55 75 50 T130 50" />
+        </svg>
+        <h2 class="unique-voice__heading">A Unique Voice for the Generation</h2>
+        <p class="unique-voice__paragraph">
+          Rabbi Gerzi provides a wholly unique and much needed perspective to his students. Carrying
+          decades of experience guided by a handful of the generations most pre-eminent Rabbanim, he
+          teaches a message of practically engaged positivity. His Torah is one of unity, bridging
+          hashkafic boundaries and engaging a diverse cadre of Jews who are open minded to embracing
+          meaningful and experiential Judaism.
+        </p>
+        <button class="unique-voice__cta-button" type="button" @click="goToAbout">
+          Learn about Rabbi Gerzi&rsquo;s Approach
+        </button>
+      </div>
+    </section>
   </div>
 </template>
 
@@ -353,6 +392,58 @@ const coreTeachings = [
   margin: 0;
 }
 
+.unique-voice {
+  background: var(--color-slate);
+  color: var(--color-white);
+  padding: 5rem 2rem;
+}
+
+.unique-voice__inner {
+  max-width: 760px;
+  margin: 0 auto;
+  text-align: center;
+}
+
+.unique-voice__icon {
+  width: 140px;
+  height: auto;
+  color: rgba(255, 255, 255, 0.7);
+  display: block;
+  margin: 0 auto 2rem;
+}
+
+.unique-voice__heading {
+  font-family: var(--font-serif);
+  font-weight: 400;
+  font-size: clamp(1.5rem, 2.4vw, 2rem);
+  margin: 0 0 1.5rem 0;
+}
+
+.unique-voice__paragraph {
+  font-family: var(--font-serif);
+  font-weight: 300;
+  font-size: 1.05rem;
+  line-height: 1.7;
+  color: rgba(255, 255, 255, 0.85);
+  margin: 0 0 2.5rem 0;
+}
+
+.unique-voice__cta-button {
+  background: var(--color-white);
+  color: var(--color-text);
+  border: none;
+  border-radius: 9999px;
+  padding: 0.85rem 1.75rem;
+  font-family: var(--font-sans);
+  font-weight: 500;
+  font-size: 1rem;
+  transition: transform 0.15s ease;
+}
+
+.unique-voice__cta-button:hover {
+  transform: translateY(-1px);
+}
+
 @media (max-width: 768px) {
   .site-header {
     padding: 0.75rem 1rem;