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

@@ -401,10 +401,11 @@ describe('homepage sponsor strip', () => {
     cy.visit('/')
   })
 
-  it('renders the heading and all seven partner logos in a carousel', () => {
+  it('renders the heading and all seven partner logos', () => {
     cy.get('[data-cy="sponsors"]').within(() => {
       cy.contains('h2', 'Organizations Rabbi Gerzi has Worked With')
         .should('be.visible')
+      cy.get('[data-cy="sponsor-logo"]').should('have.length', 7)
       const expectedAlts = [
         'SHARE',
         'U of Israel',
@@ -414,67 +415,9 @@ describe('homepage sponsor strip', () => {
         'Aish HaTorah',
         'Yeshivat Lev HaTorah',
       ]
-      cy.get('[data-cy="sponsor-logo"]').should('have.length', 7)
       expectedAlts.forEach((altText) => {
         cy.get(`[data-cy="sponsor-logo"][alt="${altText}"]`)
-          .should('have.attr', 'src')
+          .should('be.visible')
-      })
-      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=""]')
-        .should('have.length', 7)
-      cy.get('[data-cy="sponsor-logo-group-duplicate"]')
-        .should('have.attr', 'aria-hidden', 'true')
-    })
-  })
-
-  it('centers the carousel with side buffers and edge fades', () => {
-    cy.viewport(1200, 900)
-    cy.get('[data-cy="sponsors"]').within(() => {
-      cy.get('[data-cy="sponsor-carousel"]').then((carouselElements) => {
-        const carouselElement = carouselElements[0]
-        const sponsorInnerElement = carouselElement.parentElement
-
-        if (sponsorInnerElement === null) {
-          throw new Error('Sponsor inner element is missing')
-        }
-
-        const carouselBounds = carouselElement.getBoundingClientRect()
-        const sponsorInnerBounds =
-          sponsorInnerElement.getBoundingClientRect()
-        const leftBuffer = carouselBounds.left - sponsorInnerBounds.left
-        const rightBuffer = sponsorInnerBounds.right - carouselBounds.right
-        const carouselRatio = carouselBounds.width / sponsorInnerBounds.width
-        const carouselStyle = getComputedStyle(carouselElement)
-        const maskImage =
-          carouselStyle.maskImage || carouselStyle.webkitMaskImage
-
-        expect(carouselRatio).to.be.closeTo(0.85, 0.02)
-        expect(leftBuffer).to.be.closeTo(rightBuffer, 1)
-        expect(maskImage).to.contain('50px')
-      })
-    })
-  })
-
-  it('uses the faster carousel timing', () => {
-    cy.get('[data-cy="sponsor-track"]').then((trackElements) => {
-      const trackStyle = getComputedStyle(trackElements[0])
-
-      expect(trackStyle.animationDuration).to.equal('20s')
-    })
-  })
-
-  it('scrolls the sponsor logos from right to left', () => {
-    cy.get('[data-cy="sponsor-track"]').then((trackElements) => {
-      const startingLeft = trackElements[0].getBoundingClientRect().left
-
-      cy.wait(750)
-      cy.get('[data-cy="sponsor-track"]').then((laterTrackElements) => {
-        const laterLeft =
-          laterTrackElements[0].getBoundingClientRect().left
-
-        expect(startingLeft).to.be.greaterThan(laterLeft)
       })
     })
   })

frontend/rabbi_gerzi/src/views/HomePage.vue

@@ -173,32 +173,6 @@ 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
@@ -389,25 +363,15 @@ 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__carousel" data-cy="sponsor-carousel">
+        <div class="sponsors__row">
-          <div class="sponsors__track" data-cy="sponsor-track">
+          <img
-            <div
+            v-for="sponsor in sponsors"
-              v-for="(sponsorGroup, sponsorGroupIndex) in sponsorGroups"
+            :key="sponsor.name"
-              :key="`sponsor-group-${sponsorGroupIndex}`"
+            :src="sponsor.src"
-              class="sponsors__group"
+            :alt="sponsor.name"
-              :aria-hidden="sponsorGroupIndex === 1 ? 'true' : undefined"
+            class="sponsors__logo"
-              :data-cy="sponsorGroupDataCy(sponsorGroupIndex)"
+            data-cy="sponsor-logo"
-            >
+          />
-              <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>
@@ -919,62 +883,21 @@ const projects: Project[] = [
   margin: 0 0 3rem 0;
 }
 
-.sponsors__carousel {
+.sponsors__row {
-  --sponsors-edge-fade: 50px;
-  --sponsors-logo-gap: clamp(2.75rem, 4vw, 4.25rem);
-
-  width: 85%;
-  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;
-  width: max-content;
+  flex-wrap: wrap;
-  animation: sponsors-scroll 20s linear infinite;
-  will-change: transform;
-}
-
-.sponsors__group {
-  display: flex;
-  flex: 0 0 auto;
   align-items: center;
-  gap: var(--sponsors-logo-gap);
+  justify-content: center;
-  padding-right: var(--sponsors-logo-gap);
+  gap: 2.5rem 3rem;
 }
 
 .sponsors__logo {
-  height: clamp(78px, 7vw, 96px);
+  height: 60px;
   width: auto;
-  max-width: 220px;
+  max-width: 160px;
-  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;
@@ -1305,15 +1228,6 @@ 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;
   }