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; }