fix testimonial entry direction

frontend/rabbi_gerzi/src/views/HomePage.vue

@@ -65,6 +65,12 @@ const testimonials: Testimonial[] = [
 
 const testimonialIndex = ref(0)
 
+function testimonialOffset(index: number): number {
+  const relativeIndex = index - testimonialIndex.value + testimonials.length
+
+  return relativeIndex % testimonials.length
+}
+
 function previousTestimonialIndex(): number {
   if (testimonialIndex.value === 0) {
     return testimonials.length - 1
@@ -78,15 +84,17 @@ function nextTestimonialIndex(): number {
 }
 
 function testimonialPosition(index: number): TestimonialPosition {
-  if (index === testimonialIndex.value) {
+  const offset = testimonialOffset(index)
+
+  if (offset === 0) {
     return 'active'
   }
 
-  if (index === previousTestimonialIndex()) {
+  if (offset === testimonials.length - 1) {
     return 'previous'
   }
 
-  if (index === nextTestimonialIndex()) {
+  if (offset === 1) {
     return 'next'
   }
 
@@ -111,8 +119,25 @@ function testimonialDataCy(index: number): string {
   return 'testimonial-hidden'
 }
 
-function testimonialClass(index: number): string {
-  return `testimonials__card--${testimonialPosition(index)}`
+function testimonialHiddenClass(index: number): string {
+  const offset = testimonialOffset(index)
+
+  if (offset < testimonials.length / 2) {
+    return 'testimonials__card--hidden-next'
+  }
+
+  return 'testimonials__card--hidden-previous'
+}
+
+function testimonialClass(index: number): string[] {
+  const position = testimonialPosition(index)
+  const positionClass = `testimonials__card--${position}`
+
+  if (position === 'hidden') {
+    return [positionClass, testimonialHiddenClass(index)]
+  }
+
+  return [positionClass]
 }
 
 function nextTestimonial(): void {
@@ -716,6 +741,7 @@ const projects: Project[] = [
 .testimonials {
   background: var(--color-cream);
   padding: 5rem 2rem;
+  --testimonials-card-entry-gap: 48px;
   --testimonials-card-gap: 24px;
   --testimonials-card-height: 220px;
   --testimonials-controls-gap: 0.75rem;
@@ -787,6 +813,14 @@ const projects: Project[] = [
   transform: translateX(calc(50% + var(--testimonials-card-gap)));
 }
 
+.testimonials__card--hidden-previous {
+  transform: translateX(calc(-250% - var(--testimonials-card-entry-gap)));
+}
+
+.testimonials__card--hidden-next {
+  transform: translateX(calc(150% + var(--testimonials-card-entry-gap)));
+}
+
 .testimonials__name {
   font-family: var(--font-serif);
   font-weight: 500;