add sponsor strip

frontend/rabbi_gerzi/src/views/HomePage.vue

@@ -58,6 +58,21 @@ function nextTestimonial(): void {
 function previousTestimonial(): void {
   testimonialIndex.value = (testimonialIndex.value - 1 + testimonials.length) % testimonials.length
 }
+
+interface Sponsor {
+  name: string
+  src: string
+}
+
+const sponsors: Sponsor[] = [
+  { name: 'SHARE', src: '/assets/share.png' },
+  { name: 'U of Israel', src: '/assets/yYMUkyx3NlGYDK4AUiUvP05Ik.png' },
+  { name: 'Mayberg Foundation', src: '/assets/mayberg.png' },
+  { name: 'JLE UK', src: '/assets/jle.png' },
+  { name: 'Yeshivat Reishit', src: '/assets/reishit.png' },
+  { name: 'Aish HaTorah', src: '/assets/aish.png' },
+  { name: 'Yeshivat Lev HaTorah', src: '/assets/levhatorah.png' },
+]
 </script>
 
 <template>
@@ -224,6 +239,22 @@ function previousTestimonial(): void {
         </div>
       </div>
     </section>
+
+    <section class="sponsors" data-cy="sponsors">
+      <div class="sponsors__inner">
+        <h2 class="sponsors__heading">Organizations Rabbi Gerzi has Worked With</h2>
+        <div class="sponsors__row">
+          <img
+            v-for="sponsor in sponsors"
+            :key="sponsor.name"
+            :src="sponsor.src"
+            :alt="sponsor.name"
+            class="sponsors__logo"
+            data-cy="sponsor-logo"
+          />
+        </div>
+      </div>
+    </section>
   </div>
 </template>
 
@@ -606,6 +637,40 @@ function previousTestimonial(): void {
   background: var(--color-slate);
 }
 
+.sponsors {
+  background: var(--color-white);
+  padding: 5rem 2rem;
+}
+
+.sponsors__inner {
+  max-width: 1200px;
+  margin: 0 auto;
+  text-align: center;
+}
+
+.sponsors__heading {
+  font-family: var(--font-serif);
+  font-weight: 400;
+  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
+  color: var(--color-slate);
+  margin: 0 0 3rem 0;
+}
+
+.sponsors__row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 2.5rem 3rem;
+}
+
+.sponsors__logo {
+  height: 60px;
+  width: auto;
+  max-width: 160px;
+  object-fit: contain;
+}
+
 @media (max-width: 768px) {
   .site-header {
     padding: 0.75rem 1rem;