add testimonials carousel

frontend/rabbi_gerzi/src/views/HomePage.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 
 const router = useRouter()
@@ -22,6 +23,41 @@ const coreTeachings = [
   { number: 5, title: 'Arba Yesodot', glyph: '✦' },
   { number: 6, title: 'Fluid Integration', glyph: '✎' },
 ]
+
+interface Testimonial {
+  name: string
+  quote: string
+}
+
+const testimonials: Testimonial[] = [
+  {
+    name: 'Nathaniel M',
+    quote:
+      'A decade and a half in the best Jewish day schools money can ' +
+      'buy and I never once heard the optimistic and encouraging ' +
+      'vision that Rabbi Gerzi just shared.',
+  },
+  {
+    name: 'Nathan G',
+    quote:
+      'Rabbi Gerzi gave me the tools for making learning real and ' +
+      'relevant to my everyday life.',
+  },
+  {
+    name: 'Anonymous Student',
+    quote: 'My understanding of Torah has been profoundly improved through ' + 'his teachings.',
+  },
+]
+
+const testimonialIndex = ref(0)
+
+function nextTestimonial(): void {
+  testimonialIndex.value = (testimonialIndex.value + 1) % testimonials.length
+}
+
+function previousTestimonial(): void {
+  testimonialIndex.value = (testimonialIndex.value - 1 + testimonials.length) % testimonials.length
+}
 </script>
 
 <template>
@@ -147,6 +183,47 @@ const coreTeachings = [
         </button>
       </div>
     </section>
+
+    <section class="testimonials" data-cy="testimonials">
+      <div class="testimonials__inner">
+        <h2 class="testimonials__heading">What People Are Saying</h2>
+        <div class="testimonials__stage">
+          <div
+            v-for="(testimonial, index) in testimonials"
+            :key="testimonial.name"
+            class="testimonials__card"
+            :class="{
+              'testimonials__card--active': index === testimonialIndex,
+            }"
+            :data-cy="index === testimonialIndex ? 'testimonial-active' : 'testimonial-side'"
+            :aria-hidden="index !== testimonialIndex"
+          >
+            <h3 class="testimonials__name">{{ testimonial.name }}</h3>
+            <p class="testimonials__quote">&ldquo;{{ testimonial.quote }}&rdquo;</p>
+          </div>
+        </div>
+        <div class="testimonials__controls">
+          <button
+            type="button"
+            class="testimonials__arrow"
+            aria-label="Previous testimonial"
+            data-cy="testimonial-prev"
+            @click="previousTestimonial"
+          >
+            ‹
+          </button>
+          <button
+            type="button"
+            class="testimonials__arrow"
+            aria-label="Next testimonial"
+            data-cy="testimonial-next"
+            @click="nextTestimonial"
+          >
+            ›
+          </button>
+        </div>
+      </div>
+    </section>
   </div>
 </template>
 
@@ -444,6 +521,91 @@ const coreTeachings = [
   transform: translateY(-1px);
 }
 
+.testimonials {
+  background: var(--color-cream);
+  padding: 5rem 2rem;
+}
+
+.testimonials__inner {
+  max-width: 960px;
+  margin: 0 auto;
+  text-align: center;
+}
+
+.testimonials__heading {
+  font-family: var(--font-serif);
+  font-weight: 400;
+  font-size: clamp(1.5rem, 2.4vw, 2rem);
+  color: var(--color-slate);
+  margin: 0 0 2.5rem 0;
+}
+
+.testimonials__stage {
+  position: relative;
+  min-height: 220px;
+}
+
+.testimonials__card {
+  background: var(--color-white);
+  border-radius: 14px;
+  padding: 2rem;
+  text-align: left;
+  max-width: 480px;
+  margin: 0 auto;
+  opacity: 0;
+  visibility: hidden;
+  position: absolute;
+  inset: 0;
+  transition: opacity 0.3s ease;
+}
+
+.testimonials__card--active {
+  opacity: 1;
+  visibility: visible;
+}
+
+.testimonials__name {
+  font-family: var(--font-serif);
+  font-weight: 500;
+  font-size: 1.15rem;
+  margin: 0 0 1rem 0;
+  color: var(--color-text);
+}
+
+.testimonials__quote {
+  font-family: var(--font-serif);
+  font-style: italic;
+  font-size: 1rem;
+  line-height: 1.6;
+  color: var(--color-text-muted);
+  margin: 0;
+}
+
+.testimonials__controls {
+  display: flex;
+  justify-content: center;
+  gap: 0.75rem;
+  margin-top: 2rem;
+}
+
+.testimonials__arrow {
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 50%;
+  background: var(--color-text);
+  color: var(--color-white);
+  border: none;
+  font-size: 1.25rem;
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.testimonials__arrow:hover {
+  background: var(--color-slate);
+}
+
 @media (max-width: 768px) {
   .site-header {
     padding: 0.75rem 1rem;