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

@@ -499,28 +499,6 @@ describe('homepage projects grid', () => {
       cy.contains('Beit Shemesh municipality').should('be.visible')
     })
   })
-
-  it('uses background images for each project card', () => {
-    const expectedProjectImages = [
-      '/assets/projects/chaburot.webp',
-      '/assets/projects/pilzno-work-inspired.webp',
-      '/assets/projects/shul.webp',
-      '/assets/projects/new-building.webp',
-    ]
-
-    cy.get('[data-cy="project-card"]').should('have.length', 4)
-    expectedProjectImages.forEach((expectedProjectImage, projectIndex) => {
-      cy.get('[data-cy="project-card"]')
-        .eq(projectIndex)
-        .then((projectCardElements) => {
-          const projectCardStyle = getComputedStyle(projectCardElements[0])
-
-          expect(projectCardStyle.backgroundImage).to.contain(
-            expectedProjectImage,
-          )
-        })
-    })
-  })
 })
 
 describe('homepage start your journey ctas', () => {

frontend/rabbi_gerzi/src/views/HomePage.vue

@@ -202,8 +202,7 @@ function sponsorLogoDataCy(sponsorGroupIndex: number): string {
 interface Project {
   title: string
   description: string
-  imagePath: string
+  accent: string
-  fallbackColor: string
 }
 
 const projects: Project[] = [
@@ -213,16 +212,14 @@ const projects: Project[] = [
       'Rabbi Gerzi organizes group learning sessions for men and ' +
       'women that provide a focused learning environment for ' +
       'spiritual growth.',
-    imagePath: '/assets/projects/chaburot.webp',
+    accent: '#6b5b3c',
-    fallbackColor: '#6b5b3c',
   },
   {
     title: 'Pilzno Work Inspired',
     description:
       "Rabbi Gerzi's program that provides the theoretical and " +
       'practical frameworks for a healthy relationship to work.',
-    imagePath: '/assets/projects/pilzno-work-inspired.webp',
+    accent: '#4a3a55',
-    fallbackColor: '#4a3a55',
   },
   {
     title: 'Shul',
@@ -230,8 +227,7 @@ const projects: Project[] = [
       'Rabbi Gerzi\u2019s shul in Ramat Beit Shemesh ' +
       '\u201CPilzno Beis Dovid\u201D provides a warm and enriching ' +
       'environment for a diverse community of congregants.',
-    imagePath: '/assets/projects/shul.webp',
+    accent: '#3d4a4b',
-    fallbackColor: '#3d4a4b',
   },
   {
     title: 'New Building',
@@ -239,17 +235,9 @@ const projects: Project[] = [
       'Rabbi Gerzi has received the blessing of the Beit Shemesh ' +
       'municipality to develop a new center, equipped with modern ' +
       'facilities to support a integrated Torah lifestyle.',
-    imagePath: '/assets/projects/new-building.webp',
+    accent: '#5a4232',
-    fallbackColor: '#5a4232',
   },
 ]
-
-function projectCardStyle(project: Project): string {
-  return [
-    `--card-image: url(${project.imagePath})`,
-    `--card-fallback: ${project.fallbackColor}`,
-  ].join('; ')
-}
 </script>
 
 <template>
@@ -432,7 +420,7 @@ function projectCardStyle(project: Project): string {
             v-for="project in projects"
             :key="project.title"
             class="projects__card"
-            :style="projectCardStyle(project)"
+            :style="{ background: project.accent }"
             data-cy="project-card"
           >
             <h3 class="projects__card-title">{{ project.title }}</h3>
@@ -1015,7 +1003,6 @@ function projectCardStyle(project: Project): string {
 .projects__card {
   border-radius: 14px;
   padding: 3rem 2rem;
-  aspect-ratio: 16 / 10;
   min-height: 240px;
   display: flex;
   flex-direction: column;
@@ -1023,13 +1010,7 @@ function projectCardStyle(project: Project): string {
   justify-content: center;
   text-align: center;
   color: var(--color-white);
-  --overlay: linear-gradient(#14181a26, #14181a40);
+  box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.25);
-  background-color: var(--card-fallback);
-  background-image: var(--overlay), var(--card-image);
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: cover;
-  box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.18);
 }
 
 .projects__card-title {
@@ -1303,10 +1284,6 @@ function projectCardStyle(project: Project): string {
     grid-template-columns: 1fr;
   }
 
-  .projects__card {
-    aspect-ratio: auto;
-  }
-
   .testimonials__stage {
     width: min(100%, 480px);
   }