Merge branch 'feature/about-page'

frontend/rabbi_gerzi/cypress/e2e/about.cy.ts

@@ -0,0 +1,129 @@
+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')
+    })
+  })
+})

frontend/rabbi_gerzi/src/router/index.ts

@@ -1,5 +1,6 @@
 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'
@@ -19,6 +20,11 @@ const router = createRouter({
       name: 'login',
       component: LoginPage,
     },
+    {
+      path: '/about',
+      name: 'about',
+      component: AboutPage,
+    },
     {
       path: '/media',
       name: 'media',

frontend/rabbi_gerzi/src/views/AboutPage.vue

@@ -0,0 +1,932 @@
+<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"> &#9654; </a>
+            <a href="#" class="site-footer__social-link" aria-label="Spotify"> &#9835; </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">&copy; 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>