diff --git a/frontend/rabbi_gerzi/src/views/HomePage.vue b/frontend/rabbi_gerzi/src/views/HomePage.vue index 8de51e4..cc83690 100644 --- a/frontend/rabbi_gerzi/src/views/HomePage.vue +++ b/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: '✎' }, +] @@ -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; + } }