From b5cfdfbd47be08ba8a6082fa0283ed4217129d0c Mon Sep 17 00:00:00 2001 From: Yisroel Baum Date: Sat, 13 Jun 2026 21:36:21 +0300 Subject: [PATCH 1/6] test sponsor carousel --- frontend/rabbi_gerzi/cypress/e2e/home.cy.ts | 52 ++++++++++++++++++++- 1 file changed, 50 insertions(+), 2 deletions(-) diff --git a/frontend/rabbi_gerzi/cypress/e2e/home.cy.ts b/frontend/rabbi_gerzi/cypress/e2e/home.cy.ts index 1b2adae..016a24a 100644 --- a/frontend/rabbi_gerzi/cypress/e2e/home.cy.ts +++ b/frontend/rabbi_gerzi/cypress/e2e/home.cy.ts @@ -401,11 +401,10 @@ describe('homepage sponsor strip', () => { cy.visit('/') }) - it('renders the heading and all seven partner logos', () => { + it('renders the heading and all seven partner logos in a carousel', () => { 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', @@ -415,10 +414,59 @@ 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('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.6, 0.02) + expect(leftBuffer).to.be.closeTo(rightBuffer, 1) + expect(maskImage).to.contain('50px') + }) + }) + }) + + 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) + }) }) }) }) From 000d89bf9e77aec06001e02726a78d59075710a2 Mon Sep 17 00:00:00 2001 From: Yisroel Baum Date: Sat, 13 Jun 2026 21:40:44 +0300 Subject: [PATCH 2/6] add sponsor carousel --- frontend/rabbi_gerzi/cypress/e2e/home.cy.ts | 3 +- frontend/rabbi_gerzi/src/views/HomePage.vue | 116 +++++++++++++++++--- 2 files changed, 103 insertions(+), 16 deletions(-) diff --git a/frontend/rabbi_gerzi/cypress/e2e/home.cy.ts b/frontend/rabbi_gerzi/cypress/e2e/home.cy.ts index 016a24a..7a40627 100644 --- a/frontend/rabbi_gerzi/cypress/e2e/home.cy.ts +++ b/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=""]') diff --git a/frontend/rabbi_gerzi/src/views/HomePage.vue b/frontend/rabbi_gerzi/src/views/HomePage.vue index 32ae304..69ebcd8 100644 --- a/frontend/rabbi_gerzi/src/views/HomePage.vue +++ b/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[] = [

Organizations Rabbi Gerzi has Worked With

-
- +
+
+
+ +
+
@@ -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: 2.5rem 3rem; + gap: var(--sponsors-logo-gap); + 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; } From b4f6d3a96f725f9804ae7e4674986cf8b0a59a9a Mon Sep 17 00:00:00 2001 From: Yisroel Baum Date: Sat, 13 Jun 2026 21:43:18 +0300 Subject: [PATCH 3/6] test carousel size speed --- frontend/rabbi_gerzi/cypress/e2e/home.cy.ts | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/frontend/rabbi_gerzi/cypress/e2e/home.cy.ts b/frontend/rabbi_gerzi/cypress/e2e/home.cy.ts index 7a40627..02b5fda 100644 --- a/frontend/rabbi_gerzi/cypress/e2e/home.cy.ts +++ b/frontend/rabbi_gerzi/cypress/e2e/home.cy.ts @@ -450,13 +450,21 @@ describe('homepage sponsor strip', () => { const maskImage = carouselStyle.maskImage || carouselStyle.webkitMaskImage - expect(carouselRatio).to.be.closeTo(0.6, 0.02) + expect(carouselRatio).to.be.closeTo(0.7, 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('24s') + }) + }) + it('scrolls the sponsor logos from right to left', () => { cy.get('[data-cy="sponsor-track"]').then((trackElements) => { const startingLeft = trackElements[0].getBoundingClientRect().left From 6f4dff987e0462ac7315366a30e5b59ef18a4b35 Mon Sep 17 00:00:00 2001 From: Yisroel Baum Date: Sat, 13 Jun 2026 21:45:07 +0300 Subject: [PATCH 4/6] test wider faster carousel --- frontend/rabbi_gerzi/cypress/e2e/home.cy.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/rabbi_gerzi/cypress/e2e/home.cy.ts b/frontend/rabbi_gerzi/cypress/e2e/home.cy.ts index 02b5fda..6ff1d42 100644 --- a/frontend/rabbi_gerzi/cypress/e2e/home.cy.ts +++ b/frontend/rabbi_gerzi/cypress/e2e/home.cy.ts @@ -450,7 +450,7 @@ describe('homepage sponsor strip', () => { const maskImage = carouselStyle.maskImage || carouselStyle.webkitMaskImage - expect(carouselRatio).to.be.closeTo(0.7, 0.02) + expect(carouselRatio).to.be.closeTo(0.8, 0.02) expect(leftBuffer).to.be.closeTo(rightBuffer, 1) expect(maskImage).to.contain('50px') }) @@ -461,7 +461,7 @@ describe('homepage sponsor strip', () => { cy.get('[data-cy="sponsor-track"]').then((trackElements) => { const trackStyle = getComputedStyle(trackElements[0]) - expect(trackStyle.animationDuration).to.equal('24s') + expect(trackStyle.animationDuration).to.equal('20s') }) }) From beeaf9c2d0972881364732c7153241fc617ccd46 Mon Sep 17 00:00:00 2001 From: Yisroel Baum Date: Sat, 13 Jun 2026 21:47:14 +0300 Subject: [PATCH 5/6] test wider carousel --- frontend/rabbi_gerzi/cypress/e2e/home.cy.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/rabbi_gerzi/cypress/e2e/home.cy.ts b/frontend/rabbi_gerzi/cypress/e2e/home.cy.ts index 6ff1d42..9022792 100644 --- a/frontend/rabbi_gerzi/cypress/e2e/home.cy.ts +++ b/frontend/rabbi_gerzi/cypress/e2e/home.cy.ts @@ -450,7 +450,7 @@ describe('homepage sponsor strip', () => { const maskImage = carouselStyle.maskImage || carouselStyle.webkitMaskImage - expect(carouselRatio).to.be.closeTo(0.8, 0.02) + expect(carouselRatio).to.be.closeTo(0.85, 0.02) expect(leftBuffer).to.be.closeTo(rightBuffer, 1) expect(maskImage).to.contain('50px') }) From 6c75443bd717b9e51e6353d802db6de51779308f Mon Sep 17 00:00:00 2001 From: Yisroel Baum Date: Sat, 13 Jun 2026 21:48:43 +0300 Subject: [PATCH 6/6] tune carousel motion --- frontend/rabbi_gerzi/src/views/HomePage.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/rabbi_gerzi/src/views/HomePage.vue b/frontend/rabbi_gerzi/src/views/HomePage.vue index 69ebcd8..91503d2 100644 --- a/frontend/rabbi_gerzi/src/views/HomePage.vue +++ b/frontend/rabbi_gerzi/src/views/HomePage.vue @@ -923,7 +923,7 @@ const projects: Project[] = [ --sponsors-edge-fade: 50px; --sponsors-logo-gap: clamp(2.75rem, 4vw, 4.25rem); - width: 60%; + width: 85%; margin: 0 auto; overflow: hidden; mask-image: linear-gradient( @@ -945,7 +945,7 @@ const projects: Project[] = [ .sponsors__track { display: flex; width: max-content; - animation: sponsors-scroll 28s linear infinite; + animation: sponsors-scroll 20s linear infinite; will-change: transform; }