add sponsor carousel

frontend/rabbi_gerzi/cypress/e2e/home.cy.ts

@@ -417,8 +417,9 @@ describe('homepage sponsor strip', () => {
       cy.get('[data-cy="sponsor-logo"]').should('have.length', 7)
       expectedAlts.forEach((altText) => {
         cy.get(`[data-cy="sponsor-logo"][alt="${altText}"]`)
-          .should('be.visible')
+          .should('have.attr', 'src')
       })
+      cy.get('[data-cy="sponsor-carousel"]').should('be.visible')
       cy.get('[data-cy="sponsor-logo-duplicate"]')
         .should('have.length', 7)
       cy.get('[data-cy="sponsor-logo-duplicate"][alt=""]')

frontend/rabbi_gerzi/src/views/HomePage.vue

@@ -173,6 +173,32 @@ const sponsors: Sponsor[] = [
   { name: 'Yeshivat Lev HaTorah', src: '/assets/levhatorah.png' },
 ]
 
+const sponsorGroups: Sponsor[][] = [sponsors, sponsors]
+
+function sponsorGroupDataCy(sponsorGroupIndex: number): string {
+  if (sponsorGroupIndex === 0) {
+    return 'sponsor-logo-group'
+  }
+
+  return 'sponsor-logo-group-duplicate'
+}
+
+function sponsorLogoAlt(sponsor: Sponsor, sponsorGroupIndex: number): string {
+  if (sponsorGroupIndex === 0) {
+    return sponsor.name
+  }
+
+  return ''
+}
+
+function sponsorLogoDataCy(sponsorGroupIndex: number): string {
+  if (sponsorGroupIndex === 0) {
+    return 'sponsor-logo'
+  }
+
+  return 'sponsor-logo-duplicate'
+}
+
 interface Project {
   title: string
   description: string
@@ -363,15 +389,25 @@ const projects: Project[] = [
     <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">
+        <div class="sponsors__carousel" data-cy="sponsor-carousel">
-          <img
+          <div class="sponsors__track" data-cy="sponsor-track">
-            v-for="sponsor in sponsors"
+            <div
-            :key="sponsor.name"
+              v-for="(sponsorGroup, sponsorGroupIndex) in sponsorGroups"
-            :src="sponsor.src"
+              :key="`sponsor-group-${sponsorGroupIndex}`"
-            :alt="sponsor.name"
+              class="sponsors__group"
-            class="sponsors__logo"
+              :aria-hidden="sponsorGroupIndex === 1 ? 'true' : undefined"
-            data-cy="sponsor-logo"
+              :data-cy="sponsorGroupDataCy(sponsorGroupIndex)"
-          />
+            >
+              <img
+                v-for="sponsor in sponsorGroup"
+                :key="`${sponsorGroupIndex}-${sponsor.name}`"
+                :src="sponsor.src"
+                :alt="sponsorLogoAlt(sponsor, sponsorGroupIndex)"
+                class="sponsors__logo"
+                :data-cy="sponsorLogoDataCy(sponsorGroupIndex)"
+              />
+            </div>
+          </div>
         </div>
       </div>
     </section>
@@ -883,21 +919,62 @@ const projects: Project[] = [
   margin: 0 0 3rem 0;
 }
 
-.sponsors__row {
+.sponsors__carousel {
+  --sponsors-edge-fade: 50px;
+  --sponsors-logo-gap: clamp(2.75rem, 4vw, 4.25rem);
+
+  width: 60%;
+  margin: 0 auto;
+  overflow: hidden;
+  mask-image: linear-gradient(
+    to right,
+    transparent,
+    black var(--sponsors-edge-fade),
+    black calc(100% - var(--sponsors-edge-fade)),
+    transparent
+  );
+  -webkit-mask-image: linear-gradient(
+    to right,
+    transparent,
+    black var(--sponsors-edge-fade),
+    black calc(100% - var(--sponsors-edge-fade)),
+    transparent
+  );
+}
+
+.sponsors__track {
   display: flex;
-  flex-wrap: wrap;
+  width: max-content;
+  animation: sponsors-scroll 28s linear infinite;
+  will-change: transform;
+}
+
+.sponsors__group {
+  display: flex;
+  flex: 0 0 auto;
   align-items: center;
-  justify-content: center;
+  gap: var(--sponsors-logo-gap);
-  gap: 2.5rem 3rem;
+  padding-right: var(--sponsors-logo-gap);
 }
 
 .sponsors__logo {
-  height: 60px;
+  height: clamp(78px, 7vw, 96px);
   width: auto;
-  max-width: 160px;
+  max-width: 220px;
+  flex: 0 0 auto;
   object-fit: contain;
 }
 
+@keyframes sponsors-scroll {
+  from {
+    transform: translateX(0);
+  }
+
+  to {
+    transform: translateX(-50%);
+  }
+}
+
 .projects {
   background: var(--color-cream);
   padding: 5rem 2rem;
@@ -1228,6 +1305,15 @@ const projects: Project[] = [
     transform: none;
   }
 
+  .sponsors__carousel {
+    width: min(100%, 680px);
+  }
+
+  .sponsors__logo {
+    height: clamp(68px, 18vw, 86px);
+    max-width: 190px;
+  }
+
   .journey__cards {
     grid-template-columns: 1fr;
   }