diff --git a/frontend/rabbi_gerzi/src/views/HomePage.vue b/frontend/rabbi_gerzi/src/views/HomePage.vue index 77eabf8..228d98c 100644 --- a/frontend/rabbi_gerzi/src/views/HomePage.vue +++ b/frontend/rabbi_gerzi/src/views/HomePage.vue @@ -313,6 +313,28 @@ const projects: Project[] = [ + +
+
+

Start Your Journey

+ +
+
@@ -784,6 +806,74 @@ const projects: Project[] = [ max-width: 28ch; } +.journey { + background: var(--color-cream); + padding: 5rem 2rem; +} + +.journey__inner { + max-width: 1000px; + margin: 0 auto; + text-align: center; +} + +.journey__heading { + font-family: var(--font-serif); + font-weight: 400; + font-size: clamp(1.5rem, 2.4vw, 2rem); + color: var(--color-slate); + margin: 0 0 3rem 0; +} + +.journey__cards { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 1.5rem; +} + +.journey__card { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; + padding: 4rem 2rem; + min-height: 280px; + border-radius: 14px; + color: var(--color-white); + transition: transform 0.2s ease; +} + +.journey__card:hover { + transform: translateY(-4px); +} + +.journey__card--olive { + background: var(--color-olive); +} + +.journey__card--slate { + background: var(--color-slate); +} + +.journey__card-title { + font-family: var(--font-serif); + font-weight: 400; + font-size: clamp(1.4rem, 2.2vw, 1.85rem); + margin: 0 0 1.5rem 0; + line-height: 1.3; +} + +.journey__card-body { + font-family: var(--font-serif); + font-weight: 300; + font-size: 1rem; + line-height: 1.55; + color: rgba(255, 255, 255, 0.9); + margin: 0; + max-width: 30ch; +} + @media (max-width: 768px) { .site-header { padding: 0.75rem 1rem; @@ -816,6 +906,10 @@ const projects: Project[] = [ .projects__grid { grid-template-columns: 1fr; } + + .journey__cards { + grid-template-columns: 1fr; + } } @media (max-width: 480px) {