Tint the pics pink

Author: hasparus

src/app/conf/2025/components/cta-card-section/index.tsx

@@ -55,7 +55,7 @@ export function CtaCardSection({
           }}
         >
           <StripesDecoration
-            thin
+            stripeWidth="5.2px"
             oddClassName="bg-[linear-gradient(180deg,var(--start)_0%,var(--end)_100%)]"
           />
         </div>

src/app/conf/2025/components/testimonials/images/elizabeth-stone.webp

@@ -1,6 +1,9 @@
+import { StripesDecoration } from "@/app/conf/_design-system/stripes-decoration"
 import { clsx } from "clsx"
 import Image from "next-image-export-optimizer"
 
+import maskBlur from "./mask.webp"
+
 export interface TestimonialsProps extends React.HTMLAttributes<HTMLElement> {}
 
 interface Testimonial {
@@ -80,16 +83,18 @@ export function Testimonials({ className, ...rest }: TestimonialsProps) {
 function TestimonialAuthor({ author }: { author: Testimonial["author"] }) {
   return (
     <div className="relative flex shrink-0 flex-col items-center justify-center whitespace-pre md:px-6 lg:h-full lg:px-8">
-      {/* todo: pink tint */}
-      <Image
-        src={author.avatar}
-        alt={author.name}
-        width={128}
-        height={128}
-        className="size-16 xl:size-32"
-      />
+      <div className="relative bg-neu-500 dark:bg-neu-200">
+        <Image
+          src={author.avatar}
+          alt={author.name}
+          width={128}
+          height={128}
+          className="size-16 xl:size-32"
+        />
+        <div className="absolute inset-0 z-[1] bg-pri-base mix-blend-plus-lighter" />
+        <Stripes />
+      </div>
       <AuthorNameAndRole author={author} className="contents md:hidden" />
-      <div className="absolute inset-y-0 right-0 w-px bg-gradient-to-b from-transparent via-pri-lighter to-transparent max-md:hidden" />
     </div>
   )
 }
@@ -108,3 +113,26 @@ function AuthorNameAndRole({
     </div>
   )
 }
+
+function Stripes() {
+  const mask = `url(${maskBlur.src})`
+  return (
+    <div
+      role="presentation"
+      className="pointer-events-none absolute inset-0"
+      style={{
+        maskImage: mask,
+        WebkitMaskImage: mask,
+        maskSize: "cover",
+        WebkitMaskSize: "cover",
+        maskPosition: "left",
+        WebkitMaskPosition: "left",
+      }}
+    >
+      <StripesDecoration
+        evenClassName="bg-gradient-to-b from-pri-light/0 to-pri-lighter/25"
+        stripeWidth="8px"
+      />
+    </div>
+  )
+}

src/app/conf/2025/components/testimonials/index.tsx

@@ -1,43 +1,39 @@
 import clsx from "clsx"
 
-const maskEvenWide =
-  "repeating-linear-gradient(to right, transparent, transparent 12px, black 12px, black 24px)"
+const maskEven =
+  "repeating-linear-gradient(to right, transparent, transparent var(--stripe-width), black var(--stripe-width), black calc(var(--stripe-width) * 2))"
 
-const maskOddWide =
-  "repeating-linear-gradient(to right, black, black 12px, transparent 12px, transparent 24px)"
-
-const maskEvenThin =
-  "repeating-linear-gradient(to right, transparent, transparent 5.2px, black 5.2px, black 10.4px)"
-
-const maskOddThin =
-  "repeating-linear-gradient(to right, black, black 5.2px, transparent 5.2px, transparent 10.4px)"
+const maskOdd =
+  "repeating-linear-gradient(to right, black, black var(--stripe-width), transparent var(--stripe-width), transparent calc(var(--stripe-width) * 2))"
 
 export interface StripesDecorationProps {
   evenClassName?: string
   oddClassName?: string
-  thin?: boolean
+  stripeWidth?: string
 }
 
-export function StripesDecoration(props: StripesDecorationProps) {
-  const [maskEven, maskOdd] = props.thin
-    ? [maskEvenThin, maskOddThin]
-    : [maskEvenWide, maskOddWide]
-
+export function StripesDecoration({
+  stripeWidth = "12px",
+  evenClassName,
+  oddClassName,
+}: StripesDecorationProps) {
   return (
     <>
-      {props.evenClassName && (
+      {evenClassName && (
         <div
-          className={clsx("absolute inset-0", props.evenClassName)}
+          className={clsx("absolute inset-0", evenClassName)}
           style={{
+            ...({ "--stripe-width": stripeWidth } as React.CSSProperties),
             maskImage: maskEven,
             WebkitMaskImage: maskEven,
           }}
         />
       )}
-      {props.oddClassName && (
+      {oddClassName && (
         <div
-          className={clsx("absolute inset-0", props.oddClassName)}
+          className={clsx("absolute inset-0", oddClassName)}
           style={{
+            ...({ "--stripe-width": stripeWidth } as React.CSSProperties),
             maskImage: maskOdd,
             WebkitMaskImage: maskOdd,
           }}