add core teachings grid

frontend/rabbi_gerzi/src/views/HomePage.vue

@@ -5,6 +5,15 @@ const navItems = [
   { label: 'Contact', href: '/contact', icon: '➤' },
   { label: 'Donate', href: '/donate', icon: '♡' },
 ]
+
+const coreTeachings = [
+  { number: 1, title: 'Introduction', glyph: '⌂' },
+  { number: 2, title: 'Foundations', glyph: '◧' },
+  { number: 3, title: 'Divine Plan', glyph: '◯' },
+  { number: 4, title: 'Architecture of the Soul', glyph: '♥' },
+  { number: 5, title: 'Arba Yesodot', glyph: '✦' },
+  { number: 6, title: 'Fluid Integration', glyph: '✎' },
+]
 </script>
 
 <template>
@@ -81,6 +90,24 @@ const navItems = [
         </p>
       </div>
     </section>
+
+    <section class="core-teachings" data-cy="core-teachings">
+      <div class="core-teachings__inner">
+        <h2 class="core-teachings__heading">Baderech HaAvodah (Core Teachings)</h2>
+        <div class="core-teachings__grid">
+          <div
+            v-for="teaching in coreTeachings"
+            :key="teaching.number"
+            class="core-teachings__tile"
+          >
+            <span class="core-teachings__glyph" aria-hidden="true">
+              {{ teaching.glyph }}
+            </span>
+            <p class="core-teachings__label">{{ teaching.number }}) {{ teaching.title }}</p>
+          </div>
+        </div>
+      </div>
+    </section>
   </div>
 </template>
 
@@ -279,6 +306,53 @@ const navItems = [
   margin-bottom: 0;
 }
 
+.core-teachings {
+  background: var(--color-white);
+  padding: 5rem 2rem;
+}
+
+.core-teachings__inner {
+  max-width: 1000px;
+  margin: 0 auto;
+}
+
+.core-teachings__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;
+}
+
+.core-teachings__grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 3rem 2rem;
+}
+
+.core-teachings__tile {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+.core-teachings__glyph {
+  font-size: 3rem;
+  line-height: 1;
+  color: var(--color-slate);
+  margin-bottom: 1rem;
+  font-weight: 300;
+}
+
+.core-teachings__label {
+  font-family: var(--font-serif);
+  font-size: 1rem;
+  color: var(--color-text-muted);
+  margin: 0;
+}
+
 @media (max-width: 768px) {
   .site-header {
     padding: 0.75rem 1rem;
@@ -302,5 +376,16 @@ const navItems = [
   .hero__hiker {
     width: 60%;
   }
+
+  .core-teachings__grid {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 2rem 1rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .core-teachings__grid {
+    grid-template-columns: 1fr;
+  }
 }
 </style>