Compare commits
No commits in common. "7a3047d62b05432e3b7f701158cf45314f4416e3" and "ad94ea7ee09626a95d48bb33f770741c059fbb9e" have entirely different histories.
7a3047d62b
...
ad94ea7ee0
|
|
@ -1,129 +0,0 @@
|
|||
describe('about page', () => {
|
||||
beforeEach(() => {
|
||||
cy.visit('/about')
|
||||
})
|
||||
|
||||
it('renders the header and about hero', () => {
|
||||
cy.get('header.site-header').within(() => {
|
||||
cy.contains('Torah Media').should('be.visible')
|
||||
cy.contains('About').should('be.visible')
|
||||
cy.contains('Contact').should('be.visible')
|
||||
cy.contains('Donate').should('be.visible')
|
||||
})
|
||||
|
||||
cy.get('[data-cy="about-hero"]').within(() => {
|
||||
cy.contains('h1', 'About Rabbi Gerzi').should('be.visible')
|
||||
cy.contains('Healthy, Integrated and Balanced Torah living')
|
||||
.should('be.visible')
|
||||
cy.get('[data-cy="about-hero-image"]')
|
||||
.should('be.visible')
|
||||
.and('have.attr', 'alt')
|
||||
.and('match', /Rabbi Yehoshua Gerzi/i)
|
||||
})
|
||||
})
|
||||
|
||||
it('renders the copied biography and mission sections', () => {
|
||||
cy.get('[data-cy="about-story"]').within(() => {
|
||||
cy.contains('h2', 'About Rabbi Gerzi').should('be.visible')
|
||||
cy.contains('Pilzno Rebbe').should('be.visible')
|
||||
cy.contains('descends from an illustrious lineage')
|
||||
.should('be.visible')
|
||||
cy.contains('physical therapist, music instructor, martial artist')
|
||||
.should('be.visible')
|
||||
})
|
||||
|
||||
cy.get('[data-cy="about-vision"]').within(() => {
|
||||
cy.contains('h2', "Rabbi Gerzi's Vision").should('be.visible')
|
||||
cy.contains('from vagueness to clarity').should('be.visible')
|
||||
cy.contains('weekly chaburot and various events')
|
||||
.should('be.visible')
|
||||
})
|
||||
|
||||
cy.get('[data-cy="about-mission"]').within(() => {
|
||||
cy.contains('h2', 'The Mission').should('be.visible')
|
||||
cy.contains('A Clear Framework').should('be.visible')
|
||||
cy.contains('Community and Support').should('be.visible')
|
||||
cy.contains('Professional Structure').should('be.visible')
|
||||
})
|
||||
|
||||
cy.get('[data-cy="about-teachers"]').within(() => {
|
||||
cy.contains('h2', "Rabbi Gerzi's Teachers").should('be.visible')
|
||||
cy.contains('Rabbi Yosef Singer').should('be.visible')
|
||||
cy.contains('Rabbi Efraim Greenblatt').should('be.visible')
|
||||
cy.contains('Rabbi Mordechai Zukerman').should('be.visible')
|
||||
})
|
||||
})
|
||||
|
||||
it('renders the rabbanim section without repeated carousel copies', () => {
|
||||
const expectedRabbanim = [
|
||||
'The Biala Rebbe',
|
||||
'The Pilzno Rebbe, Rabbi Yosef Singer',
|
||||
'Dayan Gershon Lopian',
|
||||
'Rabbi Efraim Greenblatt',
|
||||
'The Sassover Rebbe',
|
||||
'The Pashkana Rebbe',
|
||||
'Rabbi Mordechai Zukerman',
|
||||
'The Radamishler Rebbe',
|
||||
'Rabbi Yoseph Leiberman',
|
||||
'The Krechnover Rebbe',
|
||||
]
|
||||
|
||||
cy.get('[data-cy="rabbanim"]').within(() => {
|
||||
cy.contains('h2', 'Rabbanim').should('be.visible')
|
||||
cy.get('[data-cy="rabbanim-card"]').should(
|
||||
'have.length',
|
||||
expectedRabbanim.length,
|
||||
)
|
||||
|
||||
expectedRabbanim.forEach((rabbiName) => {
|
||||
cy.contains('[data-cy="rabbanim-card"]', rabbiName)
|
||||
.should('be.visible')
|
||||
})
|
||||
|
||||
cy.contains('match the person in front of you').should('be.visible')
|
||||
cy.contains('depth and the profundity of love')
|
||||
.should('be.visible')
|
||||
})
|
||||
})
|
||||
|
||||
it('renders the haskamot image gallery', () => {
|
||||
cy.get('[data-cy="haskamot"]').within(() => {
|
||||
cy.contains('h2', 'Haskamot').should('be.visible')
|
||||
cy.get('[data-cy="haskamah-image"]').should('have.length', 6)
|
||||
cy.get('[data-cy="haskamah-image"]')
|
||||
.first()
|
||||
.should('be.visible')
|
||||
.and('have.attr', 'alt', 'Haskamah letter 1')
|
||||
cy.get('[data-cy="haskamah-image"]')
|
||||
.last()
|
||||
.and('have.attr', 'alt', 'Haskamah letter 6')
|
||||
})
|
||||
})
|
||||
|
||||
it('keeps the page readable on mobile', () => {
|
||||
cy.viewport(390, 900)
|
||||
|
||||
cy.get('[data-cy="about-hero"]').should('be.visible')
|
||||
cy.get('[data-cy="rabbanim-card"]').first().should('be.visible')
|
||||
cy.get('[data-cy="haskamah-image"]').first().should('be.visible')
|
||||
})
|
||||
|
||||
it('renders the get involved form and footer', () => {
|
||||
cy.get('[data-cy="get-involved"]').within(() => {
|
||||
cy.contains('h2', 'Get Involved').should('be.visible')
|
||||
cy.contains('Subscribe for updates as we release new content')
|
||||
.should('be.visible')
|
||||
cy.get('input[name="fullName"]').should('be.visible')
|
||||
cy.get('input[name="email"]').should('be.visible')
|
||||
cy.contains('button', 'Submit').should('be.visible')
|
||||
})
|
||||
|
||||
cy.get('[data-cy="footer"]').within(() => {
|
||||
cy.contains('Torah Media').should('be.visible')
|
||||
cy.contains('About').should('be.visible')
|
||||
cy.contains('Donate').should('be.visible')
|
||||
cy.contains('Contact').should('be.visible')
|
||||
cy.contains(/Rabbi Gerzi 2025/).should('be.visible')
|
||||
})
|
||||
})
|
||||
})
|
||||
|
Before Width: | Height: | Size: 158 KiB |
|
Before Width: | Height: | Size: 25 KiB |
|
Before Width: | Height: | Size: 25 KiB |
|
Before Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 36 KiB |
|
Before Width: | Height: | Size: 24 KiB |
|
Before Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 49 KiB |
|
Before Width: | Height: | Size: 54 KiB |
|
Before Width: | Height: | Size: 54 KiB |
|
Before Width: | Height: | Size: 65 KiB |
|
Before Width: | Height: | Size: 57 KiB |
|
Before Width: | Height: | Size: 68 KiB |
|
Before Width: | Height: | Size: 55 KiB |
|
Before Width: | Height: | Size: 50 KiB |
|
Before Width: | Height: | Size: 65 KiB |
|
Before Width: | Height: | Size: 56 KiB |
|
|
@ -1,6 +1,5 @@
|
|||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import HomePage from '@/views/HomePage.vue'
|
||||
import AboutPage from '@/views/AboutPage.vue'
|
||||
import LoginPage from '@/views/LoginPage.vue'
|
||||
import MediaPage from '@/views/MediaPage.vue'
|
||||
import ElementPage from '@/views/ElementPage.vue'
|
||||
|
|
@ -20,11 +19,6 @@ const router = createRouter({
|
|||
name: 'login',
|
||||
component: LoginPage,
|
||||
},
|
||||
{
|
||||
path: '/about',
|
||||
name: 'about',
|
||||
component: AboutPage,
|
||||
},
|
||||
{
|
||||
path: '/media',
|
||||
name: 'media',
|
||||
|
|
|
|||
|
|
@ -1,932 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import SiteHeader from '@/components/SiteHeader.vue'
|
||||
|
||||
interface MissionPoint {
|
||||
title: string
|
||||
body: string
|
||||
}
|
||||
|
||||
interface Teacher {
|
||||
name: string
|
||||
description: string
|
||||
}
|
||||
|
||||
interface Rabbi {
|
||||
name: string
|
||||
imagePath: string
|
||||
quote: string
|
||||
}
|
||||
|
||||
interface HaskamahImage {
|
||||
alt: string
|
||||
src: string
|
||||
}
|
||||
|
||||
const biographyParagraphs = [
|
||||
'Rabbi Yehoshua Gerzi, affectionately known as the "Pilzno Rebbe," ' +
|
||||
'is a visionary teacher, spiritual mentor, and community leader. ' +
|
||||
'His journey is rooted in a profound mesorah, tracing back to the ' +
|
||||
'Baal Shem Tov and the Vilna Gaon, alongside the rich traditions ' +
|
||||
'of Sefardi and Edot HaMizrach. He descends from an illustrious ' +
|
||||
'lineage on both sides, with ancestors including the Vilna Gaon, ' +
|
||||
'the Noam Elimelech, R Zusha, and the heilige Ropshitzer, among ' +
|
||||
'others including numerous Sefardi Mekubalim.',
|
||||
'He received his semicha from Dayan Gershon Lopian of London, and ' +
|
||||
"has trained under a handful of the generation's pre-eminent " +
|
||||
'Rabbanim. He possesses a wide range of skills and has trained as ' +
|
||||
'a physical therapist, music instructor, martial artist, teacher, ' +
|
||||
'counselor, and lecturer. His wife, Rebbetzin Judith Gerzi, is an ' +
|
||||
'accomplished musician and educator. He resides in Ramat Beit ' +
|
||||
'Shemesh, where he presides as Rabbi of Kehillas Beis David ' +
|
||||
'Pilzno and director of the Pilzno Institute of Higher Education.',
|
||||
]
|
||||
|
||||
const missionPoints: MissionPoint[] = [
|
||||
{
|
||||
title: 'A Clear Framework',
|
||||
body:
|
||||
'A structured syllabus that illuminates the core areas of life, ' +
|
||||
'guiding individuals toward a more meaningful, integrated ' +
|
||||
'existence.',
|
||||
},
|
||||
{
|
||||
title: 'Community and Support',
|
||||
body:
|
||||
'Small groups and supportive networks where individuals ' +
|
||||
'experience shared growth, accountability, and transformation.',
|
||||
},
|
||||
{
|
||||
title: 'Professional Structure',
|
||||
body:
|
||||
'A well-organized life framework that allows individuals to ' +
|
||||
'interface with his teachings in a seamless and professional ' +
|
||||
'manner, ensuring clarity and accessibility.',
|
||||
},
|
||||
]
|
||||
|
||||
const teachers: Teacher[] = [
|
||||
{
|
||||
name: 'Rabbi Yosef Singer',
|
||||
description: 'Pilzno Rav, mentor, and source of deep Torah wisdom.',
|
||||
},
|
||||
{
|
||||
name: 'Rabbi Efraim Greenblatt',
|
||||
description: 'Halachic authority and loyal student of Rabbi Moshe Feinstein.',
|
||||
},
|
||||
{
|
||||
name: 'The Sassover Rebbe, The Biala Rebbe, and Rabbi Mordechai Zukerman',
|
||||
description: "Spiritual influences who shaped Rabbi Gerzi's avodah.",
|
||||
},
|
||||
]
|
||||
|
||||
const rabbanim: Rabbi[] = [
|
||||
{
|
||||
name: 'The Biala Rebbe',
|
||||
imagePath: '/assets/about/rabbanim/biala-rebbe.png',
|
||||
quote:
|
||||
'What I have noticed and what I have learned from the Biala ' +
|
||||
'Rebbe from age 5, hopefully for many years to come, is to match ' +
|
||||
'the person in front of you; how much you have to care for them ' +
|
||||
'and give them the ability to know what they are seeing is very ' +
|
||||
'real...and to respect them.',
|
||||
},
|
||||
{
|
||||
name: 'The Pilzno Rebbe, Rabbi Yosef Singer',
|
||||
imagePath: '/assets/about/rabbanim/pilzno-rebbe.png',
|
||||
quote:
|
||||
'What I learned from Rabbi Singer, amongst many things, was the ' +
|
||||
'depth and the profundity of love that he had for all of ' +
|
||||
'humanity; and the recognition that everything has its journey ' +
|
||||
'and the tremendous patience that he expressed.',
|
||||
},
|
||||
{
|
||||
name: 'Dayan Gershon Lopian',
|
||||
imagePath: '/assets/about/rabbanim/dayan-gershon-lopian.png',
|
||||
quote:
|
||||
'What I learned from Dayan Lopian is the importance of humor ' +
|
||||
'blending with Torah and Psak halacha, and how important it is ' +
|
||||
"to make Torah relevant to people's lives. To have the ability " +
|
||||
'to treat every single person individually as they come your way.',
|
||||
},
|
||||
{
|
||||
name: 'Rabbi Efraim Greenblatt',
|
||||
imagePath: '/assets/about/rabbanim/rabbi-efraim-greenblatt.png',
|
||||
quote:
|
||||
'What impacted me incredibly deeply about Rabbi Greenblatt was ' +
|
||||
'his out of the box halachic thinking; and being a loyal student ' +
|
||||
'of Rabbi Moshe Feinstein. He went out to the middle of nowhere ' +
|
||||
'and built what he built, because he trusted his Rebbe.',
|
||||
},
|
||||
{
|
||||
name: 'The Sassover Rebbe',
|
||||
imagePath: '/assets/about/rabbanim/sassover-rebbe.png',
|
||||
quote:
|
||||
'The Sassover Rebbe imparted in me the importance of mesiras ' +
|
||||
'nefesh to help, aid, guide our brethren. There was nothing that ' +
|
||||
'was too difficult. No wall too high. No river too wide to cross. ' +
|
||||
'He always found a way. His creativity. His ability to think ' +
|
||||
'outside the box. Anything to help another Jew.',
|
||||
},
|
||||
{
|
||||
name: 'The Pashkana Rebbe',
|
||||
imagePath: '/assets/about/rabbanim/pashkana-rebbe.png',
|
||||
quote:
|
||||
'What I found incredibly striking about the Pashkana Rebbe was ' +
|
||||
'the fact that everything he met, whether good or bad in his ' +
|
||||
'life, was met from him with gratitude. There is no such ' +
|
||||
'situation in the universe that cannot be met with gratitude. ' +
|
||||
'One thing I learned from him that will last for a very, very ' +
|
||||
'long time was to approach every situation with hakarat hatov, ' +
|
||||
'whatever it may be.',
|
||||
},
|
||||
{
|
||||
name: 'Rabbi Mordechai Zukerman',
|
||||
imagePath: '/assets/about/rabbanim/rabbi-mordechai-zukerman.png',
|
||||
quote:
|
||||
'When coming to Rav Mordechai Zukerman, I found my learning very ' +
|
||||
'difficult because of the dyslexia. When I told Rabbi Zukerman ' +
|
||||
'about my dyslexia, reading, and difficulties in learning, he ' +
|
||||
'said to me something that changed the way I functioned in ' +
|
||||
'Jewish life. He said, "You may not be able to read; however, ' +
|
||||
'you do not need to read to work on your middot to become a Baal ' +
|
||||
'Mussar." And that is something that has affected me forever.',
|
||||
},
|
||||
{
|
||||
name: 'The Radamishler Rebbe',
|
||||
imagePath: '/assets/about/rabbanim/radamishler-rebbe.png',
|
||||
quote:
|
||||
'What I learned from Rav Chuna, the Radamishler Rebbe, was the ' +
|
||||
'importance of tradition and the importance of kedusha and ' +
|
||||
'tahara. It does not matter whatever generation we are living in. ' +
|
||||
'Those standards need to be kept and met.',
|
||||
},
|
||||
{
|
||||
name: 'Rabbi Yoseph Leiberman',
|
||||
imagePath: '/assets/about/rabbanim/rabbi-yoseph-leiberman.png',
|
||||
quote:
|
||||
'Rabbi Leiberman was like a walking Mussar sefer. He stopped to ' +
|
||||
'think and to act upon his thinking to make sure that it falls ' +
|
||||
'within the realms of halacha and derech eretz.',
|
||||
},
|
||||
{
|
||||
name: 'The Krechnover Rebbe',
|
||||
imagePath: '/assets/about/rabbanim/krechnover-rebbe.png',
|
||||
quote:
|
||||
'The Krechnover Rebbe imparted in me the power of stories, ' +
|
||||
'handed down from generation to generation, including a number ' +
|
||||
'of practices. The time that I spent with him definitely gave me ' +
|
||||
'a much deeper appreciation for tradition and keeping the ' +
|
||||
'tradition that was passed down, through the art of stories.',
|
||||
},
|
||||
]
|
||||
|
||||
const haskamahImages: HaskamahImage[] = [
|
||||
{
|
||||
alt: 'Haskamah letter 1',
|
||||
src: '/assets/about/haskamot/haskamah-1.jpg',
|
||||
},
|
||||
{
|
||||
alt: 'Haskamah letter 2',
|
||||
src: '/assets/about/haskamot/haskamah-2.jpg',
|
||||
},
|
||||
{
|
||||
alt: 'Haskamah letter 3',
|
||||
src: '/assets/about/haskamot/haskamah-3.jpg',
|
||||
},
|
||||
{
|
||||
alt: 'Haskamah letter 4',
|
||||
src: '/assets/about/haskamot/haskamah-4.jpg',
|
||||
},
|
||||
{
|
||||
alt: 'Haskamah letter 5',
|
||||
src: '/assets/about/haskamot/haskamah-5.jpg',
|
||||
},
|
||||
{
|
||||
alt: 'Haskamah letter 6',
|
||||
src: '/assets/about/haskamot/haskamah-6.jpg',
|
||||
},
|
||||
]
|
||||
|
||||
const newsletterFullName = ref('')
|
||||
const newsletterEmail = ref('')
|
||||
|
||||
function submitNewsletter(submitEvent: Event): void {
|
||||
submitEvent.preventDefault()
|
||||
newsletterFullName.value = ''
|
||||
newsletterEmail.value = ''
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="about-page">
|
||||
<SiteHeader />
|
||||
|
||||
<main>
|
||||
<section class="about-hero" data-cy="about-hero">
|
||||
<div class="about-hero__inner">
|
||||
<div class="about-hero__copy">
|
||||
<p class="about-hero__eyebrow">Pilzno Institute</p>
|
||||
<h1 class="about-hero__heading">About Rabbi Gerzi</h1>
|
||||
<p class="about-hero__lede">
|
||||
Healthy, Integrated and Balanced Torah living, rooted in mesorah and made practical
|
||||
for real people building real lives.
|
||||
</p>
|
||||
</div>
|
||||
<img
|
||||
src="/assets/about/about-hero.jpg"
|
||||
alt="Rabbi Yehoshua Gerzi teaching"
|
||||
class="about-hero__image"
|
||||
data-cy="about-hero-image"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="about-section about-section--white" data-cy="about-story">
|
||||
<div class="about-section__inner about-section__inner--split">
|
||||
<div class="about-section__title">
|
||||
<p class="about-section__kicker">Biography</p>
|
||||
<h2 class="about-section__heading">About Rabbi Gerzi</h2>
|
||||
</div>
|
||||
<div class="about-section__body">
|
||||
<p
|
||||
v-for="paragraph in biographyParagraphs"
|
||||
:key="paragraph"
|
||||
class="about-section__paragraph"
|
||||
>
|
||||
{{ paragraph }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="about-section about-section--slate" data-cy="about-vision">
|
||||
<div class="about-section__inner about-section__inner--narrow">
|
||||
<p class="about-section__kicker">Vision</p>
|
||||
<h2 class="about-section__heading">Rabbi Gerzi's Vision</h2>
|
||||
<p class="about-section__paragraph">
|
||||
Rabbi Gerzi guides individuals from vagueness to clarity, from surviving to thriving,
|
||||
from a galut to a geula mindset. Through profound teachings rooted in Torah wisdom,
|
||||
Rabbi Gerzi aims to connect students with their divine purpose, discover balance, and
|
||||
live a life of authentic joy and fulfillment.
|
||||
</p>
|
||||
<p class="about-section__paragraph">
|
||||
As spiritual growth can only be accomplished within a fertile social framework, Rabbi
|
||||
Gerzi hosts regular weekly chaburot and various events that create the conditions for
|
||||
authentic life transformation.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="about-section about-section--cream" data-cy="about-mission">
|
||||
<div class="about-section__inner">
|
||||
<div class="about-section__header">
|
||||
<p class="about-section__kicker">Mission</p>
|
||||
<h2 class="about-section__heading">
|
||||
The Mission: To Provide a Clear Path to Wholesome Living
|
||||
</h2>
|
||||
<p class="about-section__intro">
|
||||
Rabbi Gerzi provides a structured path to wisdom, personal growth, and transformation.
|
||||
His educational system is designed to guide individuals through essential life areas,
|
||||
creating not just intellectual understanding but genuine change.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mission-grid">
|
||||
<article
|
||||
v-for="missionPoint in missionPoints"
|
||||
:key="missionPoint.title"
|
||||
class="mission-grid__item"
|
||||
>
|
||||
<h3 class="mission-grid__title">{{ missionPoint.title }}</h3>
|
||||
<p class="mission-grid__body">{{ missionPoint.body }}</p>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<p class="about-section__closing">
|
||||
Together, this yields Healthy, Integrated and Balanced Torah living.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="about-section about-section--white">
|
||||
<div class="about-section__inner about-section__inner--split">
|
||||
<div class="about-section__title">
|
||||
<p class="about-section__kicker">Mesorah</p>
|
||||
<h2 class="about-section__heading">The Pilzno Rav</h2>
|
||||
</div>
|
||||
<div class="about-section__body">
|
||||
<p class="about-section__paragraph">
|
||||
Rabbi Gerzi's teachings are deeply influenced by his mentor, Rabbi Yosef Singer, the
|
||||
Pilzno Rav. Under Rabbi Singer's guidance, Rabbi Gerzi absorbed the teachings of the
|
||||
Baal Shem Tov, Chassidut, Kabbalah, and Halacha.
|
||||
</p>
|
||||
<p class="about-section__paragraph">
|
||||
In 2005, the Pilzno Rav instructed Rabbi Gerzi to continue his legacy by building a
|
||||
community in Eretz Yisrael dedicated to this unique form of Healthy, Integrated and
|
||||
Balanced Torah living.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="about-section about-section--cream" data-cy="about-teachers">
|
||||
<div class="about-section__inner">
|
||||
<div class="about-section__header">
|
||||
<p class="about-section__kicker">Teachers</p>
|
||||
<h2 class="about-section__heading">Rabbi Gerzi's Teachers</h2>
|
||||
</div>
|
||||
<ol class="teacher-list">
|
||||
<li v-for="teacher in teachers" :key="teacher.name" class="teacher-list__item">
|
||||
<span class="teacher-list__name">{{ teacher.name }}</span>
|
||||
<span class="teacher-list__description">
|
||||
{{ teacher.description }}
|
||||
</span>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="rabbanim" data-cy="rabbanim">
|
||||
<div class="rabbanim__inner">
|
||||
<p class="about-section__kicker">Influences</p>
|
||||
<h2 class="about-section__heading">Rabbanim</h2>
|
||||
<div class="rabbanim__grid">
|
||||
<article
|
||||
v-for="rabbi in rabbanim"
|
||||
:key="rabbi.name"
|
||||
class="rabbanim__card"
|
||||
data-cy="rabbanim-card"
|
||||
>
|
||||
<img
|
||||
:src="rabbi.imagePath"
|
||||
:alt="rabbi.name"
|
||||
class="rabbanim__image"
|
||||
loading="lazy"
|
||||
/>
|
||||
<div class="rabbanim__content">
|
||||
<h3 class="rabbanim__name">{{ rabbi.name }}</h3>
|
||||
<p class="rabbanim__quote">{{ rabbi.quote }}</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="haskamot" data-cy="haskamot">
|
||||
<div class="haskamot__inner">
|
||||
<p class="about-section__kicker">Letters</p>
|
||||
<h2 class="about-section__heading">Haskamot</h2>
|
||||
<div class="haskamot__grid">
|
||||
<img
|
||||
v-for="haskamahImage in haskamahImages"
|
||||
:key="haskamahImage.src"
|
||||
:src="haskamahImage.src"
|
||||
:alt="haskamahImage.alt"
|
||||
class="haskamot__image"
|
||||
data-cy="haskamah-image"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="get-involved" data-cy="get-involved">
|
||||
<div class="get-involved__card">
|
||||
<div class="get-involved__copy">
|
||||
<h2 class="get-involved__heading">Get Involved</h2>
|
||||
<p class="get-involved__subtext">
|
||||
Subscribe for updates as we release new content, chaburot and events.
|
||||
</p>
|
||||
</div>
|
||||
<form class="get-involved__form" @submit="submitNewsletter">
|
||||
<label class="get-involved__field">
|
||||
<span class="get-involved__label">Full Name</span>
|
||||
<input
|
||||
v-model="newsletterFullName"
|
||||
name="fullName"
|
||||
type="text"
|
||||
class="get-involved__input"
|
||||
autocomplete="name"
|
||||
/>
|
||||
</label>
|
||||
<label class="get-involved__field">
|
||||
<span class="get-involved__label">Email Address</span>
|
||||
<input
|
||||
v-model="newsletterEmail"
|
||||
name="email"
|
||||
type="email"
|
||||
class="get-involved__input"
|
||||
autocomplete="email"
|
||||
/>
|
||||
</label>
|
||||
<button type="submit" class="get-involved__submit">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="site-footer" data-cy="footer">
|
||||
<div class="site-footer__inner">
|
||||
<div class="site-footer__brand">
|
||||
<img src="/assets/signature.png" alt="R' Yehoshua Gerzi" class="site-footer__signature" />
|
||||
<div class="site-footer__social">
|
||||
<a href="#" class="site-footer__social-link" aria-label="YouTube"> ▶ </a>
|
||||
<a href="#" class="site-footer__social-link" aria-label="Spotify"> ♫ </a>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="site-footer__links">
|
||||
<ul class="site-footer__link-column">
|
||||
<li><a href="/media">Torah Media</a></li>
|
||||
<li><a href="/about">About</a></li>
|
||||
</ul>
|
||||
<ul class="site-footer__link-column">
|
||||
<li><a href="/donate">Donate</a></li>
|
||||
<li><a href="/contact">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<p class="site-footer__copyright">© Rabbi Gerzi 2025</p>
|
||||
</footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.about-page {
|
||||
min-height: 100vh;
|
||||
background: var(--color-white);
|
||||
}
|
||||
|
||||
.about-hero {
|
||||
background: var(--color-cream);
|
||||
padding: 4rem 2rem 5rem;
|
||||
}
|
||||
|
||||
.about-hero__inner {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 0.85fr) minmax(300px, 1fr);
|
||||
align-items: center;
|
||||
max-width: 1180px;
|
||||
margin: 0 auto;
|
||||
gap: clamp(2rem, 5vw, 4.5rem);
|
||||
}
|
||||
|
||||
.about-hero__copy {
|
||||
max-width: 34rem;
|
||||
}
|
||||
|
||||
.about-hero__eyebrow,
|
||||
.about-section__kicker {
|
||||
margin: 0 0 0.75rem;
|
||||
color: var(--color-olive);
|
||||
font-family: var(--font-sans);
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.about-hero__heading,
|
||||
.about-section__heading {
|
||||
margin: 0;
|
||||
color: var(--color-slate);
|
||||
font-family: var(--font-serif);
|
||||
font-size: clamp(2rem, 4vw, 3.35rem);
|
||||
font-weight: 400;
|
||||
line-height: 1.12;
|
||||
}
|
||||
|
||||
.about-hero__lede {
|
||||
max-width: 33rem;
|
||||
margin: 1.35rem 0 0;
|
||||
color: var(--color-text-muted);
|
||||
font-family: var(--font-serif);
|
||||
font-size: clamp(1.05rem, 2vw, 1.25rem);
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
.about-hero__image {
|
||||
display: block;
|
||||
width: 100%;
|
||||
aspect-ratio: 4 / 3;
|
||||
border-radius: 8px;
|
||||
object-fit: cover;
|
||||
box-shadow: 0 18px 48px rgb(33 50 64 / 16%);
|
||||
}
|
||||
|
||||
.about-section {
|
||||
padding: 5rem 2rem;
|
||||
}
|
||||
|
||||
.about-section--white {
|
||||
background: var(--color-white);
|
||||
}
|
||||
|
||||
.about-section--cream {
|
||||
background: var(--color-cream);
|
||||
}
|
||||
|
||||
.about-section--slate {
|
||||
background: var(--color-slate);
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
.about-section__inner {
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.about-section__inner--split {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(220px, 0.45fr) minmax(0, 1fr);
|
||||
gap: clamp(2rem, 5vw, 4rem);
|
||||
}
|
||||
|
||||
.about-section__inner--narrow {
|
||||
max-width: 760px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.about-section__header {
|
||||
max-width: 780px;
|
||||
margin: 0 auto 3rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.about-section__body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
.about-section__paragraph,
|
||||
.about-section__intro,
|
||||
.about-section__closing {
|
||||
margin: 0;
|
||||
color: var(--color-text-muted);
|
||||
font-family: var(--font-serif);
|
||||
font-size: 1.02rem;
|
||||
line-height: 1.78;
|
||||
}
|
||||
|
||||
.about-section--slate .about-section__heading,
|
||||
.about-section--slate .about-section__paragraph {
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
.about-section--slate .about-section__kicker {
|
||||
color: rgb(244 239 225 / 82%);
|
||||
}
|
||||
|
||||
.about-section__intro {
|
||||
margin-top: 1.25rem;
|
||||
}
|
||||
|
||||
.about-section__closing {
|
||||
margin-top: 2.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mission-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.mission-grid__item,
|
||||
.rabbanim__card {
|
||||
background: var(--color-white);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.mission-grid__item {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.mission-grid__title,
|
||||
.rabbanim__name {
|
||||
margin: 0;
|
||||
color: var(--color-slate);
|
||||
font-family: var(--font-serif);
|
||||
font-size: 1.12rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.mission-grid__body,
|
||||
.rabbanim__quote,
|
||||
.teacher-list__description {
|
||||
margin: 0.85rem 0 0;
|
||||
color: var(--color-text-muted);
|
||||
font-family: var(--font-serif);
|
||||
font-size: 0.94rem;
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
.teacher-list {
|
||||
display: grid;
|
||||
max-width: 840px;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
gap: 0.85rem;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.teacher-list__item {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(180px, 0.38fr) minmax(0, 1fr);
|
||||
gap: 1rem;
|
||||
padding: 1.1rem 1.25rem;
|
||||
background: var(--color-white);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.teacher-list__name {
|
||||
color: var(--color-slate);
|
||||
font-family: var(--font-serif);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.teacher-list__description {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.rabbanim {
|
||||
background: var(--color-white);
|
||||
padding: 5rem 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.rabbanim__inner,
|
||||
.haskamot__inner {
|
||||
max-width: 1120px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.rabbanim__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 1.25rem;
|
||||
margin-top: 3rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.rabbanim__card {
|
||||
display: grid;
|
||||
grid-template-columns: 116px minmax(0, 1fr);
|
||||
gap: 1.25rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.rabbanim__image {
|
||||
width: 116px;
|
||||
height: 132px;
|
||||
border-radius: 6px;
|
||||
object-fit: cover;
|
||||
object-position: center top;
|
||||
background: var(--color-cream);
|
||||
}
|
||||
|
||||
.rabbanim__content {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.haskamot {
|
||||
background: var(--color-cream);
|
||||
padding: 5rem 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.haskamot__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 1.25rem;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.haskamot__image {
|
||||
display: block;
|
||||
width: 100%;
|
||||
aspect-ratio: 0.7;
|
||||
border-radius: 8px;
|
||||
object-fit: cover;
|
||||
object-position: center top;
|
||||
background: var(--color-white);
|
||||
border: 1px solid var(--color-border);
|
||||
box-shadow: 0 10px 30px rgb(33 50 64 / 10%);
|
||||
}
|
||||
|
||||
.get-involved {
|
||||
background: var(--color-cream);
|
||||
padding: 0 2rem 5rem;
|
||||
}
|
||||
|
||||
.get-involved__card {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
align-items: center;
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
padding: 3rem;
|
||||
gap: 3rem;
|
||||
background: rgba(255, 255, 255, 0.48);
|
||||
border: 1px solid rgb(230 225 210 / 70%);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.get-involved__heading {
|
||||
margin: 0 0 1.25rem;
|
||||
color: var(--color-text);
|
||||
font-family: var(--font-serif);
|
||||
font-size: clamp(1.6rem, 2.6vw, 2.4rem);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.get-involved__subtext {
|
||||
max-width: 36ch;
|
||||
margin: 0;
|
||||
color: var(--color-text-muted);
|
||||
font-family: var(--font-serif);
|
||||
font-size: 1rem;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.get-involved__form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.get-involved__field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.get-involved__label {
|
||||
color: var(--color-text-muted);
|
||||
font-family: var(--font-sans);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.get-involved__input {
|
||||
padding: 0.75rem 1rem;
|
||||
color: var(--color-text);
|
||||
background: var(--color-cream);
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
border-radius: 8px;
|
||||
font-family: var(--font-sans);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.get-involved__input:focus {
|
||||
outline: 2px solid var(--color-slate);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.get-involved__submit {
|
||||
margin-top: 0.5rem;
|
||||
padding: 0.85rem 1rem;
|
||||
color: var(--color-white);
|
||||
background: var(--color-text);
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-family: var(--font-sans);
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.get-involved__submit:hover {
|
||||
background: var(--color-slate);
|
||||
}
|
||||
|
||||
.site-footer {
|
||||
padding: 4rem 2rem 2rem;
|
||||
background: var(--color-white);
|
||||
border-top: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.site-footer__inner {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
align-items: start;
|
||||
max-width: 1100px;
|
||||
margin: 0 auto 2rem;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.site-footer__brand {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.site-footer__signature {
|
||||
width: auto;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.site-footer__social {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.site-footer__social-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
color: var(--color-text-muted);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.site-footer__social-link:hover {
|
||||
background: var(--color-cream);
|
||||
}
|
||||
|
||||
.site-footer__links {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.site-footer__link-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
gap: 0.6rem;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.site-footer__link-column a {
|
||||
color: var(--color-text);
|
||||
font-family: var(--font-sans);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.site-footer__link-column a:hover {
|
||||
color: var(--color-slate);
|
||||
}
|
||||
|
||||
.site-footer__copyright {
|
||||
margin: 0;
|
||||
color: var(--color-text-muted);
|
||||
font-family: var(--font-sans);
|
||||
font-size: 0.85rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (max-width: 860px) {
|
||||
.about-hero__inner,
|
||||
.about-section__inner--split,
|
||||
.get-involved__card,
|
||||
.site-footer__inner {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.about-hero {
|
||||
padding: 3rem 1rem 4rem;
|
||||
}
|
||||
|
||||
.about-section,
|
||||
.rabbanim,
|
||||
.haskamot {
|
||||
padding: 4rem 1rem;
|
||||
}
|
||||
|
||||
.mission-grid,
|
||||
.rabbanim__grid,
|
||||
.haskamot__grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.teacher-list__item,
|
||||
.rabbanim__card {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.rabbanim__image {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
aspect-ratio: 1;
|
||||
}
|
||||
|
||||
.get-involved {
|
||||
padding: 0 1rem 4rem;
|
||||
}
|
||||
|
||||
.get-involved__card {
|
||||
padding: 2rem;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.site-footer__links {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||