Merge branch 'feature/project-card-backgrounds'

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

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