yisroelbaum/Rabbi_Gerzi
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add start your journey ctas

Browse source
This commit is contained in:
Yisroel Baum 2026-05-16 22:06:56 +03:00
parent 3aa8c51e5f
commit d24e0940c1
Signed by: yisroelbaum
GPG key ID: 0FA60884F75520A9
1 changed files with 94 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

94
frontend/rabbi_gerzi/src/views/HomePage.vue
View file

@ -313,6 +313,28 @@ const projects: Project[] = [
</div>
</div>
</section>
<section class="journey" data-cy="journey">
<div class="journey__inner">
<h2 class="journey__heading">Start Your Journey</h2>
<div class="journey__cards">
<a class="journey__card journey__card--olive" href="/media" data-cy="journey-media">
<h3 class="journey__card-title">Access<br />Torah Media</h3>
<p class="journey__card-body">Explore a wealth of video, audio and written content.</p>
</a>
<a
class="journey__card journey__card--slate"
href="/core-teachings"
data-cy="journey-baderech"
>
<h3 class="journey__card-title">Explore<br />Baderech HaAvodah</h3>
<p class="journey__card-body">
Uncover the transformative principles that can elevate your life.
</p>
</a>
</div>
</div>
</section>
</div>
</template>
@ -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) {