From 8a27c6971c6d02f8c4160e62877c19824656476d Mon Sep 17 00:00:00 2001
From: Atanas Atanasov <hi@atanas.info>
Date: Mon, 6 Nov 2023 16:53:49 +0200
Subject: [PATCH] Fix testimonials (#2633)

* Fix testimonials

* Update and use parallelowow Houdini script
---
 src/houdini/parallelowow.ts |  3 +++
 src/pages/testimonials.tsx  |  1 -
 src/styles/testimonials.css | 36 ++++++++++++++++++++++++++++++++++++
 3 files changed, 39 insertions(+), 1 deletion(-)

diff --git a/src/houdini/parallelowow.ts b/src/houdini/parallelowow.ts
index 0d2271c63..5a28d894d 100644
--- a/src/houdini/parallelowow.ts
+++ b/src/houdini/parallelowow.ts
@@ -10,6 +10,7 @@ registerPaint(
 				`--${paintNameParallelOwOw}-tile-width`,
 				`--${paintNameParallelOwOw}-base-colors`,
 				`--${paintNameParallelOwOw}-probability`,
+				`--${paintNameParallelOwOw}-stroke-color`,
 				`--${paintNameParallelOwOw}-stroke-weight`
 			];
 		}
@@ -21,6 +22,7 @@ registerPaint(
 		): void {
 			const tileWidth = parseInt(props.get(`--${paintNameParallelOwOw}-tile-width`)!, 10);
 			const probability = parseFloat(props.get(`--${paintNameParallelOwOw}-probability`)!);
+			const strokeColor = props.get(`--${paintNameParallelOwOw}-stroke-color`);
 			const strokeWeight = parseFloat(props.get(`--${paintNameParallelOwOw}-stroke-weight`)!);
 
 			const baseColors: string[] = props
@@ -81,6 +83,7 @@ registerPaint(
 						ctx.fill();
 
 						if (strokeWeight > 0) {
+							ctx.strokeStyle = strokeColor ?? 'black';
 							ctx.stroke();
 						}
 
diff --git a/src/pages/testimonials.tsx b/src/pages/testimonials.tsx
index af4fe0721..25dbba9b8 100644
--- a/src/pages/testimonials.tsx
+++ b/src/pages/testimonials.tsx
@@ -35,7 +35,6 @@ const List: FC<ListProps> = ({ data, swiper }) => (
 		autoplay={{ delay: 10000 }}
 		keyboard
 		className="c-testimonials__list"
-		autoHeight
 	>
 		{data.map(item => {
 			const date = new Date(item.date);
diff --git a/src/styles/testimonials.css b/src/styles/testimonials.css
index edb4b6a53..1cfcc3b9c 100644
--- a/src/styles/testimonials.css
+++ b/src/styles/testimonials.css
@@ -1,8 +1,30 @@
 .c-testimonial {
+	--parallelowow-tile-width: 64px;
+	--parallelowow-probability: 0.9;
+	--parallelowow-base-colors: var(--color-primary);
+	--parallelowow-stroke-color: var(--color-secondary);
+	--parallelowow-stroke-weight: 2;
+
+	height: 100%;
+	position: relative;
 	padding: 1rem;
 	border: 1px solid;
 	background-color: var(--color-secondary);
 	border-radius: 2.5rem;
+
+	&::before {
+		content: '';
+		width: 100%;
+		height: 100%;
+		display: block;
+		opacity: 0.05;
+		position: absolute;
+		top: 0;
+		left: 0;
+		z-index: 1;
+		background-image: paint(parallelowow);
+		border-radius: 2.5rem;
+	}
 }
 
 .c-testimonial__head {
@@ -10,6 +32,7 @@
 	text-decoration: none;
 	display: block;
 	position: relative;
+	z-index: 2;
 	padding-left: 6rem;
 
 	& img {
@@ -40,6 +63,8 @@
 }
 
 .c-testimonial__body {
+	position: relative;
+	z-index: 2;
 	padding: 1rem 0;
 	border-top: 1px solid var(--color-action);
 	margin-top: 1rem;
@@ -65,6 +90,11 @@
 			border-radius: 50%;
 		}
 	}
+
+	& .swiper-slide {
+		height: auto;
+		box-sizing: border-box;
+	}
 }
 
 .c-testimonials__list {
@@ -122,4 +152,10 @@
 			justify-content: flex-start;
 		}
 	}
+
+	.c-section--testimonials {
+		& .c-section__animation {
+			margin: -1rem 0 1.5rem;
+		}
+	}
 }