add projects grid

frontend/rabbi_gerzi/src/views/HomePage.vue

@@ -73,6 +73,46 @@ const sponsors: Sponsor[] = [
   { name: 'Aish HaTorah', src: '/assets/aish.png' },
   { name: 'Yeshivat Lev HaTorah', src: '/assets/levhatorah.png' },
 ]
+
+interface Project {
+  title: string
+  description: string
+  accent: string
+}
+
+const projects: Project[] = [
+  {
+    title: 'Chaburot',
+    description:
+      'Rabbi Gerzi organizes group learning sessions for men and ' +
+      'women that provide a focused learning environment for ' +
+      'spiritual growth.',
+    accent: '#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',
+  },
+  {
+    title: 'Shul',
+    description:
+      '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',
+  },
+  {
+    title: 'New Building',
+    description:
+      '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',
+  },
+]
 </script>
 
 <template>
@@ -255,6 +295,24 @@ const sponsors: Sponsor[] = [
         </div>
       </div>
     </section>
+
+    <section class="projects" data-cy="projects">
+      <div class="projects__inner">
+        <h2 class="projects__heading">Projects</h2>
+        <div class="projects__grid">
+          <article
+            v-for="project in projects"
+            :key="project.title"
+            class="projects__card"
+            :style="{ background: project.accent }"
+            data-cy="project-card"
+          >
+            <h3 class="projects__card-title">{{ project.title }}</h3>
+            <p class="projects__card-body">{{ project.description }}</p>
+          </article>
+        </div>
+      </div>
+    </section>
   </div>
 </template>
 
@@ -671,6 +729,61 @@ const sponsors: Sponsor[] = [
   object-fit: contain;
 }
 
+.projects {
+  background: var(--color-cream);
+  padding: 5rem 2rem;
+}
+
+.projects__inner {
+  max-width: 1100px;
+  margin: 0 auto;
+}
+
+.projects__heading {
+  font-family: var(--font-serif);
+  font-weight: 400;
+  font-size: clamp(1.5rem, 2.4vw, 2rem);
+  color: var(--color-slate);
+  text-align: center;
+  margin: 0 0 3rem 0;
+}
+
+.projects__grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1.5rem;
+}
+
+.projects__card {
+  border-radius: 14px;
+  padding: 3rem 2rem;
+  min-height: 240px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  color: var(--color-white);
+  box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.25);
+}
+
+.projects__card-title {
+  font-family: var(--font-serif);
+  font-weight: 400;
+  font-size: clamp(1.25rem, 2vw, 1.6rem);
+  margin: 0 0 1rem 0;
+}
+
+.projects__card-body {
+  font-family: var(--font-serif);
+  font-weight: 300;
+  font-size: 0.95rem;
+  line-height: 1.55;
+  color: rgba(255, 255, 255, 0.9);
+  margin: 0;
+  max-width: 28ch;
+}
+
 @media (max-width: 768px) {
   .site-header {
     padding: 0.75rem 1rem;
@@ -699,6 +812,10 @@ const sponsors: Sponsor[] = [
     grid-template-columns: repeat(2, 1fr);
     gap: 2rem 1rem;
   }
+
+  .projects__grid {
+    grid-template-columns: 1fr;
+  }
 }
 
 @media (max-width: 480px) {